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

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:


<script src="https://accounts.google.com/gsi/client" async defer></script>

W pliku sign-in.html wyszukaj frazę loader-js. Fraza powinna wystąpić raz. Pod tą linijką w miejscu pomiędzy tymi dwoma elementami:


    </div>
{% endif -%}

</div>

{% endif -%}

Wstaw poniższy fragment kodu:


{% if config.External.Facebook or config.External.Google  -%}
    <div class="loginForm-ui">
        <span class="login-form__socialButtons__title-ui">{{translations.Or}}</span>
        <div class="socialLoginButtons-ui">    
            {% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}
            <div aria-label="facebookLogin" class="FbLoginForm-ui" onclick="_login();" type="submit" data-scope="public_profile,email"> 
                <img class="FbLoginIcon-ui" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                <span class="FbButtonText-ui">{{translations.LoginWithFb}}</span>
            </div>
            {% endif -%}
            {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}
            <div class="GLoginForm-ui">
                <div id="google-signin" data-type="standard"></div>
            </div>
            {% endif -%}
        </div>
    </div>
{% endif -%}

{% if config.External.Facebook or config.External.Google -%}

<span class="login-form__socialButtons__title-ui">{{translations.Or}}</span>

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}

<span class="FbButtonText-ui">{{translations.LoginWithFb}}</span>

</div>

{% endif -%}

{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}

</div>

{% endif -%}

</div>

{% endif -%}

W pliku customer-profile/your-account/your-account.html na samym końcu w przedostatniej linijce dodaj fragment :


<div class="connectSocialsAccount-ui">
	<h2>{{ translations.ExternalWebsites }}</h2>
	{% if config.External.Facebook or config.External.Google  -%}
		<div class="CustomerContentSection-ui">
			{% 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 != '' %}
						<div id="disconnect-fb" class="CustomerSocialButton-ui CustomerSocialButtonFacebook-ui">
							<img class="GFbLinkIcon-ui" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
							<span>{{translations.Disconnect_Fb}}</span>
						</div>
						{% assign fbConnect = 1 -%}
					{% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
						<div id="unlinkGoogleAccount" class="CustomerSocialButton-ui CustomerSocialButtonGoogle-ui">
							<img class="GFbLinkIcon-ui" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
							<span>{{translations.Disconnect_Google}}</span>
						</div>
						{% assign googleConnect = 1 -%}
					{% endif %}
				{% endfor %}
				{% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
					<div id="connect-fb" class="CustomerSocialButton-ui CustomerSocialButtonFacebook-ui">
						<img class="GFbLinkIcon-ui" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
						<span>{{translations.ConnectFb}}</span>
					</div>
				{% endif %}
				{% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
					<div id="linkGoogleAccount" class="CustomerSocialButton-ui CustomerSocialButtonGoogle-ui">
						<img class="GFbLinkIcon-ui" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
						<span>{{translations.ConnectGoogle}}</span>
					</div>
				{% endif %}
			{% else %}
				{% if config.External.Facebook and config.External.Facebook.AppID != '' %}
					<div id="connect-fb" class="CustomerSocialButton-ui CustomerSocialButtonFacebook-ui">
						<img class="GFbLinkIcon-ui" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
						<span>{{translations.ConnectFb}}</span>
					</div>
				{% endif %}
				{% if config.External.Google and config.External.Google.ClientID != '' %}
					<div id="linkGoogleAccount" class="CustomerSocialButton-ui CustomerSocialButtonGoogle-ui">
						<img class="GFbLinkIcon-ui" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
						<span>{{translations.ConnectGoogle}}</span>
					</div>
				{% endif %}
			{% endif %}
		</div>
	{% endif -%}
</div>

<h2>{{ translations.ExternalWebsites }}</h2>

{% 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 != '' %}

<span>{{translations.Disconnect_Fb}}</span>

</div>

{% assign fbConnect = 1 -%}

{% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}

<span>{{translations.Disconnect_Google}}</span>

</div>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

{% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}

<span>{{translations.ConnectFb}}</span>

</div>

{% endif %}

{% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}

<span>{{translations.ConnectGoogle}}</span>

</div>

{% endif %}

{% else %}

{% if config.External.Facebook and config.External.Facebook.AppID != '' %}

<span>{{translations.ConnectFb}}</span>

</div>

{% endif %}

{% if config.External.Google and config.External.Google.ClientID != '' %}

<span>{{translations.ConnectGoogle}}</span>

</div>

{% endif %}

</div>

{% endif -%}

</div>

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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
          __translations.CantLoginWithGoogle + '</span></div></div></div>';
          document.body.innerHTML += popup;
          setTimeout(function () {
              $('.unsuccessfull-post-message-js').remove();
          }, 3000);
      } else {
          const popup = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
          __translations.CantLoginWithGoogle + '</span></div></div></div>';
          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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
                __translations.FailedConnectToGoogle + '</span></div></div></div>';
                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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
            __translations.FailedDisconnectFromGoogle + '</span></div></div></div>';
            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();
}

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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +

__translations.CantLoginWithGoogle + '</span></div></div></div>';

document.body.innerHTML += popup;

setTimeout(function () {

$('.unsuccessfull-post-message-js').remove();

}, 3000);

} else {

__translations.CantLoginWithGoogle + '</span></div></div></div>';

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 {

__translations.FailedConnectToGoogle + '</span></div></div></div>';

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 {

__translations.FailedDisconnectFromGoogle + '</span></div></div></div>';

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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
                __translations.CantLoginWithFb + '</span></div></div></div>';
                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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
            __translations.FailedDisconnectFromFb + '</span></div></div></div>';
            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 = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
                __translations.FailedConnectToFb + '</span></div></div></div>';
                document.body.innerHTML += popup;
                setTimeout(function () {
                    $('.unsuccessfull-post-message-js').remove();
                }, 3000);
            }
        });
    } else {
        const popup = '<div class="message-popup-background-ui unsuccessfull-post-message-js"><div class="message-popup-ui box-ui"><div class="successfull-post-message-ui"><span class="message-container-ui"><i class="ti-alert"></i>' +  
        __translations.NeedToConnectToFb + '</span></div></div></div>';
		document.body.innerHTML += popup;
        setTimeout(function () {
            $('.unsuccessfull-post-message-js').remove();
        }, 3000);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

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) {

__translations.CantLoginWithFb + '</span></div></div></div>';

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 {

__translations.FailedDisconnectFromFb + '</span></div></div></div>';

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 {

__translations.FailedConnectToFb + '</span></div></div></div>';

document.body.innerHTML += popup;

setTimeout(function () {

$('.unsuccessfull-post-message-js').remove();

}, 3000);

}

});

} else {

__translations.NeedToConnectToFb + '</span></div></div></div>';

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;
      }
    }
  }
}

@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;
  }

}

&-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;
        }
      }
    }

.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;
    }
  }
}

.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

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

Pliki JavaScript

Pliki scss

3. Przygotowanie tekstów

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt