Tutorial de melhorias: login de 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 Nuvem Shop.
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.
O que você achou desse conteúdo?
