Wstęp
Z tego artykułu dowiesz się jak zaimplementować opcję logowania do Twojego sklepu w szablonie Szafir za pomocą kont Google oraz Facebook.
Od wersji 2022.4 w szablonie Szafir wprowadziliśmy możliwość logowania do sklepu za pomocą konta Google oraz Facebook. W celu zaimplementowania takiej możliwości w swoim sklepie należy wykonać trzy czynności dla każdej z tych platform :
- Konfiguracja logowania w Panelu Administracyjnym - Zmiany w kodzie źródłowym sklepu - Przygotowanie tekstów
Wskazówka
W tym artykule dowiesz się jak wprowadzać zmiany w plikach js, html i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.
Poniżej znajdują się instrukcje rozwijające wspomniane wyżej wątki.
1. Konfiguracja logowania w Panelu Administracyjnym
Informacje odnośnie tego etapu implementacji znajdują się w artykule o logowaniu do sklepu za pomocą konta Google i Facebook.
2. Zmiany w kodzie źródłowym sklepu
Poniżej znajdują się fragmenty kodu, które należy dodać w celu utworzenia nowych opcji logowania.
Pliki html
- W pliku _layout.html wyszukaj frazę crossorigin=”anonymous” dokładnie pod linijką z tym elementem wklej ten kod:
- W pliku sign-in.html wyszukaj frazę loader-js. Fraza powinna wystąpić raz. Pod tą linijką w miejscu pomiędzy tymi dwoma elementami:
{% endif -%}
Wstaw poniższy fragment kodu:
{% if config.External.Facebook or config.External.Google -%}
{{translations.Or}}
{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}
{{translations.LoginWithFb}}
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}{% endif -%}
{% endif -%}
- W pliku customer-profile/your-account/your-account.html na samym końcu w przedostatniej linijce dodaj fragment :
## {{ translations.ExternalWebsites }}
{% if config.External.Facebook or config.External.Google -%}
{% if customer-profile.LinkedAccounts[0] -%}
{% assign fbConnect = 0 -%}
{% assign googleConnect = 0 -%}
{% for account in customer-profile.LinkedAccounts -%}
{% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
{{translations.Disconnect_Fb}}
{% assign fbConnect = 1 -%}
{% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
{{translations.Disconnect_Google}}
{% assign googleConnect = 1 -%}
{% endif %}
{% endfor %}
{% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
{{translations.ConnectFb}}
{% endif %}
{% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
{{translations.ConnectGoogle}}
{% endif %}
{% else %}
{% if config.External.Facebook and config.External.Facebook.AppID != '' %}
{{translations.ConnectFb}}
{% endif %}
{% if config.External.Google and config.External.Google.ClientID != '' %}
{{translations.ConnectGoogle}}
{% endif %}
{% endif %}
{% endif -%}
Pliki JavaScript
W katalogu js stwórz dwa pliki JavaScript nazwij je kolejno google-login.js oraz fb-login.js. Następnie wklej do nich poniższe kody:
- Plik google-login.js :
function handleCredentialResponse(response) {
setTimeout(function() {
$.post(null,{ __action: 'External/GoogleLogin', __csrf: __CSRF, id_token: response.credential },function(result){
if (result.action.Result) {
window.location.replace('');
} else if (result.action.Code === 108) {
const popup = '
' +
__translations.CantLoginWithGoogle + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
} else {
const popup = '
' +
__translations.CantLoginWithGoogle + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
});
}, 1000);
}
window.onload = function () {
google.accounts.id.initialize({client_id: __googleID, callback: handleCredentialResponse})
google.accounts.id.renderButton(
document.getElementById("google-signin"),
{ theme: "outline", size: "large", width: "250", logo_alignment: "center", text: "signin_with", wight: "100"}
);
$('body').on('click', '#linkGoogleAccount', function(){
setTimeout(function() {
$.post(null,{ __action: 'External/GoogleAccountLink', __csrf: __CSRF, userID: __googleID },function(result){
if (result.action.Result) {
location.reload();
} else {
const popup = '
' +
__translations.FailedConnectToGoogle + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
});
}, 1000);
});
$('body').on('click', '#unlinkGoogleAccount', function(){
$.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF },function(result){
if (result.action.Result) {
location.reload();
} else {
const popup = '
' +
__translations.FailedDisconnectFromGoogle + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
});
});
$('body').on('click', '.logout', function () {
googleLogout();
});
}
function googleLogout() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut();
}
- Plik fb-login.js :
var fbLoginStatus;
// This is called with the results from from FB.getLoginStatus().
function statusChangeCallback(response) {
fbLoginStatus = response;
}
function _login() {
FB.login(function (response) {
// handle the response
if (response.status === 'connected') {
connectToFb(response);
}
}, { scope: 'public_profile,email' });
}
window.fbAsyncInit = function () {
FB.init({
appId: __fbId, //Your APP ID
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse social plugins on this page
version: 'v2.1', // use version 2.1
status: true
});
// These three cases are handled in the callback function.
FB.getLoginStatus(function (response) {
statusChangeCallback(response);
});
FB.Event.subscribe('auth.authResponseChange', function (response) {
fbLoginStatus = response;
});
$('body').on('click', '.logout', function () {
fbLogout();
});
$('body').on('click', '#disconnect-fb', function () {
disconnectFb();
});
$('body').on('click', '#connect-fb', function (e) {
connectFb(e);
});
};
// Load the SDK asynchronously
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
function connectToFb(response) {
FB.api('/me', {
fields: 'email,name'
}, function (u) {
response.user = u;
$.post(null, {
__CSRF: __CSRF,
__action: 'external/fblogin',
response: JSON.stringify(response)
}, function (result) {
if (result.action.Result) {
window.location.replace('');
} else if (result.action.Code != 100) {
const popup = '
' +
__translations.CantLoginWithFb + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
});
});
}
function fbLogout() {
FB.logout(function (response) { });
}
function disconnectFb() {
var data = {
__csrf: __CSRF,
__action: 'External/FbAccountUnlink'
};
$.post(null, data, function (result) {
if (result.action.Result) {
location.reload();
} else {
const popup = '
' +
__translations.FailedDisconnectFromFb + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
});
}
function connectFb(e) {
if (fbLoginStatus.status === 'connected') {
var userIdNum = fbLoginStatus.authResponse.userID;
var data = {
__csrf: __CSRF,
__action: 'External/FbAccountLink',
userID: userIdNum
};
$.post(null, data, function (result) {
if (result.action.Result) {
location.reload();
} else {
const popup = '
' +
__translations.FailedConnectToFb + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
});
} else {
const popup = '
' +
__translations.NeedToConnectToFb + '
';
document.body.innerHTML += popup;
setTimeout(function () {
$('.unsuccessfull-post-message-js').remove();
}, 3000);
}
}
Pliki scss
- W pliku scss/globals/_globals-m.scss na samym końcu dodaj poniższy fragment kodu:
@media only screen and (max-width: 1279px){
.connectSocialsAccount-ui{
width: 100%;
.CustomerContentSection-ui{
.CustomerSocialButton-ui{
width: 100%;
min-width: auto;
}
}
}
}
- W pliku scss/globals/_globals1.scss znajdź fragment :
}
&-button-drop-ui span{
margin-left: 13px;
}
Dokładnie nad tym fragmentem wstaw poniższy kod:
.loginForm-ui{
width:100%;
font-size: 16px;
margin-bottom: 20px;
.login-form__socialButtons__title-ui{
display:inline-block;
width: 100%;
text-align: center;
}
.socialLoginButtons-ui{
display: flex;
width: 100%;
align-content: center;
flex-wrap: wrap;
flex-direction: column;
.FbLoginForm-ui {
display: flex;
background: #FFFFFF;
color: #3c4043;
width: 250px;
height: 40px;
border: 1px solid #dadce0;
border-radius: 4px;
justify-content: center;
align-items: center;
margin-top: 18px;
cursor: pointer;
.FbLoginIcon-ui {
background: #FFFFFF;
display: inline-block;
vertical-align: middle;
width: 21px;
height: 21px;
}
.FbButtonText-ui {
display: inline-block;
vertical-align: middle;
padding-left: 10px;
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: 500;
}
}
.FbLoginForm-ui:hover{
background-color: #f9faff;
border: 1px solid #dbe1ee;
transition: 0,5s;
}
.GLoginForm-ui {
display: flex;
justify-content: center;
align-items: center;
margin-top: 18px;
}
}
}
- Następnie dalej w tym samym pliku (scss/globals/_globals1.scss) na samym końcu dodaj poniższy fragment kodu:
.connectSocialsAccount-ui{
width: 93%;
margin: auto;
margin-bottom:50px;
.CustomerContentSection-ui{
margin-top: 50px;
display: flex;
flex-direction: column;
.CustomerSocialButton-ui{
display: inline-flex !important;
box-shadow: 0px 1px 1px 1px lightgray;
justify-content: center;
align-items: center;
width: calc(33% - 11px);
min-width: 420px;
height: auto;
color: #232323;
font-size: 14px;
text-transform: uppercase;
font-weight: 400;
display: block;
margin-bottom: 20px;
padding: 17px;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
}
.CustomerSocialButtonGoogle-ui {
background-color: #FFFFFF;
}
.CustomerSocialButtonFacebook-ui {
background-color: #FFFFFF;
}
.CustomerSocialButton-ui:hover{
box-shadow:0 0 4px #4285F4;
transition: 1s;
}
.GFbLinkIcon-ui{
margin-right: 10px;
width: 32px;
height: 32px;
}
}
}
Wskazówka
Pamiętaj, że pliki scss należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji.
3. Przygotowanie tekstów
Ostatnim etapem implementacji będzie dodanie odpowiednich tekstów do swojego szablonu. Odbywa się to poprzez opcję Tłumaczenia , która znajduje się w Panelu administracyjnym sklepu. Dokładna jej lokalizacja ukazana jest poniżej.
W celu dodania tekstu klikamy przycisk dodaj. Dodajemy teksty według poniższej tabeli.
| Id | Tekst |
| ExternalWebsites | Serwisy zewnętrzne |
| NeedToConnectToFb | Musisz być zalogowany do Facebooka, aby połączyć konto. |
| CantLoginWithFb | Błąd podczas logowania do Facebooka. |
| FailedDisconnectFromFb | Błąd podczas odłączania konta Facebook. |
| FailedConnectToFb | Błąd podczas łączenia z kontem Facebook. |
| LoginWithFb | Zaloguj się przez Facebook |
| Disconnect_Fb | Odłącz konto od Facebooka |
| ConnectFb | Połącz konto z Facebookiem |
| CantLoginWithGoogle | Nie udało się zalogować, spróbuj jeszcze raz! |
| FailedDisconnectFromGoogle | Błąd podczas odłączania konta Google. |
| FailedConnectToGoogle | Błąd podczas łączenia z kontem Google. |
| LoginWithGoogle | Zaloguj się przez Google |
| Disconnect_Google | Odłącz konto od Google |
| ConnectGoogle | Połącz konto z Google |
Czy ten artykuł był pomocny?
( 0 )
Inne w kategorii
-
-1
- 2099
-
1
- 2273
-
-1
- 2669
-
-26
- 1637
-
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
-
0
- 2880
-
0
- 3136