> ## 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.

# Interception de l'ajout au panier

> Pourquoi Aftersell prend en charge l'ajout au panier, comment savoir si un formulaire est intercepté, et toutes les façons d'y désinscrire un formulaire.

Quand un acheteur clique sur **Ajouter au panier**, c'est généralement Aftersell qui gère l'ajout lui-même au lieu de laisser le thème le faire. Cette page explique pourquoi, ce que cela implique pour les scripts que vous avez ajoutés, et comment le désactiver pour un formulaire ou pour tous.

La plupart des boutiques n'ont jamais besoin de rien changer à cela. Poursuivez la lecture si l'un de vos scripts a cessé de se déclencher à l'ajout au panier, ou si un bouton d'ajout au panier se comporte bizarrement.

## Ce que fait l'interception

Aftersell écoute la soumission d'ajout au panier avant le thème. Quand il en reconnaît une, il :

1. Arrête l'événement, afin que rien d'autre sur la page ne traite ce clic.
2. Envoie lui-même l'ajout à Shopify.
3. Ouvre le tiroir Aftersell Cart.

L'étape 1 est la plus importante, et c'est la raison d'être de cette page.

## Pourquoi elle existe

Sans elle, les deux paniers réagissent au même clic. Le thème ajoute l'article et ouvre son propre tiroir, Aftersell l'ajoute et ouvre le sien, et l'acheteur voit deux paniers, souvent avec l'article ajouté deux fois.

Arrêter l'événement est la façon la plus simple de garantir un seul ajout et un seul panier.

## Ce que cela coûte

Arrêter l'événement l'arrête pour **tout le monde**, pas seulement pour le thème. Tout autre code qui écoute ce même ajout au panier cesse de s'exécuter : vos analyses, un pixel de suivi, une application d'abonnement ou de bundle, un script que vous avez ajouté vous-même.

Cela échoue silencieusement. Rien n'apparaît dans la console du navigateur, et l'ajout lui-même fonctionne toujours, donc le symptôme habituel est un chiffre erroné plutôt que quelque chose de visiblement cassé :

* Événements `add_to_cart` manquants dans GA4, Meta ou TikTok
* Une application d'abonnement ou de bundle qui fonctionne sur la page produit mais pas via le panier
* Votre propre `addEventListener` sur le formulaire ne se déclenche jamais

Si l'un de ces cas vous parle, cette page en est la cause et le correctif se trouve ci-dessous.

## Quand Aftersell n'intercepte pas

L'interception n'est pas toujours active. Aftersell laisse l'ajout au panier tranquille quand :

* **Il reconnaît le panier de votre thème.** Sur les thèmes avec lesquels Aftersell sait travailler, il rend le propre panier du thème inerte au lieu de bloquer l'événement, puis laisse le thème effectuer l'ajout normalement. Vos scripts s'exécutent comme ils l'ont toujours fait. Voir [Quels thèmes](#which-themes-aftersell-recognizes) ci-dessous.
* **Le formulaire n'ajoute pas de ligne d'article.** Un formulaire sans `id` de variante et sans `items[]` est laissé tranquille.
* **Vous vous êtes désinscrit** en utilisant l'une des méthodes ci-dessous.

Quand Aftersell n'effectue pas l'ajout, il continue de surveiller la requête de panier et ouvre le tiroir dès qu'il en voit une. Voir [Avant de choisir : ce qui change](#before-you-choose-what-changes).

## Quels thèmes Aftersell reconnaît

| Thème                                                  |                                                                                             |
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------- |
| **Dawn** et le reste de la famille gratuite de Shopify | Craft, Colorblock, Crave, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste |
| **Horizon**                                            | Le thème par défaut actuel de Shopify                                                       |
| **Impulse**                                            |                                                                                             |

Aftersell se base sur **la façon dont un thème est construit**, pas sur son nom, donc un thème personnalisé forké depuis l'un d'eux est normalement reconnu aussi, y compris les versions privées qu'Aftersell n'a jamais vues.

<Note>
  L'inverse arrive aussi : une version fortement personnalisée peut s'éloigner suffisamment de son parent pour qu'Aftersell ne la reconnaisse plus, même si le thème s'appelle toujours "Dawn". Figurer dans cette liste rend la reconnaissance probable, pas certaine.
</Note>

## Vos options

Choisissez la plus étroite qui résout votre problème. Chaque ligne concède plus que celle du dessus.

| Option                                                               | Portée                                      | Aftersell ouvre toujours le tiroir |
| -------------------------------------------------------------------- | ------------------------------------------- | ---------------------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | Les formulaires que votre règle sélectionne | Oui, depuis la requête de panier   |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | Un formulaire ou un bouton                  | Oui, depuis la requête de panier   |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | Chaque formulaire de la boutique            | Oui, depuis la requête de panier   |

### Avant de choisir : ce qui change

Vous désinscrire rend l'ajout à votre thème, ce qui soulève deux questions à trancher avant de choisir une ligne : est-ce que votre panier s'ouvre toujours, et est-ce que le panier du thème apparaît à côté ?

#### Votre panier s'ouvrira-t-il toujours ?

Habituellement oui, sans effort de votre part. Quel que soit celui qui effectue l'ajout, Aftersell surveille la requête qui part vers Shopify et ouvre le tiroir dès qu'il en voit une, en suivant votre paramètre habituel **Open cart when an item is added**. Vous n'avez rien à appeler vous-même.

Trois situations cassent cela, et les trois ont un correctif :

**L'ajout va ailleurs que vers les endpoints de panier de Shopify.** Aftersell surveille `/cart/add`, `/cart/change`, `/cart/update` et `/cart/clear` sur votre propre domaine. Une application qui ajoute via son propre endpoint et synchronise le panier ensuite n'est pas visible pour cela. Ouvrez le panier vous-même une fois l'ajout de cette application terminé :

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.actions.refresh().then(() => {
  window.aftersell.cart.actions.open();
});
```

**Plus d'environ trois secondes s'écoulent entre le clic et la requête.** Aftersell traite un ajout qui suit de près un vrai clic ou une frappe de touche comme piloté par l'acheteur. Au-delà de cette fenêtre, il est considéré comme un ajout en arrière-plan, qui n'ouvre pas le tiroir sauf si vous y consentez :

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ open_on_background_add: true });
```

**Votre paramètre de panier dit de ne pas le faire.** Si **Open cart when an item is added** est désactivé, ou si vous avez défini `open_on_add_to_cart: 'never'`, rien n'ouvre le tiroir. C'est le fonctionnement configuré.

#### Le panier du thème s'ouvrira-t-il aussi ?

C'est le risque que portent les désinscriptions, et la réponse dépend de votre thème.

Rendre le panier du thème inerte est **séparé de l'interception** et se produit au chargement de la page dans les deux cas, donc aucune des désinscriptions ici ne le réactive. Sur un thème de la [liste reconnue](#which-themes-aftersell-recognizes), le propre panier du thème reste silencieux et l'acheteur voit un seul panier, le vôtre.

Sur un thème qu'Aftersell ne reconnaît pas, rien ne retient le panier du thème. Se désinscrire signifie que le thème gère l'ajout exactement comme il l'a toujours fait, y compris en ouvrant son propre tiroir ou en redirigeant vers `/cart`, tandis qu'Aftersell ouvre son tiroir à partir de la requête qu'il a vue. Cela fait deux paniers, et c'est la raison pour laquelle l'interception existe en premier lieu.

Si cela se produit, vous avez trois choix : laisser l'interception activée pour ce formulaire, utiliser une désinscription plus étroite qui ne couvre pas les formulaires en cause, ou arrêter vous-même le panier du thème dans le code de votre thème.

<Tip>
  Activez une désinscription d'abord dans un thème de test ou non publié. Si le propre panier du thème apparaît là où il n'apparaissait pas avant, votre thème n'en est pas un qu'Aftersell reconnaît, et vous voudrez garder l'interception activée pour ces formulaires.
</Tip>

<Note>
  Cela s'applique uniquement à l'ajout au panier. Faire en sorte que **l'icône du panier** contourne Aftersell avec la classe `aftersell-cart-wont-open-cart` est différent : un clic sur l'icône du panier n'envoie aucune requête, il n'y a donc rien qu'Aftersell puisse surveiller, et le tiroir ne s'ouvrira pas. Voir ci-dessous.
</Note>

### Par formulaire : une règle en code

L'option privilégiée. Enregistrez une règle qui renvoie `true` pour les formulaires que vous voulez laisser tranquilles :

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.hooks.registerSkipAddToCartRule((form) =>
  form.hasAttribute('data-skip-aftersell')
);
```

Mettez-la dans **Cart settings → Custom script → Initialization**. Les règles sont additives : la vôtre s'exécute aux côtés des autres, et toute règle renvoyant `true` fait passer outre pour ce formulaire. Tous les détails dans [Hooks](/fr/aftersell/cart/sdk-hooks#registerskipaddtocartrule).

### Par formulaire : une classe dans votre thème

Si vous préférez ne pas écrire de règle, ajoutez la classe `aftersell-cart-skip-atc` dans votre thème :

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<form action="/cart/add" method="post" class="aftersell-cart-skip-atc">
```

<Note>
  Pour une soumission de formulaire, la classe doit être sur **l'élément form lui-même**. Un `div` parent ne fonctionnera pas. Pour un bouton qui ajoute au panier sans soumission de formulaire, la classe peut être sur le bouton ou sur n'importe quel élément qui l'entoure.
</Note>

### Toute la boutique : désactiver l'interception

L'option brutale. L'ajout au panier se comporte exactement comme votre thème le faisait à l'origine, sur chaque formulaire :

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_add_to_cart_interceptor: true });
```

<Warning>
  Cette option est lue **une seule fois, au chargement du panier**. Elle ne fonctionne que depuis le script **Initialization** de votre panier. La définir plus tard, dans `ready()` ou depuis un gestionnaire d'événement, ne fait rien et échoue silencieusement.
</Warning>

N'y ayez recours que lorsque les options par formulaire ne conviennent pas, par exemple lorsque les formulaires que vous devez exempter sont créés par une autre application et que vous ne pouvez pas les identifier de manière fiable.

## L'icône du panier est séparée

L'icône du panier dans votre en-tête est gérée par son propre intercepteur, avec sa propre désinscription. Désactiver l'interception d'ajout au panier ne change rien à ce que fait l'icône du panier, et l'inverse est également vrai.

Cliquer sur l'icône du panier ouvre le tiroir Aftersell au lieu d'aller sur `/cart`. Pour laisser une icône ou un bouton tranquille, ajoutez-lui la classe `aftersell-cart-wont-open-cart`, ou à n'importe quel élément qui l'entoure :

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>
```

Ce contrôle fait alors ce que votre thème lui fait faire, généralement aller à la page panier. Aftersell est complètement hors circuit, donc **le tiroir ne s'ouvrira pas**. Contrairement à l'ajout au panier, il n'y a pas de requête à surveiller ici, donc si vous voulez que votre panier s'ouvre depuis ce contrôle, vous devez le dire :

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});
```

Le même problème de mise sous silence s'applique ici : parce qu'Aftersell arrête le clic, vos analyses et pixels ne voient pas non plus les clics sur l'icône du panier. Si c'est tout ce que vous devez corriger, gardez le tiroir et arrêtez la mise sous silence :

```js theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
window.aftersell.cart.configure({ skip_open_cart_interceptor: true });
```

Vos écouteurs s'exécutent, le tiroir s'ouvre toujours, et le clic ne navigue toujours pas vers `/cart`. Tous les détails dans [Configure](/fr/aftersell/cart/sdk-configure#skip_open_cart_interceptor).

<Note>
  Pour changer *quels* éléments ouvrent le panier plutôt que de les désactiver, utilisez **Cart settings → Advanced → Cart icon selector** au lieu de modifier votre thème.
</Note>

## Pour aller plus loin

* **[Configure](/fr/aftersell/cart/sdk-configure)** : toutes les options du SDK, y compris celles référencées ici.
* **[Hooks](/fr/aftersell/cart/sdk-hooks)** : contrôle par formulaire et par ligne.
* **[Ouvrir le tiroir depuis un constructeur de pages](/fr/aftersell/cart/sdk-use-case-page-builder)** : pour Replo, PageFly, GemPages, et les boutons personnalisés qui ajoutent au panier à leur manière.