Nascondi e rietichetta le righe del carrello

Nascondi le righe che l’acquirente non dovrebbe vedere, rinomina le righe che si leggono male e controlla l’ordine in cui tutto viene renderizzato, il tutto senza toccare ciò che è effettivamente nel carrello. Questo sostituisce il vecchio pattern di nascondere gli elementi del carrello con CSS o style.display = 'none'. Un line transform viene applicato ogni volta che il carrello renderizza, quindi sopravvive ad aggiornamenti, re-render e riaperture del drawer.

Nascondere una riga

// Hide free lines from the drawer. The cart total is unchanged.
window.aftersell.cart.hooks.registerLineTransform((line) => {
  if (line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

Nascondere non è rimuovere. Una riga nascosta rimane nel carrello dell’acquirente, rimane nel totale e arriva fino al checkout; semplicemente non viene disegnata nel drawer. Esce però da getCart().items e da itemCount, quindi anche il tuo stesso codice smette di vederla. Se vuoi che sparisca davvero, usa removeItem.

Cose che vale la pena nascondere comunemente:

window.aftersell.cart.hooks.registerLineTransform((line) => {
  // An app-injected line, tagged with a private property.
  if (line.properties?._bundle_child) {
    line.setHidden(true);
  }

  // A specific SKU that shouldn't be shopper-managed.
  if (line.variantId === HIDDEN_VARIANT_ID) {
    line.setHidden(true);
  }

  // Gift cards issued by a loyalty app.
  if (line.isGiftCard && line.finalLinePrice === 0) {
    line.setHidden(true);
  }
});

Rietichettare una riga

window.aftersell.cart.hooks.registerLineTransform((line) => {
  // Flag discounted lines.
  if (line.finalLinePrice < line.originalLinePrice) {
    line.setTitle(`${line.title} (On sale)`);
  }

  // Make the subscription cadence read naturally.
  if (line.sellingPlan) {
    line.setVariantTitle(`Delivered ${line.sellingPlan.name.toLowerCase()}`);
  }

  // Drop a meaningless variant label.
  if (line.variantTitle === 'Default Title') {
    line.setVariantTitle(null);
  }
});

I quattro setter disponibili su una riga:

Setter	Effetto
`setHidden(bool)`	Nasconde la riga dal drawer.
`setTitle(string)`	Cambia il titolo visualizzato.
`setVariantTitle(string \| null)`	Cambia l’etichetta della variante visualizzata. `null` la rimuove.
`setInternalProperties(obj)`	Fonde proprietà solo di rendering, che un blocco Custom code può leggere. Mai persistite su Shopify.

Controllare l’ordine

Un comparator ha la stessa forma che Array.prototype.sort si aspetta, e viene eseguito dopo il nascondere e il rinominare:

// Subscriptions first, then everything else.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineB.sellingPlan ? 1 : 0) - (lineA.sellingPlan ? 1 : 0);
});

// Push free gifts and add-ons to the bottom.
window.aftersell.cart.hooks.registerLineComparator((lineA, lineB) => {
  return (lineA.finalLinePrice === 0 ? 1 : 0) - (lineB.finalLinePrice === 0 ? 1 : 0);
});

Restituisci 0 per le coppie che non ti interessano. I comparator si compongono come criteri di spareggio, quindi il primo che restituisce un valore diverso da zero decide quella coppia e restituire 0 passa la decisione al successivo invece di imporre un ordine.

Nascondere un intero blocco, non una riga

Un line transform lavora sulle righe del carrello. Per mostrare impostazioni di blocco diverse per paese, mercato o valuta (per esempio livelli di Rewards diversi), usa le condizioni nel cart editor. Nessun codice richiesto, e sopravvive ai redesign del carrello. Il totale del carrello e il contenuto del carrello non sono tipi di condizione dell’editor. Ricorri all’SDK quando la tua regola è qualcosa che le condizioni non possono esprimere (ID di prodotti nel carrello, un totale personalizzato e così via). In tal caso, interroga lo shadow root per una classe pubblica cart-external-*:

window.aftersell.cart.events.on('cart_updated', (state) => {
  const root = window.aftersell.cart.shadowRoot;
  if (!root) return;

  const rewards = root.querySelector('.cart-external-rewards');
  if (!rewards) return;

  const hasExcluded = state.items.some((line) => EXCLUDED_PRODUCT_IDS.includes(line.productId));
  rewards.style.display = hasExcluded ? 'none' : '';
});

Questo viene eseguito dopo ogni render, quindi il blocco può lampeggiare a vista prima che il tuo codice lo nasconda. Il rendering condizionale non ha quel problema, quindi preferiscilo ovunque sia applicabile.

Cose da fare bene

I transform sono chiamate di set-up. Registrali all’inizio del tuo script Initialization; non serve ready().
I transform di tutti vengono eseguiti. Il tuo si compone con quelli registrati da altre app. Non puoi sostituire i loro, e loro non possono eliminare il tuo.
Un transform non può cambiare prezzo, quantità o identità. Cambia solo ciò che viene renderizzato. Usa le azioni per modifiche reali.
Un transform che lancia un errore viene saltato silenziosamente. Gli altri vengono comunque eseguiti. Controlla aftersellCartDebugEvents durante lo sviluppo.
registerLineTransform restituisce una funzione di deregistrazione, se hai bisogno di annullarlo in seguito.

Dove andare adesso

Hooks: il riferimento completo degli hook.
Cart object: ogni campo su cui puoi ramificare.
CSS personalizzato: la convenzione delle classi cart-external-*.

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

Nascondi e rietichetta le righe del carrello

Nascondere una riga

Rietichettare una riga

Controllare l’ordine

Nascondere un intero blocco, non una riga

Cose da fare bene

Dove andare adesso

​Nascondere una riga

​Rietichettare una riga

​Controllare l’ordine

​Nascondere un intero blocco, non una riga

​Cose da fare bene

​Dove andare adesso

Nascondere una riga

Rietichettare una riga

Controllare l’ordine

Nascondere un intero blocco, non una riga

Cose da fare bene

Dove andare adesso