Buyers Login

O Buyers Login é um componente de autenticação de clientes utilizado na página de login da loja. A implementação desse componente depende de quatro partes principais:

• Um ponto de montagem no login.liquid;
• O asset JavaScript do componente;
• A inicialização via window.Vnda.Component.BuyerLogin;
• Estilos aplicados às classes expostas pelo próprio componente.

Resumo técnico

Em uma implementação completa, o Buyers Login:

• É inicializado como window.Vnda.Component.BuyerLogin;
• É renderizado em modo static;
• Usa um container dedicado com id="buyer-login-root";
• Redireciona o cliente para /conta após login com sucesso;
• Recebe a logo da loja por storeLogo;
• Carrega um asset versionado no formato buyer-login.v[version].js.

O que precisa existir para implementar

Para implementar o Buyers Login em uma loja, você precisa garantir os seguintes elementos:

• Um arquivo login.liquid para a página de login;
• Um container onde o componente será montado;
• O carregamento do asset buyer-login;
• Um script de inicialização que chame window.Vnda.Component.BuyerLogin;
• Uma estratégia de redirecionamento após sucesso;
• Estilos para as classes CSS expostas pelo componente.

Estrutura mínima da página

O primeiro passo é reservar um ponto da página onde o componente será renderizado. Esse ponto deve existir no HTML antes da chamada de inicialização.

Exemplo mínimo:

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

  <div id="buyer-login-root"></div>
</section>

O que cada parte faz

• section.login: Organiza semanticamente a área da página de login;
• .login-header: Agrupa o título ou qualquer conteúdo introdutório;
• #buyer-login-root: É o elemento real onde o componente será injetado via JavaScript.

Sem esse container, a chamada de renderização não terá onde montar a interface.

Carregamento do asset do componente

O Buyers Login depende de um arquivo JavaScript externo do componente. Esse asset pode ser carregado por component_path, com uma versão controlada por configuração.

Exemplo:

{% assign component_version = '6' %}
{% if current_shop.settings contains 'component_version_buyer_login' %}
  {% assign settings_version = current_shop.settings.component_version_buyer_login %}
  {% if settings_version != blank %}
    {% assign component_version = settings_version %}
  {% endif %}
{% endif %}

{% body %}
  <script src="{{ 'buyer-login.v[version].js' | replace: '[version]', component_version | component_path }}"></script>
{% endbody %}

O que esse trecho resolve

• Define uma versão padrão do componente;
• Permite sobrescrever essa versão por configuração da loja;
• Monta dinamicamente o nome final do asset;
• Carrega o arquivo antes da inicialização manual.

O que é component_version_buyer_login

component_version_buyer_login é a chave usada em current_shop.settings para controlar a versão do asset carregado na página.

Exemplo de efeito prático:

• Se a configuração estiver vazia, a página usa buyer-login.v6.js;
• Se a configuração estiver com valor 2, a página usa buyer-login.v2.js.

Esse mapeamento também aparece no ecossistema de configuração do admin, onde a chave buyer-login é persistida como component_version_buyer_login.

Inicialização do componente

Depois de carregar o asset, é necessário instanciar o Buyers Login e mandar renderizar o componente dentro do container escolhido.

Exemplo:

window.addEventListener('DOMContentLoaded', () => {
  new window.Vnda.Component.BuyerLogin({
    onSuccess: () => window.location.assign('/conta'),
    mode: 'static',
    storeLogo: '{{ img_logo }}',
  }).renderPartial(document.getElementById('buyer-login-root'))
})

O que cada parâmetro faz

Parâmetro	Descrição	Valor observado
onSuccess	Callback executado após autenticação bem-sucedida.	redireciona para /conta
mode	Define o modo de renderização do componente.	static
storeLogo	URL da logo da loja exibida no componente.	{{ img_logo }}

onSuccess

É a função chamada quando o componente conclui o fluxo de autenticação com sucesso. Nesse exemplo, o callback redireciona o cliente para a página de conta:

onSuccess: () => window.location.assign('/conta')

Se a sua loja usa outra rota de conta, você deve ajustar esse destino.

mode

O componente é usado com:

mode: 'static'

Nesse modo, o Buyers Login é exibido diretamente no fluxo da página, ocupando o container onde foi renderizado. Esta é a escolha natural para login.liquid.

storeLogo

Esse parâmetro recebe a URL da logo da loja. O objetivo é permitir que o componente apresente identidade visual consistente com a vitrine.

Exemplo de obtenção da logo:

{% assign img_logo = '' %}
{% load_shop_images position: "logo" %}

{% if loaded_shop_images.size > 0 %}
  {% assign img_logo = loaded_shop_images | first | map: 'url' | first %}
{% endif %}

Se a loja não tiver logo cadastrada, o valor pode permanecer vazio.

Dependências auxiliares da página

Além do asset principal do Buyers Login, a página também pode usar um script complementar:

{% body %}
  <script src="{{ 'login.js' | javascript_path }}"></script>
{% endbody %}

Esse arquivo não inicializa o Buyers Login diretamente. Ele pode ser usado para inicializar comportamentos adicionais da própria página, como o topBar.

Exemplo:

import setTopBar from '../components/topBar';

const Login = {
  init: function () {
    setTopBar();
  },
};

window.addEventListener('DOMContentLoaded', () => {
  Login.init()
})

Ou seja: o Buyers Login pode coexistir com outros scripts da página, desde que o asset do componente e sua inicialização continuem presentes.

Estilização do componente

O Buyers Login expõe classes próprias, permitindo customização visual sem depender de alteração no HTML interno do componente.

Entre as classes observadas estão:

• .cmp-buyer-login-title
• .cmp-buyer-login-input
• .cmp-buyer-login-label
• .cmp-buyer-login-button
• .cmp-buyer-login-feedback-message
• .cmp-buyer-login-login-with-password-button
• .cmp-buyer-login-change-email
• .cmp-buyer-login-recover-password
• .cmp-buyer-login-login-with-code-button

Essas classes mostram que o componente trabalha, no mínimo, com os seguintes elementos:

• Título;
• Inputs;
• Labels;
• Botão principal;
• Mensagens de feedback;
• Ação para login com senha;
• Ação para login com código;
• Ação para trocar e-mail;
• Ação para recuperar senha.

Exemplo de personalização via SCSS

Exemplo de personalização:

.cmp-buyer-login-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #222;
  text-align: center;
}

input.cmp-buyer-login-input {
  width: 100%;
  min-height: 4.8rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid #d9d9d9;
  border-radius: 0.8rem;
}

button.cmp-buyer-login-button {
  min-height: 4.8rem;
  width: 100%;
  border: 0;
  border-radius: 0.8rem;
  background-color: #111;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.cmp-buyer-login-feedback-message {
  font-size: 1.4rem;
  color: #666;
}

a.cmp-buyer-login-recover-password,
a.cmp-buyer-login-login-with-password-button,
.cmp-buyer-login-login-with-code-button {
  color: #111;
  font-size: 1.4rem;
  text-decoration: underline;
}

Também é comum aplicar ajustes para:

• Altura e espaçamento dos inputs;
• Largura total do botão principal;
• Cor e hover de links auxiliares;
• Aparência de mensagens de feedback.

Folha de estilo da página

A página também pode carregar uma folha dedicada:

{% head %}
  <link href="pages/login_above.css" inline rel="stylesheet"/>
{% endhead %}

Esse arquivo concentra:

• O espaçamento do cabeçalho da página;
• A área visual do corpo da página de login;
• Os overrides visuais das classes do Buyers Login.

Se a sua loja organizar CSS de outra forma, o ponto importante é preservar os estilos das classes .cmp-buyer-login-*.

Fluxo completo de implementação recomendado

Uma implementação completa do Buyers Login pode seguir esta ordem:

1. O template define a versão do componente;
2. A página carrega o asset buyer-login.v[version].js;
3. A página carrega estilos da página de login;
4. O template define um container de montagem;
5. A logo da loja é resolvida, se desejado;
6. Scripts auxiliares da página são carregados, se existirem;
7. No DOMContentLoaded, o Buyers Login é instanciado;
8. O componente é renderizado dentro de #buyer-login-root;
9. Após sucesso na autenticação, o cliente é redirecionado para a rota de conta definida pelo projeto.

Exemplo completo de implementação

O trecho abaixo reúne os elementos principais necessários para a implementação:

{% assign component_version = '6' %}
{% if current_shop.settings contains 'component_version_buyer_login' %}
  {% assign settings_version = current_shop.settings.component_version_buyer_login %}
  {% if settings_version != blank %}
    {% assign component_version = settings_version %}
  {% endif %}
{% endif %}

{% head %}
  <title>Entrar - {{ current_shop.name }}</title>
  <meta content="Logar ou cadastrar para acessar a área de pedidos" name="description"/>
  <link href="pages/login_above.css" inline rel="stylesheet"/>
{% endhead %}

{% body %}
  <script src="{{ 'buyer-login.v[version].js' | replace: '[version]', component_version | component_path }}"></script>
  <script src="{{ 'login.js' | javascript_path }}"></script>
{% endbody %}

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

  <div id="buyer-login-root"></div>
</section>

{% assign img_logo = '' %}
{% load_shop_images position: "logo" %}

{% if loaded_shop_images.size > 0 %}
  {% assign img_logo = loaded_shop_images | first | map: 'url' | first %}
{% endif %}

<script>
  window.addEventListener('DOMContentLoaded', () => {
    new window.Vnda.Component.BuyerLogin({
      onSuccess: () => window.location.assign('/conta'),
      mode: 'static',
      storeLogo: '{{ img_logo }}',
    }).renderPartial(document.getElementById('buyer-login-root'))
  })
</script>

Quando usar este componente

Use o Buyers Login quando a página de login da loja for baseada no componente window.Vnda.Component.BuyerLogin, com renderização client-side em login.liquid.

Ele é especialmente adequado quando o projeto precisa:

• Centralizar o fluxo de autenticação em um componente pronto;
• Controlar a versão do asset por configuração;
• Customizar o visual por classes CSS expostas;
• Redirecionar o cliente após sucesso para a área autenticada.

🚧 Importante

O código-fonte interno do asset buyer-login.v[version].js não está presente na implementação analisada. Por isso, esta documentação descreve o contrato de integração, os parâmetros visíveis e os pontos necessários para implementação no template, sem assumir APIs internas não expostas pelo asset.

Se o projeto ainda utiliza a implementação antiga de Login e Registrar, consulte também:

• Login e Registrar
• login.liquid