Ouvrir le tiroir depuis un constructeur de pages

Aftersell intercepte l’ajout au panier sur les formulaires produit standard de Shopify. Les constructeurs de pages d’atterrissage ajoutent souvent au panier à leur manière, via un appel JavaScript plutôt qu’une soumission de formulaire ; l’article arrive donc dans le panier mais le tiroir reste fermé, ou le client est redirigé vers /cart.

La solution, en une ligne

Une fois l’ajout au panier du constructeur terminé, demandez au panier de se recharger et de s’ouvrir :

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

Ajoutez ceci comme seconde action sur le bouton, après l’action « add to cart » du constructeur, et désactivez l’option « go to cart » ou « redirect after add » du constructeur.

Essayez d’abord open_on_background_add, car cela résout souvent le problème sans toucher du tout au bouton.

L’option sans code d’abord

Aftersell détecte de deux manières les ajouts qu’il n’a pas gérés lui-même. Les deux fonctionnent en permanence. Elles sont attachées ensemble au démarrage et aucune ne supprime l’autre, donc un même ajout peut être annoncé par les deux, et chaque annonce applique indépendamment la règle d’ouverture :

Sur le réseau. Aftersell surveille les requêtes vers les endpoints de panier de Shopify. Si l’ajout a suivi un vrai clic ou une frappe de touche dans les trois secondes environ, il compte comme un ajout initié par l’acheteur, et le tiroir s’ouvre selon votre paramètre normal Open cart when an item is added. Tout constructeur qui ajoute via l’API Ajax de panier de Shopify (/cart/add.js) tombe dans ce cas, ce qui est le cas le plus courant. Essayez donc d’abord votre bouton : il fonctionne peut-être déjà sans aucun changement.
Les événements de panier standard de Shopify. Un ajout annoncé de cette façon est toujours traité comme un ajout en arrière-plan, qu’un acheteur ait cliqué ou non. Les ajouts en arrière-plan n’ouvrent pas le tiroir sauf si vous l’activez :

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

Collez cela dans Cart settings → Custom script → Initialization. Si le tiroir s’ouvre désormais après le bouton d’ajout de votre constructeur, c’est terminé, sans travail bouton par bouton, et cela couvre toutes les pages.

open_on_background_add couvre aussi les ajouts sans aucun geste de l’acheteur, comme une autre application ou un script qui écrit dans le panier. Ne l’activez que si vous voulez que ceux-là ouvrent aussi le tiroir.

Si aucune des deux voies n’ouvre le tiroir, repliez-vous sur l’appel explicite ci-dessous.

Configuration par constructeur

Replo

Ouvrez votre page dans l’éditeur Replo et sélectionnez le bouton Add to Cart.
Dans la barre latérale de droite, ouvrez l’onglet Interactions.
Sous On Click, cliquez sur + et choisissez Run JavaScript.

Collez :

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

Sélectionnez à nouveau l’interaction Add Product to Cart et désactivez Go to cart after?.
Prévisualisez, confirmez que le tiroir s’ouvre, puis publiez.

Répétez sur chaque page comportant un bouton d’ajout au panier.

PageFly et GemPages

Les deux permettent d’attacher du JavaScript personnalisé au clic d’un bouton ou d’ajouter un élément de code personnalisé à la page. Utilisez le même extrait, configuré pour s’exécuter après l’action d’ajout au panier du constructeur, et désactivez tout paramètre « redirect to cart » sur le bouton.

Votre propre bouton

Si vous ajoutez vous-même au panier, évitez l’aller-retour et utilisez l’action propre du SDK, qui met à jour le panier et peut ouvrir le tiroir en une seule étape :

document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});

Utilisez refresh() uniquement lorsque quelque chose d’autre a modifié le panier et que vous avez besoin qu’Aftersell se mette à jour :

fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

Quand le bouton du constructeur doit contourner entièrement Aftersell

Parfois, c’est l’inverse : un formulaire a besoin de son propre flux, et l’interception d’Aftersell gêne. Exemptez uniquement ce formulaire :

window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);

Ajoutez ensuite data-skip-aftersell au formulaire. C’est mieux que skip_add_to_cart_interceptor, qui désactive l’interception pour tous les formulaires de la page. Encore plus simple, si vous pouvez modifier le balisage du formulaire : ajoutez la classe aftersell-cart-skip-atc au <form> et Aftersell l’ignore, sans script.

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

Dépannage

Symptôme	Cause probable
Article ajouté, le tiroir reste fermé	Le constructeur n’émet pas les événements de panier standard de Shopify. Utilisez l’appel explicite `refresh()` + `open()`.
Le client est redirigé vers `/cart`	L’option « go to cart after add » du constructeur est toujours activée. Désactivez-la.
Le tiroir s’ouvre mais affiche un contenu obsolète	`open()` s’est exécuté avant que `refresh()` n’aboutisse. Chaînez-les avec `.then()`, comme ci-dessus.
Rien ne se passe du tout	Les actions appelées avant le chargement du panier affichent un avertissement dans la console et ne font rien. Encapsulez dans `window.aftersell.cart.ready().then(…)` si le bouton peut être cliqué aussi tôt.
Fonctionne sur une page, pas sur une autre	La plupart des constructeurs appliquent les interactions par page. Répétez la configuration sur chacune.

Consultez window.aftersellCartDebugEvents si un appel semble ne rien faire, car les échecs du SDK sont absorbés plutôt que levés.

Où aller ensuite

Configure : open_on_background_add et les autres options du tiroir.
Actions : refresh, open et addItem.
Hooks : exempter un seul formulaire.

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

Ouvrir le tiroir depuis un constructeur de pages

La solution, en une ligne

L’option sans code d’abord

Configuration par constructeur

Replo

PageFly et GemPages

Votre propre bouton

Quand le bouton du constructeur doit contourner entièrement Aftersell

Dépannage

Où aller ensuite

​La solution, en une ligne

​L’option sans code d’abord

​Configuration par constructeur

​Replo

​PageFly et GemPages

​Votre propre bouton

​Quand le bouton du constructeur doit contourner entièrement Aftersell

​Dépannage

​Où aller ensuite

La solution, en une ligne

L’option sans code d’abord

Configuration par constructeur

Replo

PageFly et GemPages

Votre propre bouton

Quand le bouton du constructeur doit contourner entièrement Aftersell

Dépannage

Où aller ensuite