> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Ouvrir le tiroir depuis un constructeur de pages
> Un cas d'usage du Cart SDK pour que les boutons d'ajout au panier de Replo, PageFly, GemPages et vos boutons personnalisés ouvrent le tiroir Aftersell Cart.
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 :
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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`](#the-no-code-option-first), 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](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events).** 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 :
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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
1. Ouvrez votre page dans l'éditeur Replo et sélectionnez le bouton **Add to Cart**.
2. Dans la barre latérale de droite, ouvrez l'onglet **Interactions**.
3. Sous **On Click**, cliquez sur `+` et choisissez **Run JavaScript**.
4. Collez :
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
window.aftersell.cart.actions.open();
});
```
5. Sélectionnez à nouveau l'interaction **Add Product to Cart** et désactivez **Go to cart after?**.
6. 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 :
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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 :
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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 :
```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
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`](/fr/aftersell/cart/sdk-configure#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 `