Snipcart est un gestionnaire de panier prenant en charge le paiement par carte bancaire. L’inscription est gratuite, une commission de 2% est retenue sur chaque opération ce qui est modeste.
C’est une solution est idéale pour monétiser un contenu en ligne tout en évitant les grosses usines comme Prestashop.
Pour ce tutoriel, le CMS support sera l’excellent Zwii en version 9. J’irai un peu vite sur certains aspects, le tutoriel ne s’adresse donc pas à de grands débutants.
Rendez-vous chez Snipcart et ouvrez un compte, validez le mail reçu et complétez l’écran de profil.
Votre tableau de bord est en mode test, nous activerons le mode live une fois la configuration terminée.
Configuration de Snipcart :
Rendez-vous dans les paramètres du compte
Dans Domain & URLs / Protocol : indiquez https:
Dans Domain & URLs / Regional Settings : réglez la devise, sa position et son symbole ainsi que le fuseau horaire. Enfin la liste des continents/pays où vous vendrez.
Dans Account / Api key sont listées les lignes à inclure dans l’en-tête <head> de votre page. La mention du jquery est inutile pour Zwii.
Configuration du CMS :
Dans Zwii, accédez à la gestion du site et dans le champ Insérer un script dans header, collez les 3 lignes contenants les clés d’API.
Vérification de la liaison avec Snipcart : dans le tableau de bord Snipcart, cliquez sur le message en forme de panneau d’avertissement, puis sur validation, c’est le moyen de vérifier que votre installation est conforme. Tapez l’adresse de votre site et cliquez sur Check My Website. Un message confirme la prise en compte des scripts.
Inclure les boutons d’achat dans le CMS :
Ce bouton permet d’ajouter un article au panier. Pour cela, il faut inclure dans la page en mode code source :
<button class="snipcart-add-item" data-item-id="référence" data-item-name="Nom du produit" data-item-price="100.00" data-item-weight="dimension" data-item-url="/" data-item-description="Description du produit"> Ajouter au panier </button>
Évidemment, il faut insérer et paramétrer ce bouton sous un descriptif avec une image, etc..
Pour afficher un bouton vers le panier :
<a href="#" class="snipcart-checkout">Payer</a>
Malheureusement la dernière version de Zwii ne propose pas une configuration de l’éditeur correcte et les balises <span> seront effacées même si saisies en mode code source. Pour y remédier, il faut éditer /core/vendor/tinymce/init.js et remplacer :
extended_valid_elements: "script[language|type|src]",
par
extended_valid_elements: "script[language|type|src],span[!class]",
Automatisation de l’insertion d’un bouton :
Pour ce faire, on utilise le module Template de l’éditeur TinyMCE déjà installé.
Dans /core/vendor/tinymce/templates, créez un fichier html avec le code du bouton, nommez le snipcart.html
Ensuite ouvrez à nouveau /core/vendor/tinymce/init.js et ajoutez dans le bloc Templates :
{
title: "Bouton Snipcart",
url: baseUrl + "core/vendor/tinymce/templates/snipcart.html",
description: "Ajoute un bouton de paiement."
},
Une fois le site prêt, il ne reste plus qu’à passer le tableau de bord en mode live et à engranger des commandes…
Intéressant! Je travaille chez Snipcart et j’ai remarqué une erreur dans le post: Pour passer au mode Live, il ne suffit pas de changer le toggle dans le dashboard. Le toggle du dashboard sert uniquement à changer la “vue” dans le dashboard mais n’a aucun effet sur le site.
Pour passer en Live, il faut changer la clé d’API sur le site web, cette clé est spécifiée lors de l’insertion de notre script:
https://cdn.snipcart.com/scripts/2.0/snipcart.js
En mode Live, il faut générer la clé d’API Live, une fois que c’est fait, il faut changer la clé sur le site web.
Cette section de notre documentation peut être utile pour passer au mode Live:
https://docs.snipcart.com/testing/going-live
Un gros merci de la part de toute l’équipe pour avoir 1) joué avec Snipcart et 2) donné de la visibilité à notre produit!
Merci pour cette précision fort utile.