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-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

• US-08 Paiement
• US-12 responsive
• US-14 gérer les stocks
• US-10 passer en plugin
• US-11 currencies
• US-13 page accueil

Outils utilisés

Pour garder les choses simples, nous utilisons 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.

Le site fonctionne côté client, directement dans le navigateur, et peut être hébergé gratuitement sur des plateformes comme GitLab ou GitHub.

Script de redimensionnement des images

Pour retailler et optimiser les images utilisées dans le carrousel, nous utilisons un script de redimensionnement :

"resize": "node ./script/resize/resize.js"

Ce script permet de :

• Redimensionner et optimiser les images placées dans le dossier photos.
• Générer des versions optimisées pour les vignettes, les images du carrousel et les miniatures de celui-ci.
• Il est exécuté automatiquement via GitHub Actions dès qu'un changement est détecté dans le dossier /photos.

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/

Génération de Fichiers Markdown

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.yaml, qui contient une grille tarifaire organisée par zones géographiques, ainsi que les caractéristiques des types de colis disponibles.

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

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