Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Facebook Login

Esta funcionalidad permite que usuario pueda registrarse o iniciar sesión en una tienda con a través de su cuenta de Facebook.

1. Agregar la validación para el meta property en layout.tpl  debajo del tag <meta name=”description” content=”{{ page_description }}” /> .

{% if store_fb_app_id %}
    <meta property="fb:app_id" content="{{ store_fb_app_id }}" />
{% elseif not store.has_custom_domain %}
    <meta property="fb:app_id" content="{{ fb_app.id }}" />
{% endif %}

2. Agregar el siguiente código Javascript en layout.tpl justo debajo del tag de
twig {{ social_js }}:

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


3. Agregar código HTML en login.tpl para mostrar el botón en la página de login.

Atención: En el ejemplo, el <form> no está completo. Te recomendamos copiar únicamente la parte necesaria entre el tag “if not result.facebook…” y el último “endif”, y agregarlo dentro la estructura del <form> correspondiente, al principio.

<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">


4. Agregar el código a la página de “Crear cuenta”, en register.tpl. Copia únicamente las líneas necesarias y recuerda que en este ejemplo el <form> no cierra.

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


5. Agregar los distintos idiomas para las traducciones en el archivo 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."

6. Agregar el código al CSS.

Código de ejemplo:

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

Si necesitás crear un Facebook ID para probar esto en una tienda, te invitamos a leer este tutorial.

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.