Avec le confinement, les commerçants ont dû fermer leurs portes depuis un petit moment maintenant. Et le confinement traîne en longueur… Du coup, certaines boutiques essayent de s’adapter et de rebondir.

C’est notamment le cas de « Mercredi Biscuiterie », une boutique/salon de thé sur Lyon, qui a décidé de proposer une partie de ses délicieuses gourmandises sur internet pour relancer son activité tout en respectant les règles de distanciation.

Thérèse (Mercredi Biscuiterie) s’est montrée très rapidement ouverte d’esprit pour tester un site e-commerce basé sur Gatsby JS et Snipcart. D’autant qu’à la base, c’est un site provisoire pour la durée du confinement. Nous sommes donc parties dans un mode « start-up », on lance en prod et on corrige !

Les services et la techno !

Gastby JS est un générateur de site statique. Cela veut dire qu’il construit des pages html statiques à partir d’un code développé avec Node JS, GraphQL et React JS.
Une fois générés, les fichiers (HTML/JS) peuvent être placés sur n’importe quel serveur. Pas besoin de langage serveur (PHP, Java, Ruby,..).
Pour ce projet, nous utilisons Netlify pour automatiser la mise en production. J’y reviendrais un peu plus bas.
Pour en finir sur Gatsby JS, l’avantage par rapport à d’autres générateurs (oui, il y en a d’autres), c’est que votre site est une Web App React. Nous avons donc l’avantage d’avoir une Web App tout en ayant du SEO et de la performance grâce au fichier statique ! Vous me suivez ?

SnipCart est une solution e-commerce qui s’intègre à n’importe quel site. Il ajoute toute la partie panier, commande, paiement, gestion du stock, etc.
Il faut des compétences en développement pour l’intégrer, mais la doc est assez complète et ils sont très réactifs pour l’assistance. Nous avons intégré la version 3 (lancé fin 2019), c’est donc une version qui est en pleine évolution, mais très stable.

Forestry est un service qui ajoute une partie administration à votre site statique. Il faut configurer un fichier pour déterminer les types éditables et les champs de formulaire. C’est un système très bien pensé, sécurisé et facile à prendre en main.

Netlify est un service d’hébergement et de cloud computing. Vous avez la partie CDN pour héberger vos fichiers (site) et d’autres services, avec par exemple les fonctions serveless, les forms, etc. Un des meilleurs services actuels pour les projets modernes.

Et les data, elles sont où les data !

Gastby JS peut exploiter toutes formes de sources de donnée. C’est une de ses plus grandes forces.

Étant un adepte des fichiers markdown (.md), je me suis naturellement tourné vers cette façon de gérer la data du site. D’autant que forestry, ne gère que ce type de stockage.

Tout est donc stocké sur des fichiers markdown avec une partie « frontmatter » pour les parties spécifiques (prix, catégorie, etc..) et le reste pour le contenu et les descriptions.

Donc pas de base de données pour ce site. Plus simple à gérer et plus sécurisé.

Automatisation automatique !

Netlify, par défaut, automatise les mises en production. L’utilisation la plus courante du service est de créer un site branché sur un répertoire Github.

Notre projet stocké sur Github (repository privé) est donc la pièce centrale de l’infrastructure.

Toutes les modifications de contenu via forestry ou de code par le développeur, une fois déposées sur le repository Github sont détecté par Netlify. Ce dernier lance un build et déploie en production la nouvelle version automatiquement. Cette phase prend entre 1mn et 2mn.

Gatsby JS snipcart netlify

Personnalisation de Snipcart

Comme dit plus haut, la version 3 de Snipcart est récente. Elle évolue assez régulièrement.
Mais à ce jour, c’est déjà bien complet et ils ont pensé à la possibilité de customiser des éléments pour le projet.

Pour la partie css, on peut modifier les éléments (couleur, taille) sans problème.

Snipcart permet d’interagir avec une API pour récupérer des éléments du compte. Notamment, les produits avec le stock (quand on active l’inventaire).
Nous avons donc implémenté une gestion du stock dynamique sur le site. Le site appelle l’API via une fonction Netlify et indique les produits non disponibles.

Nous avions aussi une problématique de produit uniquement en retrait. Les modes de livraison de base ne permettent pas de gérer ça. Par contre, on peut facilement créer un service de gestion des livraisons et brancher le compte.
Nous avons donc créé un petit script dans une fonction Netlify qui analyse les codes postaux et les metadata des produits du panier pour proposer les modes de livraison possibles.

Nous avons aussi pu ajouter des champs supplémentaires dans le processus de commande, notamment l’acceptation de CGV.

Le résultat

Avec tout ça, nous obtenons un site rapide et sécurisé qui remplit parfaitement sa fonction.
Un site capable de supporter la montée en charge puisqu’il ne s’agit que de fichier statique.
Une gestion e-commerce simple avec une interface complètement séparée et sécurisée.
Une gestion du contenu avec une interface très simple facile à prendre en main.
Pas de mise à jour de plugin tous les 2 jours (coucou Wordpress !)

Nous avons eu quelques bugs de dernières minutes, corrigées très rapidement et mises en ligne tout aussi rapidement.

Nous allons donc suivre le projet pour avoir un retour d’utilisation sur un plus long terme, mais pour le moment, le résultat est plus que positif.

Le site : https://www.mercredibiscuiterie.com/

Coût structure :

Nous avons utilisé des comptes gratuits de premier niveau. Pour le moment, c'est suffisant. Un compte payant existe chez Netlify pour un site à plus fort trafic.

  • Forestry : compte gratuit (1erniveau)
  • Netlify : compte gratuit (1erniveau) 300mn de build, 125 000 appels de fonctions, 100 messages par formulaire.
  • Github : compte gratuit (répertoire privé)
  • Snipcart : 2% + (commission stripe 1,4% + 0,25 euro par transaction).
  • Développement : privé (Gastby JS est open source)
Un nouveau site Wordpress pour le club de voile de Sevrier