account

Dentro de esta carpeta ubicamos todos los templates en relación a la cuenta del usuario en la tienda:

• address.tpl
• addresses.tpl
• info.tpl
• login.tpl
• newpass.tpl
• order.tpl
• orders.tpl
• register.tpl
• reset.tpl

Cada uno de estos templates usa el mismo embed para mostrar el título de la página, el cual incluye a los breadcrumbs. Debajo está el ejemplo para la página de Login:

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

address.tpl

Este template lo usamos para mostrar la página donde el usuario puede actualizar los datos de su dirección de entrega principal o agregar una nueva dirección de entrega.

Este formulario, incluido a través de un embed, incluye:

• Un input para un nombre
• Un input para la dirección (para tiendas que no son de Brasil este campo incluye la calle y el número o altura)
• Un input para el número de la calle (solo en tiendas de Brasil)
• Un input para el número de piso (solo en tiendas de Brasil)
• Un input para la localidad (solo en tiendas de Brasil)
• Un input para el código postal
• Un input para la ciudad
• Un input para la provincia o estado
• Un input para el país
• Un input para un teléfono

Todos los inputs son obligatorios y cada uno incluye su mensaje de error en caso de enviar el formulario sin completarlo.

addresses.tpl

Es la pantalla en la cual el usuario puede ver todas las direcciones de entrega que tiene guardadas en su cuenta, cada una con un link para poder editar y la posibilidad de convertirla en “principal”, lo que hace que sea la dirección por defecto elegida cuando el usuario llega al checkout.

Además de esto, incluye un botón para agregar una nueva dirección. Tanto este botón como los links para editar llevan al address.tpl

Para listar todas las direcciones usamos el siguiente for:

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

Dentro del cual preguntamos de la siguiente forma para saber cual es la dirección principal:

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

info.tpl

Dentro de esta pantalla el usuario puede ver su información personal, agregada cuando se registra desde register.tpl. 

A esta página puede llegar haciendo click en el link de “Editar mis datos” desde orders.tpl

El formulario incluye un campo para actualizar el nombre, otro para el email y un último para el teléfono (opcional).

Cada input obligatorio tiene su propio mensaje de error en caso de estar vacío al momento de enviar el formulario. 

login.tpl

Como su nombre indica, este template muestra la página donde el usuario puede loguearse con una cuenta ya creada.

Dentro contiene un formulario, agregado usando un embed, con su propio submit. 

A su vez el formulario usa un input para el campo email, otro para la contraseña (que debajo muestra un link para ayudar a los usuarios que olvidaron su contraseña) y el mensaje de error cuando un dato incorrecto es ingresado.

Por otro lado incluye el snipplet facebook-login.tpl que muestra el botón para loguearse usando Facebook.

{% 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 muestra un formulario para poder resetear la contraseña. El usuario llega acá a partir del email enviado desde reset.tpl.

Incluye dos campos, para agregar la nueva contraseña y repetirla; y luego el botón para enviar.

Si las contraseñas no coinciden se muestra un mensaje de error.

order.tpl

Este es el detalle de la compra, a la cual se llega desde orders.tpl haciendo click en el número de orden.

Dentro de esta pantalla se muestra:

• Número de orden, con un link al detalle de esa compra
• Fecha en la cual se hizo la compra
• Estado de la compra: Abierto, cerrado o cancelado.
• Estado del pago: Pendiente, autorizado, pagado, cancelado, reintegrado o abonado
• Medio de pago usado
• Estado del envío: Envíado o no enviado
• Dirección de entrega
• Detalles de la orden:
  • Imagen de los productos
  • Nombre de los productos
  • Precio de los productos
  • Cantidad de los productos
  • Medio y costo de envío
  • Costo total de la compra 
  • Un link para realizar el pago que lleva a completar el checkout en caso de no haber finalizado la compra. 

orders.tpl

Acá mostramos las compras hechas por el usuario en la tienda. Cada compra se muestra en un listado que tiene :

• Número de orden, con un link al detalle de esa compra
• Fecha en la cual se hizo la compra
• Estado de la compra: Abierto, cerrado o cancelado.
• Estado del pago: Pendiente, autorizado, pagado, cancelado, reintegrado o abonado
• Estado del envío: Envíado o no envíado
• Un link para realizar el pago que lleva a completar el checkout en caso de no haber finalizado la compra, o a la página con el detalle del estado de la compra de haber finalizado la misma.

Por otro lado también muestra la información principal del usuário:

Datos personales:

• Nombre
• Email
• CPF/CNPJ (solo en Brasil)
• Teléfono
• Un link para editar estos datos que lleva a info.tpl

Dirección de entrega principal (los datos están listados en address.tpl) con un link para editarla que lleva a addresses.tpl

register.tpl

Este template muestra el formulario de registro de un usuario en la tienda. 

Similar a login.tpl, usa un formulario con un embed que dentro contiene:

• El snipplet para el login de Facebook, facebook-login.tpl
• Un input para agregar un nombre
• Un input para agregar un email
• Un input para agregar un teléfono (opcional)
• Un input para agregar una contraseña
• Un input para agregar repetir la contraseña ingresada
• Un submit

Cada input obligatorio incluye su mensaje de error en caso de enviar el formulario sin completarlo.

reset.tpl

En este archivo está el formulario para poder resetear la contraseña de una cuenta, al cual se accede desde un link en login.tpl 

Es bastante simple, solo tiene un campo obligatorio que es el email del usuario (que incluye un mensaje de error o de éxito luego de enviar hacer click en el submit). 

Una vez enviado el formulario, le llegará un email al usuario con un link a la página para generar una nueva contraseña, dentro de newpass.tpl