Azioni

Le azioni leggono e modificano il carrello. Vivono sotto window.aftersell.cart.actions.

Le azioni vanno eseguite dopo che il carrello è pronto, dentro ready() o un handler di evento.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  console.log(state.itemCount, 'items');
});

Prima che il carrello si carichi, le azioni sono stub. Ognuna registra un avviso in console che nomina l’azione, per esempio cart.actions.addItem() called before the cart loaded, e non fa nulla. Le azioni async risolvono comunque una Promise, quindi una catena .then() viene eseguita normalmente invece di generare un errore; getCart() restituisce null e formatMoney() restituisce una stringa vuota.Non si rompe nulla se ne chiami una troppo presto, ma non succede nemmeno nulla. Controlla la console per quell’avviso quando un’azione sembra non fare nulla.

Tutte le azioni

Azione	Firma	Restituisce	Cosa fa
`open`	`open()`	Nulla	Apre il drawer.
`close`	`close()`	Nulla	Chiude il drawer.
`getCart`	`getCart()`	`AftersellCart \| null`	Legge il carrello corrente.
`formatMoney`	`formatMoney(cents)`	`string`	Formatta un importo per la visualizzazione.
`addItem`	`addItem(variantId, quantity?)`	`Promise`	Aggiunge una variante.
`removeItem`	`removeItem(key)`	`Promise`	Rimuove una riga.
`updateItemQuantity`	`updateItemQuantity(key, quantity)`	`Promise`	Imposta la quantità di una riga.
`replaceLineVariant`	`replaceLineVariant(key, variantId)`	`Promise`	Sostituisce la variante di una riga.
`refresh`	`refresh()`	`Promise`	Ricarica il carrello da Shopify.
`visualRefresh`	`visualRefresh()`	Nulla	Ridisegna senza ricaricare.

Chiamare un’azione da un handler cart_updated può creare un loop. Leggi prima le due regole.

Drawer

open e close

Aprono o chiudono il drawer del carrello. Entrambe sono sincrone e non richiedono argomenti.

// Open the drawer from your own cart link.
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

// Close it after the shopper does something in a custom block.
window.aftersell.cart.actions.close();

Lettura

getCart()

Restituisce l’oggetto cart corrente, oppure null prima che sia stato caricato. Il risultato è una copia, quindi modificarlo non cambia il carrello reale.

window.aftersell.cart.ready().then(() => {
  const state = window.aftersell.cart.actions.getCart();
  if (!state) return; // the initial load failed

  console.log(state.itemCount, 'items,', state.items.length, 'lines');
  console.log('Total:', window.aftersell.cart.actions.formatMoney(state.totalPrice));
});

Poiché è uno snapshot, non conservare il risultato; rileggilo ogni volta che ti servono dati aggiornati. In un handler di evento hai già il carrello aggiornato come payload, quindi lì getCart() è ridondante.

formatMoney(cents)

Formatta un importo in unità minori usando il formato monetario del tuo store. Ogni prezzo nell’SDK è in centesimi, quindi è così che ne trasformi uno in qualcosa da mostrare.

window.aftersell.cart.actions.formatMoney(5779);  // "$57.79"
window.aftersell.cart.actions.formatMoney(0);     // "$0.00"

// Show the cart total in your own header element.
window.aftersell.cart.events.on('cart_updated', (state) => {
  document.querySelector('#header-total').textContent =
    window.aftersell.cart.actions.formatMoney(state.totalPrice);
});

Sovrascrivi il formato con configure({ money_format }).

Modificare il carrello

Le azioni sugli articoli identificano una riga tramite la sua key di Shopify, non tramite l’ID della variante, perché un carrello può contenere la stessa variante su più righe con proprietà diverse. Leggila da getCart().items[n].key.

addItem(variantId, quantity?)

Aggiunge una variante al carrello. quantity è 1 per impostazione predefinita. Si risolve una volta che il carrello si è assestato.

// Add one, then show the shopper.
window.aftersell.cart.actions.addItem(41720671830082).then(() => {
  window.aftersell.cart.actions.open();
});

// Add a specific quantity.
window.aftersell.cart.actions.addItem(41720671830082, 3);

Aggiungere una variante già presente nel carrello aumenta la quantità di quella riga invece di creare una seconda riga, purché la riga esistente non abbia line item properties. Una riga con proprietà è una riga distinta, quindi ne ottieni una nuova.

removeItem(key)

Rimuove completamente una riga.

// Remove any free line from the cart.
const gift = window.aftersell.cart.actions
  .getCart()
  .items.find((line) => line.finalLinePrice === 0);
if (gift) window.aftersell.cart.actions.removeItem(gift.key);

updateItemQuantity(key, quantity)

Imposta la quantità di una riga. Passare 0 rimuove la riga.

const line = window.aftersell.cart.actions.getCart().items[0];
if (line) window.aftersell.cart.actions.updateItemQuantity(line.key, 3);

// Cap a line at one unit.
window.aftersell.cart.events.on('cart_updated', (state) => {
  state.items.forEach((line) => {
    if (line.variantId === LIMITED_VARIANT_ID && line.quantity > 1) {
      window.aftersell.cart.actions.updateItemQuantity(line.key, 1);
    }
  });
});

Quel secondo esempio è sicuro da eseguire da cart_updated perché il controllo > 1 è falso al secondo passaggio. Vedi le due regole.

replaceLineVariant(key, variantId)

Sostituisce la variante di una riga mantenendone la quantità e le proprietà. Utile per un selettore di taglia o gusto dentro il carrello.

const line = window.aftersell.cart.actions.getCart().items[0];
window.aftersell.cart.actions.replaceLineVariant(line.key, 41720671862850);

Il selling plan della riga si reimposta durante uno scambio. Una riga di abbonamento diventa un acquisto singolo a meno che tu non riapplichi un piano.

Lo scambio è un’aggiunta seguita da una rimozione, non una modifica in loco, quindi il risultato è una nuova riga: ottiene una nuova key e finisce alla fine del carrello. Rileggi getCart() dopo, invece di riutilizzare la key che hai passato.

Aggiornamento

refresh()

Ricarica il carrello da Shopify. Usalo dopo che qualcosa al di fuori dell’SDK ha modificato il carrello e il drawer non se ne è accorto.

// After a raw Ajax API call of your own.
fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

Nella maggior parte dei casi non ti serve, dato che Aftersell è già in ascolto degli eventi standard del carrello di Shopify e ricarica da solo. Ricorri a questa azione quando un’integrazione personalizzata li bypassa.

visualRefresh()

Riesegue le trasformazioni di rendering senza ricaricare il carrello da Shopify. Ti serve raramente: registrare (o annullare la registrazione di) una line transform, un comparator, un enricher o uno dei due hook di abbonamento ne attiva uno per te. Solo i due hook di add-to-cart non lo fanno, dato che non cambiano nulla di quanto già a schermo. Ricorri a questa azione quando qualcosa da cui una trasformazione dipende cambia ma il carrello in sé no:

// A currency switcher changed the format: repaint prices already on screen.
window.myTheme.onCurrencyChange((currency) => {
  window.aftersell.cart.configure({ money_format: FORMATS[currency] });
  window.aftersell.cart.actions.visualRefresh();
});

Note e casi limite

Le azioni async si risolvono quando la modifica si è assestata. Attenderne una ti permette di sequenziare il lavoro dopo che il carrello si è effettivamente aggiornato.
getCart() restituisce una copia. Modificarla non ha alcun effetto sul carrello reale.
Non c’è un’azione per i codici sconto. I codici applicati sono leggibili sul carrello (discountCodes, totalDiscount) e per riga (discountAllocations); gli acquirenti li applicano tramite il blocco Discount code.
Non c’è un’azione per gli attributi del carrello o le note. Gli attributi sono leggibili sull’oggetto cart; gli acquirenti scrivono le note tramite il blocco Notes.
Per nascondere una riga invece di rimuoverla, usa registerLineTransform. Rimuovere cambia il totale dell’acquirente; nascondere no.

Dove andare adesso

Oggetto cart: cosa restituisce getCart().
Eventi: quando eseguire queste azioni.
Hook: cambia come una riga viene renderizzata invece di cambiare il carrello.
Casi d’uso: soluzioni complete alle richieste più comuni.

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

Tutte le azioni

Drawer

open e close

Lettura

getCart()

formatMoney(cents)

Modificare il carrello

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Aggiornamento

refresh()

visualRefresh()

Note e casi limite

Dove andare adesso

​Tutte le azioni

​Drawer

​open e close

​Lettura

​getCart()

​formatMoney(cents)

​Modificare il carrello

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Aggiornamento

​refresh()

​visualRefresh()

​Note e casi limite

​Dove andare adesso

Tutte le azioni

Drawer

open e close

Lettura

getCart()

formatMoney(cents)

Modificare il carrello

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Aggiornamento

refresh()

visualRefresh()

Note e casi limite

Dove andare adesso