Migracja do nowszej biblioteki klienta Google

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

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:

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

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

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

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

{{ translations.ExternalWebsites }} {% if customer-profile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customer-profile.LinkedAccounts -%} {% if account.Service == 'Facebook’ and config.External.Facebook and config.External.Facebook.AppID != ” %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elsif account.Service == 'Google’ and config.External.Google and config.External.Google.ClientID != ” %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != ” %} {{translations.ConnectAccount}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != ” %} {{translations.ConnectAccount}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != ” %} {{translations.ConnectAccount}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != ” %} {{translations.ConnectAccount}} {% endif %} {% endif %}

{% endif -%}

Na odpowiadający mu i poprawiony fragment:

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

{{translations.ExternalWebsites}} {% if customer-profile.LinkedAccounts[0] -%} {% assign fbConnect = 0 -%} {% assign googleConnect = 0 -%} {% for account in customer-profile.LinkedAccounts -%} {% if account.Service == 'Facebook’ and config.External.Facebook and config.External.Facebook.AppID != ” %} {{translations.Disconnect_Fb}} {% assign fbConnect = 1 -%} {% elsif account.Service == 'Google’ and config.External.Google and config.External.Google.ClientID != ” %} {{translations.Disconnect_Google}} {% assign googleConnect = 1 -%} {% endif %} {% endfor %} {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != ” %} {{translations.ConnectFb}} {% endif %} {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != ” %} {{translations.ConnectGoogle}} {% endif %} {% else %} {% if config.External.Facebook and config.External.Facebook.AppID != ” %} {{translations.ConnectFb}} {% endif %} {% if config.External.Google and config.External.Google.ClientID != ” %} {{translations.ConnectGoogle}} {% endif %} {% endif %}

{% endif -%}

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

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

{% endif -%}

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

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

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

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

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();

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}

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}

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:

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

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

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

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

W pliku customer/registation.html wyszukaj fragment :

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

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

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

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


                    {{translations.Disconnect_Fb}}

                {% assign fbConnect = 1 -%}
            {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}


                    {{translations.Disconnect_Google}}

                {% assign googleConnect = 1 -%}
            {% endif %}
        {% endfor %}
        {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}


                {{translations.Connect_Fb}}

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


                {{translations.Connect_Google}}

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


                {{translations.Connect_Fb}}

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


                {{translations.Connect_Google}}

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

                    ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
                    {{translations.Disconnect_Fb}}

                {% assign fbConnect = 1 -%}
            {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}

                    ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
                    {{translations.Disconnect_Google}}

                {% assign googleConnect = 1 -%}
            {% endif %}
        {% endfor %}
        {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}

                ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
                {{translations.Connect_Fb}}

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

                ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
                {{translations.Connect_Google}}

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

                ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
                {{translations.Connect_Fb}}

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

                ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
                {{translations.Connect_Google}}

        {% endif %}
    {% endif %}

Pliki JavaScript

W pliku js/order.js wyszukaj elemnt :

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');

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

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

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

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

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

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:

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

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

    {{ translations.Login_Fb }}

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

    {{ translations.Login_Google }}

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

{% 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 -%}
{{translations.Reg_Fb}}
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google.ClientID != '' and config.External.Google -%}
{{translations.Reg_Google}}
{% endif -%}

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

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

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


                {{translations.Disconnect_Fb}}

            {% assign fbConnect = 1 -%}
        {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}


                {{translations.Disconnect_Google}}

            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}


            {{translations.Connect_Fb}}

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


            {{translations.Connect_Google}}

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


            {{translations.Connect_Fb}}

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


            {{translations.Connect_Google}}

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

                ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
                {{translations.Disconnect_Fb}}

            {% assign fbConnect = 1 -%}
        {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}

                ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
                {{translations.Disconnect_Google}}

            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}

            ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
            {{translations.Connect_Fb}}

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

            ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
            {{translations.Connect_Google}}

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

            ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
            {{translations.Connect_Fb}}

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

            ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
            {{translations.Connect_Google}}

    {% endif %}
{% endif %}

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

{% if usr.Authenticated == 'false' and config.External.Facebook and config.External.Facebook.AppID != '' %}
    {{ translations.Login_Fb }}
{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google and config.External.Google.ClientID != '' -%}
    {{ translations.Login_Google }}
{% endif -%}

Zamień ten fragment tym wskzazanym poniżej:

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

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

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

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

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

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ę:

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

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

         {{translations.Login_Fb}}

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

        {{translations.Login_Google}}

{% endif -%}

Zamień wspomniany fragment na ten ukazany poniżej:

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

{{translations.Login_Fb}}`

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


                {{translations.Disconnect_Fb}}

            {% assign fbConnect = 1 -%}
        {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}


                {{translations.Disconnect_Google}}

            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%}


            {{translations.Connect_Fb}}

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


            {{translations.Connect_Google}}

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


            {{translations.Connect_Fb}}

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


            {{translations.Connect_Google}}

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

                ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
                {{translations.Disconnect_Fb}}

            {% assign fbConnect = 1 -%}
        {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}

                ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
                {{translations.Disconnect_Google}}

            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%}

            ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
            {{translations.Connect_Fb}}

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

            ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
            {{translations.Connect_Google}}

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

            ![](https://static.comarchesklep.pl/files/img/Fbicon.png)
            {{translations.Connect_Fb}}

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

            ![](https://static.comarchesklep.pl/files/img/googleIcon.png)
            {{translations.Connect_Google}}

    {% endif %}
{% 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);
            }
        });
    });
}

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]);

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]);

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

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

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.

Czy ten artykuł był pomocny?

( 1 )

( 0 )

Wyślij opinie

Inne w kategorii

Wyszukiwarka zaawansowana w szablonie Topaz
-1
2099
Ustawienia paska nawigacji w szablonie Szafir
1
2273
Aktualizacja filtrów i wyszukiwarki w szablonach
-1
2669
Dodanie nowego widoku filtrów
-26
1637
Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz
0
2880
Szablon i treści wiadomości e-mail
0
3136

Społeczność Comarch

Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.

Dołącz do Społeczności Comarch

Migracja do nowszej biblioteki klienta Google

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?

Inne w kategorii

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt