Dans cet article, nous poursuivons l’exploration des fonctions de personnalisation des thèmes de Shopify et des options de la page de panier, en particulier.

Ce focus va se concentrer sur une fonction spécifique, aujourd’hui : celle de l’ajout d’une case à cocher « J’accepte les conditions de vente de la boutique » dans la page de panier.

Vous allez voir que cette modification est un peu longue, mais si elle n’est pas spécialement compliquée.

L’ajout de cette case vous permet de vérifier que votre client, au moment où il valide sa page de panier, a bien lu les conditions générales de vente avant de confirmer sa commande et d’accéder à la phase de paiement.

Attention : il n’est pas possible d’ajouter cette case sur la page de validation de paiement elle-même, mais seulement sur la page de panier fixe qui se trouve à l’adresse http://www.your-shop-URL.com/cart.

De plus, les manipulations dans le code sont différentes selon que vous utilisez un thème avec ou sans sections.

Je vous rappelle que la distinction entre ces deux types de thèmes est abordée dans les premiers focus de cette série, auxquels vous pouvez vous reporter si vous ne savez plus dans quel cas vous vous trouvez. 

 

1/ L’ajout de la case dans les thèmes avec sections

 

Suivez ces étapes :

  • Rendez-vous dans la page HTML/CSS de votre thème (je vous rappelle que vous devez passer par la page « Online store / bouton Actions ».
  • Dans le dossier « Assets », cliquez sur le fichier « theme.js » ou « theme.js.liquid » (le choix dépend du thème utilisé) pour l’ouvrir dans l’éditeur de code.
  • Tout en bas de la page, ajoutez le code suivant :

  $(document).ready(function() {

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

      if ($(‘#agree’).is(‘:checked’)) {

        $(this).submit();

      }

      else {

        alert(« You must agree with the terms and conditions of sales to check out. »);

        return false;

      }

    });

  });

  • Vous pouvez bien sûr traduire la portion de texte au sein du code, pour remplacer « You must agree with the terms and conditions of sales to check out. »
  • Sauvegardez.
  • Dans la catégorie « Sections », ouvrez le fichier « cart-template.liquid » dans l’éditeur de code.
  • Trouvez dedans le code HTML pour votre bouton de validation de commande.

Pour cela, cherchez la balise <button> ayant l’attribut « checkout ».

Concrètement, la portion de code doit ressembler à peu près cela :

<button type= »submit » name= »checkout » class= »btn »>{{ ‘cart.general.checkout’ | t }}

  • Une fois que vous l’avez trouvée, ajoutez une ligne vide au-dessus et collez-y le code suivant :

<p style= »float: none; text-align: right; clear: both; margin: 10px 0; »>

  <input style= »float:none; vertical-align: middle; » type= »checkbox » id= »agree » />

  <label style= »display:inline; float:none » for= »agree »>

    I agree with the terms and conditions.

  </label>

</p>

  • Dans le code que vous venez de coller, remplacez « /pages/terms-and-conditions » (mis en rouge ci-dessus) par l’URL de votre propre page de conditions de vente, et pensez aussi à traduire « terms and conditions ».

Évidemment, si vous n’avez pas encore de page pour vos conditions générales de vente, il est important d’en créer une.

  • Sauvegardez.

Dans deux des thèmes gratuits proposés par Shopify, certaines manipulations supplémentaires sont nécessaires pour que l’ajout de la case à cocher fonctionne.

 

  • Modifications supplémentaires pour Boundless :
  • Allez dans la catégorie « Layout » pour y ouvrir le fichier « theme.liquid ».
  • Trouvez la ligne de code suivante :

<button type= »submit » class= »btn btn–full cart__checkout » name= »checkout »>

    • Une fois que vous l’avez trouvée, ajoutez une ligne vide au-dessus et collez-y le code suivant :

<p style= »float: none; text-align: right; clear: both; margin: 10px 0; »>

  <input style= »float:none; vertical-align: middle; » type= »checkbox » id= »agree » />

  <label style= »display:inline; float:none » for= »agree »>

    I agree with the terms and conditions.

  </label>

</p>

    • Dans le code que vous venez de coller, remplacez « /pages/terms-and-conditions » (mis en rouge ci-dessus) par l’URL de votre propre page de conditions de vente, et pensez aussi à traduire « terms and conditions ».
    • Sauvegardez.

 

  • Modifications supplémentaires pour Brooklyn :
    • Allez dans la catégorie « Snippets » pour y ouvrir le fichier « ajax-cart-template.liquid ».
    • Trouvez la ligne de code suivante :

<button type= »submit » class= »btn–secondary btn–full cart__checkout » name= »checkout »>

    • Une fois que vous l’avez trouvée, ajoutez une ligne vide au-dessus et collez-y le code suivant :

<p style= »float: none; text-align: right; clear: both; margin: 10px 0; »>

  <input style= »float:none; vertical-align: middle; » type= »checkbox » id= »agree » />

  <label style= »display:inline; float:none » for= »agree »>

    I agree with the terms and conditions.

  </label>

</p>

    • Dans le code que vous venez de coller, remplacez « /pages/terms-and-conditions » (mis en rouge ci-dessus) par l’URL de votre propre page de conditions de vente, et pensez aussi à traduire « terms and conditions ».
    • Sauvegardez.
    • Ensuite, rendez-vous dans la catégorie « Assets », pour y ouvrir le fichier « theme.js.liquid ».
    • Trouvez la ligne de code suivante :

theme.checkoutIndicator();

    • Remplacez-la par :

// theme.checkoutIndicator();

    • Sauvegardez.

Une fois que toutes ces modifications ont été effectuées, vous devez terminer par une étape supplémentaire, qui ne vous concerne que si vous avez acheté des boutons de paiement supplémentaires (en plus de PayPal) sur votre page de panier.

 

En effet, la case à cocher des conditions de vente et les boutons de paiement supplémentaires ne sont pas compatibles et la case ne fonctionnera pas dans ce cas-là.

Par exemple, si vous aviez un bouton « Payer avec Amazon » sur votre page de panier, vos clients pourraient cliquer dessus et être redirigés vers le paiement sans avoir besoin de cocher la case.

Si vous êtes dans cette situation, vous devez supprimer les boutons additionnels de la page de panier : vos clients pourront toujours accéder à ces modes de paiement, mais à partir de la page de validation de paiement.

Pour cela :

  • Dans la catégorie « Sections », cliquez sur le fichier « cart-template.liquid ».
  • Trouvez la ligne de code suivante :

  {% if additional_checkout_buttons %}

    <div>{{ content_for_additional_checkout_buttons }}</div>

  {% endif %}

  • Une fois que vous l’avez trouvée, encadrez-la avec les balises Liquid {% comment %} et {% endcomment %}

Ceci permettra d’éviter que le code apparaisse dans votre boutique et il vous suffira, par la suite, de retirer les balises si vous souhaitez changer de thème, pour qu’il réapparaisse.

  {% comment %}

  {% if additional_checkout_buttons %}

    <div>{{ content_for_additional_checkout_buttons }}</div>

  {% endif %}

  {% endcomment %}

  • Sauvegardez.

 

2/ L’ajout de la case dans les thèmes sans sections

Suivez ces étapes :

  • Rendez-vous dans la page HTML/CSS de votre thème.
  • Dans la catégorie « Layout », ouvrez le fichier « theme.liquid » dans l’éditeur de code.
  • Trouvez la balise de fermeture </body>, vers la fin du code.
  • Au-dessus de cette balise, ajoutez le code suivant :

<script>

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

  if ($(‘#agree’).is(‘:checked’)) {

    $(this).submit();

  }

  else {

    alert(« You must agree with the terms and conditions of sales to check out. »);

    return false;

  }

});

</script>

  • Sauvegardez.
  • Dans la catégorie « Templates », cliquez sur le fichier « cart.liquid ».
  • Trouvez dedans le code HTML pour votre bouton de validation de commande.

Pour cela, cherchez la balise <button> ayant l’attribut « checkout ».

Concrètement, la portion de code doit ressembler à peu près cela :

<button type= »submit » name= »checkout » class= »btn »>{{ ‘cart.general.checkout’ | t }}

  • Une fois que vous l’avez trouvée, ajoutez une ligne vide au-dessus et collez-y le code suivant :

<p style= »float: none; text-align: right; clear: both; margin: 10px 0; »>

  <input style= »float:none; vertical-align: middle; » type= »checkbox » id= »agree » />

  <label style= »display:inline; float:none » for= »agree »>

    I agree with the terms and conditions.

  </label>

</p>

  • Dans le code que vous venez de coller, remplacez « /pages/terms-and-conditions » (mis en rouge ci-dessus) par l’URL de votre propre page de conditions de vente, et pensez aussi à traduire « terms and conditions ».
  • Sauvegardez.

Dans les thèmes sans sections, il est possible que vous rencontriez des problèmes d’affichage de votre case à cocher, si votre thème est très ancien.

Dans ce cas, vérifiez que vous utilisez bien une version de jQuery 1.7 ou plus récente.

Si elle est plus ancienne, vous allez devoir éditer votre thème pour utiliser une version supportée.

  • Rendez-vous dans le dossier « Layout », cliquez sur « theme.liquid ».
  • Entre les balises <head> et </head>, trouvez la ligne de tag qui ressemble à celle-ci :

<script type= »text/javascript » src= »//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js »>

  • Dans cet exemple, la version est la 1.4.2 et elle est donc trop ancienne.
  • Remplacez la valeur 1.4.2 par la valeur 1.7, tout simplement.

Vous devriez obtenir un code qui ressemble à celui-ci :

<script type= »text/javascript » src= »//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js »>

  • Sauvegardez.

Voilà pour ce focus, qui sera suivi de nouveaux articles relatifs à la personnalisation du code de la page de panier, avant de passer à la modification des thèmes pour d’autres fonctions.

À très bientôt pour la suite !