Domanda ai clienti come sono venuti a conoscenza del tuo negozio
Puoi chiedere ai clienti come sono venuti a conoscenza del tuo negozio aggiungendo un campo del modulo How did you hear about us? (Come hai saputo di noi?) alla pagina del carrello.
<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>
Clicca su Salva.
Inclusione del frammento nella pagina del carrello
Per includere il frammento How did you hear about us? (Come hai saputo di noi?) nella pagina del carrello:
Nella directory Sections (Sezioni), clicca su cart-template.liquid. Se il tema non contiene cart-template.liquid, clicca su cart.liquid nella directory Modelli.
Trova il tag di chiusura </form> nel codice. Su una nuova riga sopra il tag di chiusura </form> incolla il codice seguente:
{% render 'hear-about-us' %}
Clicca su Salva.
Aggiunta delle impostazioni del tema per la configurazione
Nella directory Config, clicca su settings_schema.json.
Trova la prima parentesi graffa di chiusura }, nel codice, quindi incolla il seguente codice su una nuova riga sotto la parentesi graffa di chiusura },:
{
"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"
}
]
},
Clicca su Salva.
Come rendere il campo modulo obbligatorio
Per impedire ai clienti di procedere al check-out senza selezionare un'opzione nel campo del modulo How did you hear about us? (Come hai saputo di noi?), puoi rendere il campo obbligatorio.
Nella directory Sections (Sezioni), clicca su cart-template.liquid. Se il tema non contiene cart-template.liquid, clicca su cart.liquid nella directory Modelli.
Trova il seguente attributo novalidate nel codice del modulo del carrello:
novalidate
Sostituisci l'attributo novalidate con il seguente codice:
Nell'editor del tema clicca su Impostazioni tema nella sidebar.
Clicca sulla scheda Come hai saputo di noi.
Alla voce Form Validation (Convalida modulo), assicurati che l'impostazione Enable form validation (Abilita convalida modulo) sia abilitata.
Impostazione delle opzioni
Per personalizzare le opzioni nel menu a discesa How did you hear about us? (Come hai saputo di noi), puoi modificare le opzioni utilizzando le impostazioni del tema presenti nell'editor del tema.
Alla voce Opzioni modulo, aggiungi o rimuovi opzioni, separandole con le virgole.
Clicca su Salva.
FAQ
Dove posso visualizzare i dati acquisiti?
La risposta sarà visualizzata nel pannello di controllo, nella sezione Ulteriori dettagli dell'ordine:
Se nessuna delle opzioni elencate corrisponde alla risposta, un cliente può digitare qualcosa?
Sì, è possibile. Quando il cliente seleziona Altro, sotto il menu a discesa verrà visualizzata una casella di testo in cui potrà digitare una risposta.
Posso mostrare la risposta nelle Email con notifica di un nuovo ordine?
Sì. Per mostrare le risposte dei clienti nelle email di notifica di nuovo ordine:
Vai alla pagina Notifiche nel tuo pannello di controllo e aggiungi il seguente codice al modello di email Nuovo ordine:
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 %}.
Clicca su Salva.
Non trovi le risposte che stai cercando? Siamo qui per aiutarti.
