Apri il drawer da un page builder

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:

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

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

Apri la tua pagina nell’editor di Replo e seleziona il pulsante Add to Cart.
Nella barra laterale destra, apri la scheda Interactions.
Sotto On Click, clicca + e scegli Run JavaScript.

Incolla:

window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});

Seleziona di nuovo l’interazione Add Product to Cart e disattiva Go to cart after?.
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:

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:

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:

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, 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 <form> e Aftersell lo salta, senza bisogno di script.

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

Risoluzione dei problemi

Sintomo	Causa probabile
Articolo aggiunto, drawer resta chiuso	Il builder non emette gli eventi standard del carrello di Shopify. Usa la chiamata esplicita `refresh()` + `open()`.
L’acquirente viene reindirizzato a `/cart`	L’opzione “go to cart after add” del builder è ancora attiva. Disattivala.
Il drawer si apre ma mostra contenuti obsoleti	`open()` è stato eseguito prima che `refresh()` si risolvesse. Concatenali con `.then()`, come sopra.
Non succede proprio nulla	Le azioni chiamate prima che il carrello si caricasse avvisano nella console e non fanno nulla. Avvolgile in `window.aftersell.cart.ready().then(…)` se il pulsante può essere cliccato così presto.
Funziona su una pagina, non su un’altra	La maggior parte dei builder applica le interazioni per pagina. Ripeti la configurazione su ciascuna.

Controlla window.aftersellCartDebugEvents se una chiamata sembra non fare nulla, dato che i fallimenti dell’SDK vengono inghiottiti invece che lanciati.

Dove andare adesso

Configure: open_on_background_add e le altre opzioni del drawer.
Actions: refresh, open e addItem.
Hooks: esentare un singolo form.

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

La soluzione, in una riga

Prima l’opzione senza codice

Configurazione per builder

Replo

PageFly e GemPages

Il tuo pulsante personale

Quando il pulsante del builder deve bypassare del tutto Aftersell

Risoluzione dei problemi

Dove andare adesso

​La soluzione, in una riga

​Prima l’opzione senza codice

​Configurazione per builder

​Replo

​PageFly e GemPages

​Il tuo pulsante personale

​Quando il pulsante del builder deve bypassare del tutto Aftersell

​Risoluzione dei problemi

​Dove andare adesso

La soluzione, in una riga

Prima l’opzione senza codice

Configurazione per builder

Replo

PageFly e GemPages

Il tuo pulsante personale

Quando il pulsante del builder deve bypassare del tutto Aftersell

Risoluzione dei problemi

Dove andare adesso