Boutique-11ty

Une petite boutique en ligne construite avec 11ty.

Objectif

Créer une boutique simple et minimaliste pour vendre des objets ou des prestations sans complexité.

Les fonctionnalités

Terminées

• US-13 produits

  • ajoute des fiches produits
  • créé des fiches produits multi-lingues
  • convertie toutes les fiches produit en multi-lingues

• US-15 optimisation

  • pétouille responsive et bug panier
  • ajoute un sitemap et un robots.txt
  • page bienvenue
  • ajoute les tailles dans les images
  • mise en place du plugin responsive
  • minification css et js
  • ajoute un _header

• US-12 responsive

  • passe l'interface en responsive
  • passe la liste des produits en responsive
  • passe la fiche produit en responsive
  • place les css en bundle
  • passe le panier en responsive

• US-14 gérer les stocks manuellement

  • affiche le stock sur le produit
  • gère la quantité par rapport au stock

• US-08 Paiement

  • installation sur netlify
  • création des pages de succès et d'abandon
  • gère les désactivation du panier
  • création d'un fichier avec tous les pays
  • création du ticket : total - s/total - transport
  • passe les informations du panier à stripe

• US-09 Gestion des frais de transport

  • mise en place de la grille tarifaire
  • affichage de la liste des pays
  • calcul d'un produit par poids
  • calcul d'un produit par type de colis
  • calcul d'un produit par points d'encombrement
  • gestion des "sans envoi"
  • intégration css pour la mise en forme du ticket
  • documentation

• US-07 Gestion du panier

  • ajouter un produit
  • gère les badges du panier
  • récupérer les données sur la page panier
  • changer la quantité et supprimer
  • mettre en page
  • gérer les boutons "déjà ajouté"
  • mettre en forme aucun produit dans le panier et panier désactivé
  • signaler le panier avec un bouton lors du premier article
  • i18n pour le panier

• US-04 Carrousel

  • retailler les photos automatiquement
  • splide-core.min.css
  • intégrer le slider dans la fiche
  • gestion aria et tabindex
  • utilisation de Splide.js pour les carrousels

• US-06 Présentation des produits

  • Affiche les données des produits
  • Gère les styles
  • reprend le html et les styles

• US-05 Migration des fiches

  • Générer des fiches .md à partir du JSON de la boutique
  • Adapter les titres des fiches
  • Adapter le .gitignore pour ne pas enregistrer tous les produits
  • Tester l'import
  • Documenter le script de migration

• US-03 Fiche produit

  • Reprend une fiche produit
  • Affiche les données
  • Ajout une 404 et un favicon
  • Améliore l'accessibilité Aria
  • Gère l'i18n
  • Simplifie le CSS

• US-02 Gestion de l'i18n

  • Organisation des fichiers
  • Menu de sélection de la langue
  • Pages traduites
  • Traduction de l'interface

• US-01 Création de pages

  • Header
  • Footer
  • Déploiement sur GitHub Pages

À venir

-- Version 1.0 - production

• US-10 passer en plugin
• US-11 currencies
• US-16 gère le stock avec stripe

Outils utilisés

Pour garder les choses simples, nous essayons d'utiliser très peu d'outils.

• Eleventy, un générateur de site statique
• Splide.js, une bibliothèque légère pour créer des carrousels accessibles et élégants, utilisée pour la mise en œuvre des sliders de la boutique
• js-yaml pour utiliser le format yaml plus intuitif pour les fichiers de configuration
• sharp, une librairie légère pour retailler les images
• terser, pour minifier les fichier js avec le plugin 11ty
• clean-css, pour minifier le css, on l'utilise avec le plugin 11ty
• netlify cli, pour exécuter un serveur de développement local avec les fonctions serverless

Jusqu'au panier (inclus), le site est statique et fonctionne côté client, directement dans le navigateur, et peut être hébergé gratuitement sur des plateformes comme GitLab ou GitHub par exemple.

Reste quand même un pépin, pour les paiements en ligne. Une fois que la personne valide son panier en passant au paiement, nous avons choisi de passer par stripe. Cette opération de paiement est sensible, une personne bizarrement intentionnée pourrait, par exemple, adapter les tarifs de ses achats. Nous avons donc un tout petit peu d'actions qui ne se font pas que dans le navigateur de la personne qui va commander. Nous utilisons donc un autre service dans sa version actuellement gratuite (modèle freemium) : netlify.

Installer le site sur netlify

Pour déployer le site gitHub sur netlify, connectez le dépôt via import an existing project. Ajouter la variable d'environnement STRIPE_SECRET_KEY dans Site Settings > Environment variables. Lancez le déploiement, et netlify s'occupera de cloner le dépôt, installer les dépendances et construire le projet. Une fois terminé, testez le site sur l'URL attribuée par netlify.

En local, ajouter un fichier .env avec :

STRIPE_SECRET_KEY = sk_test_***

La clé privée stripe (STRIPE_SECRET_KEY) est une donnée sensible qui ne doit jamais être exposée publiquement. Elle est stockée dans un fichier .env, qui est ignoré dans le .gitignore.

Images responsives

On utilise le plugin eleventy-image pour permettre aux navigateurs de choisir la meilleure optimisation des images en fonction du contexte.

Installation

Ouvrez un terminal et assurez-vous que Node.js est installé :

$ mkdir boutique-11ty
$ cd boutique-11ty
$ git clone git@github.com:brutdethe/boutique-11ty.git .
$ npm install
$ npx @11ty/eleventy --serve

Le site devient accessible à l'adresse suivante : http://localhost:8080/

Pour tester avec le paiement

Avec stripe

Pour tester stripe activer le mode test, puis récupérer la clé secrète de test (sk_test_...) et la configurer comme variable d’environnement sous le nom STRIPE_SECRET_KEY. Tester les paiements en utilisant les cartes de test : 4242 4242 4242 4242 pour un paiement réussi, ou d’autres pour simuler des erreurs. Puis vérifier les transactions dans le tableau de bord stripe.

Puis netlify

Dans un environnement simulant netlify, Installer :

$ npm install -g netlify-cli
$ netlify login
$ netlify dev

Ça démarre un serveur local qui applique les redirections, variables d'environnement (ex. STRIPE_SECRET_KEY), et permet de tester les fonctions serverless comme en production.

Génération de Fichiers Markdown

Pour faciliter l'import de produits, un script est à disposition qui génère des fichiers Markdown pour chaque produit à partir d'un fichier JSON : produits.json. Les fichiers générés sont organisés en deux répertoires : /fr et /en.

Les noms de fichiers dans le répertoire /en conservent les titres en français pour faciliter la gestion i18n dans 11ty.
Les titres des fichiers sont normalisés pour éliminer les caractères spéciaux, les accents et les espaces, en remplaçant ces derniers par des tirets.

Pour générer les fichiers Markdown, exécutez le script suivant :

$ node generateMarkdown.js

Gestion des Frais de Transport

Fonctionnement

Le système de frais de transport est basé sur un fichier YAML : /src/_data/shipping_rate.yaml, qui contient une grille tarifaire organisée par zones géographiques, ainsi que les caractéristiques des types de colis disponibles.

Les pays

Le menu des pays est généré à partir d'un fichier yaml : /src/_data/shipping_countries.yaml.

Pour chaque pays, il y a la traduction, la zone pour le tarif postal applicable et l'abréviation ISO qui est passé à stripe et qui bloque stripe checkout sur le pays choisi dans le panier.

- fr: Taïwan
  en: Taiwan
  zone: ZoneC
  iso: TW

Grille Tarifaire

La grille tarifaire définit les frais de transport en fonction du poids total des colis et de la destination. Les zones géographiques sont :

• France : Inclut France métropolitaine, Andorra, Monaco.
• Outre-mer : France Outre-mer.
• Zone A : Union Européenne et Suisse.
• Zone B : Europe de l'Est, Norvège, Maghreb.
• Zone C : Reste du monde.

Chaque zone contient une liste de seuils de poids et les tarifs associés. Par exemple :

France:
  tarifs:
    - poids_max: 250
      tarif: 5.25
    - poids_max: 500
      tarif: 7.35
    - poids_max: 1000
      tarif: 9.40

Types de Colis

Les types de colis disponibles sont définis comme suit :

types_colis:
  colis_base:
    poids_emballage: 260
    capacite_points: 10
  tube:
    poids_emballage: 120
    capacite_points: 5
  sans_envoi: null

• colis_base : Colis standard, avec un poids d'emballage de 260 g et une capacité maximale de 10 points d'encombrement.
• tube : Emballage léger (120 g), avec une capacité maximale de 5 points d'encombrement.
• sans_envoi : Articles dématérialisés, sans poids ni frais d'expédition.

Calcul des Frais

1. Regroupement des Articles par Type de Colis : Les articles du panier sont regroupés selon leur type de colis (colis_base, tube, etc.).

2. Détermination du Nombre de Colis : Pour chaque type de colis, les points d'encombrement des articles sont additionnés. Si les points dépassent la capacité du colis, plusieurs colis sont nécessaires : [ \text{Nombre de colis} = \lceil \frac{\text{points totaux}}{\text{capacité}} \rceil ]

3. Poids Total Par Colis : Le poids total est calculé en additionnant le poids des articles et le poids des emballages requis.

4. Frais Par Colis : Le poids total est comparé à la grille tarifaire de la zone géographique sélectionnée. Le tarif correspondant est appliqué.

5. Frais Totaux : Les frais de tous les colis sont additionnés pour obtenir un montant total.

Exemple de Calcul

Panier

• Produit 1 :
  • Poids : 250 g.
  • Points : 11.
  • Type : colis_base.
• Produit 2 :
  • Poids : 100 g.
  • Points : 2.
  • Type : tube.

Destination

• France.

Calcul

1. Produit 1 :

   • 2 colis nécessaires (11 points > 10).
   • Poids total : ( 250 + (260 \times 2) = 770 , \text{g} ).
   • Tarif : ( 9.40 , \text{€} ).

2. Produit 2 :

   • 1 colis nécessaire (2 points ≤ 5).
   • Poids total : ( 100 + 120 = 220 , \text{g} ).
   • Tarif : ( 5.25 , \text{€} ).

3. Total Frais :

   • ( 9.40 + 5.25 = 14.65 , \text{€} ).

Contribuer

Si vous souhaitez contribuer, contactez : coucou@gongfucha.fr

Crédit

Merci à :

• newick pour son aide sur l'intégeration
• Antoine Vernois pour son "copilotage"

Licence

Ce projet est sous licence CC0 1.0 Universal. En bref : utilisez, modifiez, et distribuez sans restriction.

Contact

Stéphane Langlois
coucou@gongfucha.fr