Vendre un pack dont chaque pièce a sa taille : le bundle Magento 2 avec Hyvä

Un club de football commande des ensembles pour ses U11 : survêtement, maillot, short, chaussettes. Cinq pièces, vendues ensemble à prix réduit. Chaque pièce existe en plusieurs tailles et en plusieurs coloris, et les tailles ne se déduisent pas les unes des autres — un enfant peut prendre du 10 ans en haut et du 12 en bas.

C’est un cas classique en e-commerce sportif, et c’est un vrai casse-tête d’interface.

Pourquoi le pack n’est pas un produit comme un autre

Magento 2 propose le type bundle exactement pour ça : un produit composé d’autres produits, avec son propre prix. La difficulté n’est pas de créer le bundle, elle est ailleurs.

Un bundle dont les composants sont des produits configurables demande au client de faire non pas un choix, mais dix : une couleur et une taille par pièce. Présenté naïvement, cela donne une page interminable où l’on ne sait plus ce qu’on a rempli. Le client abandonne, ou pire, valide un panier incomplet et découvre l’erreur à la livraison.

Le problème à résoudre n’est donc pas technique. C’est un problème de charge mentale.

La réponse : rendre l’avancement visible en permanence

L’approche retenue sur le pack adidas Entrada 26 d’Ekinsport tient en une idée : le client ne doit jamais avoir à se demander où il en est.

Chaque pièce est une étape numérotée. Les cinq composants sont présentés comme une liste ordonnée — 1 Haut d’entraînement, 2 Pantalon, 3 Maillot, 4 Short, 5 Chaussettes — chacun avec sa vignette, son choix de couleur et son choix de taille. On avance dans une liste, pas dans un formulaire.

Une pièce complétée change d’état. Dès que la couleur et la taille sont choisies, la pastille numérotée devient une coche verte, une barre verte apparaît sur le côté de la carte, et les libellés génériques laissent place aux valeurs retenues : « Voir les couleurs disponibles » devient « Rouge », « Choisir une taille » devient « Taille 164 cm ». La référence produit correspondante s’affiche.

La barre persistante en bas d’écran fait office de tableau de bord. C’est le point le plus important de l’interface, et elle fait trois choses à la fois :

• les pièces terminées portent une coche verte, les autres gardent leur numéro — le rapport fait / restant se lit d’un coup d’œil, sans compter ;
• la taille choisie est inscrite sous chaque vignette (164 cm, 128 cm), ce qui permet de vérifier ses choix sans remonter dans la page ;
• la vignette prend la couleur sélectionnée — le haut passe au rouge, le maillot au bleu ciel. Le client ne voit pas une liste de cases cochées, il voit l’ensemble qu’il est en train de composer.

Le bouton d’ajout au panier reste désactivé tant que les dix sélections ne sont pas faites, avec la consigne affichée juste au-dessus : « Sélectionnez les tailles et couleurs de chaque produit ». Un bouton grisé qui explique pourquoi il l’est vaut mieux qu’un bouton actif qui renvoie une erreur après le clic.

Trois détails qui font la différence

Chaque composant renvoie vers sa fiche produit. Un petit lien externe à côté du nom permet d’aller voir le maillot seul, ses photos et sa description complète. Le pack ne coupe pas le client de l’information détaillée — il évite juste de la lui imposer.

Le prix est annoncé comme celui de l’ensemble. « 65,99 € l’ensemble », barré à 109,95 €, avec le pourcentage de remise. L’unité de compte est le pack, jamais la somme des pièces : c’est ce qui donne sa raison d’être au produit.

La mention « Aucune réduction supplémentaire applicable » est affichée d’emblée. Un pack est déjà une remise ; le dire avant que le client ne tente un code promo évite une déception au paiement, moment où l’abandon de panier coûte le plus cher.

Ce qu’il faut retenir

Le type bundle de Magento 2 fait très bien son travail côté données : un produit, un prix, des composants, un stock cohérent. Ce qu’il ne fait pas, c’est décider comment le client va traverser les choix. C’est du ressort du thème.

Et c’est là que le choix d’un front maîtrisé compte. Sur une base Hyvä, une barre de récapitulatif persistante et un bouton conditionné à l’état de sélection se construisent avec quelques dizaines de lignes d’Alpine.js, sans surcharger la page. Sur un thème Luma standard, le même comportement se paie en poids de JavaScript — précisément ce dont on cherche à se débarrasser.

Vendre un pack, c’est vendre une simplification. L’interface doit être plus simple que d’acheter les cinq pièces séparément, sinon le pack ne sert à rien.