Skip to main content
Verberg regels die de shopper niet hoort te zien, hernoem regels die slecht leesbaar zijn en bepaal de volgorde waarin alles rendert, allemaal zonder aan te raken wat er daadwerkelijk in de winkelwagen zit. Dit vervangt het oudere patroon van winkelwagen-elementen verbergen met CSS of style.display = 'none'. Een line transform wordt bij elke render van de winkelwagen toegepast, dus hij overleeft updates, re-renders en het opnieuw openen van de drawer.

Een regel verbergen

Verbergen is niet verwijderen. Een verborgen regel blijft in de winkelwagen van de shopper, blijft in het totaal en gaat door naar de checkout; hij wordt alleen niet getekend in de drawer. Hij valt wel weg uit getCart().items en itemCount, dus je eigen code ziet hem ook niet meer. Wil je hem echt weg hebben, gebruik dan removeItem.
Veelvoorkomende dingen die het verbergen waard zijn:

Een regel herlabelen

De vier setters die op een regel beschikbaar zijn:

De volgorde bepalen

Een comparator heeft dezelfde vorm als Array.prototype.sort verwacht, en draait na verbergen en hernoemen:
Geef 0 terug voor paren waar je niet om geeft. Comparators componeren als tie-breakers, dus de eerste die een waarde ongelijk aan nul teruggeeft, beslist dat paar, en 0 teruggeven geeft de beslissing door aan de volgende in plaats van er een volgorde aan op te leggen.

Een heel block verbergen, geen regel

Een line transform werkt op winkelwagenregels. Om verschillende block-instellingen per land, markt of valuta te tonen (bijvoorbeeld verschillende Rewards-niveaus), gebruik je voorwaarden in de cart editor. Geen code nodig, en het overleeft herontwerpen van de winkelwagen. Winkelwagentotaal en winkelwageninhoud zijn geen editor-voorwaardetypes. Grijp naar de SDK wanneer je regel iets is wat voorwaarden niet kunnen uitdrukken (product-ID’s in de winkelwagen, een aangepast totaal, enzovoort). Bevraag in dat geval de shadow root op een publieke cart-external-*-class:
Dit draait na elke render, dus het block kan even in beeld flitsen voordat je code het verbergt. Conditionele rendering heeft dat probleem niet, dus geef daar de voorkeur aan waar het past.

Dingen om goed te doen

  • Transforms zijn set-up-aanroepen. Registreer ze bovenaan je Initialization-script; geen ready() nodig.
  • De transforms van iedereen draaien. De jouwe componeert met transforms die door andere apps zijn geregistreerd. Je kunt die van hen niet vervangen, en zij kunnen die van jou niet laten vallen.
  • Een transform kan prijs, aantal of identiteit niet wijzigen. Hij wijzigt alleen wat er gerenderd wordt. Gebruik de actions voor echte wijzigingen.
  • Een transform die een fout gooit wordt stilzwijgend overgeslagen. De rest draait nog steeds. Controleer aftersellCartDebugEvents tijdens het ontwikkelen.
  • registerLineTransform geeft een unregister-functie terug, mocht je het later ongedaan willen maken.

Waar je verder kunt kijken

  • Hooks: de volledige hook-referentie.
  • Cart object: elk veld waarop je kunt vertakken.
  • Custom CSS: de cart-external-*-classconventie.