PlantScraper: andere aanbevolen varianten

Goal

Toon de juiste aanbevolen producten voor exact de variant die de klant heeft geselecteerd.
Als die variant eigen aanbevelingen heeft (opgeslagen in het variantmetaveld), toon die dan.
Zo niet, val dan terug op de aanbevelingen op productniveau.
Wanneer de klant van variant wisselt, wordt de lijst automatisch bijgewerkt.


Hoe wordt bepaald wat er wordt getoond

  1. Kijk naar de geselecteerde variant.

  2. Als die variant een lijst in custom.step_recommend heeft, toon die items.

  3. Als de lijst van die variant leeg is, kijk dan naar het product.

  4. Als het product een lijst in custom.step_recommend2 heeft, toon dan in plaats daarvan die varianten.

  5. Als geen van beide metavelden items bevat, worden er geen aanbevolen productvarianten getoond.


Wat je aanmaakt in Shopify-beheer

Voer deze stappen één keer uit, als ze nog niet zijn aangemaakt

1. Maak het metaobjecttype aan

  • Content → Metaobjects → Type toevoegen

  • Name: Aanbevolen product

  • Fields:

    • Product – Type: Product (required)

    • Optioneel andere ondersteunende velden, zoals Notities of Tags

(Als je al een ander metaobjecttype gebruikt dat naar producten linkt, kun je dat hergebruiken.)


2. Voeg metavelddefinities toe voor varianten

  • Instellingen → Aangepaste gegevens → Varianten → Definitie toevoegen

    • Name: Aanbevolen producten (variantniveau)

    • Type: Lijst met productvariantenAanbevolen product

    • Namespace en sleutel: custom.step_recommend


3. Voeg een metavelddefinitie toe voor producten

  • Instellingen → Aangepaste gegevens → Producten → Definitie toevoegen

    • Name: Aanbevolen producten (productniveau)

    • Type: Lijst met productvarianten → Aanbevolen product

    • Namespace en sleutel: custom.step_recommend2


Voeg de content toe

Dit doe je telkens wanneer je wilt bepalen welke productvarianten in de carrousel “Aanbevolen add-ons” verschijnen.

 

Koppel de items aan een variant of product

  • Als één specifieke variant unieke aanbevelingen nodig heeft:
    Ga naar Producten → Variantdetails → scroll naar Metafields → vul Aanbevolen producten (variantniveau) met de gewenste items.

  • Als dezelfde aanbevelingen voor het hele product gelden:
    Ga naar Producten → Productdetails → scroll naar Metafields → vul Aanbevolen producten (productniveau) met de gewenste items.


 

Variant met eigen aanbevelingen

  • Kies een variant met items in custom.step_recommend

  • Expected: De aanbevolen producten verschijnen

  • Wissel naar een andere variant

  • Expected: De lijst wordt bijgewerkt of verdwijnt als de nieuwe variant geen aanbevelingen heeft

Fallback op productniveau

  • Clear custom.step_recommend op de variant

  • Fill custom.step_recommend2 op het product

  • Expected: De aanbevelingen op productniveau verschijnen

Geen metavelden

  • Laat beide metavelden leeg

  • Expected: De sectie toont geen aanbevelingen


Veelvoorkomende fouten en oplossingen

Problem Fix
Er wordt helemaal niets weergegeven Controleer of de snippet of het blok op de juiste producttemplate staat en is opgeslagen.
Onjuiste metaveldsleutels Controleer de exacte sleutels nogmaals: custom.step_recommend and custom.step_recommend2.
Items aangemaakt maar niet zichtbaar Alleen een metaobject-item aanmaken is niet genoeg — je moet het ook koppelen in het product- of variantmetaveld.
Aanbevelingen veranderen niet bij het wisselen van variant Controleer of het meegeleverde JavaScript aanwezig is; dit laadt het blok dynamisch opnieuw wanneer varianten veranderen.
Carrousel schuift niet Confirm Splide is geladen in je thema (dit wordt gebruikt om de slider aan te sturen).

Snelle referentie voor de eigenaar

  • Variant heeft eigen aanbevelingen: use custom.step_recommend

  • Product heeft gedeelde aanbevelingen: use custom.step_recommend2

  • Niets ingevuld: sectie blijft verborgen


Voor nieuwsgierigen

  • De code controleert product.selected_or_first_available_variant om te bepalen welke variant actief is.

  • JavaScript luistert naar Shopify's variant:change-event om de snippet opnieuw te laden wanneer de klant een andere variant kiest.

  • De HTML gebruikt <details> and <summary> om de klikbare accordion te maken.

  • De productlijst wordt weergegeven in een Splide-carrousel die live wordt bijgewerkt.