Logowanie do sklepu za pomocą konta Google i Facebook – implementacja w szablonie Szafir

Kategoria Przykładowe modyfikacje
Utworzony 12 lipca 2022

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?

( 1 )

( 0 )

Logowanie do sklepu za pomocą konta Google i Facebook – implementacja w szablonie Szafir

Wstęp

1. Konfiguracja logowania w Panelu Administracyjnym

2. Zmiany w kodzie źródłowym sklepu

Pliki html

{{ translations.ExternalWebsites }}

Pliki JavaScript

Pliki scss

3. Przygotowanie tekstów

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt