contact.tpl

Como la mayoría de los templates, este archivo comienza con el snipplet page-header.tpl para mostrar los breadcrumbs y el título que en este caso es “Contacto”

{% embed "snipplets/page-header.tpl" %}
    {% block page_header_text %}{{ "Contacto" | translate }}{% endblock page_header_text %}
{% endembed %}

La estructura del cuerpo principal en el theme Base se encuentra centrada. Primero llamamos a los links de contacto: email, teléfono, whatsapp, dirección,  a través del snipplet contact-link.tpl:

{% include "snipplets/contact-links.tpl"  %}

Luego contamos con el formulario que tiene 2 modalidades.

• Contacto accediendo desde el link en el menú o mediante la url (basetheme.mitiendanube.com/contacto/)
  En este caso, el formulario de contacto va a ser simple, con los campos de nombre, email, telefono y mensaje.
• Contacto por producto, accediendo desde un producto sin stock haciendo clic en “Consultar” o “Consultar precio”
  Cuando accedemos a la página de contacto de esta manera, antes del formulario aparece un mensaje de “Usted está consultando por el siguiente producto:” y el nombre, link e imagen del producto en cuestión.
  El formulario es igual, pero al administrador de la tienda, le llega el mensaje con el producto por el cual se realiza la consulta.

Antes del embed del formulario, tenemos los mensajes que le notifican al usuario si el mensaje de envío de forma satisfactoria o existió algún problema.

{% if product %}  
    <div> 
        <p>{{ "Usted está consultando por el siguiente producto:" | translate }} </br> {{ product.name | a_tag(product.url) }}</p>
        <img src="{{ product.featured_image | product_image_url('thumb') }}" title="{{ product.name }}" alt="{{ product.name }}" />
    </div>
{% endif %}    
{% if contact %}
    {% if contact.success %}
        <div class="alert alert-success">{{ "¡Gracias por contactarnos! Vamos a responderte apenas veamos tu mensaje." | translate }}</div>
    {% else %}
        <div class="alert alert-danger">{{ "Necesitamos tu nombre y un email para poder responderte." | translate }}</div>
    {% endif %}
{% endif %}    
                
{% embed "snipplets/forms/form.tpl" with{form_id: 'contact-form', form_custom_class: 'js-winnie-pooh-form', form_action: '/winnie-pooh', submit_name: 'contact', submit_text: 'Enviar' | translate } %}
    {% block form_body %}

    {# Hidden inputs used to send attributes #}

        <div class="winnie-pooh hidden">
            <label for="winnie-pooh">{{ "No completar este campo" | translate }}:</label>
            <input type="text" id="winnie-pooh" name="winnie-pooh">
        </div>
        <input type="hidden" value="{{ product.id }}" name="product"/>
        <input type="hidden" name="type" value="contact" />


        {# Name input #}
        {% embed "snipplets/forms/form-input.tpl" with{input_for: 'name', type_text: true, input_name: 'name', input_id: 'name', input_label_text: 'Nombre' | translate } %}
        {% endembed %}


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


        {# Phone input #}
        {% embed "snipplets/forms/form-input.tpl" with{input_for: 'phone', type_tel: true, input_name: 'phone', input_id: 'phone', input_label_text: 'Teléfono' | translate } %}
        {% endembed %}


        {# Message textarea #}
{% embed "snipplets/forms/form-input.tpl" with{text_area: true, input_for: 'message', input_name: 'message', input_id: 'message', input_rows: '7', input_label_text: 'Mensaje' | translate } %}
        {% endembed %}

    {% endblock %}
{% endembed %}