> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Veelvoorkomende toepassingen van de Upcart API

> Leer hoe je de Public API van Upcart inzet met praktische, kopieer-en-plak-voorbeelden.

<div id="how-the-api-pattern-works">
  ## Hoe het API-patroon werkt
</div>

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?](/nl/upcart/what_is_an_api) voordat je in de onderstaande voorbeelden duikt.

***

<div id="where-to-add-your-scripts">
  ## Waar je je scripts toevoegt
</div>

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.

***

<div id="a-note-on-legacy-vs-modern-callbacks">
  ## Een opmerking over legacy versus moderne callbacks
</div>

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.

***

<div id="example-1-hide-the-sticky-cart-button-when-the-cart-is-empty">
  ## Voorbeeld 1: verberg de sticky cart-knop wanneer de winkelwagen leeg is
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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.

***

<div id="example-2-log-when-an-item-is-added-to-the-cart">
  ## Voorbeeld 2: loggen wanneer een item aan de winkelwagen wordt toegevoegd
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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                            |

***

<div id="example-3-integrate-with-a-third-party-analytics-app-eg-triplewhale">
  ## Voorbeeld 3: integreren met een analytics-app van derden (bijv. TripleWhale)
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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.

***

<div id="example-4-open-the-cart-automatically-after-a-product-is-added">
  ## Voorbeeld 4: de winkelwagen automatisch openen nadat een product is toegevoegd
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<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.

***

<div id="quick-reference-subscribe-functions-modern-api">
  ## Snelle referentie: subscribe-functies (moderne API)
</div>

| 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"` |

***

<div id="direct-action-functions">
  ## Directe actiefuncties
</div>

| 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](https://rokt.notion.site/upcart-public-api).

***

<div id="troubleshooting">
  ## Problemen oplossen
</div>

* **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](/nl/upcart/upcart_api_frequently_asked_questions) voor meer stappen voor probleemoplossing.