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

# Åbn skuffen fra en page builder

> En Cart SDK-use case til at få Replo, PageFly, GemPages og custom add-to-cart-knapper til at åbne Aftersell Cart-skuffen.

Aftersell opsnapper add-to-cart på standard Shopify-produktformularer. Landing page-buildere tilføjer ofte til kurven på deres egen måde, med et JavaScript-kald i stedet for en formularindsendelse, så varen lander i kurven, men skuffen forbliver lukket, eller kunden omdirigeres til `/cart`.

<div id="the-fix-in-one-line">
  ## Løsningen, på én linje
</div>

Når builderens add-to-cart er færdig, bed kurven om at genhente og åbne:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

Tilføj dette som en **anden action** på knappen, efter builderens egen "add to cart", og slå builderens "go to cart"- eller "redirect after add"-mulighed fra.

<Note>
  Prøv [`open_on_background_add`](#the-no-code-option-first) først, da det ofte løser dette uden overhovedet at røre knappen.
</Note>

<div id="the-no-code-option-first">
  ## No-code-muligheden først
</div>

Aftersell opdager tilføjelser, det ikke selv håndterede, på to måder. Begge kører hele tiden — de kobles på sammen ved boot, og ingen af dem undertrykker den anden, så én tilføjelse kan blive annonceret af begge — og hver annoncering anvender åbne-reglen uafhængigt:

* **På tråden.** Aftersell overvåger forespørgsler til Shopifys kurv-endpoints. Hvis tilføjelsen fulgte et rigtigt klik eller tastetryk inden for cirka tre sekunder, tæller den som kundedrevet, og skuffen åbner i henhold til din normale **Open cart when an item is added**-indstilling. Enhver builder, der tilføjer gennem Shopifys Ajax cart API (`/cart/add.js`), lander her, hvilket er det almindelige tilfælde — så prøv din knap først, den virker måske allerede uden nogen ændringer overhovedet.
* **[Shopifys standard-kurvevents](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** En tilføjelse annonceret på denne måde behandles altid som en *baggrunds*-tilføjelse, uanset om en kunde klikkede eller ej. Baggrundstilføjelser åbner ikke skuffen, medmindre du tilvælger det:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

Indsæt det i **Cart settings → Custom script → Initialization**. Hvis skuffen nu åbner efter din builders tilføj-knap, er du færdig, uden arbejde pr. knap, og det dækker hver side.

<Note>
  `open_on_background_add` dækker også tilføjelser helt uden kundegestus — en anden app eller et script, der skriver til kurven. Slå det kun til, hvis du vil have, at de også åbner skuffen.
</Note>

Hvis ingen af de to veje åbner skuffen, så fald tilbage til det eksplicitte kald nedenfor.

<div id="per-builder-setup">
  ## Opsætning pr. builder
</div>

<div id="replo">
  ### Replo
</div>

1. Åbn din side i Replo-editoren og vælg **Add to Cart**-knappen.

2. I den højre sidepanel åbnes fanen **Interactions**.

3. Under **On Click** klikkes `+`, og vælg **Run JavaScript**.

4. Indsæt:

   ```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   window.aftersell.cart.actions.refresh().then(() => {
     window.aftersell.cart.actions.open();
   });
   ```

5. Vælg **Add Product to Cart**-interaktionen igen og slå **Go to cart after?** fra.

6. Forhåndsvis, bekræft at skuffen åbner, og udgiv derefter.

Gentag på hver side, der har en add-to-cart-knap.

<div id="pagefly-and-gempages">
  ### PageFly og GemPages
</div>

Begge lader dig vedhæfte custom JavaScript til et knapklik eller tilføje et custom code-element til siden. Brug det samme snippet, sat op til at køre efter builderens add-to-cart-action, og deaktiver enhver "redirect to cart"-indstilling på knappen.

<div id="your-own-button">
  ### Din egen knap
</div>

Hvis du selv tilføjer til kurven, så spring rundturen over og brug SDK'ets egen action, som opdaterer kurven og kan åbne skuffen i ét trin:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});
```

Brug kun `refresh()`, når noget *andet* ændrede kurven, og du har brug for, at Aftersell følger med:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });
```

<div id="when-the-builders-button-should-bypass-aftersell-entirely">
  ## Når builderens knap skal omgå Aftersell helt
</div>

Nogle gange er det omvendte sandt: en formular har brug for sit eget flow, og Aftersells opsnapning er i vejen. Undtag netop den formular:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

Tilføj derefter `data-skip-aftersell` til formularen. Dette er bedre end [`skip_add_to_cart_interceptor`](/da/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), som slår opsnapning fra for hver formular på siden.

Endnu enklere, hvis du kan redigere formularens markup: tilføj klassen **`aftersell-cart-skip-atc`** til `<form>`-elementet, og Aftersell springer den over, intet script nødvendigt.

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

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

| Symptom                                   | Sandsynlig årsag                                                                                                                                                     |
| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Vare tilføjet, skuffen forbliver lukket   | Builderen udsender ikke Shopifys standard-kurvevents. Brug det eksplicitte `refresh()` + `open()`-kald.                                                              |
| Kunden omdirigeres til `/cart`            | Builderens "go to cart after add"-mulighed er stadig slået til. Slå den fra.                                                                                         |
| Skuffen åbner, men viser forældet indhold | `open()` kørte, før `refresh()` var resolvet. Kæd dem sammen med `.then()`, som ovenfor.                                                                             |
| Der sker overhovedet intet                | Actions kaldt, før kurven var indlæst, advarer i konsollen og gør ingenting. Pak ind i `window.aftersell.cart.ready().then(…)`, hvis knappen kan klikkes så tidligt. |
| Virker på én side, ikke på en anden       | De fleste buildere anvender interaktioner pr. side. Gentag opsætningen på hver.                                                                                      |

Tjek [`window.aftersellCartDebugEvents`](/da/aftersell/cart/sdk-overview#debugging), hvis et kald ser ud til at gøre ingenting, da SDK-fejl sluges i stedet for at blive kastet.

<div id="where-to-go-next">
  ## Hvor du kan gå hen herfra
</div>

* **[Configure](/da/aftersell/cart/sdk-configure#open_on_background_add)**: `open_on_background_add` og de andre skuffe-muligheder.
* **[Actions](/da/aftersell/cart/sdk-actions)**: `refresh`, `open` og `addItem`.
* **[Hooks](/da/aftersell/cart/sdk-hooks#registerskipaddtocartrule)**: undtagelse af en enkelt formular.