← cd ../
// notes

Un calculateur de prix pour l'impression avec date de livraison en direct, sans requête vers le backend

Comment les calculateurs de Denia Print affichent un prix et une date de livraison avec compte à rebours, calculés dans le navigateur à partir de données déjà présentes sur la page, et comment le serveur revérifie chaque prix.

publié
auteur
Nicky Mitnick

Le problème

Quand on commande des imprimés, on se pose d’abord deux questions : combien ça coûte et quand vais-je les recevoir. Sur Denia Print, je voulais que l’on obtienne une réponse aux deux pendant que l’on parcourt les options, sur un site statique, sans icône de chargement après chaque choix.

Le prix est la moitié facile. La date de livraison est plus délicate. Elle dépend des jours de production de la combinaison exacte que l’on choisit, de l’heure limite de commande quotidienne du fournisseur, des jours fériés de deux pays et de l’heure qu’il est à ce moment-là.

L’approche

Prix. Le site est en Astro statique sur Cloudflare Pages. Pour la plupart des produits, le calculateur lit une grille de prix intégrée au site lors du build. Cette grille est reconstruite chaque semaine à partir de l’API du fournisseur, puis déployée. Choisir un tirage ou un type de papier ne coûte donc aucune requête. Les banderoles ont un prix qui dépend des dimensions et interrogent pour cela un petit endpoint qui renvoie un prix en direct. Le catalogue étendu fait de même, avec une réponse mise en cache à l’edge pendant 12 heures par variante.

Date de livraison. Le calculateur affiche une ligne du type « Commandez avant 11:30 (encore 2 h 14 min) et recevez votre commande entre le mer. 7 oct. et le jeu. 8 oct. ». Elle est calculée dans le navigateur à partir de quatre éléments :

  • les jours de production de la combinaison choisie, déjà fournis avec les données de prix
  • l’heure limite de commande du fournisseur : 11:30, heure d’Amsterdam, du lundi au vendredi
  • un jour ouvré pour mon propre traitement, car je contrôle le fichier avant qu’il ne parte chez le fournisseur
  • une liste de jours fériés : ceux des Pays-Bas pour la production, les jours fériés nationaux espagnols et ceux de la Comunitat Valenciana pour la livraison à Dénia et dans la Marina Alta

L’heure limite est calculée dans le fuseau horaire d’Amsterdam, pour que le navigateur gère l’heure d’été et l’heure d’hiver, et elle est affichée dans le fuseau horaire du visiteur. La ligne est redessinée toutes les 30 secondes, ainsi que lorsque l’onglet redevient visible ou que la case de retrait sur place change dans le formulaire de commande. En cas de retrait à Dénia, la ligne indique « disponible à partir de » la date la plus tardive. Les lecteurs d’écran n’annoncent la date que lorsqu’elle change, jamais le compte à rebours en cours.

J’ai étalonné la règle sur la date de livraison minimale du fournisseur lui-même, pour 40 combinaisons de produit et de rapidité. Le jour de commande plus les jours de production correspondait 21 fois, tombait plus tard 17 fois et plus tôt 2 fois. Avec ma journée de traitement en plus, la période que j’affiche se situe du côté tardif dans 39 cas sur 40. Quelques produits sont plus lents que ne le laissent supposer leurs jours de production. Ils reçoivent des jours ouvrés supplémentaires issus d’un petit tableau.

La date est reprise dans les lignes de commande et dans les e-mails, pour que le client et moi regardions la même promesse.

Revérifier le prix. Le serveur ne peut pas se fier à un prix calculé par le navigateur. Le panier est stocké dans localStorage, avec 20 lignes au maximum. Si le stockage est bloqué, le site fonctionne simplement produit par produit. Avant l’envoi du panier, la page redemande les prix aux mêmes sources que les calculateurs. Un prix modifié ou un produit qui n’est plus en vente est signalé et bloque l’envoi. Rien n’est jamais ajusté en silence.

Le serveur recommence ensuite pour chaque ligne : les produits de la grille par rapport à la grille de prix, les banderoles et les articles du catalogue par rapport à un devis en direct du fournisseur. Une ligne incorrecte reçoit un marqueur, et le tableau de bord retient pour cette ligne la commande chez le fournisseur jusqu’à ce que quelqu’un l’ait examinée. Pour le catalogue étendu, le navigateur ne connaît que les positions des options. La référence article du fournisseur reste sur le serveur.

Les compromis

  • La date est une estimation, et je le montre avec une période. Je préfère me situer du côté tardif : chaque jour compté doit être un jour ouvré dans les deux pays. Une commande qui arrive un jour plus tôt ne pose pas de problème, l’inverse si.
  • La liste des jours fériés est tenue à la main, une fois par an. Un test échoue deux mois avant que la liste n’arrive à son terme, il est donc impossible de l’oublier. Une année manquante rendrait les dates autour de ces jours fériés trop optimistes d’un jour tout au plus.
  • L’heure limite de commande est figée dans le code. Si le fournisseur la déplace, je dois suivre. L’étalonnage est à refaire de temps en temps.
  • Le compte à rebours utilise l’horloge du visiteur. Si l’horloge de l’appareil est mal réglée, le compte à rebours est faux.
  • Les devis en direct sont plafonnés. Au plus 10 lignes par commande reçoivent un devis en direct du fournisseur. Les autres sont signalées pour un contrôle manuel, afin qu’un seul panier ne se disperse pas en 20 appels chez le fournisseur.

Pour en savoir plus sur la boutique, consultez la page projet de Denia Print.