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:

  • 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 :
  • 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 != '' %}
                    
                    {% assign fbConnect = 1 -%}
                {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                    
                    {% assign googleConnect = 1 -%}
                {% endif %}
            {% endfor %}
            {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
                
            {% endif %}
            {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
                
            {% endif %}
        {% else %}
            {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
                
            {% endif %}
            {% if config.External.Google and config.External.Google.ClientID != '' %}
                
            {% 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 != '' %}
                        
                        {% assign fbConnect = 1 -%}
                    {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                        
                        {% assign googleConnect = 1 -%}
                    {% endif %}
                {% endfor %}
                {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
                    
                {% endif %}
                {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
                    
                {% endif %}
            {% else %}
                {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
                    
                {% endif %}
                {% if config.External.Google and config.External.Google.ClientID != '' %}
                    
                {% 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  -%}

{% endif -%}

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

{% if config.External.Facebook or config.External.Google  -%}
    
{% 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 != '' %}
                
                {% assign fbConnect = 1 -%}
            {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                
                {% assign googleConnect = 1 -%}
            {% endif %}
        {% endfor %}
        {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
            
        {% endif %}
        {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
            
        {% endif %}
    {% else %}
        {% if config.External.Facebook.AppID != '' and config.External.Facebook %}
            
        {% endif %}
        {% if config.External.Google.ClientID != '' and config.External.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 != '' %}
                
                {% assign fbConnect = 1 -%}
            {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
                
                {% assign googleConnect = 1 -%}
            {% endif %}
        {% endfor %}
        {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
            
        {% endif %}
        {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
            
        {% endif %}
    {% else %}
        {% if config.External.Facebook.AppID != '' and config.External.Facebook %}
            
        {% endif %}
        {% if config.External.Google.ClientID != '' and config.External.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 != '' %}

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

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

{% endif -%}
{% if usr.Authenticated == 'false' and config.External.Google.ClientID != '' and config.External.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 != '' %}
            
            {% assign fbConnect = 1 -%}
        {% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
            
            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
        
    {% endif %}
    {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
        
    {% endif %}
{% else %}
    {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
        
    {% endif %}
    {% if config.External.Google and config.External.Google.ClientID != '' %}
        
    {% 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 != '' %}
			
			{% assign fbConnect = 1 -%}
		{% elsif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
			
			{% assign googleConnect = 1 -%}
		{% endif %}
	{% endfor %}
	{% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' %}
		
	{% endif %}
	{% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' %}
		
	{% endif %}
{% else %}
	{% if config.External.Facebook and config.External.Facebook.AppID != '' %}
		
	{% endif %}
	{% if config.External.Google and config.External.Google.ClientID != '' %}
		
	{% endif %}
{% endif %}

  • W pliku partials/cart-content.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 -%}

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

Zamień wspomniany fragment na ten ukazany 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/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 != '' %}
            
            {% assign fbConnect = 1 -%}
        {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
            
            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%}
        
    {% endif %}
    {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' -%}
        
    {% endif %}
{% else %}
    {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
        
    {% endif %}
    {% if config.External.Google and config.External.Google.ClientID != '' %}
        
    {% 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 != '' %}
            
            {% assign fbConnect = 1 -%}
        {% elseif account.Service == 'Google' and config.External.Google and config.External.Google.ClientID != '' %}
            
            {% assign googleConnect = 1 -%}
        {% endif %}
    {% endfor %}
    {% if fbConnect == 0 and config.External.Facebook and config.External.Facebook.AppID != '' -%}
        
    {% endif %}
    {% if googleConnect == 0 and config.External.Google and config.External.Google.ClientID != '' -%}
        
    {% endif %}
{% else %}
    {% if config.External.Facebook and config.External.Facebook.AppID != '' %}
        
    {% endif %}
    {% if config.External.Google and config.External.Google.ClientID != '' %}
        
    {% 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 opnie