Minha Conta

O Minha Conta é o componente de Olist Ecommerce 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 Olist Ecommerce. . Caso você precise fazer esta implementação manualmente, deve-se orientar pelos seguintes passos:

1. Abra os arquivos do template da loja;
2. Acesse liquids > account.liquid;
3. 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ária 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 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.