Cómo incorporar el formulario de registro de Facebook con diseño a medida

Una nueva funcionalidad que incorporamos recientemente a nuestra plataforma es la de que los clientes de una tienda puedan registrarse a la misma utilizando sus cuentas de Facebook.

Ahora bien, esta funcionalidad agrega un formulario de registro a la tienda, naturalmente impactando en el diseño de la misma. Esto es lo que se agregará una vez que se haya incorporado la funcionalidad:

En este post, te enseñamos los pasos a seguir para agregar esta nueva funcionalidad mediante diseño a medida.

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

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

Paso 3

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

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

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

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

Paso 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.

Recuerda que si eres diseñador, puedes registrarte como Socio comercial de Tienda Nube y acceder así a una tienda demo para probar cómo realizar estos cambios y muchos otros. Si aún no lo has hecho, regístrate ahora.


¿Te gustó el contenido?


Laura Esper

Laura es Licenciada en Economía de la Universidad de Buenos Aires. Disfruta mucho de viajar, conocer gente nueva y comer cosas ricas. Es muy feliz trabajando como Partners Developer en Tienda Nube.


    Ecommerce por Expertos

    Conversaciones exclusivas con especialistas en comercio electrónico. ¡Llevá tu negocio a otro nivel!