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.
Su questa pagina
Creazione del campo del modulo "How did you hear about us?" (Come hai saputo di noi?)
Per creare il campo del modulo How did you hear about us? (Come hai saputo di noi?):
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
Crea il frammento:
Nel nuovo frammento
hear-about-us.liquid
incolla il codice seguente:
<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>
- 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 Sezioni, clicca su
cart-template.liquid
. Se il tema non contienecart-template.liquid
, clicca sucart.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 Sezioni, clicca su
cart-template.liquid
. Se il tema non contienecart-template.liquid
, clicca sucart.liquid
nella directory Modelli.Trova il seguente attributo
novalidate
nel codice del modulo del carrello:
novalidate
- Sostituisci l'attributo
novalidate
con il seguente codice:
{% unless settings.hau_form_validation %}novalidate{% endunless %}
Clicca su Salva.
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.
Nell'editor del tema clicca su Impostazioni tema.
Clicca sulla scheda Come hai saputo di noi.
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.