Actions

Les actions lisent et modifient le panier. Elles se trouvent sous window.aftersell.cart.actions.

Les actions s’exécutent après que le panier est prêt, à l’intérieur de ready() ou d’un gestionnaire d’événement.

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

Avant le chargement du panier, les actions sont des stubs. Chacune émet un avertissement dans la console nommant l’action, par exemple cart.actions.addItem() called before the cart loaded, et ne fait rien. Les actions asynchrones résolvent quand même une Promise, donc une chaîne .then() s’exécute normalement au lieu de lever une exception ; getCart() renvoie null et formatMoney() renvoie une chaîne vide.Rien ne casse si vous en appelez une trop tôt, mais rien ne se passe non plus. Surveillez cet avertissement dans la console lorsqu’une action semble ne rien faire.

Toutes les actions

Action	Signature	Renvoie	Ce qu’elle fait
`open`	`open()`	Rien	Ouvre le tiroir.
`close`	`close()`	Rien	Ferme le tiroir.
`getCart`	`getCart()`	`AftersellCart \| null`	Lit le panier actuel.
`formatMoney`	`formatMoney(cents)`	`string`	Formate un montant pour l’affichage.
`addItem`	`addItem(variantId, quantity?)`	`Promise`	Ajoute une variante.
`removeItem`	`removeItem(key)`	`Promise`	Supprime une ligne.
`updateItemQuantity`	`updateItemQuantity(key, quantity)`	`Promise`	Définit la quantité d’une ligne.
`replaceLineVariant`	`replaceLineVariant(key, variantId)`	`Promise`	Change la variante d’une ligne.
`refresh`	`refresh()`	`Promise`	Recharge le panier depuis Shopify.
`visualRefresh`	`visualRefresh()`	Rien	Redessine sans recharger.

Appeler une action depuis un gestionnaire cart_updated peut boucler. Lisez d’abord les deux règles.

Tiroir

open et close

Ouvrent ou ferment le tiroir du panier. Les deux sont synchrones et ne prennent aucun argument.

// 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();

Lecture

getCart()

Renvoie l’objet cart actuel, ou null avant son chargement. Le résultat est une copie, donc le muter ne changera pas le vrai panier.

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));
});

Comme il s’agit d’un instantané, ne conservez pas le résultat ; relisez-le chaque fois que vous avez besoin de données à jour. Dans un gestionnaire d’événement, vous avez déjà le panier à jour comme charge utile, donc getCart() y est redondant.

formatMoney(cents)

Formate un montant en unités mineures selon le format monétaire de votre boutique. Chaque prix dans le SDK est en centimes, c’est donc ainsi que vous en transformez un en quelque chose d’affichable.

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);
});

Remplacez le format avec configure({ money_format }).

Modifier le panier

Les actions sur les articles identifient une ligne par sa key Shopify, pas par l’ID de variante, car un panier peut contenir la même variante sur plusieurs lignes avec des propriétés différentes. Lisez-la depuis getCart().items[n].key.

addItem(variantId, quantity?)

Ajoute une variante au panier. quantity vaut 1 par défaut. Se résout une fois le panier stabilisé.

// 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);

Ajouter une variante déjà présente dans le panier augmente la quantité de cette ligne plutôt que de créer une seconde ligne, tant que la ligne existante n’a pas de propriétés d’article. Une ligne portant des propriétés est une ligne distincte, vous en obtenez donc une nouvelle.

removeItem(key)

Supprime entièrement une ligne.

// 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)

Définit la quantité d’une ligne. Passer 0 supprime la ligne.

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);
    }
  });
});

Ce second exemple peut s’exécuter en toute sécurité depuis cart_updated parce que la vérification > 1 est fausse au second passage. Consultez les deux règles.

replaceLineVariant(key, variantId)

Change la variante d’une ligne tout en conservant sa quantité et ses propriétés. Utile pour un sélecteur de taille ou de parfum à l’intérieur du panier.

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

Le plan de vente de la ligne est réinitialisé lors d’un échange. Une ligne d’abonnement devient un achat unique sauf si vous réappliquez un plan.

L’échange est un ajout suivi d’une suppression, pas une modification sur place, donc le résultat est une nouvelle ligne : elle reçoit une nouvelle key et atterrit à la fin du panier. Relisez getCart() ensuite plutôt que de réutiliser la clé que vous avez passée.

Rafraîchissement

refresh()

Recharge le panier depuis Shopify. Utilisez-la après qu’un élément extérieur au SDK a modifié le panier sans que le tiroir ne s’en aperçoive.

// 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(); });

La plupart du temps, vous n’en avez pas besoin, car Aftersell écoute déjà les événements de panier standard de Shopify et recharge de lui-même. Utilisez-la lorsqu’une intégration personnalisée les contourne.

visualRefresh()

Ré-exécute les transformations de rendu sans recharger le panier depuis Shopify. Vous en avez rarement besoin : enregistrer (ou désenregistrer) une transformation de ligne, un comparateur, un enrichisseur ou l’un des deux hooks d’abonnement en déclenche une pour vous. Seuls les deux hooks d’ajout au panier ne le font pas, puisqu’ils ne changent rien de ce qui est déjà à l’écran. Utilisez-la lorsqu’un élément dont une transformation dépend change alors que le panier lui-même n’a pas changé :

// 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();
});

Notes et cas particuliers

Les actions asynchrones se résolvent lorsque le changement est stabilisé. En attendre une vous permet de séquencer du travail après que le panier a réellement été mis à jour.
getCart() renvoie une copie. La muter ne fait rien au vrai panier.
Il n’y a pas d’action pour les codes de réduction. Les codes appliqués sont lisibles sur le panier (discountCodes, totalDiscount) et par ligne (discountAllocations) ; les acheteurs les appliquent via le bloc Discount code.
Il n’y a pas d’action pour les attributs de panier ou les notes. Les attributs sont lisibles sur l’objet cart ; les acheteurs écrivent des notes via le bloc Notes.
Pour masquer une ligne plutôt que de la supprimer, utilisez registerLineTransform. La suppression modifie le total de l’acheteur ; le masquage non.

Pour aller plus loin

Objet cart : ce que getCart() renvoie.
Événements : quand exécuter ces actions.
Hooks : modifiez le rendu d’une ligne au lieu de modifier le panier.
Cas d’usage : des solutions complètes aux demandes courantes.

Prise en main

Page d'accueil

Bonnes pratiques

Ventes incitatives post-achat

Panier

Ventes incitatives au paiement (Shopify Plus)

Page de remerciement

Ventes incitatives sur la page produit

Rokt Thanks

Stratégies

Analyses et suivi

Intégrations

Aftersell MCP

Facturation et compte

Dépannage

Toutes les actions

Tiroir

open et close

Lecture

getCart()

formatMoney(cents)

Modifier le panier

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Rafraîchissement

refresh()

visualRefresh()

Notes et cas particuliers

Pour aller plus loin

​Toutes les actions

​Tiroir

​open et close

​Lecture

​getCart()

​formatMoney(cents)

​Modifier le panier

​addItem(variantId, quantity?)

​removeItem(key)

​updateItemQuantity(key, quantity)

​replaceLineVariant(key, variantId)

​Rafraîchissement

​refresh()

​visualRefresh()

​Notes et cas particuliers

​Pour aller plus loin

Toutes les actions

Tiroir

open et close

Lecture

getCart()

formatMoney(cents)

Modifier le panier

addItem(variantId, quantity?)

removeItem(key)

updateItemQuantity(key, quantity)

replaceLineVariant(key, variantId)

Rafraîchissement

refresh()

visualRefresh()

Notes et cas particuliers

Pour aller plus loin