Mini-boutique de produits locaux (Alpine.js)

README.md · 2.5 Ko

# Mini-boutique de produits locaux (Alpine.js, niveau intermédiaire)

## Cas d'usage
Une petite boutique en ligne d'Antalaha : vanille, girofle, poivre sauvage, vannerie, huiles, miel… Le visiteur peut rechercher un produit, filtrer par catégorie, trier, puis remplir un panier (ajout, quantités, total en Ariary). Le panier est sauvegardé dans le navigateur quand c'est possible, sinon il reste en mémoire. Les prix sont fictifs et la « commande » est une simulation.

## Arborescence
```
alpine-boutique/
├── index.html            la page : tous les attributs Alpine sont commentés
├── css/style.css         apparence, grille responsive, transitions du tiroir
├── js/boutique.js        fonction boutique() : état, getters, méthodes, init(), stockage sûr
├── data/produits.js      PRODUITS et CATEGORIES (variables globales, pas de fetch)
├── medias/               illustration d'en-tête (SVG libre de droits)
├── site.json             titre, description, étiquettes
└── README.md             ce fichier
```

## Notions Alpine abordées
- `x-data` + `init()` (méthode appelée au démarrage)
- `x-model` (texte, liste déroulante)
- getters calculés : recherche + filtre + tri (`produitsAffiches`), total du panier
- `x-for` sur `<template>` avec `:key` (cartes, boutons de filtre, lignes du panier)
- `x-if` (créer/détruire) face à `x-show` (cacher)
- `x-transition` : modificateurs (`.opacity.duration.200ms`) et classes personnalisées
- `:class` (objet), `:style` (objet), `:disabled`, `:aria-*`, `:href`
- `x-ref` et `$refs`, `$nextTick`
- `$watch` pour sauvegarder le panier automatiquement
- `@click`, `@keydown.escape.window`
- `x-cloak`

## Pièges à connaître
- **Bac à sable** : `localStorage` lève une `SecurityError`. Le code utilise un `try/catch` et un repli en mémoire, et le signale à l'utilisateur.
- **Pas de `fetch`** vers ses propres fichiers : les données sont dans `data/produits.js`.
- **Ordre des scripts** : `produits.js`, puis `boutique.js`, puis Alpine (tous `defer`).
- `x-if` exige un `<template>` avec un seul élément enfant ; `x-for` aussi.

## Idées d'exercices
1. Ajouter un produit (et une catégorie « Boissons ») dans `data/produits.js`.
2. Ajouter un filtre « Seulement ce qui est en stock » (case à cocher + condition dans le getter).
3. Afficher les frais de livraison (gratuits dès 100 000 Ar) dans le total.
4. Ajouter un bouton « cœur » pour les favoris, sauvegardés comme le panier.
5. Remplacer le tiroir par une page séparée avec un onglet « Panier ».