Var widgeten visas på produktsidan

Som standard renderas Bundlex-widgeten precis ovanför knappen Lägg i kundvagn på produktsidan. Om den platsen inte passar ditt tema har du två sätt att flytta den: en anpassad placeringsväljare i appinbäddningen eller ett ankare för sidbyggaren. Den här artikeln förklarar var widgeten placeras och hur Bundlex väljer mellan alternativen.

Standardpositionen

När ingen åsidosättning av placeringen matchar infogar Bundlex widgeten före den identifierade behållaren för produktformuläret i köpområdet. Den exakta positionen i förhållande till temats variant- och kvantitetskontroller beror på temat. I praktiken innebär det att erbjudandekorten visas ovanför knappen Lägg i kundvagn, där de flesta kunder förväntar sig att se ett mängd- eller paketerbjudande.

Den här standardplaceringen bygger på att Bundlex automatiskt identifierar ditt produktformulär. De flesta teman identifieras automatiskt. Om ditt tema inte identifieras kan widgeten inte ansluta till Lägg i kundvagn på ett tillförlitligt sätt. Ett placeringsankare löser inte ett produktformulär som saknas eller är felaktigt. Be supporten att även kontrollera formuläridentifieringen.

Prioritetsordningen för placering

För leverans via appinbäddningen söker Bundlex efter ett placeringsmål i en fast ordning och använder det första som hittas. Högre alternativ i listan har företräde framför lägre.

1. Anpassad placeringsväljare, högst prioritet. En CSS-väljare som du anger i Bundlex appinbäddning. När den är angiven och matchar ett element infogas widgeten direkt efter elementet, och inget längre ned i listan används.
2. Ankare för sidbyggare (data-bundlex-widget). Ett HTML-element med attributet data-bundlex-widget som du lägger till på sidan. Widgeten placeras i det första matchande ankaret. Detta används när inget anpassat placeringsmål hittas.
3. Standardposition före produktformuläret, lägst prioritet. Den automatiska placering som beskrivs ovan. Den används när ingen av åsidosättningarna ger ett matchande mål.

Eftersom kedjan stannar vid den första träffen åsidosätter ett matchande anpassat placeringsmål både ankaret och standardplaceringen, och ett matchande ankare åsidosätter standardplaceringen. Om en väljare slutar matcha efter en temaförändring kan Bundlex falla tillbaka på en placering med lägre prioritet.

Alternativ 1: den anpassade placeringsväljaren i appinbäddningen

Använd en anpassad placeringsväljare när du vill behålla leveransen via appinbäddningen och placera widgeten efter ett specifikt sidelement. Om du inte vet vilken väljare du ska använda kan du be Bundlex support om hjälp. Testa den först i ett utkast till tema.

Du ställer in den i Bundlex appinbäddning:

1. Gå till Webbshop i Shopify-administrationen och klicka på Redigera tema.
2. Öppna Appinbäddningar och hitta Bundlex Bundles.
3. Aktivera Visa avancerade inställningar och ange sedan en CSS-väljare i fältet Anpassad placeringsväljare.
4. Spara temat.

Widgeten infogas direkt efter elementet som väljaren matchar. Om du är osäker på vilken väljare du ska använda kan Bundlex support hjälpa dig att hitta en. I de avancerade inställningarna visas även fält för produktformuläret, knappen Lägg i kundvagn och kvantitetsväljare. Dessa används för att korrigera automatisk identifiering i anpassade teman, inte för att placera widgeten.

Alternativ 2: ett ankare för sidbyggare

Om du bygger produktsidor med en visuell sidbyggare som GemPages, PageFly eller Shogun vill du vanligtvis placera widgeten på en specifik plats i layouten. Lägg då till ett anpassat HTML- eller kodblock där du vill ha widgeten och placera ett tomt element med attributet data-bundlex-widget i det:

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

Du behöver inte skriva detta för hand. Öppna fliken Avancerat i paketredigeraren och expandera Använder du en sidbyggare?. Välj Kopiera och klistra sedan in kodavsnittet på sidan.

Bundlex fyller det första matchande ankaret med widgeten. Du behöver inte ha ett annat kodavsnitt för varje paket. Ankaret styr endast placeringen. Bundlex väljer fortfarande vilket publicerat paket som ska visas utifrån produkten.

Endast det första matchande ankaret används

Om det finns fler än ett data-bundlex-widget-element på sidan använder Bundlex endast det första i DOM-ordningen. Detta är viktigt när butiken duplicerar innehåll, till exempel i en snabbvisningsmodal eller en kundvagnspanel som upprepar produktmarkup. Placera ankaret endast på den yta där du faktiskt vill ha widgeten, så att den första träffen blir rätt.

När du bör använda appblocket i stället

Bundlex tillhandahåller även ett temappblock för produktsidan, vilket är ett separat sätt att leverera widgeten jämfört med appinbäddningen. Använd appblocket när du vill placera widgeten på en specifik plats med temaredigerarens dra-och-släpp-funktion, utan att skriva en CSS-väljare eller redigera sidans markup:

1. Öppna en produkt-mall i temaredigeraren.
2. Klicka på Lägg till block i den sektion där du vill ha widgeten.
3. Öppna fliken Appar, välj Bundlex Bundles och dra blocket till den exakta position där du vill ha det.
4. Spara temat.

Blocket placerar widgeten där du släpper det i sektionen, vilket gör det till en bra kompromiss mellan den automatiska standardplaceringen och en handskriven väljare. Blocket ignorerar appinbäddningens anpassade placeringsväljare och ankare för sidbyggare. Använd en leveransmetod för produktsidan. Om både inbäddningen och blocket körs kan placering och inställningar bero på vilket som initieras först.

Testa ändringen i ett utkast till tema först. Innan du stänger av en fungerande inbäddning i utkastet ska du kontrollera att blocket ligger i en sektion som renderas i produktens faktiska mall. Ladda om produktsidan direkt efter bytet. Om widgeten försvinner ska du aktivera inbäddningen igen. För rabatter med gåvor bör du välja en placering som behåller inbäddningen och dess rensning av gåvor på kundvagnssidan. Se inbäddning jämfört med block.

Oavsett vilken placering du väljer renderas widgeten endast när appinbäddningen eller blocket är aktiverat och ett publicerat paket matchar produkten. Om widgeten inte visas alls ska du bekräfta dessa två saker innan du justerar placeringen.

Landningssidor: blocket "Bundlex Bundles featured"

Metoderna ovan gäller produktsidor. På en vanlig Shopify-sida, vilken /pages/-URL som helst, till exempel en landningssida som du har byggt för en kampanj, kan widgeten inte ansluta automatiskt, och anpassad HTML laddar den inte heller.

Lägg i stället till temats egen sektion Utvald produkt och placera blocket Bundlex Bundles featured i den. Temasektionen tillhandahåller knappen Lägg i kundvagn och blocket lägger till widgeten, på samma sätt som på startsidan:

1. Gå till Webbshop i Shopify-administrationen och klicka på Redigera tema.
2. Välj Sidor i mallmenyn högst upp och välj den mall som din landningssida använder.
3. Klicka på Lägg till sektion och välj temats egen sektion Utvald produkt. Välj sedan produkten vars paket du vill visa.
4. Klicka på Lägg till block i sektionen, öppna fliken Appar och välj Bundlex Bundles featured.
5. I inställningarna för det utvalda blocket ställer du in Produkt på samma produkt som sektionen, eller behåller kopplingen Sektionens produkt.
6. Spara temat.

Blocket på egen hand, utanför en sektion för Utvald produkt, hittar inget formulär för Lägg i kundvagn och visar ingenting. När det placeras i sektionen visas produkten med dess publicerade paketerbjudanden, och kunder kan lägga till den i kundvagnen direkt från landningssidan. Samma konfiguration fungerar även på startsidan.

Snabbreferens

Placeringsmetod	Var den ställs in	Prioritet
Anpassad placeringsväljare	Appinbäddningar > Bundlex Bundles > Visa avancerade inställningar	Högst
data-bundlex-widget-ankare	Sidmarkup eller sidbyggare	Används om inget anpassat mål matchar
Standard (före produktformuläret)	Automatisk	Används om ingen åsidosättning matchar