Bundlex gebruiken met een paginabouwer (GemPages, PageFly, Shogun)

Als je productpagina is gebouwd met een paginabouwer zoals GemPages, PageFly of Shogun, gebruik je een ankercode om te bepalen waar de Bundlex-widget verschijnt. Plak deze in een aangepast HTML-blok op de productpagina. Als de widget helemaal ontbreekt, controleer dan ook de app-embed, de gepubliceerde bundel en het productformulier. Het anker bepaalt alleen de plaatsing.

Waarom een paginabouwer een anker nodig heeft

Normaal gesproken detecteert de widget je productformulier en voegt deze zichzelf vóór de bijbehorende container in. Een paginabouwer kan die lay-out wijzigen. Het anker geeft de widget een specifieke plaats om te worden weergegeven, maar Bundlex moet het formulier voor het toevoegen van het product aan de winkelwagen nog steeds kunnen vinden om de aanbieding aan de aankoopknop te koppelen.

De code ophalen

Het anker is een direct te kopiëren codefragment in de bundelbewerker.

1. Open de bundel die je op de pagina van de paginabouwer wilt weergeven in je Bundlex-dashboard.
2. Open het tabblad Geavanceerd.
3. Zoek de optie Een paginabouwer gebruiken? en klik erop om deze uit te vouwen.
4. Klik op Kopiëren om de code naar je klembord te kopiëren.

De code is altijd hetzelfde:

<div data-bundlex-widget></div>

Plak de code in je paginabouwer

1. Open je productpagina in de editor van je paginabouwer (GemPages, PageFly, Shogun of een andere bouwer).
2. Voeg een blok aangepaste HTML of code toe op de exacte plek waar je de widget wilt weergeven, bijvoorbeeld direct onder de prijs of boven de knop 'toevoegen aan winkelwagen'.
3. Plak de code in dat blok.
4. Bekijk een voorbeeld van de productpagina en sla deze op en publiceer deze zodra de widget op de juiste plek staat.

Als de app-embed actief is en geen overeenkomende aangepaste plaatsing voorrang krijgt, wordt de widget in het eerste anker weergegeven. Een app-blok wordt daarentegen op zijn eigen blokpositie weergegeven. Houd het anker binnen het productgedeelte van de pagina, in de buurt van de bedieningselementen voor de aankoop.

Eén code werkt voor elke bundel

Je hebt geen aparte code per bundel nodig. Exact hetzelfde <div data-bundlex-widget></div> wordt voor alle bundels gebruikt. Bundlex bepaalt welke bundel wordt weergegeven op basis van het product dat op de pagina wordt getoond. Het anker bepaalt dus alleen waar de widget verschijnt, nooit welke bundel. Plak de code één keer op elke productpagina van de paginabouwer waarop je deze nodig hebt.

Plaats de code alleen op de relevante plek

Voeg het anker alleen toe aan het paginagedeelte waar je de widget daadwerkelijk wilt weergeven. Als dezelfde code op meer dan één plek terechtkomt die tegelijk wordt geladen, bijvoorbeeld in een winkelwagenlade of een pop-up voor snel bekijken waarin je productopmaak wordt herhaald, koppelt de widget zich aan het eerste anker dat op de pagina wordt gevonden. Plaats de code op één relevante plek in plaats van deze over meerdere templates te verspreiden, zodat de plaatsing voorspelbaar blijft.

Controleer zowel de desktop- als mobiele lay-outs. Sommige bouwers houden afzonderlijke productformulieren voor desktop en mobiel op dezelfde pagina. Een selector of anker dat de verborgen kopie bereikt, kan op de ene breedte werken en op een andere mislukken. Vraag support om beide lay-outs te controleren als dat gebeurt.

Als de widget na het plakken niet wordt verplaatst

Als de widget niet naar de nieuwe plek is verplaatst:

• Controleer of je de app-embed gebruikt en niet een app-blok dat ergens anders is geplaatst. Een overeenkomende aangepaste plaatsingsselector in de embed heeft voorrang op het anker.
• Voer een harde vernieuwingsactie uit op de storefrontpagina: Cmd/Ctrl + Shift + R. Hiermee kunnen verouderde browserassets opnieuw worden geladen, maar wordt een conceptpagina niet gepubliceerd en wordt een verkeerde selector niet opgelost.
• Controleer of de pagina is gepubliceerd en niet alleen is opgeslagen in de editor van de paginabouwer.
• Zorg ervoor dat je de code exact hebt geplakt, zonder extra tekens eromheen.

Als de widget nog steeds helemaal niet verschijnt

Het anker bepaalt alleen de plaats van de widget. De gebruikelijke voorwaarden om de widget te laden zijn nog steeds vereist:

• De Bundlex-app-embed moet zijn ingeschakeld voor deze ankermethode. Gebruik een app-blok als je de plaatsing via het blok wilt bepalen.
• Er moet een gepubliceerde bundel overeenkomen met het product op die pagina.
• Bundlex moet het juiste productformulier en de juiste knop 'toevoegen aan winkelwagen' kunnen detecteren.

Als de embed en de overeenkomende korting actief zijn, controleer dan de prioriteit van de plaatsing en de detectie van het productformulier. Neem contact op met support met de product-URL als het anker leeg blijft.

Landingspagina's werken anders

Het ankerfragment werkt alleen op productpagina's. Als je bundelaanbiedingen op een gewone Shopify-pagina wilt weergeven (elke /pages/-URL), voeg je de sectie Uitgelicht product van je thema toe en plaats je het blok Bundlex Bundles featured daarin. Stel Product van het blok in op hetzelfde product als de sectie, of behoud de verbinding met het product van de sectie. De sectie levert het aankoopformulier; het blok laadt de widget zonder ankerfragment.

Controleer het resultaat

1. Open de daadwerkelijke gepubliceerde product-URL op desktop- en telefoonbreedtes.
2. Controleer of één widget op de gewenste plek verschijnt, met het overeenkomende product en de prijzen van de aanbieding.
3. Kies een aanbieding en voeg deze toe aan de winkelwagen. Controleer het hoofdproduct, de varianten, hoeveelheden en eventuele geselecteerde extra's.
4. Ga door naar het afrekenen en controleer de korting en het subtotaal voordat je een bestelling plaatst. Als alleen het voorbeeld in de paginabouwer werkt, stuur je support de gepubliceerde product-URL.

Zie Waar de widget op je productpagina verschijnt voor het volledige overzicht van hoe Bundlex een plaatsing kiest, inclusief het blok voor uitgelichte producten voor landingspagina's, de aangepaste plaatsingsselector en het app-blok van het thema.