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.