Intercettazione dell'add-to-cart

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:

Ferma l’evento, in modo che nulla altro sulla pagina gestisca quel clic.
Invia l’aggiunta a Shopify da solo.
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 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.

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.

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.

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`	I form che la tua regola seleziona	Sì, dalla richiesta al carrello
`aftersell-cart-skip-atc`	Un singolo form o pulsante	Sì, dalla richiesta al carrello
`skip_add_to_cart_interceptor`	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:

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:

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

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.

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.

Per singolo form: una regola in codice

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

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.

Per singolo form: una classe nel tuo tema

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

<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">

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.

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:

window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });

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.

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:

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

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:

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.

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

Dove andare adesso

Configure: ogni opzione dell’SDK, incluse quelle citate qui.
Hook: controllo per singolo form e per singola riga.
Aprire il drawer da un page builder: per Replo, PageFly, GemPages e pulsanti personalizzati che aggiungono al carrello a modo loro.

Per iniziare

Pagina iniziale

Best practice

Upsell post-acquisto

Carrello

Upsell al checkout (Shopify Plus)

Pagina di ringraziamento

Upsell nella pagina prodotto

Rokt Thanks

Strategie

Analisi e monitoraggio

Integrazioni

Aftersell MCP

Fatturazione e account

Risoluzione dei problemi

Cosa fa l’intercettazione

Perché esiste

Quanto costa

Quando Aftersell non intercetta

Quali temi riconosce Aftersell

Le tue opzioni

Prima di scegliere: cosa cambia

Il tuo carrello si aprirà comunque?

Si aprirà anche il carrello del tema?

Per singolo form: una regola in codice

Per singolo form: una classe nel tuo tema

Tutto lo store: disattiva l’intercettazione

L’icona del carrello è separata

Dove andare adesso

​Cosa fa l’intercettazione

​Perché esiste

​Quanto costa

​Quando Aftersell non intercetta

​Quali temi riconosce Aftersell

​Le tue opzioni

​Prima di scegliere: cosa cambia

​Il tuo carrello si aprirà comunque?

​Si aprirà anche il carrello del tema?

​Per singolo form: una regola in codice

​Per singolo form: una classe nel tuo tema

​Tutto lo store: disattiva l’intercettazione

​L’icona del carrello è separata

​Dove andare adesso

Cosa fa l’intercettazione

Perché esiste

Quanto costa

Quando Aftersell non intercetta

Quali temi riconosce Aftersell

Le tue opzioni

Prima di scegliere: cosa cambia

Il tuo carrello si aprirà comunque?

Si aprirà anche il carrello del tema?

Per singolo form: una regola in codice

Per singolo form: una classe nel tuo tema

Tutto lo store: disattiva l’intercettazione

L’icona del carrello è separata

Dove andare adesso