Login e Registrar

O componente Login e Registrar é o recurso utilizado pelos clientes para acessar seu espaço na loja. Com esse componente o cliente loga na vitrine (utilizando email e senha ou Facebook), solicita redefinição de senha e cadastra um novo perfil. Esse componente é nativo em todas as lojas, mas você pode adicioná-lo em um local desejado na vitrine. Confira como habilitar e configurar os parâmetros desse componente.

📘

• Visualize como é o componente acessando o Login e Registrar Demo.* Recomendamos utilizar a versão mais atualizada do componente: (v5).* Se a loja possui o módulo internacional habilitado, esse componente fica disponível também nos idiomas inglês e espanhol.

Como habilitar

Para habilitar o Login e Registrar você deve importar os arquivos JavaScript e CSS do componente no projeto. Como é um componente nativo, é possível que esses arquivos já esteja no template de sua escolha, e é preciso incluí-los uma única vez. Com os arquivos no projeto, você insere o componente onde desejar na vitrine, e também pode alterar os parâmetros do componente. Confira a seguir todos os passos para habilitar e inserir o componente em uma página.

1. Abra os arquivos do template da loja;
2. Acesse liquids > login.liquid;
3. Adicione os códigos a seguir no {% head %} e {% body %} respectivamente:

<link rel="stylesheet" href="{{ 'login.v5.css' | component_path }}">

<script src="{{ 'login.v5.js' | component_path }}"></script>

🚧

Caso seu projeto já possua os arquivos JavaScripts e CSS, desconsidere o passo 3.

4. Adicione os códigos de chamada do componente:

<div class="login-header">
  <div class="container-fluid">
    <h1 class="title">
      Conecte-se aqui
    </h1>
  </div>
</div>

<div class="login-body" data-content-login>
  <div id="component-login-static-root" data-facebook="{{ facebook_connect_url }}"></div>
</div>

6. Acesse assets > javascripts >components > vndaComponents.js;
7. Adicione o código JavaScript do componente no arquivo vndaComponents.js:

export function setLogin() {
  // Seleciona o elemento
  const root = document.querySelector('#component-login-static-root');

  // Define link para o Facebook
  let facebook_connect_url = root.getAttribute('data-facebook');

  // Inicia o componente
  window.componentLogin = {};
  window.componentLogin['static'] = new Vnda.Component.Login({
    mode: 'static',
    formProps: {
      login: {
        buttons: {
          facebook: {
            link: facebook_connect_url,
          },
        },
        hasFacebook: false,
      },
      register: {
        buttons: {
          facebook: {
            link: facebook_connect_url,
          },
        },
        hasFacebook: false,
      },
    },
  });

  // Renderiza o componente
  componentLogin['static'].render(root);
}

Confira os parâmetros do componente para configurá-lo como desejado.

Parâmetros do componente

Os parâmetros definem as características do componente Login e Registrar. Veja na tabela abaixo os parâmetros e o que eles configuram no componente. Note que os parâmetros que possuem valores padrões estão sinalizados na coluna Default, e as opções de entrada que o parâmetro pode receber estão apresentados na coluna Tipos/Opções de entrada.

Parâmetro	Descrição	Tipos/Opções de entrada	Default	Obrigatório
mode	Define como o componente é exibido.	static ou drawer	static	Não
isOpen	Define o estado inicial, quando usado modo “drawer”	true ou false	true	Não
formProps.login.buttons.facebook.link	Define a URL do botão para login via Facebook.	-	-	Não
formProps.login.hasFacebook	Habilita o login via Facebook.	true ou false	true	Não
formProps.register.buttons.facebook.link	Define a URL do botão para cadastro via Facebook.	-	-	Não
formProps.register.hasFacebook	Habilita cadastro via Facebook.	true ou false	true	Não

Exemplo de implementação

Confira foi feita a implementação do componente de login e registrar no Template1 acessando os arquivos:

• login.liquid,
• vndaComponents.js,
• login.scss