Preguntar a los clientes cómo han conocido tu tienda

Puedes preguntar a tus clientes cómo han conocido tu tienda agregando un campo de formulario ¿Cómo nos has conocido? a la página de tu carrito.

Cómo nos has conocido

Crear el campo de formulario "¿Cómo nos has conocido?"

Para crear el campo de formulario ¿Cómo nos has conocido?:

  1. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.

  2. Crear el fragmento:

    1. Asigna a tu fragmento el nombre hear-about-us.
    2. Haz clic en Crear fragmento.
  3. En tu nuevo fragmento hear-about-us.liquid, pega el siguiente código:

```liquid
<style>
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us-other--label {
    font-weight: bold;
}

select#how-did-you-hear-about-us,
input#how-did-you-hear-about-us-other {
    width: 100%;
    padding: 8px 10px 8px 10px;
    line-height: 1.2;
}

#how-did-you-hear-about-us,
#how-did-you-hear-about-us-other,
#how-did-you-hear-about-us--label,
#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--label,
#how-did-you-hear-about-us-other--error {
    display:block;
    margin-bottom: 5px;
}

#how-did-you-hear-about-us-other.error,
#how-did-you-hear-about-us.error {
    border: 2px solid {{ settings.hau_error_color }};
}

#how-did-you-hear-about-us--error,
#how-did-you-hear-about-us-other--error {
    color: {{ settings.hau_error_color }};
}
</style>

<div class="form-vertical">
<p>
    <label id="how-did-you-hear-about-us--label" for="how-did-you-hear-about-us">How did you hear about us?</label>
    <span id="how-did-you-hear-about-us--error" style="display:none">{{ settings.hau_error_message }}</span>
    <select id="how-did-you-hear-about-us" name="attributes[how-did-you-hear-about-us]">
    <option value=""{% if cart.attributes.how-did-you-hear-about-us == "" %} selected{% endif %}>Please make a selection</option>
    {% assign optionsArray = settings.hau_form_options | split: ',' %}
    {% for o in optionsArray %}
    {% assign option = o | strip %}
    <option value="{{ option }}"{% if cart.attributes.how-did-you-hear-about-us == option %} selected{% endif %}>{{ option }}</option>
    {% endfor %}
    <option value="Other"{% if cart.attributes.how-did-you-hear-about-us == "Other" %} selected{% endif %}>Other</option>
    </select>
</p>
<p id="otherFormWrapper" style="{% unless cart.attributes.how-did-you-hear-about-us == 'Other' %}display:none{% endunless %}">
    <label id="how-did-you-hear-about-us-other--label" for="how-did-you-hear-about-us-other">Other</label>
    <span id="how-did-you-hear-about-us-other--error" style="display:none">{{ settings.hau_error_message_other }}</span>
    <input id="how-did-you-hear-about-us-other" type="text" name="attributes[how-did-you-hear-about-us-other]" value="{{ cart.attributes.how-did-you-hear-about-us-other }}"/>
</p>
</div>

<script>
(function() {

    document.addEventListener("DOMContentLoaded", initForm);
    document.addEventListener("shopify:section:load", initForm);

    function initForm(){

    var formElement = document.querySelector('#how-did-you-hear-about-us');
    var formError = document.querySelector('#how-did-you-hear-about-us--error');
    var otherFormElement = document.querySelector('#how-did-you-hear-about-us-other');
    var otherFormError = document.querySelector('#how-did-you-hear-about-us-other--error');
    var otherFormWrapper = document.querySelector('#otherFormWrapper');
    var checkoutButtons = document.querySelectorAll('[name="checkout"], [name="goto_pp"], [name="goto_gc"]');

    function showOrHideForm(){
        if (formElement.value == 'Other'){
        otherFormWrapper.style.display = '';
        } else {
        otherFormWrapper.style.display = 'none';
        }
    }

    function checkFormElement(){
        if (formElement.value.length == 0){
        formElement.classList.add('error');
        formError.style.display = '';
        } else {
        if (formElement.classList.contains('error')){
            formElement.classList.remove('error');
            formError.style.display = 'none';
        }
        }
    }

    function checkOtherFormElement(){
        if (otherFormElement.value.length == 0){
        otherFormElement.classList.add('error');
        otherFormError.style.display = '';
        } else {
        if (otherFormElement.classList.contains('error')){
            otherFormElement.classList.remove('error');
            otherFormError.style.display = 'none';
        }
        }
    }

    otherFormElement.addEventListener("input", function() {
        {% if settings.hau_form_validation %}
        checkOtherFormElement();
        {% endif %}
    });

    formElement.addEventListener("change", function() {
        showOrHideForm();
        {% if settings.hau_form_validation %}
        checkFormElement();
        {% endif %}
    });

    checkoutButtons.forEach(function(element){
        element.addEventListener("click", function(evt) {

        {% if settings.hau_form_validation %}
        var validated = true;
        if (formElement.value.length == 0){
            checkFormElement();
            validated = false;
        }
        if (formElement.value == 'Other'){
            if (otherFormElement.value.length == 0){
            checkOtherFormElement();
            validated = false;
            }
        }
        if (!validated) {
            evt.preventDefault();
            evt.stopPropagation();
        }
        {% endif %}
        });
    });

    }
})()
</script>
1. Haz clic en **Guardar**.

## Incluir el fragmento en tu página del carrito

Para incluir el fragmento **¿Cómo te enteraste de nosotros?** en tu página del carrito:

1. En el directorio **Secciones**, haz clic en `cart-template.liquid`. Si tu tema no incluye un `cart-template.liquid`, haz clic en `cart.liquid` en el directorio **Plantillas**.

2. [Busca](/manual/productivity-tools/keyboard-shortcuts#find) la etiqueta de cierre `</form>` en el código. En una nueva línea encima de la etiqueta de cierre `</form>`, pega el siguiente código:

     `liquid
{% render 'hear-about-us' %}
` 

3. Haz clic en **Guardar**.

## Agregar ajustes del tema para configurar

1. En el directorio **Config**, haz clic en `settings_schema.json`.

2. [Encuentra](/manual/productivity-tools/keyboard-shortcuts#find) el primer corchete de cierre `},` en el código. En una línea nueva debajo del corchete de cierre `},`, pega el siguiente código:

     `json
{
"name": "Hear About Us",
"settings": [
    {
        "type": "text",
        "id": "hau_form_options",
        "label": "Form options",
        "default": "Facebook, Twitter, Google, Instagram, Youtube",
        "info": "Separate each option with a comma"
    },
    {
        "type": "header",
        "content": "Form validation"
    },
    {
        "type": "checkbox",
        "id": "hau_form_validation",
        "label": "Enable form validation",
        "default": true
    },
    {
        "type": "text",
        "id": "hau_error_message",
        "label": "Error message",
        "info": "The error message that is displayed when no selection is made",
        "default": "Please select an option below"
    },
    {
        "type": "text",
        "id": "hau_error_message_other",
        "label": "Other field error message",
        "info": "The error message that is displayed when there is no input in the 'Other' field",
        "default": "Please fill the text field below"
    },
    {
        "type": "header",
        "content": "Error styling"
    },
    {
        "type": "color",
        "id": "hau_error_color",
        "label": "Color",
        "default": "#ff0000"
    }
]
},
` 

3. Haz clic en **Guardar**.

## Marcar el campo de formulario como obligatorio

Para evitar que los clientes pasen a la pantalla de pago sin seleccionar una opción en el campo de formulario **¿Cómo te enteraste de nosotros?**, puedes marcar el campo como obligatorio.

1. En el directorio **Secciones**, haz clic en `cart-template.liquid`. Si tu tema no incluye un `cart-template.liquid`, haz clic en `cart.liquid` en el directorio **Plantillas**.

2. [Encuentra](/manual/productivity-tools/keyboard-shortcuts#find) el siguiente atributo `novalidate` en el código del formulario del carrito:

novalidate `` 3. Reemplaza el atributonovalidate` con el siguiente código:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Haz clic en Guardar.

  2. En el editor de temas, haz clic en Configuración del tema en la barra lateral.

  3. Haz clic en la pestaña Enterarte de nosotros.

  4. En Validación del formulario, asegúrate de que la configuración Activar validación del formulario está activada.

Definir las opciones

Para personalizar las opciones en el menú desplegable ¿Cómo te enteraste de nosotros?, puedes editar las opciones usando la configuración del tema dentro del editor de temas.

  1. En el editor de temas, haz clic en Configuración del tema.

  2. Haz clic en la pestaña Enterarte de nosotros.

  3. En Opciones de formulario, agrega o elimina opciones, separadas por comas.

  4. Haz clic en Guardar.

Preguntas frecuentes

¿Dónde podré ver los datos que se capturaron?

Verás la respuesta en el panel de control, en la sección Detalles adicionales del pedido:

Sección de detalles adicionales de un pedido

Si la respuesta es una opción no publicada, ¿el cliente puede escribirla?

Sí puede. Cuando el cliente selecciona Otro, aparecerá un cuadro de texto debajo del menú desplegable, donde puede escribir una respuesta.

¿Puedo mostrar la respuesta en mis correos electrónicos de notificación de nuevos pedidos?

Sí. Para mostrar las respuestas de los clientes en tus correos electrónicos de notificación de nuevos pedidos:

  1. Ve a la página de notificaciones en el panel de control y agrega el siguiente código a tu plantilla de correo electrónico Nuevo pedido:

    liquid This customer heard about us through {% if attributes.how-did-you-hear-about-us-other == blank %}{{ attributes.how-did-you-hear-about-us }}{% else %}{{ attributes.how-did-you-hear-about-us-other }}{% endif %}.

  2. Haz clic en Guardar.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis