> ## 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.

# Almindelige anvendelser af Upcart API

> Lær, hvordan du sætter Upcarts Public API i arbejde med praktiske kopiér-og-indsæt-eksempler.

<div id="how-the-api-pattern-works">
  ## Sådan fungerer API-mønsteret
</div>

De fleste Upcart API-scripts følger det samme enkle mønster:

Lyt efter en kurvhændelse → Tjek en betingelse → Udfør en handling

For eksempel: "Når kurven indlæses → tjek, om den er tom → skjul sticky-knappen."

💡 **Ny inden for API'er?** Start med [Hvad er et API?](/da/upcart/what_is_an_api), før du dykker ned i eksemplerne nedenfor.

***

<div id="where-to-add-your-scripts">
  ## Her skal du tilføje dine scripts
</div>

Alle scripts nedenfor skal placeres i:

**Cart Editor → Settings → Custom HTML → Scripts (before load)**

Pak hvert kodestykke ind i `<script>...</script>`-tags, og gem. For at teste skal du åbne din browsers Dev Tools-konsol (`F12`) og kigge efter eventuelle `console.log`-beskeder.

***

<div id="a-note-on-legacy-vs-modern-callbacks">
  ## En bemærkning om ældre vs. moderne callbacks
</div>

Upcart har to måder at lytte efter kurvhændelser på:

| Stil                | Eksempel                         | Status                                     |
| ------------------- | -------------------------------- | ------------------------------------------ |
| Moderne (anbefalet) | `upcartSubscribeAddedToCart(fn)` | Aktuel                                     |
| Ældre (udfaset)     | `upcartOnAddToCart = fn`         | Virker stadig, logger advarsel i konsollen |

Alle eksempler nedenfor bruger det moderne API. Eksisterende scripts, der bruger den gamle stil, vil fortsat fungere.

***

<div id="example-1-hide-the-sticky-cart-button-when-the-cart-is-empty">
  ## Eksempel 1: Skjul sticky cart-knappen, når kurven er tom
</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>
```

**Sådan fungerer det:** `upcartSubscribeCartLoaded` udløses, hver gang kurven indlæses. Callbacken modtager et `event` med et `cart`-objekt, der indeholder et `items`-array. Vi summerer `quantity` for hver vare for at afgøre, om kurven er tom.

⚠️ **VIGTIGT:** `event.cart` har IKKE en `item_count`-egenskab. Du skal beregne totalen ved at iterere over `event.cart.items`.

***

<div id="example-2-log-when-an-item-is-added-to-the-cart">
  ## Eksempel 2: Log, når en vare tilføjes til kurven
</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>
```

**Tilgængelige egenskaber på `event.item`:**

| Egenskab                   | Beskrivelse                                         |
| -------------------------- | --------------------------------------------------- |
| `event.item.title`         | Produkttitel                                        |
| `event.item.quantityAdded` | Antal enheder tilføjet i denne handling             |
| `event.item.quantity`      | Det samlede antal af denne vare, der nu er i kurven |
| `event.item.variantId`     | Shopify-variant-ID                                  |
| `event.item.handle`        | Produkt-handle                                      |
| `event.item.productId`     | Shopify-produkt-ID                                  |
| `event.item.finalPrice`    | Endelig pris efter rabatter                         |
| `event.item.image`         | URL til produktbillede                              |

***

<div id="example-3-integrate-with-a-third-party-analytics-app-eg-triplewhale">
  ## Eksempel 3: Integrér med en tredjeparts analytics-app (f.eks. 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>
```

> **Bemærk:** Hver tredjepartsapp er forskellig. Spørg din apps supportteam om det korrekte hændelsesformat.

***

<div id="example-4-open-the-cart-automatically-after-a-product-is-added">
  ## Eksempel 4: Åbn kurven automatisk, efter et produkt er tilføjet
</div>

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeAddedToCart(function(event) {
    window.upcartOpenCart();
  });
</script>
```

> **Bemærk:** Hvis "Open cart drawer on add to cart" allerede er aktiveret i **Cart Editor → Settings → Cart settings**, har du ikke brug for dette script.

***

<div id="quick-reference-subscribe-functions-modern-api">
  ## Hurtig reference: Subscribe-funktioner (moderne API)
</div>

| Funktion                                               | Hvornår den udløses               | Callback modtager                                                                                        |
| ------------------------------------------------------ | --------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `upcartSubscribeCartLoaded(fn)`                        | Kurvdata indlæses                 | `{ cart }` - cart har `.items[]`, `.total`, `.currency`                                                  |
| `upcartSubscribeAddedToCart(fn)`                       | Vare tilføjet til kurven          | `{ item }` - item har `.title`, `.variantId`, `.quantityAdded`, `.quantity`                              |
| `upcartSubscribeCartOpened(fn)`                        | Cart draweren åbner               | `{}` (tomt objekt)                                                                                       |
| `upcartSubscribeCartClosed(fn)`                        | Cart draweren lukker              | `{}` (tomt objekt)                                                                                       |
| `upcartSubscribeCartUpdated(fn)`                       | Kurvens indhold ændres            | `{ cart }`                                                                                               |
| `upcartSubscribeItemRemoved(fn)`                       | Vare fjernet                      | `{ item }`                                                                                               |
| `upcartSubscribeCheckoutClicked(fn)`                   | Der klikkes på checkout-knappen   | `{ event }` - browserens MouseEvent                                                                      |
| `upcartSubscribeUpsellsAddedToCart(fn)`                | Upsell-vare tilføjet              | `{ variant }` - har `.id` og `.title`                                                                    |
| `upcartSubscribeUpsellsRendered(fn)`                   | Upsells renderes i kurven         | `{ item, element }` - item er produktet, element er DOM-noden                                            |
| `upcartSubscribeNotesTextChanged(fn)`                  | Kurvnoter opdateret               | `{ newNotesText, oldNotesText }` - den nye notestreng og den forrige                                     |
| `upcartSubscribeRewardsMilestonesCompletedChanged(fn)` | Milepælsstatus for rewards ændres | `{ numOfMilestonesCompleted, status }` - `status` er `"promotion"`, `"demotion"` eller `"initial-state"` |

***

<div id="direct-action-functions">
  ## Direkte handlingsfunktioner
</div>

| Funktion                           | Hvad den gør                                                    |
| ---------------------------------- | --------------------------------------------------------------- |
| `window.upcartOpenCart()`          | Åbner cart draweren                                             |
| `window.upcartCloseCart()`         | Lukker cart draweren                                            |
| `window.upcartRefreshCart()`       | Genindlæser kurvdata                                            |
| `window.upcartGetCart()`           | Returnerer det aktuelle kurvobjekt                              |
| `window.upcartRegisterAddToCart()` | Registrerer add-to-cart for page buildere (Replo, PageFly osv.) |
| `window.upcartFormatMoney()`       | Formaterer en pris med din butiks pengeformat                   |

For den fulde API-dokumentation, se [Upcart Public API Documentation](https://rokt.notion.site/upcart-public-api).

***

<div id="troubleshooting">
  ## Fejlfinding
</div>

* **Kører scriptet ikke?** Dobbelttjek placeringen: Det skal ligge i *Scripts (before load)*, ikke efter load.
* **Element ikke fundet?** Sørg for, at selektoren (f.eks. `#upCartStickyButton`) matcher det faktiske element-ID i din kurv.
* **Gik noget i stykker?** Udkommentér dit script ved at tilføje `//` i starten af hver linje, gem, og genindlæs.
* **Sidder du stadig fast?** Se [API-FAQ'en](/da/upcart/upcart_api_frequently_asked_questions) for flere fejlfindingstrin.