Tutorial de melhorias: login pelo Facebook

Conforme o título, o tutorial de hoje vai explicar como habilitar o login via Facebook nas lojas, possibilitando inclusive criar uma conta na loja através da rede social. Para isso, deve-se executar os seguintes passos:

Adicionar o seguinte código Javascript no layout.tpl bem abaixo de {{ social_js }} twig tag, conforme exemplo abaixo:

{% if template == 'account.login' or template == 'account.register' %}

<script type="text/javascript">

       function loginFacebook() {

           LS.facebookLogin(FB, function(status, hasEmail) {

               if (status === 'connected') {

                   if (hasEmail) {

                       window.location = "{{ store.url }}/account/facebook_login/";

                   } else {

                       $('#login-form').prepend(

         "<div class=\"st alert alert-error c\">{{ 'Tienes que compartír tu e-mail.' | translate }}</div>");

                   }

               } else {

                   $('#login-form').prepend(

                           "<div class=\"st alert alert-error c\">{{ 'Debes completar el login.' | translate }}</div>");

               }

           });

       }

       window.fbAsyncInit = function() {

           FB.init({

               version    : 'v2.2',

               cookie     : true

           });

       };

   </script>

{% endif %}

Adicione o código HTML em login.tpl para mostrar o botão para a página de login. ATENÇÃO: neste exemplo não está completo, então copie apenas o necessário entre “if not result.facebook…” e “endif”, preenchendo com sua respectiva estrutura no início. Se você não tem certeza, por favor, lembre-se de verificar as diferenças de tema para tema.

form id="login-form" class="form-horizontal" action="" method="post"> <form id="login-form" action="" method="post" class="form-horizontal">           {% if not result.facebook and result.invalid %}                <div class="col-sm-offset-4 col-sm-5">

                    <div class="st alert alert-error c">{{ 'El email o la contraseña son incorrectos.' | translate }}</div>

                </div>

            {% elseif result.facebook and result.invalid %}

                <div class="col-sm-offset-4 col-sm-5">

                    <div class="st alert alert-error c">{{ 'Hubo un problema con el login de Facebook.' | translate }}</div>

                </div>

            {% endif %}

            {% if store_fb_app_id %}

                 <div class="col-sm-offset-4 col-sm-5 c">

                    <i class="fa fa-facebook"></i>

                    <input class="button facebook" type="button" value="Facebook Login"   onclick="loginFacebook();" />

                    <span class="badge">{{ 'o' | translate }}</span>

                    <hr class="featurette-or-divider"></hr>

                </div>

                {% endif %}

                <div class="control-group">

Agora, adicione na página de criar conta (“Create Account”) o register.tpl. É basicamente o mesmo código, sendo necessário copiar apenas as linhas e lembrar que no exemplo não está completo.

form id="login-form" class="form-horizontal" action="" method="post">   <form id="login-form" action="" method="post" class="form-horizontal">    {% if result.errors.name %}         <div class="st alert alert-error c">{{ 'Debes ingresar tu nombre!' | translate }}</div>     {% endif %}

     {% if result.errors.password == 'confirmation' %}

         <div class="st alert alert-error c">{{ 'Las contraseñas no coinciden.' | translate }}</div>

     {% endif %}

    {% if store_fb_app_id %}

        <div class="col-sm-offset-4 col-sm-5 c">

            <i class="fa fa-facebook"></i>

            <input class="button facebook" type="button" value="Facebook Login" onclick="loginFacebook();" />

            <span class="badge">{{ 'o' | translate }}</span>

            <hr class="featurette-or-divider"></hr>

        </div>

    {% endif %}

Adicione os textos de idioma para traduzir no arquivo translations.txt.

es "Regístrate con Facebook"

pt "Criar conta com o Facebook"

en "Sign up with Facebook"

 

es "o"

pt "ou"

en "or"

 

es "Tienes que compartir tu e-mail."

pt "Você deve compartilhar seu e-mail."

en "You need to share your e-mail."

 

es "Debes completar el login."

pt "Você deve completar o login."

en "You must complete the login."

 

es "Hubo un problema con el login de Facebook."

pt "Ocorreu um problema fazendo login com Facebook."

en "There was a problem when login with Facebook."

Adicione o CSS; o código abaixo é apenas um exemplo. Você deve lembrar de verificar o estilo do tema como referência.

form .button.facebook {
 width: 100%;
 border-color: #3B5998;
 border-color: #263a63;
 background-color: #3B5998;
 color: #fff;
 margin: 10px 0;
 }
 form .button.facebook:hover {
 opacity: 0.9;
 border-color: #3B5998;
 border-color: #263a63;
 background-color: #3B5998;
 color: #fff;
 }
 form i.fa.fa-facebook {
 color: #fff;
 margin-top: 24px;
 margin-left: 37px;
 position: absolute;
 font-size: 25px;
 z-index: 9;
 }
 .featurette-or-divider {
 margin: -9px auto 24px auto;
 }

Dica

Se você precisar criar um ID de Facebook para testar a loja, siga os passos recomendados pela Nuvemshop.

E se você ainda não é parceiro Nuvem, mas gostaria de atender seus (E NOSSOS) clientes com uma plataforma de e-commerce completa, cadastre-se agora e conheça todos os benefícios.