Dans cet article, nous continuons d’explorer la personnalisation du code de votre thème, dans le cadre d’options relatives à la communication avec vos clients.

Aujourd’hui, deux fonctions très intéressantes : l’ajout d’un formulaire pour que le client soit notifié lorsqu’un produit indisponible est de nouveau en stock, et celui d’un formulaire pour savoir comment il a découvert votre boutique.

 

1/ Le formulaire de notification « back in stock ».

 

Avec ce type de formulaire, vous donnez la possibilité à vos clients de demander à être informés lorsqu’un produit indisponible est de nouveau disponible dans votre boutique.

Quand un client utilise le formulaire pour soumettre son adresse email, vous en êtes informé et pouvez donc tenir votre client au courant, dès que le produit est de retour à la vente.

Note importante : quand un produit contient des variantes, il faut que toutes les variantes soient épuisées pour que ce formulaire apparaisse.

Pour contourner ce paramètre par défaut et gérer le formulaire variante par variante, vous devez utiliser une app. Rendez-vous dans l’App Store de Shopify pour en savoir plus : https://apps.shopify.com/search/query?utf8=%E2%9C%93&q=in+stock

Ensuite, notez aussi que les manipulations qui suivent sont différentes selon que votre thème fonctionne avec des sections ou pas. Je vous renvoie vers les tutos d’introduction à la fonction « Themes » pour en savoir plus.

 

  • 1- Thèmes avec sections

Suivez les manipulations suivantes :

    • Vérifiez (et changez éventuellement) l’adresse de destination des notifications.

Quand un client remplit le formulaire, vous allez recevoir toutes les soumissions à l’adresse indiquée dans la section « Customer email » de votre page « Settings/General ».

Si vous souhaitez recevoir ces emails à une autre adresse que votre adresse d’administration principale, pensez à bien vérifier ce réglage.

    • Ajoutez le code du formulaire de notification à votre thème.
      • Rendez-vous dans la page HTML/CSS de votre thème actif.
      • Ouvrez la catégorie « Sections » et cliquez sur le fichier « product-template.liquid » pour en ouvrir l’éditeur de code.
      • Trouvez la balise d’ouverture <form>.

Le code qui la contient va ressembler à ceci :

<form action= »/cart/add » method= »post » enctype= »multipart/form-data »>

      • Encadrez la balise avec des tags conditionnels Liquid, sur une ligne avant et une ligne après.

Concrètement, vous devez obtenir un code qui ressemble à ceci :

{% if product.available %}

<form action= »/cart/add » method= »post » enctype= »multipart/form-data »>

{% endif %}

      • Trouvez ensuite la balise de fermeture correspondante </form> et procédez de même

Concrètement, vous devez obtenir un code qui ressemble à ceci :

{% if product.available %}

</form>

{% endif %}

      • Ensuite, trouvez le titre de produit dans le code en cherchant {{ product.title }}.

Sur une nouvelle ligne en dessous de la ligne de code qui contient ce titre, collez le code suivant :

{% unless product.available %}

<div id= »sold-out »>

  {% form ‘contact’ %}

    {% if form.posted_successfully? %}

    <p class= »accent-text »>Thanks! We will notify you when this product becomes available!

 

    {% else %}

    <p>Click <a id= »notify-me » href= »# »><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.

 

    {% endif %}

    {% if form.errors %}

    <div class= »error feedback accent-text »>

      <p>Please provide a valid email address.

 

    </div>

    {% endif %}

    {% unless form.posted_successfully? %}

    <div id= »notify-me-wrapper » class= »clearfix » style= »display:none »>

      {% if customer %}

      <input type= »hidden » name= »contact[email] » value= »{{ customer.email }} » />

      {% else %}

      <input style= »float:left; width:180px; » required= »required » type= »email » name= »contact[email] » placeholder= »your@email.com » class= »styled-input{% if form.errors contains ’email’ %} error{% endif %} » value= »{{ contact.fields.email }} » />

      {% endif %}

      <input type= »hidden » name= »contact[body] » value= »Please notify me when {{ product.title | escape }} becomes available. » />

      <input style= »float:left; margin-left:5px; » class= »btn styled-submit » type= »submit » value= »Send » />        

    </div>

    {% endunless %}

  {% endform %}

</div>

{% endunless %}

      • Vous pouvez faire des tests en plaçant le code à divers endroits du fichier, afin de voir quel placement rend le mieux.
      • Sauvegardez.
      • Dans le dossier « Assets », cliquez sur le fichier « theme.js » ou « theme.js.liquid » pour ouvrir son éditeur de code.
      • Tout en bas de ce fichier, collez le code suivant :

jQuery(‘#notify-me’).click(function() {

 

jQuery(‘#notify-me-wrapper’).fadeIn();          

 

return false;

} );

      • Sauvegardez vos changements.

 

  • 2- Thèmes sans sections

Suivez les manipulations suivantes :

    • Vérifiez (et changez éventuellement) l’adresse de destination des notifications

Les informations données pour le thème avec sections sont à reprendre de la même manière.

    • Ajoutez le code du formulaire de notification à votre thème
      • Rendez-vous dans la page HTML/CSS de votre thème actif.
      • Ouvrez la catégorie « Sections » et cliquez sur le fichier « product.liquid » pour en ouvrir l’éditeur de code.
      • Trouvez la balise d’ouverture <form>.

Le code qui la contient va ressembler à ceci :

<form action= »/cart/add » method= »post » enctype= »multipart/form-data »>

      • Encadrez la balise avec des tags conditionnels Liquid, sur une ligne avant et une ligne après.

Concrètement, vous devez obtenir un code qui ressemble à ceci :

{% if product.available %}

<form action= »/cart/add » method= »post » enctype= »multipart/form-data »>

{% endif %}

      • Trouvez ensuite la balise de fermeture correspondante </form> et procédez de même

Concrètement, vous devez obtenir un code qui ressemble à ceci :

{% if product.available %}

</form>

{% endif %}

      • Ensuite, trouvez le titre de produit dans le code en cherchant {{ product.title }}.

Sur une nouvelle ligne, en dessous de la ligne de code, qui contient ce titre, collez le code suivant :

{% unless product.available %}

<div id= »sold-out »>

  {% form ‘contact’ %}

    {% if form.posted_successfully? %}

    <p class= »accent-text »>Thanks! We will notify you when this product becomes available!

 

    {% else %}

    <p>Click <a id= »notify-me » href= »# »><strong>here</strong></a> to be notified by email when {{ product.title }} becomes available.

 

    {% endif %}

    {% if form.errors %}

    <div class= »error feedback accent-text »>

      <p>Please provide a valid email address.

 

    </div>

    {% endif %}

    {% unless form.posted_successfully? %}

    <div id= »notify-me-wrapper » class= »clearfix » style= »display:none »>

      {% if customer %}

      <input type= »hidden » name= »contact[email] » value= »{{ customer.email }} » />

      {% else %}

      <input style= »float:left; width:180px; » required= »required » type= »email » name= »contact[email] » placeholder= »your@email.com » class= »styled-input{% if form.errors contains ’email’ %} error{% endif %} » value= »{{ contact.fields.email }} » />

      {% endif %}

      <input type= »hidden » name= »contact[body] » value= »Please notify me when {{ product.title | escape }} becomes available. » />

      <input style= »float:left; margin-left:5px; » class= »btn styled-submit » type= »submit » value= »Send » />        

    </div>

    {% endunless %}

    <script>

    jQuery(‘#notify-me’).click(function() {

      {% if customer %}

      jQuery(‘#sold-out form’).submit();

      {% else %}           

      jQuery(‘#notify-me-wrapper’).fadeIn();          

      {% endif %}

      return false;

    } );

    </script>

  {% endform %}

</div>

{% endunless %}

      • Vous pouvez faire des tests en plaçant le code à divers endroits du fichier, afin de voir quel placement rend le mieux.
      • Sauvegardez vos changements.

Voilà pour cette personnalisation.

 

2/ Le formulaire de feed-back client

 

Il est intéressant que vous puissiez ajouter un formulaire du type « Comment avez-vous entendu parler de nous ? » dans la page de panier.

Encore une fois, la manipulation dans le code est différente selon que votre thème fonctionne ou pas avec des sections.

 

  • 1- Thèmes avec sections

Attention, ce type de formulaire ne peut être ajouté que sur la page fixe de panier, à l’adresse /cart, et pas sur les paniers dynamiques de type popup ou tiroir.

N’oubliez pas de régler correctement ce paramètre, via votre « Theme store » (Section « Cart page » et paramètre « Cart type » réglé sur « Page »).

De plus, seul le panier est utilisable, à l’exclusion des pages de validation de commande.

Pour mettre en place votre formulaire, suivez ces étapes :

    • Créez le formulaire « Comment avez-vous entendu parler de nous ? »

Attention, le thème Debut doit être traité selon une manipulation spécifique, traitée un peu plus loin.

      • Rendez-vous dans la page HTML/CSS de votre thème actif.
      • Ouvrez la catégorie « Snippets »
      • Cliquez sur « Add a new snippet ».
      • Nommez votre nouveau snippet « hear-about-us », sans les guillemets (vous pouvez lui donner un autre nom, mais il faudra appliquer les bonnes correspondances, plus loin).
      • Dans l’éditeur de ce nouveau snippet, collez le code à récupérer ici.
      • Revenez dans la page HTML/CSS de votre thème, dans le dossier « Sections », et cliquez sur le fichier « cart-template.liquid ».
      • Incluez votre snippet où vous le souhaitez dans la page de panier, en vous assurant qu’il se trouve bien entre les balises <form> et </form> du code.

Le snippet doit être inséré sous la forme :

   {% include ‘hear-about-us’ %}

      • Sauvegardez vos changements
    • Créez le formulaire « Comment avez-vous entendu parler de nous ? », si vous utilisez le thème Debut
      • Rendez-vous dans la page HTML/CSS de votre thème actif.
      • Ouvrez la catégorie « Snippets »
      • Cliquez sur « Add a new snippet ».
      • Nommez votre nouveau snippet « hear-about-us », sans les guillemets (vous pouvez lui donner un autre nom, mais il faudra appliquer les bonnes correspondances, plus loin).
      • Dans l’éditeur de ce nouveau snippet, collez le code suivant :

{% assign choices = « Facebook, Twitter, Google, Best Toys Bulletin, John Doe » %}

{% assign required = true %}

 

<div class= »form-vertical »>

  <p>

    <label for= »how-did-you-hear-about-us »>How did you hear about us?

    <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

      {% assign optionsArray = choices | 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 }}

      {% endfor %}

      <option value= »Other »{% if cart.attributes.how-did-you-hear-about-us == « Other » %} selected{% endif %}>Other

    </select>

  </p>

  <p style= »{% unless cart.attributes.how-did-you-hear-about-us == ‘Other’ %}display:none;{% endunless %} »>

    <label for= »how-did-you-hear-about-us-other »>Other:</label>

    <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>

      • Ensuite, dans le dossier « Assets », ouvrez le fichier « theme.js ».
      • En bas de l’éditeur de code, ajoutez le code suivant :

jQuery(function($) {

$(‘#how-did-you-hear-about-us’).change(function() {

if ($(‘#how-did-you-hear-about-us’).val() == ‘Other’) {

  $(‘#how-did-you-hear-about-us-other’).parent(‘p’).show();

} else {

  $(‘#how-did-you-hear-about-us-other’).val( »).parent(‘p’).hide();

}

});

if ($(« #ans »).val() == ‘true’ ) {

$(‘[name= »checkout »], [name= »goto_pp »], [name= »goto_gc »]’).click(function() {

var validated = true;

if ($(‘#how-did-you-hear-about-us’).val() ==  ») {

  validated = false;   

}

else if ($(‘#how-did-you-hear-about-us’).val() == ‘Other’) {

  if ($(‘#how-did-you-hear-about-us-other’).val() ==  ») {

    validated = false;

    $(‘#how-did-you-hear-about-us-other’).addClass(‘error’);

  }

}

if(validated){

  $(this).submit();

}

else{

  alert(« Please tell us how you heard about us. »);

  return false;

}

});

}

});

      • Revenez dans la page HTML/CSS de votre thème, dans le dossier « Sections », et cliquez sur le fichier « cart-template.liquid ».
      • Incluez votre snippet où vous le souhaitez dans la page de panier, en vous assurant qu’il se trouve bien entre les balises <form> et </form> du code.

Le snippet doit être inséré sous la forme :

   {% include ‘hear-about-us’ %}

      • Sauvegardez vos changements

 

 

    • Configurez vos options

Dans le snippet que vous avez créé (« hear-about-us »), vous pouvez éditer la première ligne de code pour y faire figurer vos propres options.

Vous pouvez noter autant d’options que vous le souhaitez, du moment qu’elles sont bien séparées par des virgules.

La portion à modifier est la suivante, où vous pouvez remplacer les termes Facebook, Twitter, etc.) :

{% assign choices = « Facebook, Twitter, Google, Best Toys Bulletin, John Doe » %}

Remarque : n’utilisez pas l’option « autre », qui est déjà incluse dans le code lui-même.

 

    • Configurez l’aspect facultatif du formulaire

Par défaut, le code de ce formulaire inclut déjà un script de validation obligatoire.

Si vous souhaitez rendre la saisie facultative pour le client, vous devez changer la deuxième ligne du code du snippet, en passant de :

{% assign required = true %}

À :

{% assign required = false %}

 

    • Où retrouver la réponse saisie par le client ?

 

Elle apparaîtra en tant que note de panier, dans la page de la commande.

Cette information ne remplace pas les notes de panier habituelles, qui restent également accessibles.

 

    • Informations et manipulations complémentaires

 

Si aucun choix proposé dans la liste des options ne convient au client, celui-ci peut taper manuellement une réponse, en sélectionnant d’abord « Autre ».

Si vous souhaitez que la réponse saisie par le client apparaisse aussi dans la notification par mail de la commande, rendez-vous sur votre page « Settings / Notifications » et ouvrez le template « New order », pour y ajouter le code suivant :

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 %}.

Testez divers emplacements pour voir à quel endroit du template il est le plus pertinent d’ajouter cette information.

 

  • 2- Thèmes sans sections

 

Attention, ce type de formulaire ne peut être ajouté que sur la page fixe de panier, à l’adresse /cart, et pas sur les paniers dynamiques de type popup ou tiroir.

N’oubliez pas de régler correctement ce paramètre, via votre « Theme store » (Section « Cart page » et paramètre « Cart type » réglé sur « Page »).

De plus, seul le panier est utilisable, à l’exclusion des pages de validation de commande.

Pour mettre en place votre formulaire, suivez ces étapes :

 

    • Créez le formulaire « Comment avez-vous entendu parler de nous ? »

 

      • Rendez-vous dans la page HTML/CSS de votre thème actif.
      • Ouvrez la catégorie « Snippets »
      • Cliquez sur « Add a new snippet ».
      • Nommez votre nouveau snippet « hear-about-us », sans les guillemets (vous pouvez lui donner un autre nom, mais il faudra appliquer les bonnes correspondances, plus loin).
      • Dans l’éditeur de ce nouveau snippet, collez le code à récupérer ici.
      • Revenez dans la page HTML/CSS de votre thème, dans le dossier « Sections », et cliquez sur le fichier « cart.liquid ».
      • Incluez votre snippet où vous le souhaitez dans la page de panier, en vous assurant qu’il se trouve bien entre les balises <form> et </form> du code.

Le snippet doit être inséré sous la forme :

   {% include ‘hear-about-us’ %}

      • Sauvegardez vos changements

 

    • Configurez vos options

 

Dans le snippet que vous avez créé (« hear-about-us »), vous pouvez éditer la première ligne de code pour y faire figurer vos propres options.

Vous pouvez noter autant d’options que vous le souhaitez, du moment qu’elles sont bien séparées par des virgules.

La portion à modifier est la suivante, où vous pouvez remplacer les termes Facebook, Twitter, etc.) :

{% assign choices = « Facebook, Twitter, Google, Best Toys Bulletin, John Doe » %}

Remarque : n’utilisez pas l’option « autre », qui est déjà incluse dans le code lui-même.

 

    • Configurez l’aspect facultatif du formulaire

 

Par défaut, le code de ce formulaire inclut déjà un script de validation obligatoire.

Si vous souhaitez rendre la saisie facultative pour le client, vous devez changer la deuxième ligne du code du snippet, en passant de :

{% assign required = true %}

À :

{% assign required = false %}

Les autres informations données dans le cas des thèmes avec sections sont identiques pour les thèmes sans sections.

Voilà pour cet article!

Dans le prochain focus, je vous parlerai d’autres personnalisations relatives à la communication avec vos clients.

À très bientôt pour la suite !