Perguntar como os clientes tiveram conhecimento da loja

É possível perguntar aos clientes como eles tiveram conhecimento de sua loja adicionando um campo de formulário Como você conheceu nossa loja? na página do carrinho.

Como você conheceu nossa loja?

Criar o campo de formulário "Como você conheceu nossa loja?"

Para criar o campo de formulário Como você conheceu nossa loja?

  1. No diretório Snippets, clique em Adicionar um novo snippet de código.

  2. Crie o snippet:

    1. Nomeie o novo snippet como hear-about-us.
    2. Clique em Criar snippet de código.
  3. No novo snippet hear-about-us.liquid, cole este 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. Clique em **Salvar**.

## Incluir o snippet na página do carrinho

Para incluir o snippet **Como você conheceu nossa loja?** na página do carrinho:

1. No diretório **Seções**, clique em `cart-template.liquid`. Se o tema não incluir `cart-template.liquid`, clique em `cart.liquid` no diretório **Modelos**.

2. [Encontre](/manual/productivity-tools/keyboard-shortcuts#find) a tag de fechamento `</form>` no código. Em uma nova linha acima da tag de fechamento `</form>`, cole o seguinte código:

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

3. Clique em **Salvar**.

## Adicionar configurações de tema para definição

1. No diretório **Config**, clique em `settings_schema.json`.

2. [Localize](/manual/productivity-tools/keyboard-shortcuts#find) o primeiro colchete de fechamento `},` no código. Em uma nova linha abaixo do colchete de fechamento `},`, cole o seguinte 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. Clique em **Salvar**.

## Tornar o campo do formulário obrigatório

Para evitar que os clientes façam o checkout sem selecionar uma opção no campo **Como você conheceu nossa loja?**, faça com que ele seja obrigatório.

1. No diretório **Seções**, clique em `cart-template.liquid`. Se o tema não incluir `cart-template.liquid`, clique em `cart.liquid` no diretório **Modelos**.

2. [Localize](/manual/productivity-tools/keyboard-shortcuts#find) o atributo `novalidate` no código do formulário do carrinho:

novalidate `` 3. Substitua o atributonovalidate` pelo seguinte código:

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Clique em Salvar.

  2. No editor de temas, clique em Configurações do tema na barra lateral.

  3. Clique na aba Como você conheceu nossa loja?.

  4. Em Validação do formulário, verifique se a configuração Habilitar validação do formulário está ativada.

Definir as opções

Para personalizar as opções no menu suspenso Como você conheceu nossa loja?, use as configurações no editor de temas.

  1. No editor de temas, clique em Configurações do tema.

  2. Clique na aba Como você conheceu nossa loja?.

  3. Em Opções do formulário, é possível adicionar opções separadas por vírgulas ou removê-las.

  4. Clique em Salvar.

Perguntas frequentes

Onde é possível visualizar os dados capturados?

A resposta se encontra na seção Informações adicionais do pedido no admin:

Seção de informações adicionais de um pedido

Se nenhuma opção listada for adequada, o cliente poderá digitar a resposta?

Sim. Quando o cliente seleciona Outros, uma caixa de texto é exibida abaixo do menu suspenso para que ele possa digitar a resposta.

Posso exibir a resposta nos e-mails de notificação de Novo pedido?

Sim. Para isso, siga estas etapas:

  1. Acesse a página Notificações no admin e adicione o seguinte código ao modelo de e-mail Novo 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. Clique em Salvar.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça