Almindelige anvendelser af Upcart API

Sådan fungerer API-mønsteret

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?, før du dykker ned i eksemplerne nedenfor.

Her skal du tilføje dine scripts

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.

En bemærkning om ældre vs. moderne callbacks

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.

Eksempel 1: Skjul sticky cart-knappen, når kurven er tom

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

Eksempel 2: Log, når en vare tilføjes til kurven

<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

Eksempel 3: Integrér med en tredjeparts analytics-app (f.eks. TripleWhale)

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

Eksempel 4: Åbn kurven automatisk, efter et produkt er tilføjet

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

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

Direkte handlingsfunktioner

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.

Fejlfinding

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 for flere fejlfindingstrin.

Kom godt i gang

Kurvmoduler

Kurvindstillinger

Fastgjort kurvknap

Multicart

Tilpasninger

Analyser

Integrationer og kompatibilitet

Fakturering og konto

Fejlfinding

Sådan fungerer API-mønsteret

Her skal du tilføje dine scripts

En bemærkning om ældre vs. moderne callbacks

Eksempel 1: Skjul sticky cart-knappen, når kurven er tom

Eksempel 2: Log, når en vare tilføjes til kurven

Eksempel 3: Integrér med en tredjeparts analytics-app (f.eks. TripleWhale)

Eksempel 4: Åbn kurven automatisk, efter et produkt er tilføjet

Direkte handlingsfunktioner

Fejlfinding

​Sådan fungerer API-mønsteret

​Her skal du tilføje dine scripts

​En bemærkning om ældre vs. moderne callbacks

​Eksempel 1: Skjul sticky cart-knappen, når kurven er tom

​Eksempel 2: Log, når en vare tilføjes til kurven

​Eksempel 3: Integrér med en tredjeparts analytics-app (f.eks. TripleWhale)

​Eksempel 4: Åbn kurven automatisk, efter et produkt er tilføjet

​Hurtig reference: Subscribe-funktioner (moderne API)

​Direkte handlingsfunktioner

​Fejlfinding

Sådan fungerer API-mønsteret

Her skal du tilføje dine scripts

En bemærkning om ældre vs. moderne callbacks

Eksempel 1: Skjul sticky cart-knappen, når kurven er tom

Eksempel 2: Log, når en vare tilføjes til kurven

Eksempel 3: Integrér med en tredjeparts analytics-app (f.eks. TripleWhale)

Eksempel 4: Åbn kurven automatisk, efter et produkt er tilføjet

Hurtig reference: Subscribe-funktioner (moderne API)

Direkte handlingsfunktioner

Fejlfinding