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.

Comment avez-vous entendu parler de nous

Avertissement : cette personnalisation ne convient pas aux styles de paniers coulissants ou pop-up, et ne fonctionne que pour un page de panier (à l'URL your-store.com/cart). Si vous utilisez un panier coulissant ou pop-up, vous devrez configurer votre style de panier sur Page dans l'éditeur de thème. Ajoutez un produit au panier dans l'aperçu du thème, puis cliquez sur l'onglet Page du panier dans l'éditeur de thème afin de voir vos paramètres de panier.

Créer le champ de formulaire « Comment avez-vous entendu parler de nous ? »

Pour créer le champ de formulaire Comment avez-vous entendu parler de nous ? :

  1. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).

  2. Créez l'extrait :

    1. Nommez votre extrait hear-about-us.
    2. Cliquez sur Créer l'extrait.
  3. Dans votre nouvel extrait hear-about-us.liquid, collez le code suivant :

```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. Cliquez sur **Save** (Enregistrer).

## Insérer l’extrait dans la page de votre panier

Pour inclure l’extrait **Comment avez-vous entendu parler de nous&nbsp;?** à la page de votre panier&nbsp;:

1. 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**.

2. [Recherchez](/manual/productivity-tools/keyboard-shortcuts#find) 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&nbsp;:

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

3. Cliquez sur **Save** (Enregistrer).

## Ajouter les paramètres de thème pour la configuration

1. Dans le répertoire **Config**, cliquez sur `settings_schema.json`.

2. [Trouvez](/manual/productivity-tools/keyboard-shortcuts#find) la première accolade fermante `},` dans le code. Sur une nouvelle ligne sous l'accolade fermante `},`, collez le code suivant&nbsp;:

     `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. Cliquez sur **Save** (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&nbsp;?**, vous pouvez rendre ce champ obligatoire.

1. 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**.

2. [Trouvez](/manual/productivity-tools/keyboard-shortcuts#find) l’attribut `novalidate` suivant dans le code du formulaire de panier&nbsp;:

novalidate `` 3. Remplacez l’attributnovalidate` par le code suivant :

{% unless settings.hau_form_validation %}novalidate{% endunless %}
  1. Cliquez sur Save (Enregistrer).

  2. Dans l’éditeur de thème, cliquez sur Paramètres du thème sur la barre latérale.

  3. Cliquez sur l’onglet Entendre parler de nous.

  4. Sous Validation du formulaire, assurez-vous que le paramètre Activer la validation du formulaire est activé.

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.

  1. Dans l'éditeur de thème, cliquez sur Paramètres du thème.

  2. Cliquez sur l’onglet Entendre parler de nous.

  3. Sous Options du formulaire, ajoutez ou supprimez des options, séparées par des virgules.

  4. Cliquez sur Save (Enregistrer).

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 :

Section des détails supplémentaires d’une 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 :

  1. Allez à la page Notifications de votre interface administrateur et ajoutez le code suivant à votre modèle d’e-mail de Nouvelle commande :

    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. Cliquez sur Save (Enregistrer).

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement