> ## 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.
# Apri il drawer da un page builder
> Un caso d'uso del Cart SDK per far sì che i pulsanti di aggiunta al carrello di Replo, PageFly, GemPages e personalizzati aprano il drawer dell'Aftersell Cart.
Aftersell intercetta l'aggiunta al carrello sui form prodotto standard di Shopify. I page builder di landing page spesso aggiungono al carrello a modo loro, usando una chiamata JavaScript invece di un submit del form, quindi l'articolo finisce nel carrello ma il drawer resta chiuso, oppure l'acquirente viene reindirizzato a `/cart`.
## La soluzione, in una riga
Dopo che l'aggiunta al carrello del builder finisce, di' al carrello di rifare il fetch e aprirsi:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
Aggiungilo come **seconda azione** sul pulsante, dopo l'"add to cart" del builder stesso, e disattiva l'opzione "go to cart" o "redirect after add" del builder.
Prova prima [`open_on_background_add`](#the-no-code-option-first), perché spesso risolve il problema senza toccare affatto il pulsante.
## Prima l'opzione senza codice
Aftersell rileva le aggiunte che non ha gestito lui stesso in due modi. Entrambi sono sempre attivi — vengono agganciati insieme al boot e nessuno dei due sopprime l'altro, quindi un'aggiunta può essere annunciata da entrambi — e ogni annuncio applica la regola di apertura in modo indipendente:
* **Sul filo.** Aftersell osserva le richieste agli endpoint del carrello di Shopify. Se l'aggiunta ha seguito un vero clic o una pressione di tasto entro circa tre secondi, conta come guidata dall'acquirente, e il drawer si apre secondo la tua normale impostazione **Open cart when an item is added**. Qualsiasi builder che aggiunge tramite l'Ajax cart API di Shopify (`/cart/add.js`) finisce qui, che è il caso comune — quindi prova prima il tuo pulsante, potrebbe già funzionare senza alcuna modifica.
* **[Gli eventi standard del carrello di Shopify](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** Un'aggiunta annunciata in questo modo è sempre trattata come un'aggiunta in *background*, che un acquirente abbia cliccato o meno. Le aggiunte in background non aprono il drawer a meno che tu non lo scelga:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```
Incollalo in **Cart settings → Custom script → Initialization**. Se ora il drawer si apre dopo il pulsante di aggiunta del builder, hai finito, senza lavoro per singolo pulsante, e copre ogni pagina.
`open_on_background_add` copre anche le aggiunte senza alcun gesto dell'acquirente — un'altra app o script che scrive nel carrello. Attivalo solo se vuoi che anche quelle facciano comparire il drawer.
Se nessuno dei due percorsi apre il drawer, ripiega sulla chiamata esplicita qui sotto.
## Configurazione per builder
### Replo
1. Apri la tua pagina nell'editor di Replo e seleziona il pulsante **Add to Cart**.
2. Nella barra laterale destra, apri la scheda **Interactions**.
3. Sotto **On Click**, clicca `+` e scegli **Run JavaScript**.
4. Incolla:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Seleziona di nuovo l'interazione **Add Product to Cart** e disattiva **Go to cart after?**.
6. Fai un'anteprima, conferma che il drawer si apre, poi pubblica.
Ripeti su ogni pagina che ha un pulsante di aggiunta al carrello.
### PageFly e GemPages
Entrambi ti permettono di allegare JavaScript personalizzato al clic di un pulsante o di aggiungere un elemento di codice personalizzato alla pagina. Usa lo stesso snippet, collegato in modo da essere eseguito dopo l'azione di aggiunta al carrello del builder, e disattiva qualsiasi impostazione "redirect to cart" sul pulsante.
### Il tuo pulsante personale
Se stai aggiungendo tu stesso al carrello, salta il giro e usa l'azione dell'SDK, che aggiorna il carrello e può aprire il drawer in un solo passaggio:
```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();
});
});
```
Usa `refresh()` solo quando qualcos'*altro* ha cambiato il carrello e ti serve che Aftersell si allinei:
```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(); });
```
## Quando il pulsante del builder deve bypassare del tutto Aftersell
A volte è vero il contrario: un form ha bisogno del proprio flusso, e l'intercettazione di Aftersell si mette in mezzo. Esenta solo quel form:
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
form.hasAttribute('data-skip-aftersell')
);
```
Poi aggiungi `data-skip-aftersell` al form. È meglio di [`skip_add_to_cart_interceptor`](/it/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor), che disattiva l'intercettazione per ogni form sulla pagina.
Ancora più semplice, se puoi modificare il markup del form: aggiungi la classe **`aftersell-cart-skip-atc`** al `