Migracja do nowszej biblioteki klienta Google

Wstęp

W wersji 2022.4. dostosowaliśmy logowanie do e-Sklepu z pomocą nowszej biblioteki usług tożsamości Google we wszystkich standardowych szablonach Comarch. Proces jest zoptymalizowany i przyjazny dla użytkownika. Ujednolicone zostały także przyciski logowania we wszystkich szablonach Comarch.

Poniżej znajdują się informację o tym w jaki sposób zaimplementować wspomnianą zmianę do wszystkich standardowych szablonó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.

Instrukcje do szablonów:

Szafir

Topaz

Bursztyn

Agat

Opal

Szafir

Implementacja dla szablonu Szafir ukazana jest w artykule Logowanie do sklepu za pomocą konta Google i Facebook – implementacja w szablonie Szafir, ponieważ w tym szablonie funkcja ta jest również dostępna od wersji 2022.4.

Topaz

Pliki html

Na początek w pliku base_layout.html wyszukaj fragment crossorigin=”anonymous”. Powinien wystąpić raz w całym pliku. Dokładnie w linijkę pod tym elementem wklej ten fragment kodu:


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

Następnie w pliku static-elements/login/login.html wyszukaj fragment:


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

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

Zamień znajdujący się pomiędzy tym fragmentem a odpowiadającym mu elementem
„{% endif -%}” fragment kodu na :


<div class="login-form__socialButtons">
    <span class="login-form__socialButtons__title">{{translations.Com_Or}}</span>
    <div class="login-form__socialButtons__buttons">
        {% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}
        <div class="Facebook_Login_Container">
            <div aria-label="facebookLogin" class="button__Social__facebook" onclick="_login();" type="submit" data-scope="public_profile,email" title="{{translation.Login_Fb}}">
                <img class="GFbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                <span>{{translations.Login_Fb}}</span>
            </div>
        </div>
        {% endif -%}
        {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}
        <div id="google-signin" class="button__Social__google"  data-error-msg="{{translations.Connect_Err}}" title="{{translation.Login_Google}}" data-type="standard"></div>
        {% endif -%}                    
    </div>
</div>

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

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

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

</div>

{% endif -%}

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

{% endif -%}

</div>

Kolejną czynnością w plikach html dla szablonu Topaz będzie zamiana w pliku partials/customer/account-data.html całego tego fragmentu:


{% if config.External.Facebook or config.External.Google  -%}
<div class="customer__contentSection">
    <div class="customer__contentSection--inner">
        <span class="customer__title">{{ translations.ExternalWebsites }}</span>
        {% 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 id="disconnect-fb" class="customer__socialButton customer__socialButton__facebook">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#facebook-f"></use>
                        </svg>
                        {{translations.Disconnect_Fb}}
                    </span>
                    {% assign fbConnect = 1 -%}
                {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                    <span id="unlinkGoogleAccount" class="customer__socialButton customer__socialButton__google">
                        <svg class="svgIcon">
                            <use xlink:href="css/img/icons-sprite.svg#google-plus-g"></use>
                        </svg>
                        {{translations.Disconnect_Google}}
                    </span>
                    {% assign googleConnect = 1 -%}
                {% endif %}
            {% endfor %}
            {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
                <span id="connect-fb" class="customer__socialButton customer__socialButton__facebook" data-error-msg="{{translations.NeedToConnectToFb}}">
                    <svg class="svgIcon">
                        <use xlink:href="css/img/icons-sprite.svg#facebook-f"></use>
                    </svg>
                    {{translations.ConnectAccount}}
                </span>
            {% endif %}
            {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
                <span id="linkGoogleAccount" class="customer__socialButton customer__socialButton__google">
                    <svg class="svgIcon">
                        <use xlink:href="css/img/icons-sprite.svg#google-plus-g"></use>
                    </svg>
                    {{translations.ConnectAccount}}
                </span>
            {% endif %}
        {% else %}
            {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
                <span id="connect-fb" class="customer__socialButton customer__socialButton__facebook" data-error-msg="{{translations.NeedToConnectToFb}}">
                    <svg class="svgIcon">
                        <use xlink:href="css/img/icons-sprite.svg#facebook-f"></use>
                    </svg>
                    {{translations.ConnectAccount}}
                </span>
            {% endif %}
            {% if config.External.Google and config.External.Google.ClientID != '' %}
                <span id="linkGoogleAccount" class="customer__socialButton customer__socialButton__google">
                    <svg class="svgIcon">
                        <use xlink:href="css/img/icons-sprite.svg#google-plus-g"></use>
                    </svg>
                    {{translations.ConnectAccount}}
                </span>
            {% endif %}
        {% endif %}
    </div>
</div>
{% endif -%}

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

<span class="customer__title">{{ translations.ExternalWebsites }}</span>

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

</svg>

</span>

{% assign fbConnect = 1 -%}

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

</svg>

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</svg>

</span>

{% endif %}

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

</svg>

</span>

{% endif %}

{% else %}

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

</svg>

</span>

{% endif %}

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

</svg>

</span>

{% endif %}

</div>

{% endif -%}

Na odpowiadający mu i poprawiony fragment:


{% if config.External.Facebook or config.External.Google  -%}
    <div class="customer__contentSection">
        <div class="customer__contentSection--inner">
            <span class="customer__title">{{translations.ExternalWebsites}}</span>
            {% 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 id="disconnect-fb" class="customer__socialButton customer__socialButton__facebook">
                            <img class="GFbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                            {{translations.Disconnect_Fb}}
                        </span>
                        {% assign fbConnect = 1 -%}
                    {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                        <span id="unlinkGoogleAccount" class="customer__socialButton customer__socialButton__google">
                            <img class="GFbLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                            {{translations.Disconnect_Google}}
                        </span>
                        {% assign googleConnect = 1 -%}
                    {% endif %}
                {% endfor %}
                {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
                    <span id="connect-fb" class="customer__socialButton customer__socialButton__facebook" data-error-msg="{{translations.NeedToConnectToFb}}">
                        <img class="GFbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                        {{translations.ConnectFb}}
                    </span>
                {% endif %}
                {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
                    <span id="linkGoogleAccount" class="customer__socialButton customer__socialButton__google">
                        <img class="GFbLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                        {{translations.ConnectGoogle}}
                    </span>
                {% endif %}
            {% else %}
                {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
                    <span id="connect-fb" class="customer__socialButton customer__socialButton__facebook" data-error-msg="{{translations.NeedToConnectToFb}}">
                        <img class="GFbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                        {{translations.ConnectFb}}
                    </span>
                {% endif %}
                {% if config.External.Google and config.External.Google.ClientID != '' %}
                    <span id="linkGoogleAccount" class="customer__socialButton customer__socialButton__google">
                        <img class="GFbLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                        {{translations.ConnectGoogle}}
                    </span>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endif -%}

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

<span class="customer__title">{{translations.ExternalWebsites}}</span>

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

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

</div>

{% endif -%}

Następnie należy dokonać zmian w plikach koszyka. W zależności od wybranej wariancji w kreatorze pliki będą się róźnić numerkiem na końcu. Jednak zmiany w html są identyczne dla obydwóch wariancji. W pliku elements/cart/cart-1.html lub /cart-2.html wyszukaj fragment:


{% if config.External.Facebook or config.External.Google  -%}
<div class="login-form__socialButtons form inputs-container-js customerLoginForm-js">
    <div class="login-form__socialButtons__title">{{translations.LoginBy}}</div>
    {% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}
    <button aria-label="facebookLogin" class="button__roundedSocial button__roundedSocial__facebook" onclick="_login();" type="submit" data-scope="public_profile,email" title="{{translation.Login_Fb}}">
        <svg class="svgIcon">
            <use xlink:href="css/img/icons-sprite.svg#facebook-f"></use>
        </svg>
    </button>
    {% endif -%}
    {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}
    <button aria-label="googleLogin" id="google-signin" class="button__roundedSocial button__roundedSocial__google" data-error-msg="{{translations.Connect_Err}}" title="{{translation.Login_Google}}">
        <svg class="svgIcon">
            <use xlink:href="css/img/icons-sprite.svg#google-plus-g"></use>
        </svg>
    </button>
    {% endif -%}
</div>
{% endif -%}

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

<div class="login-form__socialButtons__title">{{translations.LoginBy}}</div>

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

</svg>

</button>

{% endif -%}

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

</svg>

</button>

{% endif -%}

</div>

{% endif -%}

Następnie zamień ten fragment na wskazany poniżej:


{% if config.External.Facebook or config.External.Google  -%}
    <div class="login-form__socialButtons">
        <span class="login-form__socialButtons__title">{{translations.Com_Or}}</span>
        <div class="login-form__socialButtons__buttons">
            {% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID %}
            <div class="Facebook_Login_Container">
                <div aria-label="facebookLogin" class="button__Social__facebook" onclick="_login();" type="submit" data-scope="public_profile,email" title="{{translation.Login_Fb}}">
                    <img class="GFbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                    <span>{{translations.Login_Fb}}</span>
                </div>
            </div>
            {% endif -%}
            {% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID -%}
            <div id="google-signin" class="button__Social__google"  data-error-msg="{{translations.Connect_Err}}" title="{{translation.Login_Google}}" data-type="standard"></div>
            {% endif -%}                    
        </div>
    </div>
{% endif -%}

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

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

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

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

</div>

{% endif -%}

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

{% endif -%}

</div>

{% endif -%}

Pliki JavaScript

Zamień całą zawartość pliku js/google-login.js na ten kod:


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) {
            var errMsg = document.querySelector('#google-signin').dataset.errorMsg;
            createMessage(errMsg);
        } else {
            createMessage(result);
        }
    });
  }, 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"}
    );

    $('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 {
                  createMessage(result);
              }
          });
      }, 1000);
    });

    $('body').on('click', '#unlinkGoogleAccount', function(){
      $.post(null,{ __action: 'External/GoogleAccountUnlink', __CSRF: __CSRF },function(result){
          if (result.action.Result) {
              location.reload();
          } else {
              createMessage(result);
          }
      });
    });

    $('body').on('click', '.logout', function () {
        googleLogout();
    });
}

function googleLogout() {
  var auth2 = gapi.auth2.getAuthInstance();
  auth2.signOut();
}

function createMessage(obj) {
    if (obj.action.Code != 100) {
        app.showTemporaryPopup(obj.action.Message);
    }
}

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

var errMsg = document.querySelector('#google-signin').dataset.errorMsg;

createMessage(errMsg);

} else {

createMessage(result);

}

});

}, 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"}

);

$('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 {

createMessage(result);

}

});

}, 1000);

});

$('body').on('click', '#unlinkGoogleAccount', function(){

$.post(null,{ __action: 'External/GoogleAccountUnlink', __CSRF: __CSRF },function(result){

if (result.action.Result) {

location.reload();

} else {

createMessage(result);

}

});

$('body').on('click', '.logout', function () {

googleLogout();

});

}

function googleLogout() {

var auth2 = gapi.auth2.getAuthInstance();

auth2.signOut();

}

function createMessage(obj) {

if (obj.action.Code != 100) {

app.showTemporaryPopup(obj.action.Message);

}

W pliku js/layout3.js wyszukaj frazę clearInterval(intervalAddress);. Pod jej pierwszym wystąpieniem dodaj fragment location.reload();, w taki sposób jak jest to przedstawione w kodzie poniżej:


        clearInterval(intervalAddress);
    }
}, 1000);
location.reload();

clearInterval(intervalAddress);

}

}, 1000);

location.reload();

Pliki css

W pliku css/layout0.css wyszukaj frazę login-container. Następnie zamień kod znajdujący się za tą frazą na odpowiadający mu fragment znajdujący się poniżej:


.login-container{`max-width:100%;width:30rem;padding:7rem 3rem;box-sizing:border-box;margin:0 auto}.login-container .form__input-wrapper{display:inline-block;position:relative;width:calc(100% - 30px);margin-left:30px;background-color:inherit;margin-bottom:23px}.login-container .form__icons:not(.form__preview){color:{{settings.primaryFontColor}};position:absolute;transform:translateY(-50%);top:20px;left:-30px}.login-container .form__icons.form__preview svg{fill:{{settings.linkFontColor}}}.login-container .form .form__icon_left,.login-container .form__icon_left{left:0}.login-container .form select{border-bottom:1px solid {{settings.primaryFontColor}}}.login-form__signIn{color:{{settings.primaryFontColor}};text-align:center;margin:0;font-weight:300;font-size:32px;display:block}.login-form__welcomeMsg{margin:0.6rem 0 4rem 0;color:{{settings.primaryFontColor}};opacity:0.65;text-align:center}.login-form__more-options{margin:0 0 18px;display:block;text-align:right}.login-form__registerLink{display:block;margin:20px auto 70px;text-align:center}.login-form__forget-password{font-size:12px;font-weight:300;color:{{settings.primaryFontColor}};text-decoration:none}.login-form__register{color:{{settings.linkFontColor}};font-weight:400;font-size:16px}.login-form__submit{margin:0 auto 2.5rem;width:100%;box-sizing:border-box;padding:.8rem 0;display:block;height:auto}.login-container .login-form__socialButtons{display:block;width:100%;font-size:14px;color:{{settings.primaryFontColor}};text-align:center}.login-container .login-form__socialButtons .login-form__socialButtons__buttons{display:flex;flex-direction:column}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container{display:flex;justify-content:center;align-items:center}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook{display:flex;justify-content:center;align-items:center;border:1px solid #dadce0;width:248px;min-width:248px;height:38px;margin-top:35px;cursor:pointer;background-color:#FFF;color:#3c4043;margin-left:1px;border-radius:4px;font-weight:500;letter-spacing:0.3px}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook:hover{background-color:#f9faff;border:1px solid #dbe1ee}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .button__Social__google{display:flex;justify-content:center;align-items:center;margin-top:35px;cursor:pointer;background-color:#FFF}.login-container .login-form__socialButtons .login-form__socialButtons__title{display:block;width:100%;text-align:center;margin:50px 0 15px}.login-container .login-form__socialButtons .GFbLoginIcon{width:30px;height:30px;margin-right:7px}.login-container .login-form__socialButtons .FBIcon{width:21px;height:21px}

.login-container{`max-width:100%;width:30rem;padding:7rem 3rem;box-sizing:border-box;margin:0 auto}.login-container .form__input-wrapper{display:inline-block;position:relative;width:calc(100% - 30px);margin-left:30px;background-color:inherit;margin-bottom:23px}.login-container .form__icons:not(.form__preview){color:{{settings.primaryFontColor}};position:absolute;transform:translateY(-50%);top:20px;left:-30px}.login-container .form__icons.form__preview svg{fill:{{settings.linkFontColor}}}.login-container .form .form__icon_left,.login-container .form__icon_left{left:0}.login-container .form select{border-bottom:1px solid {{settings.primaryFontColor}}}.login-form__signIn{color:{{settings.primaryFontColor}};text-align:center;margin:0;font-weight:300;font-size:32px;display:block}.login-form__welcomeMsg{margin:0.6rem 0 4rem 0;color:{{settings.primaryFontColor}};opacity:0.65;text-align:center}.login-form__more-options{margin:0 0 18px;display:block;text-align:right}.login-form__registerLink{display:block;margin:20px auto 70px;text-align:center}.login-form__forget-password{font-size:12px;font-weight:300;color:{{settings.primaryFontColor}};text-decoration:none}.login-form__register{color:{{settings.linkFontColor}};font-weight:400;font-size:16px}.login-form__submit{margin:0 auto 2.5rem;width:100%;box-sizing:border-box;padding:.8rem 0;display:block;height:auto}.login-container .login-form__socialButtons{display:block;width:100%;font-size:14px;color:{{settings.primaryFontColor}};text-align:center}.login-container .login-form__socialButtons .login-form__socialButtons__buttons{display:flex;flex-direction:column}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container{display:flex;justify-content:center;align-items:center}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook{display:flex;justify-content:center;align-items:center;border:1px solid #dadce0;width:248px;min-width:248px;height:38px;margin-top:35px;cursor:pointer;background-color:#FFF;color:#3c4043;margin-left:1px;border-radius:4px;font-weight:500;letter-spacing:0.3px}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook:hover{background-color:#f9faff;border:1px solid #dbe1ee}.login-container .login-form__socialButtons .login-form__socialButtons__buttons .button__Social__google{display:flex;justify-content:center;align-items:center;margin-top:35px;cursor:pointer;background-color:#FFF}.login-container .login-form__socialButtons .login-form__socialButtons__title{display:block;width:100%;text-align:center;margin:50px 0 15px}.login-container .login-form__socialButtons .GFbLoginIcon{width:30px;height:30px;margin-right:7px}.login-container .login-form__socialButtons .FBIcon{width:21px;height:21px}

Następnie w pliku css/layout2.css wyszukaj frazę login-form__socialButtons. Zamień kod znajdujący się za pierwszym wystąpieniem tej frazy (łącznie z tą frazą) na ten wskazany poniżej:


.login-form__socialButtons{display:block;width:100%;font-size:14px;color:{{settings.primaryFontColor}};text-align:center}.login-form__socialButtons .login-form__socialButtons__buttons{display:flex;flex-direction:column}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container{display:flex;justify-content:center;align-items:center}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook{display:flex;justify-content:center;align-items:center;border:1px solid #dadce0;width:248px;min-width:248px;height:38px;margin-top:20px;cursor:pointer;background-color:#FFF;color:#3c4043;margin-left:1px;border-radius:4px;font-weight:500;letter-spacing:0.3px}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook:hover{background-color:#f9faff;border:1px solid #dbe1ee}.login-form__socialButtons .login-form__socialButtons__buttons .button__Social__google{display:flex;justify-content:center;align-items:center;margin-top:20px;cursor:pointer;background-color:#FFF}.login-form__socialButtons .login-form__socialButtons__title{display:block;width:100%;text-align:center;margin:20px 0 0 0;font-size:20px;letter-spacing:1.2px}.login-form__socialButtons .GFbLoginIcon{width:30px;height:30px;margin-right:7px}.login-form__socialButtons .FBIcon{width:21px;height:21px}.primary-action-button .angleRight{fill:{{settings.primaryBtnFontColor}};margin-bottom:-3px;width:16px !important;height:16px !important}.primary-action-button:hover .angleRight{fill:{{settings.primaryBtnHoverFontColor}}}.primary-action-button--disabled .angleRight{fill:{{settings.primaryBtnFontColor}};margin-bottom:-3px;width:16px !important;height:16px !important}.primary-action-button--disabled:hover .angleRight{fill:{{settings.primaryBtnHoverFontColor}}}.cartContainer .validation-info__container{margin-top:6px}

.login-form__socialButtons{display:block;width:100%;font-size:14px;color:{{settings.primaryFontColor}};text-align:center}.login-form__socialButtons .login-form__socialButtons__buttons{display:flex;flex-direction:column}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container{display:flex;justify-content:center;align-items:center}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook{display:flex;justify-content:center;align-items:center;border:1px solid #dadce0;width:248px;min-width:248px;height:38px;margin-top:20px;cursor:pointer;background-color:#FFF;color:#3c4043;margin-left:1px;border-radius:4px;font-weight:500;letter-spacing:0.3px}.login-form__socialButtons .login-form__socialButtons__buttons .Facebook_Login_Container .button__Social__facebook:hover{background-color:#f9faff;border:1px solid #dbe1ee}.login-form__socialButtons .login-form__socialButtons__buttons .button__Social__google{display:flex;justify-content:center;align-items:center;margin-top:20px;cursor:pointer;background-color:#FFF}.login-form__socialButtons .login-form__socialButtons__title{display:block;width:100%;text-align:center;margin:20px 0 0 0;font-size:20px;letter-spacing:1.2px}.login-form__socialButtons .GFbLoginIcon{width:30px;height:30px;margin-right:7px}.login-form__socialButtons .FBIcon{width:21px;height:21px}.primary-action-button .angleRight{fill:{{settings.primaryBtnFontColor}};margin-bottom:-3px;width:16px !important;height:16px !important}.primary-action-button:hover .angleRight{fill:{{settings.primaryBtnHoverFontColor}}}.primary-action-button--disabled .angleRight{fill:{{settings.primaryBtnFontColor}};margin-bottom:-3px;width:16px !important;height:16px !important}.primary-action-button--disabled:hover .angleRight{fill:{{settings.primaryBtnHoverFontColor}}}.cartContainer .validation-info__container{margin-top:6px}

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
ConnectFb	Połącz konto z Facebookiem
ConnectGoogle	Połącz konto z Google

Bursztyn

Pliki html

Na początek w pliku _layout.html wyszukaj fragment crossorigin=”anonymous”. Powinien wystąpić raz w całym pliku. Dokładnie w linijkę pod tym elementem wklej ten fragment kodu:


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

W pliku customer/login/login-form.html wyszukaj fragment:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
    <section class="fb-login-section col-md-6 col-sm-9">
        <button aria-label="loginWithFacebook" class="social-button login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email"><i class="fa fa-facebook-official" aria-hidden="true"></i>{{translations.Login_Fb}}</button>
    </section>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
    <section class="fb-login-section col-md-6 col-sm-9">
        <button aria-label="loginWithGoogle" id="google-signin" class="social-button login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}"><i class="fa fa-google" aria-hidden="true"></i>{{translations.Login_Google}}</button>
    </section>
{% endif -%}

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

<button aria-label="loginWithFacebook" class="social-button login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email"><i class="fa fa-facebook-official" aria-hidden="true"></i>{{translations.Login_Fb}}</button>

</section>

{% endif -%}

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

<button aria-label="loginWithGoogle" id="google-signin" class="social-button login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}"><i class="fa fa-google" aria-hidden="true"></i>{{translations.Login_Google}}</button>

</section>

{% endif -%}

Następnie zamień go na ten wskazany poniżej:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
    <section class="fb-login-section col-md-6 col-sm-9">
        <div aria-label="loginWithFacebook" class="login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email">
            <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
            {{translations.Login_Fb}}
        </div>
    </section>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
    <section class="fb-login-section col-md-6 col-sm-9">
        <div data-error-msg="{{translations.Connect_Err}}" title="{{translation.Login_Google}}">
            <div id="google-signin" data-type="standard"></div>
        </div>
    </section>
{% endif -%}

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

</div>

</section>

{% endif -%}

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

</div>

</section>

{% endif -%}

W pliku customer/registation.html wyszukaj fragment :


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' -%}
<section class="fb-login-section col-md-6 col-sm-9">
  <button aria-label="loginSocialButtonFacebook" class="social-button login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email">
    <i class="fa fa-facebook-official" aria-hidden="true"></i>{{translations.Reg_Fb}}
  </button>
</section>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
<section class="fb-login-section col-md-6 col-sm-9">
  <button aria-label="loginSocialButtonGoogle" id="google-signin" class="social-button login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}">
    <i class="fa fa-google" aria-hidden="true"></i>{{translations.Reg_Google}}
  </button>
</section>
{% endif -%}

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

<i class="fa fa-facebook-official" aria-hidden="true"></i>{{translations.Reg_Fb}}

</button>

</section>

{% endif -%}

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

<i class="fa fa-google" aria-hidden="true"></i>{{translations.Reg_Google}}

</button>

</section>

{% endif -%}

Następnie zastąp go kodem ukazanym poniżej :


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' -%}
  <section class="fb-login-section fb-register-section col-md-6 col-sm-9">
    <div aria-label="loginSocialButtonFacebook" class="login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email">
      <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
      {{translations.Login_Fb}}
</div>
  </section>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
  <section class="fb-login-section col-md-6 col-sm-9">
    <div data-error-msg="{{translations.Connect_Err}}" title="{{translation.Login_Google}}">
      <div id="google-signin" data-type="standard">
    </div>
  </section>
{% endif -%}

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

</div>

</section>

{% endif -%}

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

</div>

</section>

{% endif -%}

Następnie w pliku customer/profile-account.html wyszukaj fragment :


    {% if customerProfile.LinkedAccounts[0] -%}
        {% assign fbConnect = 0 -%}
        {% assign googleConnect = 0 -%}
        {% for account in customerProfile.LinkedAccounts -%}
            {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
                <span id="disconnect-fb" class="social-button">
                    <i class="fa fa-facebook-official" aria-hidden="true"></i>
                    {{translations.Disconnect_Fb}}
                </span>
                {% assign fbConnect = 1 -%}
            {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                <span id="unlinkGoogleAccount" class="social-button google-button">
                    <i class="fa fa-google" aria-hidden="true"></i>
                    {{translations.Disconnect_Google}}
                </span>
                {% assign googleConnect = 1 -%}
            {% endif %}
        {% endfor %}
        {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
            <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                {{translations.Connect_Fb}}
            </span>
        {% endif %}
        {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
            <span id="linkGoogleAccount" class="social-button google-button">
                <i class="fa fa-google" aria-hidden="true"></i>
                {{translations.Connect_Google}}
            </span>
        {% endif %}
    {% else %}
        {% if config.External.Facebook.AppID != '' and config.External.Facebook %}
            <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                {{translations.Connect_Fb}}
            </span>
        {% endif %}
        {% if config.External.Google.ClientID != '' and config.External.Google %}
            <span id="linkGoogleAccount" class="social-button google-button">
                <i class="fa fa-google" aria-hidden="true"></i>
                {{translations.Connect_Google}}
            </span>
        {% endif %}
    {% endif %}

{% if customerProfile.LinkedAccounts[0] -%}

{% assign fbConnect = 0 -%}

{% assign googleConnect = 0 -%}

{% for account in customerProfile.LinkedAccounts -%}

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

</span>

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

Następnie zastąp ten fragment tym wskazanym poniżej:


    {% if customerProfile.LinkedAccounts[0] -%}
        {% assign fbConnect = 0 -%}
        {% assign googleConnect = 0 -%}
        {% for account in customerProfile.LinkedAccounts -%}
            {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
                <span id="disconnect-fb" class="social-button">
                    <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                    {{translations.Disconnect_Fb}}
                </span>
                {% assign fbConnect = 1 -%}
            {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                <span id="unlinkGoogleAccount" class="social-button">
                    <img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                    {{translations.Disconnect_Google}}
                </span>
                {% assign googleConnect = 1 -%}
            {% endif %}
        {% endfor %}
        {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
            <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
                <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                {{translations.Connect_Fb}}
            </span>
        {% endif %}
        {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
            <span id="linkGoogleAccount" class="social-button">
                <img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                {{translations.Connect_Google}}
            </span>
        {% endif %}
    {% else %}
        {% if config.External.Facebook.AppID != '' and config.External.Facebook %}
            <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
                <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                {{translations.Connect_Fb}}
            </span>
        {% endif %}
        {% if config.External.Google.ClientID != '' and config.External.Google %}
            <span id="linkGoogleAccount" class="social-button">
                <img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                {{translations.Connect_Google}}
            </span>
        {% endif %}
    {% endif %}

{% if customerProfile.LinkedAccounts[0] -%}

{% assign fbConnect = 0 -%}

{% assign googleConnect = 0 -%}

{% for account in customerProfile.LinkedAccounts -%}

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

</span>

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

Pliki JavaScript

W pliku js/order.js wyszukaj elemnt :


sessionStorage.removeItem('parcelSelected');

sessionStorage.removeItem('parcelSelected');

Powinien on wystąpić w tym pliku raz. Dokładnie w tym obszarze dokonaj zmian według fragmentu poniżej:


CreateTooltip(d.action);
lazyCheck();
location.reload();
$('html, body').animate({ scrollTop: $('#order-form').offset().top });
$(document).trigger('stepChanged', [step]);
sessionStorage.removeItem('parcelSelected');

CreateTooltip(d.action);

lazyCheck();

location.reload();

$('html, body').animate({ scrollTop: $('#order-form').offset().top });

$(document).trigger('stepChanged', [step]);

sessionStorage.removeItem('parcelSelected');

Następnie w plikujs/google-login.js zastąp cały kod tym wskazanym poniżej :


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) {
            var errMsg = document.querySelector('#google-signin').dataset.errorMsg;
            CreateTooltip({Type: 'err', Message: errMsg});
        } else {
            CreateTooltip(result.action);
        }
      });
    }, 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: "325", logo_alignment: "center", text: "signin_with"}
      );
  
      $('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 {
                    CreateTooltip(result.action);
                }
            });
        }, 6000);
      });
  
      $('body').on('click', '#unlinkGoogleAccount', function(){
        $.post(null,{ __action: 'External/GoogleAccountUnlink',  __csrf: __CSRF},function(result){
            if (result.action.Result) {
                location.reload();
            } else {
                CreateTooltip(result.action);
            }
        });
      });
}

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

var errMsg = document.querySelector('#google-signin').dataset.errorMsg;

CreateTooltip({Type: 'err', Message: errMsg});

} else {

CreateTooltip(result.action);

}

});

}, 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: "325", logo_alignment: "center", text: "signin_with"}

);

$('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 {

CreateTooltip(result.action);

}

});

}, 6000);

});

$('body').on('click', '#unlinkGoogleAccount', function(){

$.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF},function(result){

if (result.action.Result) {

location.reload();

} else {

CreateTooltip(result.action);

}

});

}

Pliki scss

W pliku scss/main.scss wyszukaj fragment:


.social-button {
  cursor: pointer;
  background-color: #4267b2;
  color: #fff;
  margin: 15px auto;
  padding: 15px 15px 10px;
  text-align: center;
  position: relative;
  transition: 200ms;
  display: block;
  .fa {
    font-size: 26px;
    position: relative;
    top: 5px;
    line-height: 0;
    margin-right: 5px;
  }
}

.client-panel {
  .social-button {
    &.google-button {
      background-color: #ea4335;
    }
  }
}

.register.container {
  .google-social-btn {
    margin-top: -15px;
  }
}

.google-social-btn {
  background-color: #ea4335;
  font-size: inherit;
  border: none;
  border-radius: 0;
  margin-top: 5px;
  &:hover {
    background-color: #da4639;
  }
}

.login-social-button {
  display: block;
  padding: 12px 0 13px;
  float: left;
  width: 100%;
  .fa-facebook-official {
    margin-right: 10px;
  }
}

.social-button {

cursor: pointer;

background-color: #4267b2;

color: #fff;

margin: 15px auto;

padding: 15px 15px 10px;

text-align: center;

position: relative;

transition: 200ms;

display: block;

.fa {

font-size: 26px;

position: relative;

top: 5px;

line-height: 0;

margin-right: 5px;

}

.client-panel {

.social-button {

&.google-button {

background-color: #ea4335;

}

.register.container {

.google-social-btn {

margin-top: -15px;

}

.google-social-btn {

background-color: #ea4335;

font-size: inherit;

border: none;

border-radius: 0;

margin-top: 5px;

&:hover {

background-color: #da4639;

}

.login-social-button {

display: block;

padding: 12px 0 13px;

float: left;

width: 100%;

.fa-facebook-official {

margin-right: 10px;

}

Następnie zamień ten fragment według tego wskazanego poniżej :


.social-button {
  cursor: pointer;
  background-color: #FFF;
  color: #606060;
  margin: 15px auto;
  padding: 15px 15px 10px;
  text-align: center;
  position: relative;
  transition: 200ms;
  display: block;
  box-shadow: 0px 1px 1px 1px lightgray;
  font-weight: 700;
  .GLoginIcon{
    width: 30px;
    margin-right: 5px;
  }
  .FbLoginIcon{
    width:33px;
    margin-right: 5px;
  }
}
.social-button:hover{
  background-color: #E9E9E5;
  transition: 0,5s;
}

.register.container {
  .google-social-btn {
    margin-top: -15px;
  }
}

.login-social-button {
  font-family: system-ui;
  border: 1px solid #dadce0;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  width: 325px;
  height: 44px;
  font-weight: 500;
  margin: 15px auto;
  color: #3c4043;
  cursor: pointer;

  .FbLoginIcon{
    width:21px;
    margin-right: 5px;
  }
}
.login-social-button:hover{
  background-color: #f9faff;
  border: 1px solid #dbe1ee;
}

.social-button {

cursor: pointer;

background-color: #FFF;

color: #606060;

margin: 15px auto;

padding: 15px 15px 10px;

text-align: center;

position: relative;

transition: 200ms;

display: block;

box-shadow: 0px 1px 1px 1px lightgray;

font-weight: 700;

.GLoginIcon{

width: 30px;

margin-right: 5px;

}

.FbLoginIcon{

width:33px;

margin-right: 5px;

}

.social-button:hover{

background-color: #E9E9E5;

transition: 0,5s;

}

.register.container {

.google-social-btn {

margin-top: -15px;

}

.login-social-button {

font-family: system-ui;

border: 1px solid #dadce0;

border-radius: 4px;

display: flex;

justify-content: center;

align-items: center;

float: left;

width: 325px;

height: 44px;

font-weight: 500;

margin: 15px auto;

color: #3c4043;

cursor: pointer;

.FbLoginIcon{

width:21px;

margin-right: 5px;

}

.login-social-button:hover{

background-color: #f9faff;

border: 1px solid #dbe1ee;

}

W pliku scss/main2.scss zamień podany fragment:


.fb-login-section {
  background-color: #fff;
  padding: 0 25px 25px;
  display: inline-block;
  margin-top: -30px;
}

.fb-login-section {

background-color: #fff;

padding: 0 25px 25px;

display: inline-block;

margin-top: -30px;

}

Na fragment wskazany poniżej:


.fb-login-section {
  background-color: #fff;
  display: inline-block;
  margin-top: -30px;
  padding: 0 25px 25px;
}
.fb-register-section{
  background-color: #fff;
  display: inline-block;
  margin-top: -30px;
  padding: 0 25px 0px;
}

.fb-login-section {

background-color: #fff;

display: inline-block;

margin-top: -30px;

padding: 0 25px 25px;

}

.fb-register-section{

background-color: #fff;

display: inline-block;

margin-top: -30px;

padding: 0 25px 0px;

}

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.

Agat

Pliki html

Na początek w pliku _layout.html wyszukaj fragment crossorigin=”anonymous”. Powinien wystąpić raz w całym pliku. Dokładnie w linijkę pod tym elementem wklej ten fragment kodu:


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

W pliku partials/common/login-form.html wyszukaj fragment:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
<button aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email">
    <i class="fa fa-facebook-official" aria-hidden="true"></i>{{ translations.Login_Fb }}
</button>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
<button aria-label="loginGoogleButton" id="google-signin" class="btn btn-sm btn-primary btn-block login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}">
    <i class="fa fa-google" aria-hidden="true"></i>{{ translations.Login_Google }}
</button>
{% endif -%}

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

<i class="fa fa-facebook-official" aria-hidden="true"></i>{{ translations.Login_Fb }}

</button>

{% endif -%}

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

<i class="fa fa-google" aria-hidden="true"></i>{{ translations.Login_Google }}

</button>

{% endif -%}

Występuje on na końu kodu. Zamień wspomniany fragment na ten przedstawiony poniżej:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
    <div aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button fblogin-button" onclick="_login();" type="submit" data-scope="public_profile,email">
        <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
        {{ translations.Login_Fb }}
    </div>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
    <div id="google-signin" data-type="standard" data-error-msg="{{translations.Connect_Err}}" class="Googlelogin-button" title="{{translation.Login_Google}}"></div>
{% endif -%}

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

</div>

{% endif -%}

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

{% endif -%}

W pliku registration.html wyszukaj fragment:


{% if usr.Authenticated == 'false' and config.External.Facebook.AppID != '' and config.External.Facebook -%}
<button aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email"><i class="fa fa-facebook-official" aria-hidden="true"></i>{{translations.Reg_Fb}}</button>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google.ClientID != '' and config.External.Google -%}
<button aria-label="loginGoogleButton" id="google-signin" class="btn btn-sm btn-primary btn-block login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}"><i class="fa fa-google" aria-hidden="true"></i>{{translations.Reg_Google}}</button>
{% endif -%}

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

<button aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email"><i class="fa fa-facebook-official" aria-hidden="true"></i>{{translations.Reg_Fb}}</button>

{% endif -%}

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

<button aria-label="loginGoogleButton" id="google-signin" class="btn btn-sm btn-primary btn-block login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}"><i class="fa fa-google" aria-hidden="true"></i>{{translations.Reg_Google}}</button>

{% endif -%}

Następnie zastąp go fragmentem wsazanym poniżej:


{% if usr.Authenticated == 'false' and config.External.Facebook.AppID != '' and config.External.Facebook -%}
	<div aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button fblogin-button" onclick="_login();" type="submit" data-scope="public_profile,email">
		<img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
		{{ translations.Login_Fb }}
	</div>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
	<div id="google-signin" data-type="standard" data-error-msg="{{translations.Connect_Err}}" class="Googlelogin-button" title="{{translation.Login_Google}}"></div>
{% endif -%}

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

</div>

{% endif -%}

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

{% endif -%}

W pliku customer-profile.html wyszukaj fragment :


{% if customerProfile.LinkedAccounts[0] -%}
    {% assign fbConnect = 0 -%}
    {% assign googleConnect = 0 -%}
    {% for account in customerProfile.LinkedAccounts -%}
        {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
            <span id="disconnect-fb" class="social-button">
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                {{translations.Disconnect_Fb}}
            </span>
            {% assign fbConnect = 1 -%}
        {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
            <span id="unlinkGoogleAccount" class="social-button google-button">
                <i class="fa fa-google" aria-hidden="true"></i>
                {{translations.Disconnect_Google}}
            </span>
            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
        <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            {{translations.Connect_Fb}}
        </span>
    {% endif %}
    {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
        <span id="linkGoogleAccount" class="social-button google-button">
            <i class="fa fa-google" aria-hidden="true"></i>
            {{translations.Connect_Google}}
        </span>
    {% endif %}
{% else %}
    {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
        <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            {{translations.Connect_Fb}}
        </span>
    {% endif %}
    {% if config.External.Google and config.External.Google.ClientID != '' %}
        <span id="linkGoogleAccount" class="social-button google-button">
            <i class="fa fa-google" aria-hidden="true"></i>
            {{translations.Connect_Google}}
        </span>
    {% endif %}
{% endif %}

{% if customerProfile.LinkedAccounts[0] -%}

{% assign fbConnect = 0 -%}

{% assign googleConnect = 0 -%}

{% for account in customerProfile.LinkedAccounts -%}

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

</span>

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

Następnie podmień ten kod na:


{% if customerProfile.LinkedAccounts[0] -%}
	{% assign fbConnect = 0 -%}
	{% assign googleConnect = 0 -%}
	{% for account in customerProfile.LinkedAccounts -%}
		{% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
			<span id="disconnect-fb" class="social-button">
				<img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
				{{translations.Disconnect_Fb}}
			</span>
			{% assign fbConnect = 1 -%}
		{% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
			<span id="unlinkGoogleAccount" class="social-button google-button">
				<img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
				{{translations.Disconnect_Google}}
			</span>
			{% assign googleConnect = 1 -%}
		{% endif %}
	{% endfor %}
	{% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
		<span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
			<img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
			{{translations.Connect_Fb}}
		</span>
	{% endif %}
	{% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
		<span id="linkGoogleAccount" class="social-button google-button">
			<img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
			{{translations.Connect_Google}}
		</span>
	{% endif %}
{% else %}
	{% if config.External.Facebook and config.External.Facebook.AppID != '' %}
		<span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
			<img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
			{{translations.Connect_Fb}}
		</span>
	{% endif %}
	{% if config.External.Google and config.External.Google.ClientID != '' %}
		<span id="linkGoogleAccount" class="social-button google-button">
			<img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
			{{translations.Connect_Google}}
		</span>
	{% endif %}
{% endif %}

{% if customerProfile.LinkedAccounts[0] -%}

{% assign fbConnect = 0 -%}

{% assign googleConnect = 0 -%}

{% for account in customerProfile.LinkedAccounts -%}

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

</span>

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

W pliku partials/cart-content.html wyszukaj fragment:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
	<button aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email"><i class="fa fa-facebook-official" aria-hidden="true"></i>{{ translations.Login_Fb }}</button>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
	<button aria-label="loginGoogleButton" id="google-signin" class="btn btn-sm btn-primary btn-block login-social-button google-social-btn"  data-error-msg="{{translations.Connect_Err}}"><i class="fa fa-google" aria-hidden="true"></i>{{ translations.Login_Google }}</button>
{% endif -%}

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

{% endif -%}

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

{% endif -%}

Zamień ten fragment tym wskzazanym poniżej:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
	<div aria-label="loginFacebookButton" class="btn btn-sm btn-primary btn-block login-social-button fblogin-button" onclick="_login();" type="submit" data-scope="public_profile,email">
		<img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
		{{ translations.Login_Fb }}
	</div>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
	<div id="google-signin" data-type="standard" data-error-msg="{{translations.Connect_Err}}" class="Googlelogin-button" title="{{translation.Login_Google}}"></div>
{% endif -%}

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

</div>

{% endif -%}

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

{% endif -%}

Pliki JavaScript

W pliku js/google-login.js zamień cały kod na ten wskazany poniżej:


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) {
              var errMsg = document.querySelector('#google-signin').dataset.errorMsg;
              createMessage(errMsg);
          } else {
              createMessage(result);
          }
      });
    }, 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: "355", logo_alignment: "center", text: "signin_with"}
      );
  
      $('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 {
                    createMessage(result);
                }
            });
        }, 1000);
      });
  
      $('body').on('click', '#unlinkGoogleAccount', function(){
        $.post(null,{ __action: 'External/GoogleAccountUnlink', __CSRF: __CSRF },function(result){
            if (result.action.Result) {
                location.reload();
            } else {
                createMessage(result);
            }
        });
      });
  
      $('body').on('click', '.logout', function () {
          googleLogout();
      });
  }
  
  function googleLogout() {
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.signOut();
  }
  
  function createMessage(obj) {
      if (obj.action.Code != 100) {
          application.createMessage(obj.action);
      }
  }

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

var errMsg = document.querySelector('#google-signin').dataset.errorMsg;

createMessage(errMsg);

} else {

createMessage(result);

}

});

}, 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: "355", logo_alignment: "center", text: "signin_with"}

);

$('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 {

createMessage(result);

}

});

}, 1000);

});

$('body').on('click', '#unlinkGoogleAccount', function(){

$.post(null,{ __action: 'External/GoogleAccountUnlink', __CSRF: __CSRF },function(result){

if (result.action.Result) {

location.reload();

} else {

createMessage(result);

}

});

$('body').on('click', '.logout', function () {

googleLogout();

});

}

function googleLogout() {

var auth2 = gapi.auth2.getAuthInstance();

auth2.signOut();

}

function createMessage(obj) {

if (obj.action.Code != 100) {

application.createMessage(obj.action);

}

Pliki scss

W pliku scss/main.scss wyszukaj frazę span.social-button. Powinna występować raz w danym pliku. Następnie usuń z fragmentu pod tą linijką element width: 250px;, tak aby po edycji wyglądał w ten sposób:


span.social-button {
	margin: 5px;
}

span.social-button {

margin: 5px;

}

W pliku scss/main2.scss wyszukaj fragment:


.login-social-button,
.client-profile .social-button {
  cursor: pointer;
  background-color: #4267b2;
  color: #fff;
  padding: 15px 15px 15px 50px;
  margin: 15px auto;
  position: relative;
  transition: 200ms;
  display: block;
  max-width: 400px;
  width: 100%;
}
.client-profile .social-button {
  display: inline-block;
}
.login-social-button i,
.client-profile .social-button i {
  font-size: 32px;
  position: absolute;
  left: 13px;
  top: 9px;
}
.login-social-button:hover,
.client-profile .social-button:hover {
  background-color: #365899;
  transition: 200ms;
}

.client-profile {
  .social-button {
    margin: 15px;
    &.google-button {
      background-color: #ea4335;
    }
  }
}

.google-social-btn {
  background-color: #ea4335;
  position: relative;
  display: block;
  margin: 0 auto;
  &:hover {
    background-color: #da4639;
  }
}

.login-social-button,

.client-profile .social-button {

cursor: pointer;

background-color: #4267b2;

color: #fff;

padding: 15px 15px 15px 50px;

margin: 15px auto;

position: relative;

transition: 200ms;

display: block;

max-width: 400px;

width: 100%;

}

.client-profile .social-button {

display: inline-block;

}

.login-social-button i,

.client-profile .social-button i {

font-size: 32px;

position: absolute;

left: 13px;

top: 9px;

}

.login-social-button:hover,

.client-profile .social-button:hover {

background-color: #365899;

transition: 200ms;

}

.client-profile {

.social-button {

margin: 15px;

&.google-button {

background-color: #ea4335;

}

.google-social-btn {

background-color: #ea4335;

position: relative;

display: block;

margin: 0 auto;

&:hover {

background-color: #da4639;

}

Następnie zamień go na ten przedstawiony poniżej:


.login-social-button,
.client-profile .social-button {
  cursor: pointer;
  background-color: #FFF;
  color: #7f7f7f;
  padding: 15px 0px 15px 0px;
  margin: 15px auto;
  position: relative;
  transition: 200ms;
  display: flex;
  max-width: 400px;
  width: 100%;
  justify-content: center;
  align-items: center;

}
.client-profile .social-button {
  display: inline-block;
}
.login-social-button,
.client-profile .social-button{
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 9px;
  border: 1px solid #dadce0;
  .GLoginIcon{
    width: 30px;
    margin-right: 10px;
  }
  .FbLoginIcon{
    width:33px;
    margin-right: 10px;
  }
}
.fblogin-button{
  font-family: system-ui;
  width: 351px;
  height: 38px;
  padding: 0px;
  border-radius: 4px;
  font-weight: 500;
  color: #3c4043;
  top: 0;
    .FbLoginIcon{
    width:21px;
    height: 21px;
    margin-right: 10px;
  }
}
.Googlelogin-button{
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-social-button:hover,
.client-profile .social-button:hover {
  background-color: #f9faff;
  border: 1px solid #dbe1ee;
}

.login-social-button,

.client-profile .social-button {

cursor: pointer;

background-color: #FFF;

color: #7f7f7f;

padding: 15px 0px 15px 0px;

margin: 15px auto;

position: relative;

transition: 200ms;

display: flex;

max-width: 400px;

width: 100%;

justify-content: center;

align-items: center;

}

.client-profile .social-button {

display: inline-block;

}

.login-social-button,

.client-profile .social-button{

font-size: 14px;

display: flex;

justify-content: center;

align-items: center;

top: 9px;

border: 1px solid #dadce0;

.GLoginIcon{

width: 30px;

margin-right: 10px;

}

.FbLoginIcon{

width:33px;

margin-right: 10px;

}

.fblogin-button{

font-family: system-ui;

width: 351px;

height: 38px;

padding: 0px;

border-radius: 4px;

font-weight: 500;

color: #3c4043;

top: 0;

.FbLoginIcon{

width:21px;

height: 21px;

margin-right: 10px;

}

.Googlelogin-button{

display: flex;

justify-content: center;

align-items: center;

}

.login-social-button:hover,

.client-profile .social-button:hover {

background-color: #f9faff;

border: 1px solid #dbe1ee;

}

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.

Opal

Pliki html

W pliku _layout.html wyszukaj frazę:


<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

Dokładnie pod tym elementem wklej poniższy kod:


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

Następnie w plikach customer/login/login-form.html oraz customer/registration.html wyszukaj fragment:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
    <button aria-label="loginFacebookButton" class="social-button login-social-button" onclick="_login();" type="submit" data-scope="public_profile,email">
        <i class="fab fa-facebook social-button-svg" aria-hidden="true"></i> {{translations.Login_Fb}}
    </button>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
    <button aria-label="loginGoogleButton" id="google-signin" class="social-button login-social-button google-social-btn" data-error-msg="{{translations.Connect_Err}}">
        <i class="fab fa-google social-button-svg" aria-hidden="true"></i>{{translations.Login_Google}}
    </button>
{% endif -%}

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

<i class="fab fa-facebook social-button-svg" aria-hidden="true"></i> {{translations.Login_Fb}}

</button>

{% endif -%}

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

<i class="fab fa-google social-button-svg" aria-hidden="true"></i>{{translations.Login_Google}}

</button>

{% endif -%}

Zamień wspomniany fragment na ten ukazany poniżej:


{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
    <div aria-label="loginFacebookButton" class="social-button login-social-button facebookLogin-button" onclick="_login();" type="submit" data-scope="public_profile,email">
        <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png"> 
        {{translations.Login_Fb}}`
    </div>
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
    <div id="google-signin" data-type="standard" class="google-social-btn"  data-error-msg="{{translations.Connect_Err}}" title="{{translation.Login_Google}}"></div>
{% endif -%}

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

{{translations.Login_Fb}}`

</div>

{% endif -%}

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

{% endif -%}

W pliku customer/profile-account.html wyszukaj fragment kodu:


{% if customerProfile.LinkedAccounts[0] -%}
    {% assign fbConnect = 0 -%}
    {% assign googleConnect = 0 -%}
    {% for account in customerProfile.LinkedAccounts -%}
        {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
            <span id="disconnect-fb" class="social-button">
                <i class="fa fa-facebook-official" aria-hidden="true"></i>
                {{translations.Disconnect_Fb}}
            </span>
            {% assign fbConnect = 1 -%}
        {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
            <span id="unlinkGoogleAccount" class="social-button google-button">
                <i class="fa fa-google" aria-hidden="true"></i>
                {{translations.Disconnect_Google}}
            </span>
            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%}
        <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            {{translations.Connect_Fb}}
        </span>
    {% endif %}
    {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' -%}
        <span id="linkGoogleAccount" class="social-button google-button">
            <i class="fa fa-google" aria-hidden="true"></i>
            {{translations.Connect_Google}}
        </span>
    {% endif %}
{% else %}
    {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
        <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
            <i class="fa fa-facebook-official" aria-hidden="true"></i>
            {{translations.Connect_Fb}}
        </span>
    {% endif %}
    {% if config.External.Google and config.External.Google.ClientID != '' %}
        <span id="linkGoogleAccount" class="social-button google-button">
            <i class="fa fa-google" aria-hidden="true"></i>
            {{translations.Connect_Google}}
        </span>
    {% endif %}
{% endif %}

{% if customerProfile.LinkedAccounts[0] -%}

{% assign fbConnect = 0 -%}

{% assign googleConnect = 0 -%}

{% for account in customerProfile.LinkedAccounts -%}

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

</span>

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

Zamień ten fragment na ten wskazany poniżej:


{% if customerProfile.LinkedAccounts[0] -%}
    {% assign fbConnect = 0 -%}
    {% assign googleConnect = 0 -%}
    {% for account in customerProfile.LinkedAccounts -%}
        {% if account.Service == 'Facebook' and config.External.Facebook and config.External.Facebook.AppID != '' %}
            <span id="disconnect-fb" class="social-button">
                <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
                {{translations.Disconnect_Fb}}
            </span>
            {% assign fbConnect = 1 -%}
        {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
            <span id="unlinkGoogleAccount" class="social-button google-button">
                <img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
                {{translations.Disconnect_Google}}
            </span>
            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%}
        <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
            <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
            {{translations.Connect_Fb}}
        </span>
    {% endif %}
    {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' -%}
        <span id="linkGoogleAccount" class="social-button google-button">
            <img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
            {{translations.Connect_Google}}
        </span>
    {% endif %}
{% else %}
    {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
        <span id="connect-fb" class="social-button" data-error-msg="{{translations.NeedToConnectToFb}}">
            <img class="FbLoginIcon FBIcon" src="https://static.comarchesklep.pl/files/img/Fbicon.png">
            {{translations.Connect_Fb}}
        </span>
    {% endif %}
    {% if config.External.Google and config.External.Google.ClientID != '' %}
        <span id="linkGoogleAccount" class="social-button google-button">
            <img class="GLoginIcon" src="https://static.comarchesklep.pl/files/img/googleIcon.png">
            {{translations.Connect_Google}}
        </span>
    {% endif %}
{% endif %}

{% if customerProfile.LinkedAccounts[0] -%}

{% assign fbConnect = 0 -%}

{% assign googleConnect = 0 -%}

{% for account in customerProfile.LinkedAccounts -%}

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

</span>

{% assign fbConnect = 1 -%}

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

</span>

{% assign googleConnect = 1 -%}

{% endif %}

{% endfor %}

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

</span>

{% endif %}

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

</span>

{% endif %}

{% else %}

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

</span>

{% endif %}

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

</span>

{% endif %}

Pliki JavaScript

W pliku js/google-login.js zamień cały kod na ten wskazany poniżej:


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) {
              var errMsg = document.querySelector('#google-signin').dataset.errorMsg;
              CreateTooltip({Type: 'err', Message: errMsg});
          } else {
              CreateTooltip(result.action);
          }
      });
    }, 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: "350", logo_alignment: "center", text: "signin_with"}
      );
  
      $('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 {
                    CreateTooltip(result.action);
                }
            });
        }, 1000);
      });
      
      $('body').on('click', '#unlinkGoogleAccount', function(){
        $.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF },function(result){
            if (result.action.Result) {
                location.reload();
            } else {
                CreateTooltip(result.action);
            }
        });
    });
}

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

var errMsg = document.querySelector('#google-signin').dataset.errorMsg;

CreateTooltip({Type: 'err', Message: errMsg});

} else {

CreateTooltip(result.action);

}

});

}, 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: "350", logo_alignment: "center", text: "signin_with"}

);

$('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 {

CreateTooltip(result.action);

}

});

}, 1000);

});

$('body').on('click', '#unlinkGoogleAccount', function(){

$.post(null,{ __action: 'External/GoogleAccountUnlink', __csrf: __CSRF },function(result){

if (result.action.Result) {

location.reload();

} else {

CreateTooltip(result.action);

}

});

}

W pliku js/order.js wyszukaj fragment:


$('.order:not(.order-content)').replaceWith(d.template);
lazyCheck();
$('html, body').animate({scrollTop: $('#order-form').offset().top});
$(document).trigger('stepChanged', [step]);

$('.order:not(.order-content)').replaceWith(d.template);

lazyCheck();

$('html, body').animate({scrollTop: $('#order-form').offset().top});

$(document).trigger('stepChanged', [step]);

Następnie zamień ten fragment na ten wskazany poniżej:


location.reload();
lazyCheck();
$('html, body').animate({ scrollTop: $('#order-form').offset().top });
$(document).trigger('stepChanged', [step]);

location.reload();

lazyCheck();

$('html, body').animate({ scrollTop: $('#order-form').offset().top });

$(document).trigger('stepChanged', [step]);

Pliki scss

W pliku scss/main2.scss wyszukaj fragment kodu:


.social-button {
  cursor: pointer;
  background-color: #4267b2;
  color: #fff;
  padding: 15px 15px 10px;
  text-align: center;
  margin: 15px auto;
  position: relative;
  transition: 200ms;
  max-width: 350px;
  display: block;
  .fa {
    font-size: 26px;
    position: relative;
    top: 4px;
    line-height: 0;
    margin-right: 5px;
  }
}

.client-panel {
  .social-button {
    &.google-button {
      background-color: #ea4335;
    }
  }
}

.google-social-btn {
  background-color: #ea4335;
  font-size: inherit;
  border: none;
  border-radius: 0;
  margin-top: 5px;
  &:hover {
    background-color: #da4639;
  }
}

.login-social-button {
  display: block;
  padding: 14px 10px 11px;
  width: 100%;
  .fa-facebook-official {
    margin-right: 10px;
  }
}

.social-button {

cursor: pointer;

background-color: #4267b2;

color: #fff;

padding: 15px 15px 10px;

text-align: center;

margin: 15px auto;

position: relative;

transition: 200ms;

max-width: 350px;

display: block;

.fa {

font-size: 26px;

position: relative;

top: 4px;

line-height: 0;

margin-right: 5px;

}

.client-panel {

.social-button {

&.google-button {

background-color: #ea4335;

}

.google-social-btn {

background-color: #ea4335;

font-size: inherit;

border: none;

border-radius: 0;

margin-top: 5px;

&:hover {

background-color: #da4639;

}

.login-social-button {

display: block;

padding: 14px 10px 11px;

width: 100%;

.fa-facebook-official {

margin-right: 10px;

}

Następnie zamień ten fragment na kod wskazany poniżej:


.social-button {
  cursor: pointer;
  background-color: #FFF;
  color: #3c4043;
  padding: 15px 15px 10px;
  text-align: center;
  margin: 15px auto;
  position: relative;
  transition: 200ms;
  max-width: 350px;
  display: block;
  border: 1px solid #dadce0;
  border-radius: 4px;
  .GLoginIcon{
    width: 30px;
    margin-right: 5px;
  }
  .FbLoginIcon{
    width:33px;
    margin-right: 5px;
  }
}
.social-button:hover{
  background-color: #f9faff;
  border: 1px solid #dbe1ee;
}
.facebookLogin-button{
  font-family: system-ui;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  padding: 0;
  .FbLoginIcon{
    width:21px;
    margin-right: 5px;
  }
}

.google-social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
}

.social-button {

cursor: pointer;

background-color: #FFF;

color: #3c4043;

padding: 15px 15px 10px;

text-align: center;

margin: 15px auto;

position: relative;

transition: 200ms;

max-width: 350px;

display: block;

border: 1px solid #dadce0;

border-radius: 4px;

.GLoginIcon{

width: 30px;

margin-right: 5px;

}

.FbLoginIcon{

width:33px;

margin-right: 5px;

}

.social-button:hover{

background-color: #f9faff;

border: 1px solid #dbe1ee;

}

.facebookLogin-button{

font-family: system-ui;

font-weight: 500;

display: flex;

justify-content: center;

align-items: center;

height: 38px;

padding: 0;

.FbLoginIcon{

width:21px;

margin-right: 5px;

}

.google-social-btn {

display: flex;

justify-content: center;

align-items: center;

height: 38px;

}

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.

Wstęp

Szafir

Topaz

Bursztyn

Agat

Opal

Szafir

Topaz

Pliki html

Pliki JavaScript

Pliki css

Przygotowanie tekstów

Bursztyn

Pliki html

Pliki JavaScript

Pliki scss

Agat

Pliki html

Pliki JavaScript

Pliki scss

Opal

Pliki html

Pliki JavaScript

Pliki scss

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt