Demander comment les clients ont entendu parler de votre boutique
Vous pouvez demander à vos clients comment ils ont entendu parler de votre boutique en ajoutant un champ Comment avez-vous entendu parler de nous ? au formulaire de votre page de panier.
<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>
Cliquez sur Enregistrer.
Insérer l’extrait dans la page de votre panier
Pour inclure l’extrait Comment avez-vous entendu parler de nous ? à la page de votre panier :
Dans le répertoire Sections, cliquez sur cart-template.liquid. Si votre thème n'inclut pas de cart-template.liquid, cliquez sur cart.liquid dans le répertoire Modèles.
Recherchez la balise de fermeture </form> dans le code. Sur une nouvelle ligne juste au-dessus de la balise de fermeture </form>, collez le code suivant :
{% render 'hear-about-us' %}
Cliquez sur Enregistrer.
Ajouter les paramètres de thème pour la configuration
Dans le répertoire Config, cliquez sur settings_schema.json.
Recherchez la première accolade fermante }, dans le code. Sur une nouvelle ligne sous l'accolade fermante },, collez le code suivant :
{
"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"
}
]
},
Cliquez sur Enregistrer.
Rendre le champ du formulaire obligatoire
Pour empêcher les client(e)s de passer à la page de paiement sans sélectionner d’option dans le champ du formulaire Comment avez-vous entendu parler de nous ?, vous pouvez rendre ce champ obligatoire.
Dans le répertoire Sections, cliquez sur cart-template.liquid. Si votre thème n'inclut pas de cart-template.liquid, cliquez sur cart.liquid dans le répertoire Modèles.
Recherchez l’attribut novalidate suivant dans le code du formulaire de panier :
novalidate
Remplacez l’attribut novalidate par le code suivant :
Dans l’éditeur de thème, cliquez sur Paramètres du thème sur la barre latérale.
Cliquez sur l’onglet Entendre parler de nous.
Sous Validation du formulaire, assurez-vous que le paramètre Activer la validation du formulaire est activé.
Remarque : vous pouvez personnaliser les messages d’erreur affichés en modifiant les paramètres du champ de texte Message d’erreur et Autre message d’erreur du champ. Vous pouvez également personnaliser la couleur de l’erreur en modifiant le paramètre Couleur sous Style d’erreur.
Configurer ses options
Pour personnaliser les options dans le menu déroulant Comment avez-vous entendu parler de nous ? Vous pouvez modifier les options à l’aide des paramètres du thème dans l’éditeur de thème.
Sous Options du formulaire, ajoutez ou supprimez des options, séparées par des virgules.
Cliquez sur Enregistrer.
Remarque : n’incluez pas l’option Autre, car elle sera ajoutée automatiquement.
FAQ
Où vais-je voir les données saisies ?
Vous verrez la réponse dans l’interface administrateur, dans la section Informations supplémentaires de la commande :
Si aucune option répertoriée ne représente une réponse possible, un(e) client(e) peut-il/elle saisir un autre contenu ?
Oui, cela est possible. Lorsque le/la client(e) sélectionne Autre, une zone de texte dans laquelle il/elle peut taper une réponse s’affiche sous le menu déroulant.
Puis-je afficher la réponse dans mes e-mails de notification de nouvelle commande ?
Oui. Pour afficher les réponses des client(e)s dans vos e-mails de notification de nouvelle commande :
Allez à la page Notifications de votre interface administrateur et ajoutez le code suivant à votre modèle d’e-mail de Nouvelle commande :
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 %}.
Cliquez sur Enregistrer.
Vous ne trouvez pas les réponses que vous recherchez ? Nous sommes là pour vous aider.
