Veelvoorkomende toepassingen van de Upcart API

Hoe het API-patroon werkt

De meeste Upcart API-scripts volgen hetzelfde eenvoudige patroon: Luister naar een winkelwagengebeurtenis → Controleer een voorwaarde → Voer een actie uit Bijvoorbeeld: “Wanneer de winkelwagen laadt → controleer of deze leeg is → verberg de sticky knop.” 💡 Nieuw met API’s? Begin met Wat is een API? voordat je in de onderstaande voorbeelden duikt.

Waar je je scripts toevoegt

Alle onderstaande scripts gaan in: Cart Editor → Settings → Custom HTML → Scripts (before load) Wikkel elk snippet in <script>...</script>-tags en sla op. Om te testen open je de Dev Tools-console van je browser (F12) en zoek je naar console.log-berichten.

Een opmerking over legacy versus moderne callbacks

Upcart heeft twee manieren om naar winkelwagengebeurtenissen te luisteren:

Stijl	Voorbeeld	Status
Modern (aanbevolen)	`upcartSubscribeAddedToCart(fn)`	Actueel
Legacy (verouderd)	`upcartOnAddToCart = fn`	Werkt nog steeds, toont waarschuwing in de console

Alle onderstaande voorbeelden gebruiken de moderne API. Bestaande scripts die de oude stijl gebruiken, blijven werken.

Voorbeeld 1: verberg de sticky cart-knop wanneer de winkelwagen leeg is

<script>
  window.upcartSubscribeCartLoaded(function(event) {
    var stickyBtn = document.querySelector("#upCartStickyButton");
    if (stickyBtn) {
      var totalQty = event.cart.items.reduce(function(sum, item) {
        return sum + item.quantity;
      }, 0);
      stickyBtn.style.display = totalQty === 0 ? "none" : "block";
    }
  });
</script>

Hoe het werkt: upcartSubscribeCartLoaded wordt telkens aangeroepen wanneer de winkelwagen wordt geladen. De callback ontvangt een event met een cart-object dat een items-array bevat. We tellen de quantity van elk item op om te bepalen of de winkelwagen leeg is. ⚠️ BELANGRIJK: event.cart heeft GEEN item_count-eigenschap. Je moet het totaal berekenen door over event.cart.items te itereren.

Voorbeeld 2: loggen wanneer een item aan de winkelwagen wordt toegevoegd

<script>
  window.upcartSubscribeAddedToCart(function(event) {
    console.log("Added to cart:", event.item.title, "| Qty:", event.item.quantityAdded);
  });
</script>

Beschikbare eigenschappen op event.item:

Eigenschap	Beschrijving
`event.item.title`	Producttitel
`event.item.quantityAdded`	Aantal stuks toegevoegd in deze actie
`event.item.quantity`	Totaal aantal van dit item dat nu in de winkelwagen zit
`event.item.variantId`	Shopify-variant-ID
`event.item.handle`	Producthandle
`event.item.productId`	Shopify-product-ID
`event.item.finalPrice`	Uiteindelijke prijs na kortingen
`event.item.image`	URL van de productafbeelding

Voorbeeld 3: integreren met een analytics-app van derden (bijv. TripleWhale)

<script>
  window.upcartSubscribeAddedToCart(function(event) {
    window.TriplePixel('AddToCart', {
      item: event.item.variantId,
      q: event.item.quantityAdded
    });
  });
</script>

Let op: elke app van derden is anders. Vraag het supportteam van je app naar het juiste gebeurtenisformaat.

Voorbeeld 4: de winkelwagen automatisch openen nadat een product is toegevoegd

<script>
  window.upcartSubscribeAddedToCart(function(event) {
    window.upcartOpenCart();
  });
</script>

Let op: als “Open cart drawer on add to cart” al is ingeschakeld in Cart Editor → Settings → Cart settings, heb je dit script niet nodig.

Functie	Wanneer deze wordt aangeroepen	Wat de callback ontvangt
`upcartSubscribeCartLoaded(fn)`	Winkelwagengegevens laden	`{ cart }` - cart heeft `.items[]`, `.total`, `.currency`
`upcartSubscribeAddedToCart(fn)`	Item toegevoegd aan winkelwagen	`{ item }` - item heeft `.title`, `.variantId`, `.quantityAdded`, `.quantity`
`upcartSubscribeCartOpened(fn)`	Cart drawer opent	`{}` (leeg object)
`upcartSubscribeCartClosed(fn)`	Cart drawer sluit	`{}` (leeg object)
`upcartSubscribeCartUpdated(fn)`	Winkelwageninhoud verandert	`{ cart }`
`upcartSubscribeItemRemoved(fn)`	Item verwijderd	`{ item }`
`upcartSubscribeCheckoutClicked(fn)`	Checkoutknop aangeklikt	`{ event }` - MouseEvent van de browser
`upcartSubscribeUpsellsAddedToCart(fn)`	Upsell-item toegevoegd	`{ variant }` - heeft `.id` en `.title`
`upcartSubscribeUpsellsRendered(fn)`	Upsells worden weergegeven in de winkelwagen	`{ item, element }` - item is het product, element is de DOM-node
`upcartSubscribeNotesTextChanged(fn)`	Winkelwagennotities bijgewerkt	`{ newNotesText, oldNotesText }` - de nieuwe notitiestring en de vorige
`upcartSubscribeRewardsMilestonesCompletedChanged(fn)`	Status van reward-mijlpaal verandert	`{ numOfMilestonesCompleted, status }` - `status` is `"promotion"`, `"demotion"` of `"initial-state"`

Directe actiefuncties

Functie	Wat deze doet
`window.upcartOpenCart()`	Opent de cart drawer
`window.upcartCloseCart()`	Sluit de cart drawer
`window.upcartRefreshCart()`	Vernieuwt de winkelwagengegevens
`window.upcartGetCart()`	Geeft het huidige winkelwagenobject terug
`window.upcartRegisterAddToCart()`	Registreert add-to-cart voor page builders (Replo, PageFly, enz.)
`window.upcartFormatMoney()`	Formatteert een prijs met het geldformaat van je winkel

Zie voor de volledige API-documentatie de Upcart Public API Documentation.

Problemen oplossen

Script draait niet? Controleer de plaatsing: het hoort in Scripts (before load), niet after load.
Element niet gevonden? Zorg dat de selector (bijv. #upCartStickyButton) overeenkomt met de daadwerkelijke element-ID in je winkelwagen.
Is er iets kapot? Zet je script in commentaar door // aan het begin van elke regel toe te voegen, sla op en vernieuw.
Loop je nog steeds vast? Zie de API-FAQ voor meer stappen voor probleemoplossing.

Aan de slag

Winkelwagenmodules

Winkelwageninstellingen

Sticky winkelwagenknop

Multicart

Aanpassingen

Analytics

Integraties en compatibiliteit

Facturering en account

Probleemoplossing

Veelvoorkomende toepassingen van de Upcart API

Hoe het API-patroon werkt

Waar je je scripts toevoegt

Een opmerking over legacy versus moderne callbacks

Voorbeeld 1: verberg de sticky cart-knop wanneer de winkelwagen leeg is

Voorbeeld 2: loggen wanneer een item aan de winkelwagen wordt toegevoegd

Voorbeeld 3: integreren met een analytics-app van derden (bijv. TripleWhale)

Voorbeeld 4: de winkelwagen automatisch openen nadat een product is toegevoegd

Directe actiefuncties

Problemen oplossen

​Hoe het API-patroon werkt

​Waar je je scripts toevoegt

​Een opmerking over legacy versus moderne callbacks

​Voorbeeld 1: verberg de sticky cart-knop wanneer de winkelwagen leeg is

​Voorbeeld 2: loggen wanneer een item aan de winkelwagen wordt toegevoegd

​Voorbeeld 3: integreren met een analytics-app van derden (bijv. TripleWhale)

​Voorbeeld 4: de winkelwagen automatisch openen nadat een product is toegevoegd

​Snelle referentie: subscribe-functies (moderne API)

​Directe actiefuncties

​Problemen oplossen

Hoe het API-patroon werkt

Waar je je scripts toevoegt

Een opmerking over legacy versus moderne callbacks

Voorbeeld 1: verberg de sticky cart-knop wanneer de winkelwagen leeg is

Voorbeeld 2: loggen wanneer een item aan de winkelwagen wordt toegevoegd

Voorbeeld 3: integreren met een analytics-app van derden (bijv. TripleWhale)

Voorbeeld 4: de winkelwagen automatisch openen nadat een product is toegevoegd

Snelle referentie: subscribe-functies (moderne API)

Directe actiefuncties

Problemen oplossen