Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Facebook Login

O Facebook login permite que o usuário se cadastre ou faça o login em uma loja através de sua conta do Facebook.

Essa funcionalidade depende que você tenha uma Facebook ID, Caso não tenha, leia este tutorial. Para habilitar o facebook id, vá ao Administrador Nuvem > Configurações > Convigurações avançadas - Login com facebook 

Essa funcionalidade está disponível nas páginas de cadastro e login.

1. Adicione o seguinte bloco de código no arquivo layouts/layout.tpl. Certifique-se de que está colocando dentro da tag head e logo após a 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. Adicione o seguinte código Javascript no arquivo layouts/layout.tpl logo abaixo da tag 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. Adicione o seguinte código HTML no arquivo templates/account/login.tpl para mostrar o botão na página do login.

Certifique-se de que está inserindo o bloco dentro do formulário, depois da seguinte linha: <form id="login-form" ...>

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

4. Adicione o seguinte código HTML no arquivo templates/account/register.tpl para mostrar o botão na página de cadastro.

Certifique-se de que está inserindo o bloco dentro do formulário, depois da seguinte linha: <form id="login-form" ...>

{% 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. Adicione as traduções para os textos no arquivo config/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. Adicione um estilo no arquivo static/css/style.css.

Código de exemplo:

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