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

# Intercettazione dell'add-to-cart

> Perché Aftersell prende il controllo dell'add-to-cart, come capire se un form viene intercettato e ogni modo per escluderne uno.

Quando un acquirente clicca su **Add to cart**, di solito è Aftersell a gestire l'aggiunta invece di lasciarla al tema. Questa pagina spiega perché, cosa significa per gli script che hai aggiunto e come disattivarla per un singolo form o per tutti.

La maggior parte degli store non ha mai bisogno di cambiare nulla di tutto ciò. Continua a leggere se uno script tuo ha smesso di attivarsi sull'add-to-cart, o se un pulsante di add-to-cart si comporta in modo strano.

## Cosa fa l'intercettazione

Aftersell ascolta il submit dell'add-to-cart prima del tema. Quando ne riconosce uno:

1. Ferma l'evento, in modo che nulla altro sulla pagina gestisca quel clic.
2. Invia l'aggiunta a Shopify da solo.
3. Apre il drawer dell'Aftersell Cart.

Il passo 1 è quello importante, ed è il motivo per cui esiste questa pagina.

## Perché esiste

Senza, entrambi i carrelli rispondono allo stesso clic. Il tema aggiunge l'articolo e apre il proprio drawer, Aftersell lo aggiunge e apre il nostro, e l'acquirente vede due carrelli, spesso con l'articolo aggiunto due volte.

Fermare l'evento è il modo più semplice per garantire una sola aggiunta e un solo carrello.

## Quanto costa

Fermare l'evento lo ferma per **tutti**, non solo per il tema. Qualsiasi altro codice in ascolto sullo stesso add-to-cart smette di essere eseguito: le tue analytics, un pixel di tracciamento, un'app di abbonamenti o di bundle, uno script che hai aggiunto tu.

Fallisce silenziosamente. Nulla appare nella console del browser, e l'aggiunta stessa funziona comunque, quindi il sintomo abituale è un numero sbagliato piuttosto che qualcosa di visibilmente rotto:

* Eventi `add_to_cart` mancanti in GA4, Meta o TikTok
* Un'app di abbonamenti o di bundle che funziona sulla pagina prodotto ma non attraverso il carrello
* Il tuo `addEventListener` sul form che non si attiva mai

Se qualcosa di tutto ciò ti suona familiare, questa pagina è la causa e la soluzione è qui sotto.

## Quando Aftersell non intercetta

L'intercettazione non è sempre attiva. Aftersell lascia in pace l'add-to-cart quando:

* **Riconosce il carrello del tuo tema.** Sui temi con cui Aftersell sa lavorare, rende inerte il carrello del tema stesso invece di bloccare l'evento, e poi lascia che il tema esegua l'aggiunta normalmente. I tuoi script vengono eseguiti come hanno sempre fatto. Vedi [Quali temi](#which-themes-aftersell-recognizes) qui sotto.
* **Il form non aggiunge una line item.** Un form senza `id` di variante e senza `items[]` viene lasciato in pace.
* **Hai deciso di uscirne** usando uno dei metodi qui sotto.

Quando Aftersell non esegue l'aggiunta, continua comunque a osservare la richiesta al carrello e apre il drawer quando ne vede una. Vedi [Prima di scegliere: cosa cambia](#before-you-choose-what-changes).

## Quali temi riconosce Aftersell

| Tema                                                   |                                                                                             |
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
| **Dawn** e il resto della famiglia gratuita di Shopify | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                            | Il tema predefinito attuale di Shopify                                                      |
| **Impulse**                                            |                                                                                             |

Aftersell riconosce **come è costruito un tema**, non il suo nome, quindi un tema personalizzato derivato da uno di questi viene normalmente riconosciuto anche lui, incluse build private che Aftersell non ha mai visto.

<Note>
  Anche il contrario succede: una build molto personalizzata può allontanarsi abbastanza dal suo genitore da far sì che Aftersell non la riconosca più, anche se il tema si chiama ancora "Dawn". Essere in questa lista rende il riconoscimento probabile, non certo.
</Note>

## Le tue opzioni

Scegli l'opzione più ristretta che risolve il tuo problema. Ogni riga rinuncia a più di quella sopra.

| Opzione                                                              | Ambito                             | Aftersell apre comunque il drawer |
| -------------------------------------------------------------------- | ---------------------------------- | --------------------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | I form che la tua regola seleziona | Sì, dalla richiesta al carrello   |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Un singolo form o pulsante         | Sì, dalla richiesta al carrello   |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Ogni form dello store              | Sì, dalla richiesta al carrello   |

### Prima di scegliere: cosa cambia

Uscire dall'intercettazione restituisce l'aggiunta al tuo tema, il che solleva due domande a cui vale la pena rispondere prima di scegliere una riga: se il tuo carrello si apre comunque, e se il carrello del tema compare accanto ad esso.

#### Il tuo carrello si aprirà comunque?

Di solito sì, senza alcun lavoro da parte tua. Chiunque esegua l'aggiunta, Aftersell osserva la richiesta che va a Shopify e apre il drawer quando ne vede una, seguendo la tua normale impostazione **Open cart when an item is added**. Non devi chiamare nulla di tuo pugno.

Tre situazioni rompono questo comportamento, e tutte e tre hanno una soluzione:

**L'aggiunta va da qualche parte diversa dagli endpoint del carrello di Shopify.** Aftersell osserva `/cart/add`, `/cart/change`, `/cart/update` e `/cart/clear` sul tuo stesso dominio. Un'app che aggiunge tramite il proprio endpoint e sincronizza il carrello dopo non è visibile a questo. Apri tu il carrello una volta che l'aggiunta di quell'app è finita:

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

**Passano più di circa tre secondi tra il clic e la richiesta.** Aftersell tratta un'aggiunta che segue da vicino un clic o una pressione di tasto reale come guidata dall'acquirente. Oltre quella finestra viene considerata un'aggiunta in background, che non apre il drawer a meno che tu non lo abiliti:

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

**La tua impostazione del carrello dice di no.** Se **Open cart when an item is added** è disattivato, o hai impostato `open_on_add_to_cart: 'never'`, nulla apre il drawer. Sta funzionando come configurato.

#### Si aprirà anche il carrello del tema?

Questo è il rischio che portano con sé le opzioni di uscita, e la risposta dipende dal tuo tema.

Rendere inerte il carrello del tema è **separato dall'intercettazione** e avviene al caricamento della pagina in entrambi i casi, quindi nessuna delle opzioni di uscita qui lo riattiva. Su un tema della [lista dei riconosciuti](#which-themes-aftersell-recognizes), il carrello del tema resta silenzioso e l'acquirente vede un solo carrello, il tuo.

Su un tema che Aftersell non riconosce, non c'è nulla che trattenga il carrello del tema. Uscire dall'intercettazione significa che il tema gestisce l'aggiunta esattamente come ha sempre fatto, incluso aprire il proprio drawer o redirigere a `/cart`, mentre Aftersell apre il suo drawer dalla richiesta che ha visto. Questo significa due carrelli, ed è il motivo per cui l'intercettazione esiste in primo luogo.

Se succede, hai tre scelte: lasciare l'intercettazione attiva per quel form, usare un'opzione di uscita più ristretta che non copra i form che lo causano, oppure fermare tu stesso il carrello del tema nel codice del tema.

<Tip>
  Attiva un'opzione di uscita prima in un tema di test o non pubblicato. Se il carrello del tema appare dove prima non appariva, il tuo tema non è uno che Aftersell riconosce, e vorrai tenere l'intercettazione attiva per quei form.
</Tip>

<Note>
  Questo vale solo per l'add-to-cart. Far bypassare Aftersell dall'**icona del carrello** con la classe `aftersell-cart-wont-open-cart` è diverso: un clic sull'icona del carrello non invia alcuna richiesta, quindi non c'è nulla che Aftersell possa osservare, e il drawer non si aprirà. Vedi sotto.
</Note>

### Per singolo form: una regola in codice

L'opzione preferita. Registra una regola che restituisce `true` per i form che vuoi lasciare in pace:

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

Mettila in **Cart settings → Custom script → Initialization**. Le regole sono additive: la tua viene eseguita insieme a tutte le altre, e qualsiasi regola che restituisce `true` salta quel form. Dettagli completi in [Hook](/it/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

### Per singolo form: una classe nel tuo tema

Se preferisci non scrivere una regola, aggiungi la classe `aftersell-cart-skip-atc` nel tuo tema:

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

<Note>
  Per un submit di form, la classe deve stare sull'**elemento form stesso**. Un `div` genitore non funziona. Per un pulsante che aggiunge al carrello senza un submit di form, la classe può stare sul pulsante o su qualsiasi elemento intorno ad esso.
</Note>

### Tutto lo store: disattiva l'intercettazione

L'opzione drastica. L'add-to-cart si comporta esattamente come faceva originariamente il tuo tema, su ogni form:

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

<Warning>
  Questa opzione viene letta **una sola volta, quando il carrello si carica**. Funziona solo dallo script di **Initialization** del tuo carrello. Impostarla più tardi, dentro `ready()` o da un handler di evento, non fa nulla e fallisce silenziosamente.
</Warning>

Ricorri a questa opzione solo quando le opzioni per singolo form non funzionano, per esempio quando i form da esentare sono creati da un'altra app e non puoi identificarli in modo affidabile.

## L'icona del carrello è separata

L'icona del carrello nell'header è gestita da un proprio interceptor, con la propria opzione di uscita. Disattivare l'intercettazione dell'add-to-cart non cambia ciò che fa l'icona del carrello, e vale anche il contrario.

Cliccare sull'icona del carrello apre il drawer di Aftersell invece di andare a `/cart`. Per lasciare in pace un'icona o un pulsante, aggiungi la classe `aftersell-cart-wont-open-cart` ad esso, o a qualsiasi elemento intorno ad esso:

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

Quel controllo fa quindi qualunque cosa il tuo tema gli faccia fare, di solito andare alla pagina del carrello. Aftersell è completamente fuori dai giochi, quindi **il drawer non si aprirà**. A differenza dell'add-to-cart non c'è una richiesta da osservare, quindi se vuoi che il tuo carrello si apra da quel controllo devi dirlo esplicitamente:

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

Lo stesso problema di silenziamento si applica qui: poiché Aftersell blocca il clic, anche le tue analytics e i pixel non vedono i clic sull'icona del carrello. Se è solo questo che devi sistemare, mantieni il drawer e ferma il silenziamento:

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

I tuoi listener vengono eseguiti, il drawer si apre comunque e il clic continua a non navigare verso `/cart`. Dettagli completi in [Configure](/it/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Per cambiare *quali* elementi aprono il carrello invece di disattivarli, usa **Cart settings → Advanced → Cart icon selector** invece di modificare il tema.
</Note>

## Dove andare adesso

* **[Configure](/it/aftersell/cart/sdk-configure)**: ogni opzione dell'SDK, incluse quelle citate qui.
* **[Hook](/it/aftersell/cart/sdk-hooks)**: controllo per singolo form e per singola riga.
* **[Aprire il drawer da un page builder](/it/aftersell/cart/sdk-use-case-page-builder)**: per Replo, PageFly, GemPages e pulsanti personalizzati che aggiungono al carrello a modo loro.