Ember & Oak, boutique en ligne
Un template e-commerce complet pour un torréfacteur : fiches produit à options, abonnement, panier et commande validée.
Ember & Oak, boutique en ligne
Un template e-commerce complet pour un torréfacteur : fiches produit à options, abonnement, panier et commande validée.
- Panier en tiroir, gardé dans le navigateur entre deux visites
- Seuil de livraison offerte, suivi par une barre de progression dans le panier
- Abonnement avec remise, choisi directement sur la fiche produit
Contexte
Ember & Oak est un torréfacteur fictif installé à Hamilton, au Canada. L’entreprise est fictive : noms, prix, avis et chiffres sont du contenu de démonstration. Le code, lui, est complet et déployable.
Le défi
Montrer qu’une boutique peut être rapide et soignée sans plateforme lourde : catalogue, options, abonnement et tunnel de commande, le tout en site statique.
Ce que j’ai fait
- Boutique avec filtres (type, torréfaction) et tri.
- Fiches produit avec taille, mouture, quantité et prix « abonnement ».
- Un mini-quiz en deux questions qui recommande un café.
- Panier en tiroir (balise
<dialog>native, focus piégé) et page panier, sauvegardés dans le navigateur. - Commande avec validation en direct (y compris les codes postaux canadiens) et page de confirmation. Pas de champ de carte : en production, cette étape passe la main à Stripe Checkout ou Shopify.
- Sachets de café illustrés, générés à partir des données produit, pour un catalogue toujours cohérent.
Résultat
Un site Nuxt généré en pages statiques, hébergé sur Cloudflare, prêt à être branché sur un vrai paiement. Le code est public sur GitHub.
Un projet comparable en tête ?
Racontez-moi votre projet en quelques lignes. Je vous réponds personnellement, avec des questions ou une première estimation.