Aujourd’hui, suite des focus relatifs à la personnalisation du code des thèmes, avec un premier article concernant l’apparence du panier dans votre boutique.

Par défaut, la page de panier montre un résumé de tous les produits que votre client y a ajoutés, un sous-total et un coût total pour la commande, ainsi qu’un bouton de validation qui redirige vers les pages de paiement sécurisé de Shopify.

Lorsque aucun produit n’a été ajouté au panier, cette page est vide et ne contient qu’un lien « Continuer les achats » qui renvoie le client vers votre catalogue de produits.

Selon le thème que vous utilisez, certaines fonctions spécifiques peuvent vous être accessibles dans le « Theme editor », mais vous allez voir qu’il est aussi possible de personnaliser/ajouter de nombreuses fonctions, plus ou moins intéressantes et pertinentes pour vous, selon le type de produits que vous vendez et votre manière de travailler.

Ces personnalisations « panier » seront réparties sur plusieurs articles, car elles sont assez nombreuses. 

 

Personnaliser le lien « Continuer les achats » sur votre page de panier, quand elle contient déjà un produit

 

Si vous voulez que vos clients puissent « continuer leurs achats » (une fois qu’ils ont déjà sélectionné un produit) en les menant vers une collection spécifique, vous devez personnaliser le lien de cette page.

La plupart des thèmes proposent un lien identique à celui qui figure sur une page de panier vide : il mène à www.xxxxxx-myshopify.com/cart (la page de catalogue qui présente tous les produits de votre boutique).

Vous pouvez l’ajouter, s’il est manquant, ou le modifier, pour renvoyer le client vers une collection spécifique.

Comme pour toute personnalisation du code, rendez-vous dans l’éditeur HTML/CSS de votre thème.

  • Dans la catégorie « Templates », recherchez et ouvrez le fichier « cart.liquid » pour l’ouvrir.
  • Si votre page panier contient déjà le lien menant vers le catalogue, vous allez voir cette portion de code, près du bouton de checkout :

<a href= »/collections/all » title= »Browse our Catalog »>Continue Shopping</a> (version originale anglaise).

Vous pouvez la conserver, si vous ne voulez rien modifier, ou l’ajouter si votre thème ne propose pas de lien de ce type par défaut.

  • Si vous préférez renvoyer les clients vers la collection à laquelle appartient le dernier produit ajouté au panier, vous pouvez plutôt utiliser ce code :

<a href= »{{ cart.items.first.product.collections.first.url }} » title= »Continue Shopping »>Continue Shopping</a> (version originale anglaise).

  • Sauvegardez vos changements.

 

Ajouter un sélectionneur de dates sur votre page de panier

 

Attention, les informations qui suivent ne concernent que la page fixe de panier (que l’on trouve à l’adresse www.xxxxxx-myshopify.com/cart) et pas sur les « paniers volants » (de type tiroir ou pop up).

Si vous tenez à utiliser ce sélectionneur, vous devez d’abord désactiver les fonctions en question, en sélectionnant l’affichage « page » (dans les réglages généraux du panier, via votre « Theme editor »).

De plus, le code se modifie différemment selon que votre thème comporte des sections ou pas (je vous laisse relire les premiers focus de la série « Theme » pour comprendre comment vérifier dans quel cas vous vous trouvez).

  • Manipulations si votre thème comporte des sections :
    • Rendez-vous dans la catégorie « Assets » et cliquez dessus pour l’ouvrir.
    • Dedans, ouvrez le fichier « theme.js » (ou « theme.js.liquid ») et ajoutez le code suivant en bas du fichier :

$(document).ready( function() {

$(function() {

$(« #date »).datepicker( {

minDate: +1,

maxDate: ‘+2M’,

beforeShowDay: jQuery.datepicker.noWeekends

} );

});

});

    • Sauvegardez vos changements.
    • Rendez-vous dans la catégorie « Sections » et ouvrez, cette fois, le fichier « cart-template.liquid ».
    • Recherchez la balise de fermeture de votre formulaire de panier (vous pouvez utiliser la commande Ctrl+F sur Windows ou Command+F sur Mac pour plus de facilité).

Cette balise se présente de la façon suivante : </form>

    • Juste au-dessus de cette balise, ajoutez la ligne suivante :

    <div style= »width:300px; clear:both; »>

      <p>

        <label for= »date »>Pick a delivery date:</label>

        <input id= »date » type= »text » name= »attributes[date] » value= »{{ cart.attributes.date }} » />

        <span style= »display:block » class= »instructions »> We do not deliver during the week-end.</span>

      </p>

    </div>

    • Sauvegardez vos changements.
    • Enfin, rendez-vous dans la catégorie « Layout » pour y ouvrir le fichier « theme.liquid ».
    • Juste avant la balise </head>, ajoutez le code suivant :

    {{ ‘//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css’ | stylesheet_tag }}

    <script src= »//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js » type= »text/javascript » defer= »defer »></script>

Si vous avez correctement effectué les manipulations, vous devez maintenant avoir un champ « sélectionneur de date de livraison » sur votre page de panier (qu’il vous faudra traduire, par ailleurs).

Lorsque vous cliquez dedans, un petit calendrier apparaît, permettant au client de choisir une date.

Cette date s’ajoutera automatiquement aux notes incluses dans la commande, côté administration.

  • Manipulations si votre thème ne comporte pas de sections :
    • Rendez-vous dans la catégorie « Snippets » et cliquez dessus pour l’ouvrir.
    • Allez au bas de cette catégorie et cliquez sur « Add a new snippet link ».
    • Donnez un nom à votre snippet, comme « date-livraison » (pas d’accents et pas d’espaces).
    • Cliquez sur « Create snippet ».
    • Ouvrez un nouvel onglet dans votre navigateur, pour aller sur la page https://gist.github.com/carolineschnapp/1961333
    • Cliquez sur le bouton « Raw » et copiez tout le contenu de cette page.
    • Revenez à votre page d’administration et collez tout le contenu dans l’éditeur de code de votre snippet.
    • Enregistrez vos changements.
    • Dans le dossier « Templates », recherchez le fichier « cart.liquid » pour l’ouvrir dans l’éditeur.
    • Recherchez la balise </form>.
    • Au-dessus de cette balise, ajoutez la ligne suivante :

{% include ‘delivery-date’ %}

    • Sauvegardez vos changements.

Si vous avez correctement effectué les manipulations, vous devez maintenant avoir un champ « sélectionneur de date de livraison » sur votre page de panier.

 

Ajouter une option « paquet cadeau » et une zone de message sur votre page de panier

 

Attention, je précise d’abord que ce qui suit ne s’applique pas aux thèmes Premium qui fonctionnent avec des sections, cette documentation particulière n’étant pas encore disponible chez Shopify.

Par contre, si vous utilisez les thèmes Shopify gratuits suivants (même s’ils comportent des sections), vous pouvez suivre ce tutoriel : Brooklyn, Classic, Launchpad, Pop, Simple, Solo, or Supply.

Par contre, vous devez d’abord désactiver l’affichage « tiroir » ou « pop up » de votre panier, en sélectionnant l’affichage « page » (dans les réglages généraux du panier, via votre « Theme editor).

Si vous êtes dans un cadre compatible avec ce que je viens de vous expliquer, voici les étapes à suivre :

  • Créez un produit « paquet cadeau » (que vous pouvez aussi nommer « emballage » ou équivalent, comme vous le préférez), en procédant comme pour n’importe quel autre produit.
    • Vous pouvez utiliser le champ « Description » pour y expliquer au client comment fonctionnera cette option, notamment quel type de papier sera utilisé, sa couleur, etc.
    • Donnez un prix à ce produit, selon que vous voulez facturer ou pas l’option au client. Vous pouvez mettre le produit à 0 €, si vous souhaitez offrir totalement l’option.
    • Téléchargez une image représentant un produit emballé sous forme de paquet cadeau, pour rendre l’option attrayante.
    • Notez bien le « handle » donné automatiquement au produit et qui est visible tout en bas de la page, dans l’adresse Web du produit (ici, ce serait « paquet-cadeau ».
    • Sauvegardez ce produit.
  • Créez un menu (ce menu doit pointer vers le produit que vous venez de mettre en place).
    • Pour cela, rendez-vous dans la page d’administration « Online store / Navigation ».
    • Cliquez sur « Add menu ».
    • Donner à votre menu le « handle » (nom de code) que vous avez donné à votre produit. Dans cet exemple, il s’agirait de « paquet-cadeau » (sans les guillemets).

Le nom du produit peut être différent, tant que le « handle » est bien identique à celui du produit.

    • Dans les items du menu, choisissez un lien de type « Product », donnez-lui le nom que vous souhaitez (par exemple « Option paquet cadeau ») et sélectionnez le produit que vous avez créé dans la liste de droite.
  • Créez un snippet (cette étape va permettre de créer la fonction d’affichage).

Attention, cette option correspond à une multiplication du coût de l’option par le nombre total d’articles et il n’est pas possible d’en sélectionner seulement certains (principe du tout ou rien, en d’autres termes).

    • Copiez le code de la page ouverte.
    • Revenez à votre éditeur de code dans Shopify et collez le code dans l’éditeur du snippet précédemment créé.
  • Ajoutez le nouveau snippet à votre thème (cette étape va permettre d’afficher la fonction « option de paquet cadeau + zone de commentaire » côté client).
    • Rendez-vous dans la catégorie « Templates » de vos fichiers de thème, trouvez et ouvre le fichier « cart.liquid » dans votre éditeur.
    • Vous devez intégrer votre snippet exactement à l’endroit où vous souhaitez afficher l’option sur la page de panier, en tenant compte de la précaution suivante : le snippet doit impérativement se trouver entre les balises <form> et </form>.

Si ce n’est pas le cas, ce que le client saisira dans la zone de commentaires ne sera pas prise en compte lors du processus de commande.

    • Collez le code suivant : {% include ‘paquet-cadeau’ %} (attention, ce code est valable si vous avez bien intitulé votre snippet « paquet-cadeau », adaptez-le si nécessaire).
    • Conseil, si vous ne savez pas trop où coller le code : placez-le juste avant la balise de fermeture </form>.
    • Sauvegardez.
  • Testez votre option de personnalisation.

Prenez bien le temps de simuler une commande pour voir ce que donne l’option « paquet cadeau » sur la page de panier.

Si l’affichage ne vous convient pas, testez un autre emplacement du snippet dans le fichier de thème, en faisant bien attention de rester entre les balises du formulaire, comme expliqué plus haut.

Vérifiez aussi que le fait de cocher et décocher la case de l’option (lorsque vous l’avez rendue payante) se traduit bien par une mise à jour de la valeur totale du panier.

  • Vérifiez que l’option est prise en compte dans la commande, côté administration.

Si vous simulez l’achat d’un produit avec cette option, vous devez retrouver l’information en bas de la page « Order » correspondante, dans la section « Additional details ».

Si vous avez nommé le snippet « paquet-cadeau », c’est sous ce libellé qu’apparaîtra le champ.

  • Problème possible de javascript.

Si l’option ne fonctionne pas (et que votre thème fait bien partie des cas censés marcher), vous voyez aussi probablement le message d’erreur « Can’t find variable jQuery ».

Dans ce cas, il est presque certain que l’appel du script jQuery est mal placé dans votre thème, en étant dans la partie « footer » et non pas « header ».

Ouvrez le fichier « theme.liquid » et déplacez le script dans la zone appropriée, en haut.

Voilà pour cet article !

Dans les prochains focus, nous continuerons d’explorer les possibilités de personnalisation de votre page de panier, qui sont nombreuses.

À très bientôt pour la suite !