Blog Responsable de l'Agence LC-Numérik | Eco-Conception Web & Informatique Durable
21 octobre 2020 à 11:47
zwii-snipcart.jpg

Comment créer une boutique en ligne avec le CMS Zwii ?

Zwii, c’est quoi ?

Pour celles et ceux qui n’auraient jamais entendu parler de Zwii, il s’agit d’un CMS Flat-File. Il permet à ses utilisateurs de créer et de gérer facilement un site vitrine sans aucune connaissance en programmation et surtout sans base de données à configurer ! Il s’adapte donc parfaitement aux offres d’hébergement légères (souvent gratuites) et vous assure une présence en ligne assez économique.

Si l’objectif principal de votre site est de véhiculer votre image de marque en présentant vos services ou les produits de votre entreprise, Zwii fait parfaitement l’affaire ! De plus, par sa conception, il offre des performances très honorables notamment en terme de rapidité de chargement, ce qui répond aux besoins modernes des utilisateurs particulièrement sur mobile. Sachez qu'il existe une démo de Zwii en ligne afin de vous en convaincre !

Si vous souhaitez développer un site de e-commerce, vous pourriez cependant avoir des objections sur Zwii car vous pourrez constater qu’il n’a pas vraiment pour vocation première de proposer de la vente en ligne… En effet, celle-ci requiert des fonctionnalités plus « dynamiques » comme le panier d’achat et la gestion de compte client qui ne sont pas vraiment prévues sur la plupart des CMS de type Flat-File et encore moins sur les sites statiques… Je vous vois déjà lorgner sur des solutions plus lourdes de type Wordpress avec son plugin Woocommerce voire Prestashop…

Pourtant, sachez qu’il est tout à fait possible de monétiser votre site Zwii et ainsi de le transformer en une véritable boutique en ligne ! Nous l’avons fait pour le site d’une association basé sur Zwii en version 10 et nous souhaitions vous partager cette modeste expérience à travers une présentation d’initiation.

Une solution e-commerce pour Zwii : Snipcart !

Snipcart est un panier d’achats qui peut être intégré à n’importe quel site Web (même les sites statiques !). Cette solution fonctionne donc aussi pour Zwii ! Sa mise en place nécessite quelques connaissances en développement (HTML, CSS et Javascript) mais elle reste très simple et tout à fait abordable pour des débutants !

En effet, contrairement à des nombreuses autres solutions e-commerce, Snipcart vit sur votre site dans son code HTML côté client. Vous ajoutez le panier avec une simple inclusion d’extrait Javascript. Cela revient à ajouter un script tiers comme Google Analytics ! C’est aussi simple !

Snipcart est-il gratuit ?

Question primordiale avant toute chose ! Snipcart est gratuit uniquement en mode test. Dès que vous passerez en production, des frais vont s’appliquer en fonction de vos ventes mais ils restent très modestes surtout si on les compare aux coûts de création d’un site e-commerce…

Snipcart applique une commission de 2% sur chaque opération. Si vos ventes mensuelles ne dépassent pas les 425€, il sera pratiqué un simple forfait mensuel de 8€.

Si vous êtes une association à but non lucratif, la commission est rabaissée à 1,5% et aucun forfait minimum ne sera exigé quand bien même vos ventes ne dépasseraient pas les 425€ par mois.

Attention : cette tarification ne prend pas en compte les frais de commission relatifs à la passerelle de paiement que vous aurez choisie (par exemple, Stripe ou Paypal…).

Alors Snipcart vous intéresse ? Suivez le guide !

Comment installer Snipcart sur Zwii

Avant de commencer, sachez que l’interface et la documentation de Snipcart, malgré que cette solution soit « made in Canada » ne sont pas encore traduites en français… J’ai juste une pensée émue pour nos amis Québécois ! Cependant l’anglais utilisé sur le site et dans la documentation reste tout à fait compréhensible et, pour certains termes ambigus, nous pouvons toujours utiliser Google Traduction.

- Création d’un compte Snipcart et premiers réglages de base :

Pour installer Snipcart, il vous faut d’abord se créer un compte sur la plateforme. Validez le mail reçu et complétez l’écran de profil. Vous accédez à votre tableau de bord  (Dashboard) qui est automatiquement mis en mode test. Vous pourrez activer le mode Live (c’est à dire production) une fois que vous jugerez votre boutique prête.

Il faut se rendre tout d’abord dans les paramètres du compte pour effectuer les premiers réglages de base :

  • Domains & URLs / Protocol : indiquez https: et le domaine de votre site
  • Regional Settings : réglez la devise, sa position et son symbole ainsi que le fuseau horaire. Enfin la liste des continents/pays où vous souhaitez vendre.

- Inclure les ressources de Snipcart dans le code de votre site Zwii :

Il faut ensuite vous rendre dans la partie administration de votre site Zwii pour y insérer les ressources mises à disposition par Snipcart.

Ressources à insérer dans le:

  • Le « preconnect » :

<link rel="preconnect" href="https://app.snipcart.com">
<link rel="preconnect" href="https://cdn.snipcart.com">

Preconnect permet au navigateur d'établir une connexion de façon anticipée avant qu'une demande HTTP ne soit effectivement envoyée au serveur.

  • La feuille de style par défaut :

<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />

Pour les insérer, allez dans Configuration/Scripts de votre site Zwii et ouvrez « Éditeur de script dans Head »

Ressources à insérer dans le:

Il faut ensuite insérer le panier JS de Snipcart sur votre site Zwii :

<div hidden id="snipcart" data-api-key=« YOUR_PUBLIC_API_KEY"></div>
<script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>

Pour les insérer, allez dans Configuration/Scripts de votre site Zwii et ouvrez « Éditeur de script dans body »

Une fois ces opérations réalisées, le code source de votre site Zwii doit de manière très simplifiée se présenter ainsi :

<html>

  <head>

    <title>Hello world</title>

      <link rel="preconnect" href="https://app.snipcart.com">

      <link rel="preconnect" href="https://cdn.snipcart.com">

      <link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css" />

   </head>

   <body>

      <div class="content">

         Your site content here

      </div>

              <div hidden id="snipcart" data-api-key=« YOUR_PUBLIC_API_KEY"></div>

      <script async src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"></script>

   </body>

</html>

Qu'est ce que "YOUR_PUBLIC_API_KEY" ?

Pour information, vous trouverez votre clé API dans la partie Account / Api key du tableau de bord de Snipcart. Pour l’instant c’est la clé API Test.

Il faudra ensuite faire une 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.

Bravo ! Vous avez installé Snipcart sur Zwii ! Vous voyez c’est relativement simple ! Mais maintenant, il vous faut ajouter vos produits…

- Ajouter vos produits sur Zwii

Avec Snipcart, les produits sont définis en ajoutant des attributs aux éléments HTML de votre site. 

Les développeurs utilisent souvent un élément <button> intitulé « ajouter au panier » ; qu’ils définissent avec des attributs comme le nom du produit, le prix, la description, etc. Mais vous l’aurez compris, tout élément HTML peut devenir un produit Snipcart !

La première étape, lors de la définition d’un produit consiste à ajouter la classe « snipcart-add-item » à votre élément. Cela indique à SnipCart qu’il doit réagir lorsque l’on clique sur l’élément.

Certains attributs sont évidemment indispensables pour bien définir votre produit :

  • Nom = data-item-name
  • Identifiant = data-item-id
  • Prix = data-item-price
  • URL = data-item-url (il s’agit de l’URL de votre produit)
  • Description = data-item-description
  • Image = data-item-image (il s’agit du lien relatif ou absolu de votre image)

Pour insérer ces informations, il faut vous rendre dans la partie administration de votre site Zwii et éditer la page où sont décrits vos produits puis passez l’éditeur de texte WYSIWYG TinyMCE en mode code source <>.

Une fenêtre Code Source HTML s’ouvre, c’est là où vous placerez l’élément <button> avec les attributs requis à l’emplacement souhaité. Voici un exemple de comment doit se présenter le code de manière basique :

<button class="snipcart-add-item"

  data-item-id="starry-night"

  data-item-price="79.99"

  data-item-url="/paintings/starry-night"

  data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh."

  data-item-image="/assets/images/starry-night.jpg"

  data-item-name="The Starry Night">

  Add to cart

</button>

Attention : il est à rappeler mais cela devrait être évident qu’il faut insérer et paramétrer les attributs de ce bouton sous un produit déjà existant sur votre page. C’est à dire qu’il faut préalablement l’avoir rédigé dans l’éditeur de texte ; il doit contenir un descriptif, une image, un prix, un titre, etc. Sinon vous n’aurez que le bouton « ajouter au panier » qui s’affichera et rien d’autre… De plus, veillez à la cohérence entre les informations saisies sous forme de texte et celles saisies dans les attributs de votre bouton…

Il est tout à fait possible d’automatiser l’insertion d’un bouton ; c’est une solution que nous n’avons pas testé mais qui a été réalisée sous Zwii version 9 par Fred du blog Tic & Net ; merci Fred ! Vous trouverez son procédé en suivant ce lien : Automatisation de l’insertion d’un bouton

Ces attributs ne sont que ceux de base indispensable pour Snipcart mais il est tout à fait possible d’ajouter des variations (de forme, de taille, de couleur, etc.) et des options à travers des champs personnalisés. Snipcart prend également en charge d’autres attributs utiles pour les produits plus complexes : informations, dimensions, quantité, expédition, taxes, etc. Vous voyez les possibilités sont presque illimitées.

En l’occurence, pour le site de l’association, nous avons ajouté l’attribut "data-item-weight" afin de préciser le poids ce qui est très utile dans le calcul des frais de livraison !

- Importer vos produits sur Snipcart 

Vous pouvez importer vos produits à partir des pages de votre site en utilisant la fonction Fetch Products. Une fois que vous avez récupéré vos produits manuellement, ils s'affichent dans la section Products, où vous pouvez ainsi mieux gérer les inventaires et obtenir des informations sur les performances des ventes.

Nous n’irons pas vraiment plus loin dans la présentation de Snipcart. Chaque boutique est, en quelque sorte, « unique » et vos réglages ne dépendent que de vos objectifs : par exemple, souhaitez-vous afficher le résumé du panier ? Comment faire si vous ne vendez que des produits numériques ? Comment faire si vos produits sont personnalisables ? Est-il possible de personnaliser le thème du panier pour qu’il corresponde à la charte graphique de mon site ? Puis-je accepter les paiements en multi-devises ? Puis-je ajouter des méthodes d’expédition personnalisées ? Peut-on faire des remises, des offres promotionnelles ? Comment gérer les taxes notamment douanières ? Etc.

Bref, vous constaterez que les possibilités de Snipcart sont énormes ! Et vous trouverez toutes les réponses à vos questions dans la documentation proposées sur leur site qui est très complète ! De plus, Snipcart bénéficie d’un support technique très réactif !

Toutefois, il nous paraît indispensable de détailler quelques points pour conclure cette présentation.

- Comment mettre en place la passerelle de paiement ?

Il vous faudra fournir vos informations de facturation sous Account / Billing & Payments avant de pouvoir choisir une passerelle de paiement. La connexion d’une passerelle de paiement n’activera pas votre cycle de facturation. Vous pouvez effectuer des transactions de test illimitées et gratuites dans l’environnement de test avant de passer en production.

Sachez toutefois que vous ne pouvez connecter qu’une seule passerelle de paiement principale à un compte Snipcart. De nombreuses passerelles de paiement sont prises en charge ; pour le projet de l’association, nous avons utilisé Stripe qui a été très simple à paramétrer. Cependant vous pouvez utiliser d’autres passerelles comme Paypal et il est même possible d’intégrer sa propre passerelle de paiement dans Snipcart ! Pour plus d’informations sur ces réglages, je vous invite à consulter la documentation proposée par Snipcart.

- Comment passer en mode live (c’est à dire en production) ?

Si vous êtes satisfait de votre installation et de votre configuration, vous pouvez passer en mode Live (c’est à dire en production).

Pour passer de test à live, il vous faut :

  1. Basculez en mode Live dans votre tableau de bord (bouton central supérieur)
  2. Utilisez la clé API Live générée : elle se trouve dans Account / Api key ; elle devra venir remplacer votre clé API Test insérée dans lede votre site Zwii.

Vous n’avez théoriquement pas à redéfinir les principaux paramètres que vous avez configurés en mode Test (taxes, expédition, promotions, etc.). Il est possible de les importer dans le mode Live en utilisant la fonction « Import settings from test mode » que vous trouverez dans Account / Profile.

Bravo ! Votre boutique en ligne est désormais opérationnelle !

Alors à qui est destiné l’association ZWII & Snipcart ?

Snipcart convient parfaitement aux particuliers, aux micro-entrepreneurs, aux petites entreprises, aux associations qui souhaitent étendre les possibilités de Zwii afin d’adapter leur site à la vente en ligne et générer des recettes supplémentaires. Tout y est ! Cette solution est d’autant adaptée si vos ventes sont plutôt destinées à un public initié ou restent du moins assez privées (c’est à dire si vous ne faites pas le volume de vente d’un Amazon). Elle peut correspondre aux personnes qui souhaitent tester une activité complémentaire et qui ne souhaitent pas investir dans une artillerie lourde surdimensionnée (et donc gourmande). Même s’il faut vous familiariser avec certains aspects plus techniques du code, l’apprentissage reste accessible et la mise en place de Snipcart très rapide.

Clément Lallain

Pas encore de commentaire

Ou