Les boutons de quantité +/- du thème ne modifient pas l'offre sélectionnée

Si les boutons de quantité de votre thème ne modifient pas l'offre sélectionnée, vérifiez d'abord le contrôle de quantité utilisé par votre remise. Une quantité saisie réduite à un palier ne correspond pas à un bouton qui n'envoie jamais de mise à jour au widget.

J'ai saisi 8, mais le panier en a reçu 6

Dans la configuration habituelle sans sélecteur de quantité Bundlex, le champ du thème permet de naviguer entre les paliers configurés. Une quantité correspondant exactement à un palier peut sélectionner cette carte, tandis qu'une quantité intermédiaire peut laisser l'offre actuelle sélectionnée. L'ajout au panier utilise alors la quantité de cette offre. Saisir 8 avec « Acheter 6 » sélectionné ne garantit pas l'ajout de 8 articles.

Pour permettre aux clients de choisir des quantités flexibles, activez Sélecteur de quantité dans l'onglet Articles supplémentaires de la remise, lorsque cette option est disponible. Il fonctionne avec les abonnements. S'il est désactivé, le tableau de bord indique le paramètre qui le bloque. Consultez les paramètres avec lesquels il ne peut pas être combiné.

Lorsque le sélecteur de Bundlex est actif, le champ du thème reflète son résultat au lieu de contrôler une deuxième quantité. Certaines boutiques disposent d'une configuration distincte de quantité native activée par l’équipe d’assistance pour les paliers simples, mais ce n'est pas la configuration par défaut. Consultez le comportement de la quantité du thème.

Si la sélection facultative de l'offre est activée et qu'aucune offre n'est sélectionnée, les contrôles du thème fonctionnent normalement et ne permettent pas de naviguer entre les cartes d'offres. Les vérifications ci-dessous concernent une offre active dans la configuration de navigation entre les paliers.

Comment la synchronisation est censée fonctionner

Deux directions sont à garder à l'esprit :

• De l'offre vers la quantité : lorsqu'un client clique sur une offre, par exemple Acheter 1, Acheter 2 ou Acheter 3, le widget définit le champ de quantité du thème sur la quantité de cette offre. Cela dépend de la capacité de Bundlex à trouver le bon champ de quantité.
• De la quantité vers l'offre : lorsqu'un client modifie la quantité avec les boutons +/- du thème ou en la saisissant, le widget doit détecter la nouvelle valeur et sélectionner l'offre dont la quantité correspond exactement.

La seconde direction peut ne pas fonctionner lorsque le thème modifie le champ sans déclencher d'événement ou lorsque le widget surveille un autre champ de quantité. Un nombre qui ne correspond à aucun palier ne prouve pas à lui seul qu'il s'agit d'un problème d'événement et ne garantit pas que l'offre est désélectionnée.

Pourquoi les boutons +/- ne mettent pas l'offre à jour

Le widget écoute les événements natifs change et input sur le champ de quantité. La saisie normale déclenche généralement ces événements, mais le bouton +/- personnalisé d'un thème peut ne pas les déclencher.

De nombreux thèmes implémentent toutefois leurs boutons +/- en définissant directement la valeur du champ en JavaScript, par exemple input.value = newValue. Cette affectation de valeur ne déclenche pas les événements change ou input. Le nombre change à l'écran, mais aucun événement n'est envoyé. Le widget ne sait donc jamais que la quantité a changé et l'offre sélectionnée reste inchangée.

Ce problème n'est propre à aucun framework particulier. Toute affectation programmatique de valeur ignore ces événements. Seule une interaction réelle de l'utilisateur, comme la saisie au clavier, les déclenche. Les thèmes basés sur l'élément personnalisé <quantity-input> de Shopify, utilisé par Dawn, déclenchent un événement change après la mise à jour de la valeur. C'est pourquoi ces thèmes fonctionnent immédiatement.

Comment confirmer qu'il s'agit de la cause

1. Ouvrez les outils de développement de votre navigateur, avec F12 ou Cmd+Option+I sur Mac, puis accédez à l'onglet Console.
2. Cliquez sur un bouton +/- sur la page produit.
3. Essayez une quantité qui correspond exactement à une offre disponible. Si le nombre change, mais pas l'offre sélectionnée, demandez au développeur de votre thème de vérifier si le bouton déclenche un événement change ou input sur le champ de quantité surveillé par Bundlex.

Les thèmes concernés utilisent généralement des boutons +/- personnalisés qui définissent directement la valeur, plutôt que le composant Web <quantity-input> de Shopify.

La solution : déclencher un événement change

Cette correction se fait dans le thème, il s'agit donc d'une modification rapide pour la personne qui gère le code de votre thème. Demandez à votre développeur de thème de déclencher un événement change juste après que le gestionnaire +/- a défini la nouvelle valeur de quantité :

input.dispatchEvent(new Event('change', { bubbles: true }));

Ici, input correspond à l'élément de saisie de quantité mis à jour. Cela informe les scripts qui écoutent cet événement, notamment Bundlex. Testez les boutons de quantité du thème et le panier après la modification.

Le cas des champs de quantité en double, notamment dans les barres de panier fixes

Certains thèmes ajoutent une barre « Ajouter au panier » fixe ou persistante qui duplique le formulaire produit, y compris un second champ de quantité. Les deux champs partagent souvent le même name="quantity" et parfois même le même id. Le sélecteur par défaut de Bundlex, input[name="quantity"], peut alors cibler le mauvais champ, de sorte que l'offre et la quantité du formulaire principal ne correspondent jamais.

Comment confirmer la présence de doublons

1. Ouvrez les outils de développement et accédez à l'onglet Console.
2. Exécutez : document.querySelectorAll('input[name="quantity"]').length
3. Si le résultat est supérieur à 1, votre page contient plusieurs champs de quantité.

La solution : un sélecteur de champ de quantité personnalisé

Faites pointer Bundlex uniquement vers le champ de quantité du formulaire principal, en excluant la barre fixe. Contactez l'assistance avec l'URL du produit pour obtenir une correction du sélecteur, l'assistance pourra la configurer dans les paramètres du widget de la boutique. Si vous devez examiner un ancien sélecteur déjà enregistré dans l'intégration de l'application, voici où le trouver :

1. Dans votre interface d'administration Shopify, ouvrez l'éditeur de thème.
2. Accédez à Intégrations d'applications et recherchez Bundlex Bundles.
3. Activez Afficher les paramètres avancés, puis définissez le sélecteur de quantité sur un sélecteur qui cible uniquement le champ de quantité du formulaire principal.

Le sélecteur exact dépend de votre thème. Voici deux exemples qui fonctionnent avec certains thèmes :

.product-form__item--submit input[name="quantity"]
form.shopify-product-form:not(#addtocart-sticky form) input[name="quantity"]

Si aucun des deux sélecteurs ne fonctionne avec votre thème, partagez l'URL de la page produit avec l'assistance afin qu'elle puisse identifier le bon sélecteur. Si l'assistance a déjà configuré une surcharge, celle-ci peut avoir priorité sur le champ du thème.

Quand contacter l'assistance

Si vous avez confirmé que les boutons +/- modifient la valeur sans déclencher d'événement, ou qu'il existe des champs de quantité en double, et que les solutions ci-dessus ne résolvent pas le problème, contactez l'assistance avec l'URL de la page produit. Il est également utile d'inclure les messages [Bundlex] affichés dans la console du navigateur ainsi que le code HTML du formulaire produit.