Repository files navigation

Une petite boutique en ligne construite avec11ty.

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

• 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 deSplide.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

-- Version 1.0 - production

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

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

• Eleventy, ungé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 formatyaml plus intuitif pour les fichiers de configuration
• sharp, une librairie légère pour retailler les images
• terser, pour minifier les fichierjs avec le plugin 11ty
• clean-css, pour minifier lecss, on l'utilise avec le plugin 11ty
• netlify cli, pour exécuter un serveur de développement local avec les fonctionsserverless

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 commeGitLab ouGitHub 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 parstripe. 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.

Pour déployer le sitegitHub surnetlify, connectez le dépôt viaimport an existing project. Ajouter la variable d'environnement STRIPE_SECRET_KEY dansSite Settings > Environment variables. Lancez le déploiement, etnetlify 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 parnetlify.

En local, ajouter un fichier.env avec :

STRIPE_SECRET_KEY = sk_test_***

La clé privéestripe (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.

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

Ouvrez un terminal et assurez-vous queNode.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 testerstripe activer le mode test, puis récupérer laclé 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 bordstripe.

Dans un environnement simulantnetlify, 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 lesfonctions serverless comme en production.

Pour faciliter l'import de produits, unscript 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 gestioni18n dans11ty.
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

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.

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 bloquestripe checkout sur le pays choisi dans le panier.

-fr:Taïwanen:Taiwanzone:ZoneCiso:TW

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 : InclutFrance 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:250tarif:5.25    -poids_max:500tarif:7.35    -poids_max:1000tarif:9.40

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

types_colis:colis_base:poids_emballage:260capacite_points:10tube:poids_emballage:120capacite_points:5sans_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.

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.

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

• France.

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{€} ).

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

Merci à :

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

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

Stéphane Langlois
coucou@gongfucha.fr