Le site de commande

Pages

Chaque page existe en anglais sous /en et en arabe sous /ar. Un chemin sans langue redirige vers /en.

Le menu, les menus combinés et le composeur de repas

• Le menu de démonstration compte 64 plats répartis en huit catégories, chacun avec des textes en anglais et en arabe, des photos, des options, des allergènes et des étiquettes de régime alimentaire. Le personnel modifie tout cela dans le tableau de bord.
• Les options d'un plat sont des groupes de choix, comme une taille ou des suppléments, chacun avec sa propre variation de prix. Le prix affiché sur le bouton suit les choix.
• Le menu combiné réunit un plat principal, un accompagnement et une boisson pour un prix unique, $19.99 dans la démo, avec un supplément pour certains remplacements. Le composeur de repas de la page d'accueil choisit les trois et ouvre le menu combiné avec ce choix.
• Un plat que le personnel marque comme indisponible, ou dont le stock suivi est épuisé, reste dans le menu mais ne peut pas être ajouté.

Cuisines, livraison et retrait sur place

• Chaque commande est préparée par une cuisine. La démo en a quatre : Central, Riverside, Uptown et Harbor, chacune avec ses horaires, son fuseau horaire, son temps de préparation et ses codes postaux de livraison.
• La livraison ne se fait que vers les codes postaux qu'une cuisine indique ; le retrait se fait à l'adresse de la cuisine. Le client saisit un code postal, et le site choisit une cuisine ouverte qui le dessert, ou propose les autres possibilités.
• Une cuisine ne prend des commandes que lorsqu'elle est ouverte. Les données de démonstration démarrent le restaurant sur une horloge de démo qui maintient toutes les cuisines à 20 h 55, pour que la démo puisse commander à toute heure ; le personnel la passe sur l'horloge réelle dans Settings, Restaurant.
• Le délai estimé est le temps de préparation de la cuisine plus 5 à 15 minutes pour la livraison, et plus 0 à 10 minutes pour le retrait.
• La carte de la page des adresses est dessinée en code à partir du point de carte de chaque cuisine, et ne nécessite aucun service de cartographie.

Panier et paiement

• Le panier d'un invité est stocké dans le navigateur. Le panier d'un client connecté est conservé sur le serveur, et un panier invité y est fusionné à la connexion.
• Chaque total, dans le panier et au paiement, est calculé par l'API à partir de son propre menu et de ses paramètres : ce que le client voit est donc ce qui est facturé. Si un prix a changé ou si un plat est devenu indisponible depuis que le panier a été rempli, le paiement affiche le changement et demande au client de l'accepter.
• Frais dans la démo : livraison $2.99, retrait gratuit et minimum de livraison de $10.00. Le personnel les modifie dans Settings, Restaurant.
• Le code promo TASTE10 retire 10 % sur les plats. Les codes ne se cumulent pas avec les points utilisés, sauf si le personnel l'autorise pour ce code.
• Un invité passe commande avec un nom, un e-mail et un numéro de téléphone ; pour un client connecté, ses informations et son adresse par défaut remplissent le formulaire.
• Le paiement a lieu sur la page de Stripe ou de PayPal, ou avec le paiement de démonstration quand aucun prestataire n'est configuré. Après avoir payé, le client revient sur la page de la commande.

• Paiements

Suivi de commande

Une commande passe par les états en attente, confirmée, en préparation et prête, puis en cours de livraison et livrée, ou directement livrée quand elle est retirée sur place. Un invité la suit sur /en/track-order avec le numéro de commande et l'e-mail utilisé pour la passer ; un client la voit dans son compte. La chronologie se met à jour d'elle-même pendant que la cuisine travaille. Un numéro inconnu et un mauvais e-mail reçoivent la même réponse : le suivi ne peut donc pas servir à trouver les commandes d'autres personnes.

Comptes clients et fidélité

• Les clients s'inscrivent avec un nom, un e-mail et un mot de passe d'au moins 8 caractères. Ils se connectent uniquement sur le site : un compte client ne peut pas ouvrir le tableau de bord.
• Fidélité. Une commande payée rapporte un point par dollar de nourriture après remises, une fois livrée. 100 points retirent $5.00 d'une commande au paiement. Le compte affiche le solde et l'historique. Le personnel modifie ces deux nombres dans Settings, Restaurant.
• Les plats enregistrés suivent le client d'un appareil à l'autre, et une commande passée peut être recommandée en un clic.
• La réinitialisation du mot de passe envoie par e-mail un lien vers la page de réinitialisation du site quand l'API a un service d'e-mail configuré. Le lien fonctionne une seule fois, dans l'heure.
• Avis. La page d'un plat affiche ses avis, la moyenne, le nombre d'avis et la répartition par étoiles. Le site n'a pas de formulaire pour en écrire un : l'API reçoit l'avis d'un client connecté sur POST /api/reviews, et les avis de la démo viennent des données de démonstration.

Analytics et pixels de suivi

Six réseaux sont intégrés. Activez-en un en plaçant son id dans le .env du site puis en reconstruisant :

• Un id laissé vide ne charge aucun script. Si vous n'en définissez qu'un, définissez NEXT_PUBLIC_GTM_ID : Tag Manager peut charger les autres. Si GA4 tourne dans Tag Manager, laissez l'id GA4 vide, sinon chaque session est comptée deux fois.
• Le site envoie page_view, view_item, add_to_cart, remove_from_cart, add_to_wishlist, view_cart, begin_checkout, purchase, search, sign_up et login, avec les plats, la valeur et la devise (NEXT_PUBLIC_ANALYTICS_CURRENCY, USD par défaut).
• Les balises se chargent en même temps que la page. Si vous vendez dans l'UE ou au Royaume-Uni, placez d'abord une bannière de consentement devant elles.

Moteurs de recherche

Chaque page définit son propre titre, sa description et son adresse canonique, avec l'autre langue comme alternative. Les pages de panier, de paiement, de compte, de suivi et de connexion sont marquées noindex. /sitemap.xml liste chaque page publique dans les deux langues et chaque plat publié, et /robots.txt pointe vers lui. Définissez domain.url dans src/config/brand.config.ts avec votre vraie adresse pour que les deux l'utilisent.

• Image de marque

Le build de démo publique

Comment s'organise le code du site