Boutique de landing pages

Maroc Games vend des voitures miniatures de collection, et chaque campagne publicitaire a besoin de sa propre page. Plutôt que d’en construire une à la main par produit, la boutique génère chaque landing page à partir d’une fiche produit — photos, variantes de couleur, prix, offres groupées et argumentaire de vente sont tous des données : mettre un nouveau produit en ligne, c’est une fiche, pas un redéploiement.

Le front-end React tient dans une seule route dynamique. app/products/[product] lit la fiche du produit côté serveur et renvoie du HTML fini : un acheteur en données mobiles reçoit donc la page elle-même, et non un bundle qui doit ensuite aller chercher quoi afficher ; la racine redirige vers le produit par défaut, comme le faisait l’original. Les images produit sont déjà optimisées en webp et avif et sont servies telles quelles au lieu d’être retraitées à chaque requête — sur une page dont tout le métier est de s’afficher vite sur un téléphone en réseau cellulaire, c’est l’essentiel du budget de performance.

Le tunnel de commande est la partie qui devait être exacte, parce que c’est là qu’est l’argent. Un seul POST vers /api/order valide les trois champs, horodate la commande à l’heure d’Africa/Casablanca et pousse un message formaté sur le téléphone du client via Telegram — pour une activité en paiement à la livraison, cette notification est le système de commande : le client la lit et rappelle l’acheteur pour confirmer avant toute expédition. La route répond ensuite par une redirection vers la page de remerciement du produit, porteuse des empreintes SHA-256 du téléphone et du nom ainsi que d’un identifiant externe dérivé — la conversion peut donc être rattachée côté serveur sans qu’aucune donnée personnelle ne circule dans une URL.

Rien de tout cela n’a commencé en React. La boutique était d’abord une application Flask sur cPanel — MySQL derrière les produits et les commandes, l’API Conversion Meta pour remonter les conversions côté serveur plutôt que de se fier au pixel navigateur, Apache devant via passenger_wsgi — et c’est elle qui a prouvé que le modèle fonctionnait. La reconstruire en Next.js fut un portage, pas une refonte, et le code le dit là où ça compte : le gestionnaire de commande est porté depuis le point d’entrée du formulaire Flask, les chargeurs de produits et de pages de remerciement reprennent ses fonctions load_product_data, et la redirection d’accueil reprend son home(). Mêmes URL, mêmes pages de remerciement, mêmes horodatages de Casablanca — c’est la seule raison pour laquelle les campagnes en cours, qui pointaient sur ces liens, ont pu continuer pendant la bascule.

Tout ce qui est visible d’emblée sert à conclure la vente : un bandeau « quantité limitée » fixé en haut, l’ancien prix barré à côté du prix en MAD, un badge livraison gratuite, et des boutons Acheter répétés entre les photos produit pour que l’appel à l’action ne soit jamais à plus d’un scroll. Ni compte client, ni panier à abandonner — l’acheteur choisit une couleur et une offre, remplit trois champs et valide la commande.