Je vous propose aujourd’hui un focus qui poursuit l’exploration de la personnalisation de la page de panier, dans le cadre de la série consacrée au code du thème Shopify.

Nous allons voir deux nouvelles fonctions : l’ajout de boutons de paiement additionnels et celui d’un calculateur de frais d’envoi.

Je vous rappelle que ces personnalisations sont facultatives et pas forcément utiles pour toutes les boutiques, en fonction de votre activité. De plus, le thème que vous utilisez peut ne pas être adapté, sur le plan technique, et ce sont vos tests qui vous indiqueront si ces modifications sont pertinentes et donnent un bon résultat. 

 

1/ L’ajout de boutons de paiement additionnels sur la page de panier

 

Vous pouvez utiliser le code Liquid « additional_checkout_buttons » (je vous rappelle que les guillemets sont présents ici pour faciliter votre lecture, mais ne doivent jamais être utilisés dans l’éditeur de code de votre thème) pour afficher des boutons de paiement supplémentaires sur votre page de panier.

Ces boutons ont pour intérêt d’offrir des moyens de paiement hors Shopify, en menant les clients vers des systèmes externes à la boutique.

Les boutons peuvent apparaître à l’un de ces deux endroits : la page de panier elle-même ou la page de validation de paiement, mais pas les deux.

Ceci signifie que si vous ajoutez le code dans la page « cart » de votre thème, les boutons n’apparaîtront pas sur la page de paiement.

Attention ! Si vous avez configuré votre boutique en rendant la création d’un compte client obligatoire (« Accounts are required », dans votre page d’administration « Checkout settings »), alors l’ajout de ce code se désactivera automatiquement.

En effet, les deux principes sont incompatibles, puisque les boutons permettraient au client de quitter la boutique pour une page de paiement, sans avoir à créer d’abord un compte. 

 

  • Affichez les boutons sur la page de panier :
    • Ouvrez le fichier « cart.liquid » de votre thème (dans la catégorie « templates », par défaut) et collez dedans le code suivant, à l’endroit où vous voulez que les boutons apparaissent sur la page :

{% if additional_checkout_buttons %}

  <div class= »additional-checkout-buttons »>

    {{ content_for_additional_checkout_buttons }}

  </div>

{% endif %}

 

  • Affichez les boutons dans le panier en version « tiroir », « popup » ou « barre latérale » :

Normalement, les boutons additionnels s’affichent lorsque la page est chargée initialement.

Si votre thème charge dynamiquement ces boutons (comme dans le cas d’un panier de type Ajax, qui utilise JavaScript), vous devez réinitialiser les boutons chaque fois que le panier est mis à jour.

En ajoutant quelques lignes de code JavaScript au script Ajax du panier, vous allez faire en sorte que les boutons additionnels soient réinitialisés chaque fois que le panier apparaît.

La méthode correspondante va être différente en fonction du thème.

    • Pour connaître le type de thème qui vous concerne, rendez-vous dans le code HTML/CSS de votre thème.
    • Cliquez sur le dossier « Assets » et regardez lequel des fichiers suivants est présent : « ajaxify.js » ou « ajaxify.js.liquid », « ajax-cart .js » ou « ajax-cart.js.liquid » ou rien. Reportez-vous ci-dessous au cas qui vous concerne.

1- Si le fichier est « ajaxify.js » ou « ajaxify.js.liquid » :

    • Cliquez sur le fichier pour l’ouvrir dans l’éditeur de code.
    • Trouvez la fonction « adjustCartCallback » dans la ligne marquée comme ceci : « adjustCartCallback = function (cart) ».
    • Copiez le code JavaScript suivant :

if (window.Shopify && Shopify.StorefrontExpressButtons) {

  Shopify.StorefrontExpressButtons.initialize();

}

    • Collez-le juste avant la parenthèse de fermeture de la fonction, juste avant « adjustCartCallback », là où se trouve le carré blanc de l’image ci-dessous.
    • Vous devez obtenir ceci :
    • Sauvegardez.

Vos boutons additionnels doivent maintenant se réinitialiser chaque fois que votre panier Ajax s’ouvre.

2- Si le fichier est « ajax-cart.js » ou « ajax-cart.js.liquid » :

    • Cliquez sur le fichier pour l’ouvrir dans l’éditeur de code.
    • Trouvez la fonction « adjustCart » dans la ligne marquée comme ceci : « adjustCart = function () ».
    • Copiez le code JavaScript suivant :

if (window.Shopify && Shopify.StorefrontExpressButtons) {

  Shopify.StorefrontExpressButtons.initialize();

}

    • Collez-le juste avant la parenthèse de fermeture de la fonction, juste avant « adjustCart », là où se trouve le carré blanc de l’image ci-dessous.
    • Vous devez obtenir ceci :
    • Sauvegardez.

Vos boutons additionnels doivent maintenant se réinitialiser chaque fois que votre panier Ajax s’ouvre.

3- Si votre thème ne contient aucun de ces fichiers :

Vous allez devoir ajouter le code qui suit dans les fonctions de callback de JavaScript :

if (window.Shopify && Shopify.StorefrontExpressButtons) {

  Shopify.StorefrontExpressButtons.initialize();

}

Si vous ne savez pas de quoi il s’agit, l’aide d’un développeur est fortement conseillée !

 

  • Affichez les boutons sur la page de validation de paiement :

Si vous voulez que les boutons apparaissent sur votre page de validation de paiement, vous devez les « transférer » de la page de panier vers l’autre.

Pour cela :

    • Ouvrez le fichier « cart.liquid » dans l’éditeur du code.
    • Trouvez le code qui suit et supprimez-le :

{% if additional_checkout_buttons %}

  <div class= »additional-checkout-buttons »>

    {{ content_for_additional_checkout_buttons }}

  </div>

{% endif %}

    • Sauvegardez.

Les boutons apparaissent maintenant sur la page de validation de paiement et non plus sur la page de panier.

Note importante, pour l’ensemble de cette fonction : si vous n’utilisez pas « PayPal Express Checkout » comme méthode de paiement PayPal, ce mode de règlement n’apparaîtra pas en tant que bouton de paiement supplémentaire.

 

2/ L’ajout d’un calculateur de frais d’envoi sur la page de panier

 

Vous pouvez ajouter ce calculateur pour permettre à vos clients d’estimer leurs frais d’envoi avant d’arriver sur la page de validation de paiement.

Voici un exemple issu d’une boutique canadienne :

  • Le principe :

Ce calculateur affiche vos frais de livraison sur la page de panier de votre boutique.

Si un client est connecté, l’outil utilise l’adresse d’expédition par défaut du client pour calculer les estimations.

Il fonctionne avec les tarifs précalculés des transporteurs, ou sur la base des tarifs fixés manuellement (ou une combinaison des deux).

Attention aux points suivants, qui sont importants :

    • Dans certaines situations, les frais indiqués sont des approximations, car seuls le pays, l’état et le code postal sont utilisés pour l’estimation, ce qui peut donner des différences avec les frais réels calculés lors de la validation de paiement.
    • Le texte affiché peut être traduit.
    • Les frais s’affichent dans la devise de votre boutique.
    • Le code HTML du calculateur est facile à éditer, si vous avez des connaissances minimales.
    • Le calculateur utilise Ajax pour récupérer le barème des frais dans Shopify.
    • Il n’intègre pas les taxes, qui n’apparaissent que sur la page de validation de la commande.
    • Il ne fonctionne que sur la page at www.your-shop-url.com/cart, et pas sur les paniers dynamiques (tiroir ou popup) : si vous voulez utiliser la fonction, vous devez régler votre boutique sur cet affichage (via les réglages de votre « Theme editor »).

La façon de procéder dépend du type de thème que vous utilisez : un thème avec ou sans sections.

Comme dans l’article précédent, je vous renvoie vers le début de la série « Theme » pour voir comment vérifier dans quel cas vous vous trouvez.

 

  • Thème avec sections / Première étape : éditer votre thème pour ajouter le calculateur.

Suivez précisément les étapes suivantes (car elles sont assez nombreuses) :

    • Ouvrez la page HTML/CSS de votre thème.
    • Ouvrez la catégorie « Assets » et cliquez sur le fichier « vendor.js » (ou sur le fichier « theme.js », si le premier n’est pas présent) pour afficher le code du fichier.
    • Tout en bas de cette page, collez le code que vous devez récupérer ici (si vous êtes dans le cas où vous ouvrez le fichier « theme.js » parce que vous n’avez pas de fichier « vendor.js », le code est à copier tout en haut de la page).
    • Sauvegardez.
    • Ouvrez la catégorie « Assets » pour ouvrir le fichier « theme.js » (ou restez dedans si vous l’avez précédemment utilisé).
    • En bas de cette page, collez le code suivant :

Shopify.Cart.ShippingCalculator.show( {

  submitButton: theme.strings.shippingCalcSubmitButton,

  submitButtonDisabled: theme.strings.shippingCalcSubmitButtonDisabled,

  customerIsLoggedIn: theme.strings.shippingCalcCustomerIsLoggedIn,

  moneyFormat: theme.strings.shippingCalcMoneyFormat                                    

} );

    • Sauvegardez.
    • Rendez-vous le dossier « Snippets » et cliquez sur « Add a new snippet ».
    • Nommez-le « shipping-calculator » (sans les guillemets) et cliquez sur « Create snippet » pour ouvrir sa page de code.
    • Dans ce nouveau snippet, collez le code que vous devez récupérer ici.
    • Sauvegardez.
    • Rendez-vous maintenant dans le dossier « Sections » et ouvrez le fichier « cart-template.liquid » (s’il est absent, ouvrez la catégorie « Templates » pour y trouver le fichier « cart.liquid »).
    • Trouvez la balise de fermeture </form>.
    • Sur une nouvelle ligne (via la touche Entrée) au-dessus de cette balise, collez le code suivant : {% include ‘shipping-calculator’ %}
    • Tout en bas du fichier, collez le code suivant :

<script>

  theme.strings = {

      shippingCalcSubmitButton: {{ settings.shipping_calculator_submit_button_label | default: ‘Calculate shipping’ | json }},

      shippingCalcSubmitButtonDisabled: {{ settings.shipping_calculator_submit_button_label_disabled | default: ‘Calculating…’ | json }},

      {% if customer %}shippingCalcCustomerIsLoggedIn: true,{% endif %}

      shippingCalcMoneyFormat: {{ shop.money_with_currency_format | json }}

  }

</script>

<script src= »//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js »>

<script src= »/services/javascripts/countries.js »>

<script src= »{{ ‘shopify_common.js’ | shopify_asset_url }} » defer= »defer »>

    • Sauvegardez.
    • Allez dans le dossier « Config » pour y ouvrir le fichier « settings_schema.json ».
    • Juste avant le bas de ce fichier, collez le code suivant avant le dernier crochet (symbole ]) et après la dernière accolade (symbole }). Attention, n’oubliez pas la première ligne de ce code, qui est une virgule indispensable quand on modifie une structure JSON.

,

  {

    « name »: « Shipping Rates Calculator »,

    « settings »: [

      {

        « type »: « select »,

        « id »: « shipping_calculator »,

        « label »: « Show the shipping calculator? »,

        « options »: [

          {

            « value »: « Disabled »,

            « label »: « No »

          },

          {

            « value »: « Enabled »,

            « label »: « Yes »

          }

        ],

        « default »: « Enabled »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_heading »,

        « label »: « Heading text »,

        « default »: « Get shipping estimates »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_default_country »,

        « label »: « Default country selection »,

        « default »: « United States »

      },

      {

        « type »: « paragraph »,

        « content »: « If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the  spelling to use here, refer to the first checkout page. »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_submit_button_label »,

        « label »: « Submit button label »,

        « default »: « Calculate shipping »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_submit_button_label_disabled »,

        « label »: « Submit button label when calculating »,

        « default »: « Calculating… »

      },

      {

        « type »: « paragraph »,

        « content »: « Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping  calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) . »

      }

    ]

  }

 

  • Thème avec sections / Deuxième étape : configurer votre calculateur de frais d’envoi.

Vous pouvez maintenant éditer le barème de calcul de votre calculateur, via votre « Theme editor » :

    • Ouvrez l’onglet « General settings » du « Theme editor » et allez dans la section « Shipping rates calculator ».
    • Dans le réglage « Show the shipping calculator » : choisissez « Yes » ou « No » selon que vous voulez afficher ou masquer le calculateur.
    • Dans le réglage « Heading text », saisissez le texte qui doit être affiché au-dessus du calculateur.
    • Dans le réglage « Default country selection », choisissez le pays à sélectionner par défaut.
    • Dans le réglage « Submit button label », sélectionnez le texte qui va apparaître sur le bouton de validation.

 

  • Thème avec sections / Troisième étape : personnaliser le code HTML ou CSS du calculateur.

Si vous voulez personnaliser l’affichage de votre calculateur, vous pouvez en éditer le code (sous réserve de connaître le langage).

    • Dans la page HTML/CSS de votre thème, ouvrez la catégorie « Snippets » et cliquez sur « shipping-calculator.liquid ».
    • Éditez le code HTML comme vous le souhaitez, mais attention de ne pas toucher aux attributs ou classes « get-rates », pour ne pas altérer les fonctionnalités.
    • Sauvegardez.
    • Pour le CSS (le design du calculateur), vous devez ouvrir la catégorie « Assets » et cliquez sur le fichier « theme.scss.liquid ».
    • Tout en bas de ce fichier, vous pouvez ajouter le contenu de ce fichier, ou votre propre code personnalisé.
    • Sauvegardez.

Votre calculateur est maintenant prêt, si vous avez suivi toutes les étapes dans l’ordre.

 

  • Thème avec sections / Problème possible

Selon les réglages de votre thème, il se peut que votre calculateur s’affiche par erreur avec des balises, comme sur l’image suivante :

Pour les retirer :

    • Rendez-vous dans la page « Settings » de votre administration de boutique.
    • Dans la section « Standards and formats », la devise de votre boutique est affichée.
    • Cliquez sur « Formatting » et retirez les balises d’affichage.

Par défaut, les réglages sont les suivants :

Vous devez obtenir quelque chose qui ressemble à ceci (avec le code de votre propre devise) :

Passons maintenant au cas du thème sans sections

 

  • Thème sans sections / Première étape : télécharger le fichier jquery.cart.min.js

Suivez ces étapes, une fois que vous êtes dans la page HTML/CSS de votre thème :

    • Ouvrez la catégorie « Assets » et cliquez sur « Add a new asset ».
    • Cliquez sur l’onglet « Create a blank file », donnez-lui le nom « jquery.cart.min » (sans les guillemets) et sélectionnez l’extension « .js ».
    • Cliquez sur « Add asset » et votre nouveau fichier va s’ouvrir dans l’éditeur de code.
    • Dans cette nouvelle page, collez le code à récupérer ici.
    • Sauvegardez.

 

  • Thème sans sections / Deuxième étape : éditer votre thème pour ajouter le calculateur.
    • Dans la catégorie « Config », cliquez sur « settings_schema.json » pour en éditer le code.
    • Juste avant le bas de ce fichier, collez le code suivant avant le dernier crochet (symbole ]) et après la dernière accolade (symbole }). Attention, n’oubliez pas la première ligne de ce code, qui est une virgule indispensable quand on modifie une structure JSON.

,

  {

    « name »: « Shipping Rates Calculator »,

    « settings »: [

      {

        « type »: « select »,

        « id »: « shipping_calculator »,

        « label »: « Show the shipping calculator? »,

        « options »: [

          {

            « value »: « Disabled »,

            « label »: « No »

          },

          {

            « value »: « Enabled »,

            « label »: « Yes »

          }

        ],

        « default »: « Enabled »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_heading »,

        « label »: « Heading text »,

        « default »: « Get shipping estimates »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_default_country »,

        « label »: « Default country selection »,

        « default »: « United States »

      },

      {

        « type »: « paragraph »,

        « content »: « If your customer is logged-in, the country in his default shipping address will be selected. If you are not sure about the  spelling to use here, refer to the first checkout page. »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_submit_button_label »,

        « label »: « Submit button label »,

        « default »: « Calculate shipping »

      },

      {

        « type »: « text »,

        « id »: « shipping_calculator_submit_button_label_disabled »,

        « label »: « Submit button label when calculating »,

        « default »: « Calculating… »

      },

      {

        « type »: « paragraph »,

        « content »: « Do not forget to include the snippet shipping-calculator in your cart.liquid template where you want the shipping  calculator to appear. You can get the snippet here: [shipping-calculator.liquid](https:\/\/github.com\/carolineschnapp\/shipping-calculator\/blob\/master\/shipping-calculator.liquid) . »

      }

    ]

  }

    • Sauvegardez.

 

  • Thème sans sections / Troisième étape : créer le snippet du calculateur.
    • Rendez-vous le dossier « Snippets » et cliquez sur « Add a new snippet ».
    • Nommez-le « shipping-calculator » (sans les guillemets) et cliquez sur « Create snippet » pour ouvrir sa page de code.
    • Dans ce nouveau snippet, collez le code que vous devez récupérer ici.
    • Sauvegardez.

 

  • Thème sans sections / Quatrième étape : inclure le snippet dans le fichier cart.liquid.

Vous devez inclure le snippet là où vous souhaitez faire apparaître le calculateur sur la page de panier.

Dans l’exemple ci-dessous, il sera affiché juste en dessus du formulaire de panier.

    • Rendez-vous dans le dossier « Templates » et cliquez sur « cart.liquid ».
    • Trouvez la balise de fermeture </form>.
    • Sur une nouvelle ligne (via la touche Entrée) au-dessus de cette balise, collez le code suivant : {% include ‘shipping-calculator’ %}
    • Sauvegardez.

 

La personnalisation se fait comme dans pour les thèmes avec sections.

  • Thème sans sections / Problème possible

Si votre thème est très ancien et que vous rencontrez des problèmes, 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.
    • Sauvegardez.

Ce focus est terminé et sera suivi d’autres articles consacrés à la personnalisation de la page de panier, avec de nouvelles fonctions très utiles.

À très bientôt pour la suite !