La boutique
Ce que la boutique fait pour les clients : ses pages, le panier et la liste d'envies, le paiement, les comptes, le suivi de commande, la cabine d'essayage, les balises analytics et les moteurs de recherche.
Pour le pack Full Stack
Pages
Chaque page existe en anglais sous /en et en arabe sous /ar. Un chemin sans langue redirige vers /en.
| Chemin | Ce qu'elle affiche |
|---|---|
/en | La page d'accueil : en-tête, catégories, nouveautés, bannière d'offre, meilleures ventes et sections éditoriales. |
/en/shop | Tous les produits, avec recherche, filtres par catégorie, prix et mise en avant, tri et pagination. Les filtres sont dans l'adresse : chaque vue peut donc être partagée. |
/en/categories | Les catégories, avec recherche et tri. |
/en/products/<slug> | Un produit : galerie, variantes, prix, note, avis, produits associés, et les boutons de liste d'envies et de cabine d'essayage. |
/en/cart | Le panier et son récapitulatif. |
/en/checkout | Les informations de livraison et le paiement sur une seule page, à côté du récapitulatif de la commande. Ouvert aux visiteurs sans compte. |
/en/order-confirmation/<number> | Le numéro de commande à conserver pour le suivi, avec des liens pour continuer les achats et pour suivre la commande. |
/en/track-order | Suivi de commande par numéro de commande et e-mail, sans compte. |
/en/about, /en/contact, /en/faq | Pages d'assistance. |
/en/auth/login, /en/auth/register, /en/auth/forgot-password, /en/auth/reset-password | Connexion et création de compte. Un client connecté en est redirigé. |
/en/account | L'espace connecté : une vue d'ensemble, les commandes et leur détail, les adresses, le profil, le suivi de commande et la liste d'envies. Un visiteur non connecté est envoyé vers la page de connexion. |
/en/wishlist redirige vers /en/account/wishlist.
À brancher avant la mise en ligne
Le formulaire de contact et le formulaire de newsletter du pied de page confirment l'envoi au client mais n'envoient rien tant que vous ne les avez pas connectés, et le template n'a pas de pages de conditions ni de confidentialité, alors que le formulaire d'inscription demande aux clients de les accepter. Connectez les deux formulaires à votre propre messagerie ou service d'assistance et ajoutez ces pages avant de vendre.
Panier et liste d'envies
- Le panier et la liste d'envies sont conservés dans le navigateur du client, pour les visiteurs sans compte comme pour les clients connectés : ils survivent donc à un rechargement et à une nouvelle visite sur le même appareil.
- Tout le monde peut ajouter un produit à la liste d'envies depuis une carte ou une page produit. La page de la liste d'envies se trouve dans l'espace compte : la consulter demande donc d'être connecté.
- Le panier affiche le sous-total, la livraison (gratuite à partir de 75 $, sinon 9,99 $) et le total. L'API recalcule le prix de chaque commande à partir de son propre catalogue au moment où elle est passée, avec la même règle de livraison, et le panier ne suit jamais le client sur un autre appareil.
Paiement
Une seule page : prénom et nom, e-mail, numéro de téléphone facultatif, adresse, ville, code postal et pays, puis le moyen de paiement. Les visiteurs sans compte paient avec leur e-mail.
- Le paiement à la livraison est sélectionné par défaut et confirme la commande immédiatement.
- La carte passe par Stripe, dans la page. Elle a besoin de la clé publiable dans la boutique, ainsi que de la clé secrète et du webhook dans l'API.
- Le récapitulatif affiche la livraison facturée par l'API, gratuite à partir de 75 $ et sinon 9,99 $, sans taxe.
- Il n'y a pas de champ de code promo.
NEXT_PUBLIC_DEMO_CHECKOUT=truepréremplit un acheteur généré et ajoute, à côté du titre de la livraison, un bouton qui en tire un nouveau. Gardezfalsepour une vraie boutique.
Comptes clients
- L'inscription demande un prénom et un nom, un e-mail, un mot de passe d'au moins 8 caractères et la case des conditions.
- La connexion fonctionne depuis sa page et depuis une fenêtre de connexion qui s'ouvre partout dans la boutique. Les clients et le personnel ont des comptes séparés : un client ne peut pas se connecter au tableau de bord admin.
- Le profil a deux onglets : les informations du client et le changement de mot de passe.
- Les adresses peuvent être ajoutées, modifiées et supprimées, et l'une d'elles définie par défaut.
- Les commandes listent les commandes du client, chacune avec son statut, son numéro de suivi, ses articles, ses totaux et ses adresses.
L'e-mail a besoin de votre service d'envoi
Le template n'envoie aucun e-mail : ni confirmation de commande, ni avis d'expédition, ni message de réinitialisation du mot de passe. Hors production, l'API écrit le jeton de réinitialisation dans son journal, et la page de réinitialisation s'ouvre à /en/auth/reset-password?token= suivi de ce jeton. Avec NODE_ENV=production, le jeton n'est envoyé nulle part tant que vous n'avez pas connecté un service d'e-mails dans forgotPassword, dans back-end/src/modules/customer-auth/customer-auth.controller.ts.
Avis
- Chaque page produit affiche ses avis et un résumé des notes. Un avis d'un client qui a acheté le produit porte un badge « Verified Purchase ».
- Les clients ne peuvent pas écrire d'avis : ni la boutique ni le tableau de bord admin n'ont de formulaire pour cela, ce sont donc les avis de démonstration que la boutique affiche.
- L'API accepte les avis des clients connectés sur
POST /api/reviews, un par client et par produit : en publier un nouveau met à jour le premier.
Suivi de commande
/en/track-order demande le numéro de commande et l'e-mail avec lequel la commande a été passée : un numéro deviné ne révèle donc rien. Un lien avec ?order= remplit le numéro. Les clients connectés suivent leur commande depuis leur compte avec le seul numéro de commande.
La recherche autorise 10 tentatives par minute depuis une même adresse.
La cabine d'essayage
Quand la cabine d'essayage est activée sur l'API, les clients peuvent voir un produit porté avant de l'acheter. Sans elle, rien de tout cela n'apparaît.
- Un cintre « Try it on » sur chaque carte produit, un bouton dans la galerie du produit, et un panneau de cabine d'essayage ancré sur chaque page.
- Le rendu est dessiné sur un mannequin, ou sur la propre photo en pied du client (JPG, PNG ou WebP, jusqu'à 12 Mo) avec « Use my photo ».
- Sur la boutique d'exemple, elle affiche la photo du produit lui-même, avec une note indiquant que le rendu n'a pas été dessiné.
Analytics et pixels de suivi
Six réseaux sont intégrés. Collez un identifiant dans storefront/.env (avec Docker Compose, le .env à côté de docker-compose.yml) et reconstruisez. Un identifiant laissé vide ne charge aucun script.
| Variable | Réseau |
|---|---|
NEXT_PUBLIC_GTM_ID | Google Tag Manager |
NEXT_PUBLIC_GA4_MEASUREMENT_ID | Google Analytics 4 |
NEXT_PUBLIC_META_PIXEL_ID | Facebook et Instagram |
NEXT_PUBLIC_TIKTOK_PIXEL_ID | TikTok |
NEXT_PUBLIC_SNAPCHAT_PIXEL_ID | Snapchat |
NEXT_PUBLIC_PINTEREST_TAG_ID |
NEXT_PUBLIC_ANALYTICS_CURRENCY (USD par défaut) est envoyé avec chaque valeur, et NEXT_PUBLIC_ANALYTICS_DEBUG=true affiche chaque événement dans la console du navigateur. Si vous ne définissez qu'un seul identifiant, choisissez Tag Manager : il peut charger les autres depuis sa propre interface. Si GA4 tourne dans votre conteneur Tag Manager, laissez NEXT_PUBLIC_GA4_MEASUREMENT_ID vide, sinon chaque session est comptée deux fois.
| Événement | Déclenché quand |
|---|---|
page_view | Chaque navigation, la première comprise |
view_item | Une page produit finit de se charger |
add_to_cart | Add to cart, Buy now, ou une augmentation de quantité dans le panier |
remove_from_cart | Une ligne est supprimée, ou sa quantité diminuée |
add_to_wishlist | Un produit est ajouté à la liste d'envies |
view_cart | La page du panier s'ouvre avec quelque chose dedans |
begin_checkout | La page de paiement s'ouvre |
purchase | La commande est créée et le paiement validé |
search | Un terme de recherche se stabilise dans le panneau de recherche |
sign_up | Un compte est créé |
login | Un client se connecte |
Consentement
Les balises se chargent en même temps que la page. Si vous vendez dans l'UE ou au Royaume-Uni, placez un bandeau de consentement devant elles avant la mise en ligne : les balises sont montées par <AnalyticsScripts /> dans src/app/layout.tsx.
Moteurs de recherche et partage
- Chaque page publique a son propre titre et sa propre description, issus de
messages/seo/, avec un lien canonical et des alternatives en anglais, en arabe et dans la langue par défaut. /robots.txttient les pages de compte, de connexion, de panier, de paiement et de confirmation de commande à l'écart des moteurs de recherche, et indique le sitemap./sitemap.xmlliste les pages publiques dans les deux langues, ainsi que chaque produit lorsque le serveur peut joindre l'API.- Chaque page porte les informations de l'organisation et du site de la boutique pour les moteurs de recherche, recherche sur le site comprise.
- Tout cela est construit à partir de
NEXT_PUBLIC_SITE_URL: réglez-la sur votre vraie adresse avant la mise en ligne, et reconstruisez.
La boutique d'exemple
Sans NEXT_PUBLIC_API_BASE_URL, la boutique fonctionne sur une boutique d'exemple dans le navigateur et affiche une mention « Sample data » qu'un visiteur peut fermer jusqu'au prochain chargement de page.
- N'importe quel e-mail et mot de passe vous connectent en tant que client d'exemple. La navigation, les filtres, le panier, la liste d'envies, les adresses et l'historique des commandes fonctionnent tous, et les modifications sont conservées dans le navigateur.
- Le paiement facture la livraison comme le fait l'API et aboutit sans appeler Stripe.
- Une fois votre API connectée,
yarn remove:mocksupprime la boutique d'exemple et sa mention. La commande gardepublic/mock-media/, vers lequel pointe encore un backend rempli sans bucket.
storefrontyarn remove:mockOù modifier les choses
| Élément | Où, dans storefront/ |
|---|---|
| Nom, logo, coordonnées, liens vers les réseaux sociaux, images de partage | src/config/brand.config.ts |
| Couleurs | src/styles/theme-variables.css |
| Chaque mot visible | messages/<namespace>/en.json et ar.json |
| Titres des pages dans les résultats de recherche | messages/seo/ |
| La mise en page d'une page | src/app/[locale]/ pour la route, src/features/ pour ses parties |
| Balises marketing | src/config/analytics.config.ts, activées depuis .env |
Comment le code de la boutique s'articule
Inclus avec votre achat. Connectez-vous pour le lire, ou ouvrez-le dans votre téléchargement.
La structure et les conventions du code, et comment ajouter un réseau de suivi.
Ce que l'API fait pour la boutique
Le catalogue, les comptes, les adresses, les commandes, le suivi, les avis et la cabine d'essayage de la boutique sont servis par les routes publiques et clients de l'API.