account

Dentro desta pasta, localizamos todos os templates em relação à conta do usuário na loja:

  • Address.tpl
  • Addresses.tpl
  • Info.tpl
  • Login.tpl
  • Newpass.tpl
  • Order.tpl
  • Orders.tpl
  • Register.tpl
  • Reset.tpl

Cada um desses templates usa o mesmo embed para exibir o título da página, que inclui os breadcrumbs. Abaixo está o exemplo da página de login:

{% embed "snipplets/page-header.tpl" %}
    {% block page_header_text %}{{ 'Iniciar sesión' | translate }}{% endblock page_header_text %}
{% endembed %}

address.tpl

Usamos esse template para exibir a página na qual o usuário pode atualizar as informações do endereço de entrega principal ou adicionar um novo endereço de entrega.

Este formulário, incluído através de um embed, inclui:

  • Um input para um nome
  • Um input para o endereço (para lojas não brasileiras, esse campo inclui a rua e o número ou a altura)
  • Um input para o número da rua (somente em lojas no Brasil)
  • Um input para o número do andar (somente em lojas no Brasil)
  • Um input para a localidade (somente em lojas no Brasil)
  • Um input para o CEP
  • Um input para a cidade
  • Um input para a província ou estado
  • Um input para o país
  • Um input para um telefone

Todas as entradas são obrigatórias e cada uma inclui sua mensagem de erro no caso de enviar o formulário sem preenchê-lo.

addresses.tpl

É a tela em que o usuário pode ver todos os endereços de entrega que ele salvou em sua conta, cada um com um link para poder editar e a possibilidade de transformá-lo no “principal”, o que faz dele o endereço padrão escolhido quando o usuário chega ao checkout.

Além disso, inclui um botão para adicionar um novo endereço. Este botão e links para editar levam ao address.tpl

Para listar todos os endereços, usamos o seguinte for:

{% for address in customer.addresses %}
{% endfor %}

Dentro do qual pedimos o seguinte para saber qual é o endereço principal:

{% if address.main %} 
{% endif %}

info.tpl

Dentro desta tela o usuário pode ver suas informações pessoais, adicionadas ao se cadastrar no register.tpl

Você pode acessar esta página clicando no link "Editar meus dados" em orders.tpl

O formulário inclui um campo para atualizar o nome, outro para o email e um último para o telefone (opcional).

Cada input obrigatório tem sua própria mensagem de erro se estiver vazio quando o formulário for enviado.

login.tpl

Como o nome indica, este template mostra a página em que o usuário pode efetuar login com uma conta já criada.

Dentro dele contém um formulário, usando uma embed, com seu próprio submit.

Por sua vez, o formulário usa um input para o campo de email, outro para a senha (abaixo mostra um link para ajudar os usuários que esqueceram sua senha) e a mensagem de erro quando um dado incorreto é inserido.

{% embed "snipplets/forms/form.tpl" with{form_id: 'login-form', submit_text: 'Iniciar sesión' | translate } %}
    {% block form_body %}

        {# Facebook login #}

        {% include 'snipplets/facebook-login.tpl' %}

        {# Name input #}

        {% embed "snipplets/forms/form-input.tpl" with{input_for: 'email', type_email: true, input_value: result.email, input_name: 'email', input_label_text: 'Email' | translate } %}
        {% endembed %}

        {# Password input #}

        {% embed "snipplets/forms/form-input.tpl" with{input_for: 'password', type_password: true, input_name: 'password', input_help: true, input_help_link: store.customer_reset_password_url, input_label_text: 'Contraseña' | translate } %}
            {% block input_help_text %}{{ '¿Olvidaste tu contraseña?' | translate }}{% endblock input_help_text %}
        {% endembed %}
    {% endblock %}
{% endembed %}

newpass.tpl

Esta página mostra um formulário para redefinir a senha. O usuário chega aqui do email enviado pelo reset.tpl.

Inclui dois campos, para adicionar a nova senha e repeti-la; e depois o botão para enviar.

Se as senhas não corresponderem, uma mensagem de erro será exibida.

order.tpl

Este é o detalhe da compra, que é alcançado a partir de orders.tpl, clicando no número do pedido.

Esta tela mostra:

  • Número do pedido, com um link para o detalhe dessa compra
  • Data em que a compra foi feita
  • Status de compra: aberto, fechado ou cancelado.
  • Status do pagamento: pendente, autorizado, pago, cancelado, reembolsado ou pago
  • Meios de pagamento usados
  • Status de envio: enviado ou não enviado
  • Endereço de entrega
  • Detalhes da orden:
    • Imagem de produtos
    • Nome dos produtos
    • Preço dos produtos
    • Quantidade dos produtos
    • Médio e custo de envio
    • Custo total de compra
  • Um link para efetuar o pagamento que leva à conclusão do checkout, caso você não tenha concluído a compra.

orders.tpl

Aqui mostramos as compras feitas pelo usuário na loja. Cada compra é mostrada em uma lista que possui:

  • Número do pedido, com um link para o detalhe dessa compra
  • Data em que a compra foi feita
  • Status de compra: aberto, fechado ou cancelado.
  • Status do pagamento: pendente, autorizado, pago, cancelado, reembolsado ou pago
  • Status de envio: enviado ou não enviado
  • Um link para efetuar o pagamento que leva à conclusão do checkout, caso você não tenha concluído a compra ou para a página com os detalhes do status de compra de ter concluído a compra.

Por outro lado, também mostra as principais informações do usuário:

Dados pessoais:

  • Nome
  • Email
  • CPF/CNPJ (solo en Brasil)
  • Número de telefone
  • Um link para editar esses dados que leva a info.tpl

Endereço de entrega principal (os dados estão listados em address.tpl) com um link para editá-lo que leva a addresses.tpl.

register.tpl

Este template mostra o formulário de registro de um usuário na loja.

Semelhante ao login.tpl, use um formulário com um embed que contenha:

  • Um input para adicionar um nome
  • Um input para adicionar um email
  • Um input para adicionar um telefone (opcional)
  • Um input para adicionar uma senha
  • Um input para repetir a senha digitada
  • Um submit

Cada input obrigatório inclui sua mensagem de erro se você enviar o formulário sem concluí-lo.

reset.tpl

Neste arquivo é o formulário para poder redefinir a senha de uma conta, que é acessada a partir de um link no login.tpl

É bem simples, tem apenas um campo obrigatório que é o e-mail do usuário (que inclui um erro ou mensagem de sucesso após o envio, clique no submit).

Uma vez que o formulário foi enviado, o usuário receberá um email com um link para a página para gerar uma nova senha, dentro do newpass.tpl