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
- 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