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.
<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>
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:
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.
Encontre a tag de fechamento </form> no código. Em uma nova linha acima da tag de fechamento </form>, cole o seguinte código:
{% render 'hear-about-us' %}
Clique em Salvar.
Adicionar configurações de tema para definição
No diretório Config, clique em settings_schema.json.
Localize o primeiro colchete de fechamento }, no código. Em uma nova linha abaixo do colchete de fechamento },, cole o seguinte código:
{
"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"
}
]
},
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.
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.
Localize o atributo novalidate no código do formulário do carrinho:
novalidate
Substitua o atributo novalidate pelo seguinte código:
No editor de temas, clique em Configurações do tema na barra lateral.
Clique na aba Como você conheceu nossa loja?.
Em Validação do formulário, verifique se a configuração Habilitar validação do formulário está ativada.
Atenção: É possível modificar as configurações dos campos de texto Mensagem de erro e Mensagem de erro de outro campo para personalizar as mensagens de erro exibidas. Também é possível personalizar a cor do erro: basta trocar a configuração Cor em Estilo do erro.
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.
Em Opções do formulário, é possível adicionar opções separadas por vírgulas ou removê-las.
Clique em Salvar.
Atenção: Não inclua a opção Outros, pois ela é adicionada automaticamente.
Perguntas frequentes
Onde é possível visualizar os dados capturados?
A resposta se encontra na seção Informações adicionais do pedido no admin:
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:
Acesse a página Notificações no admin e adicione o seguinte código ao modelo de e-mail Novo pedido:
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 %}.
Clique em Salvar.
Não encontrou as respostas que está procurando? Estamos sempre à disposição para ajudar você.