De +/- knoppen voor hoeveelheden van het thema wijzigen de geselecteerde aanbieding niet

Als de knoppen voor hoeveelheden van je thema de geselecteerde aanbieding niet wijzigen, controleer dan eerst welke hoeveelheidsregeling je korting gebruikt. Een ingevoerde hoeveelheid die naar een niveau wordt verlaagd, verschilt van een knop die nooit een update naar de widget verzendt.

Ik heb 8 ingevoerd, maar de winkelwagen ontving 6

In de gebruikelijke configuratie zonder de eigen aantalkiezer van Bundlex navigeert de invoer van het thema tussen geconfigureerde niveaus. Een exacte hoeveelheid van een niveau kan die kaart selecteren, terwijl een hoeveelheid tussen twee niveaus de huidige aanbieding geselecteerd kan laten. Toevoegen aan winkelwagen gebruikt vervolgens de hoeveelheid van die aanbieding. Als Koop 6 is geselecteerd, garandeert het invoeren van 8 dus niet dat er 8 artikelen worden toegevoegd.

Als je shoppers flexibele hoeveelheden wilt laten kiezen, schakel dan Aantalkiezer in op het tabblad Add-ons van de korting, wanneer deze optie beschikbaar is. Dit werkt samen met abonnementen. Als de optie is uitgeschakeld, vermeldt het dashboard welke instelling dit blokkeert. Zie instellingen waarmee je dit niet kunt combineren.

Wanneer de selector van Bundlex actief is, geeft de invoer van het thema het resultaat daarvan weer in plaats van een tweede hoeveelheid te beheren. Sommige winkels hebben een afzonderlijke, door het supportteam ingeschakelde native-hoeveelheidsconfiguratie voor gewone niveaus. Dit is niet de standaard. Zie gedrag van themahoeveelheden.

Als optionele selectie van aanbiedingen is ingeschakeld en er geen aanbieding is geselecteerd, werken de themacontroles normaal en navigeren ze niet door de aanbiedingskaarten. De onderstaande controles hebben betrekking op een actieve aanbieding in de configuratie met tiernavigatie.

Hoe de synchronisatie hoort te werken

Houd rekening met twee richtingen:

• Aanbieding naar hoeveelheid: wanneer een shopper op een aanbieding klikt, bijvoorbeeld Koop 1, Koop 2 of Koop 3, stelt de widget de invoer voor hoeveelheden van het thema in op de hoeveelheid van die aanbieding. Dit hangt ervan af of Bundlex de juiste invoer voor hoeveelheden kan vinden.
• Hoeveelheid naar aanbieding: wanneer een shopper de hoeveelheid wijzigt met de +/- knoppen van het thema of door een waarde in te voeren, hoort de widget de nieuwe waarde te detecteren en de aanbieding te selecteren waarvan de hoeveelheid exact overeenkomt.

De tweede richting kan misgaan wanneer het thema de invoer wijzigt zonder een gebeurtenis te verzenden of wanneer de widget een andere invoer voor hoeveelheden controleert. Een getal dat niet overeenkomt met een niveau bewijst op zichzelf niet dat er een probleem met een gebeurtenis is en garandeert niet dat de aanbieding wordt gedeselecteerd.

Waarom de +/- knoppen de aanbieding niet bijwerken

De widget luistert naar native change- en input-gebeurtenissen op de invoer voor hoeveelheden. Normaal typen activeert deze gebeurtenissen, maar een aangepaste +/- knop van een thema mogelijk niet.

Veel thema's implementeren hun +/- knoppen echter door de waarde van de invoer rechtstreeks in JavaScript in te stellen, bijvoorbeeld input.value = newValue. Een waarde op deze manier toewijzen activeert geen change- of input-gebeurtenissen. Het getal verandert op het scherm, maar er wordt geen gebeurtenis verzonden. Daardoor weet de widget niet dat de hoeveelheid is gewijzigd en blijft de geselecteerde aanbieding ongewijzigd.

Dit is niet specifiek voor één framework. Elke programmatische toewijzing van een waarde slaat de gebeurtenissen over. Alleen echte gebruikersinteractie, zoals typen, activeert ze. Thema's die zijn gebaseerd op Shopify's <quantity-input>-custom element, dat door Dawn wordt gebruikt, verzenden na het bijwerken van de waarde een change-gebeurtenis. Daarom werken deze thema's direct goed.

Zo bevestig je dat dit de oorzaak is

1. Open de ontwikkelaarstools van je browser, met F12 of Cmd+Option+I op een Mac, en ga naar het tabblad Console.
2. Klik op een +/- knop op de productpagina.
3. Probeer een hoeveelheid die exact overeenkomt met een beschikbare aanbieding. Als het getal verandert maar de geselecteerde aanbieding niet, vraag dan de ontwikkelaar van je thema te controleren of de knop een change- of input-gebeurtenis verzendt op de invoer voor hoeveelheden die Bundlex controleert.

Thema's waarbij dit vaak voorkomt, gebruiken aangepaste +/- knoppen die de waarde rechtstreeks instellen, in plaats van Shopify's <quantity-input>-webcomponent.

De oplossing: een change-event verzenden

Deze oplossing bevindt zich in het thema, dus degene die je themacode beheert, kan dit snel aanpassen. Vraag je themaontwikkelaar om direct nadat de +/--handler de nieuwe hoeveelheid heeft ingesteld, een change-event te verzenden:

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

Hier is input het element voor de hoeveelheidinvoer dat wordt bijgewerkt. Hiermee worden scripts geïnformeerd die naar dat event luisteren, waaronder Bundlex. Test na de wijziging de hoeveelheidsknoppen en de winkelwagen van het thema.

De situatie met dubbele hoeveelheidinvoer, bijvoorbeeld bij sticky winkelwagenbalken

Sommige thema's voegen een sticky of vaste balk 'Toevoegen aan winkelwagen' toe die het productformulier dupliceert, inclusief een tweede hoeveelheidinvoer. Beide invoervelden gebruiken vaak dezelfde name="quantity" en soms zelfs dezelfde id. De standaardselector van Bundlex, input[name="quantity"], kan daardoor aan het verkeerde veld worden gekoppeld, waardoor de aanbieding en de hoeveelheid in het hoofdformulier nooit overeenkomen.

Zo controleer je of er duplicaten zijn

1. Open de ontwikkelaarstools en ga naar het tabblad Console.
2. Voer uit: document.querySelectorAll('input[name="quantity"]').length
3. Als het resultaat groter is dan 1, bevat je pagina meer dan één hoeveelheidinvoer.

De oplossing: een aangepaste selector voor de hoeveelheidinvoer

Laat Bundlex alleen naar de hoeveelheidinvoer van het hoofdformulier verwijzen en sluit de sticky balk uit. Neem contact op met support en vermeld de product-URL voor een nieuwe selectoroplossing. Support kan deze instellen in de widgetinstellingen van de winkel. Als je een oudere selector wilt bekijken die al in de app-embed is opgeslagen, vind je deze hier:

1. Open in je Shopify-beheercentrum de Thema-editor.
2. Ga naar App-embeds en zoek Bundlex Bundles.
3. Schakel Geavanceerde instellingen weergeven in en stel Selector voor hoeveelheidinvoer in op een selector die alleen de hoeveelheidinvoer van het hoofdformulier target.

De exacte selector hangt af van je thema. Twee voorbeelden die bij sommige thema's werken:

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

Als geen van beide selectors werkt met je thema, deel dan de URL van de productpagina met support, zodat de juiste selector kan worden bepaald. Als support eerder een overschrijving heeft ingesteld, kan die voorrang krijgen op het themaveld.

Wanneer je contact moet opnemen

Als je hebt bevestigd dat de +/-knoppen de waarde wijzigen zonder een event te activeren, of dat er dubbele hoeveelheidinvoervelden aanwezig zijn, en de bovenstaande oplossingen het probleem niet verhelpen, neem dan contact op met support en vermeld de URL van de productpagina. Het helpt ook om eventuele [Bundlex]-meldingen uit de browserconsole en de HTML van het productformulier mee te sturen.