Minha Conta

O Minha Conta é o componente de Vnda para área de cliente na loja. Com base no conteúdo deste componente o cliente pode redefinir sua senha, conferir seus pedidos e visualizar os créditos disponíveis na loja. O componente Minha Conta é nativo em todas as lojas e nesse artigo você como utilizá-lo e estilizá-lo.

📘
Demonstração do componente
Visualize como é o componente acessando o Minha Conta Demo. Recomendamos utilizar a versão mais atualizada do componente: (v31).

Implementação

O componente de Minha Conta, como todos os outros componentes, já vem implementados nos templates da VNDA. . Caso você precise fazer esta implementação manualmente, deve-se orientar pelos seguintes passos:

Abra os arquivos do template da loja;
Acesse liquids > account.liquid;
Adicione os códigos a seguir no arquivo account.liquid:

{% load_credits %}

{% head %}
  <title>Minha Conta - {{ current_shop.name }}</title>
  <meta name="description" content="Minha Conta - {{ current_shop.name }}"/>

  <link rel="stylesheet" type="text/css" href="/pages/account.css" inline>
{% endhead %}

<div class="container content">
  <section class="account">
    <p class="logout" >
      <a href="{{ logout_url }}">Sair</a>
    </p>
    <div class="boxed">
      {% component_account
        version: "v25"
        font_family: "Roboto, sans-serif" 
        spacing: 0.1 
        border_radius: 0 
        primary1_color: "#07090D" 
        primary2_color: "#07090D" 
        primary3_color: "#07090D" 
        accent1_color: "#07090D" 
        accent2_color: "#07090D" 
        accent3_color: "#07090D" 
        text_color: "#07090D" 
        secondary_text_color: "#07090D" 
        alternate_text_color: "#fff" 
        canvas_color: "#fff" 
        border_color: "#e6dbe3" 
        disabled_color: "#585858" 
        picker_header_color: "#215A60" 
        clock_circle_color: "#215A60" 
        shadow_color: "rgb(0 0 0 / 13%)" 
      %}
    </div>
  </section>
</div>

O componente de Minha conta possui uma serie de parametros que permitem adequá-lo as demandas de cada loja. Na tabela a seguir, confira a definição de cada um deles e os valores que são aceitos.

Parâmetro	Descrição	Default	Obrigatório
`version`	Define versão do componente. Utilize a versão mais recente: `v20`.	-	Sim
`font_family`	Define a família de fonte.	`sans-serif`	Não
`spacing`	Define o espaçamento dos campos.	`0.4`	Não
`border_radius`	Define o estilo da borda dos campos.	`4`	Não
`primary_color`	Define a cor primária do componente. Cor em RGB.	`#353535`	Não
`button_color`	Define a cor dos botões do componente. Cor em RGB.	`#4b5563`	Não
`text_color`	Define a cor dos textos. Cor em RGB.	`#121212`	Não
`secondary_text_color`	Define a cor secundário dos textos. Cor em RGB.	`#5A5A5A`	Não
`canvas_color`	Define a cor do canvas. Cor em RGB.	`#FFFFFF`	Não
`border_color`	Define a cor das bordas. Cor em RGB.	`#E6E6E6`	Não
`disabled_color`	Define a cor dos campos que estão desabilitados. Cor em RGB.	`#B9B9B9`	Não
`shadow_color`	Define a cor do sombreado das seções. Cor em RGB.	`#FFFFFF`	Não

Exemplo de implementação

Veja o arquivo do Minha Conta no Template1.

📘Demonstração do componente

Implementação

Exemplo de implementação

📘
Demonstração do componente