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

# カート追加のインターセプト

> Aftersell がカート追加を引き受ける理由、フォームがインターセプトされているかを見分ける方法、そしてフォームをオプトアウトさせるあらゆる方法。

買い物客が **Add to cart** をクリックすると、通常はテーマではなく Aftersell 自身が追加を処理します。このページでは、その理由、あなたが追加したスクリプトにとって何を意味するのか、そして 1 つのフォームだけ、あるいはすべてのフォームでそれをオフにする方法を説明します。

ほとんどのストアではこれを変更する必要はありません。あなたのスクリプトがカート追加で発火しなくなった場合や、カート追加ボタンの挙動がおかしい場合に、以下を読み進めてください。

## インターセプトが何をするか

Aftersell はテーマより先にカート追加の submit を待ち受けます。これを認識すると、次のことを行います:

1. イベントを止めて、ページ上のほかの何にもそのクリックが処理されないようにします。
2. 追加を自分で Shopify に送信します。
3. Aftersell Cart のドロワーを開きます。

重要なのはステップ 1 であり、それがこのページが存在する理由です。

## なぜ存在するのか

これがないと、同じクリックに両方のカートが反応してしまいます。テーマがアイテムを追加して自分のドロワーを開き、Aftersell もそれを追加してあなたのドロワーを開き、買い物客にはカートが 2 つ、しばしばアイテムが 2 回追加された状態で表示されます。

イベントを止めることが、追加とカートを 1 つに保証するもっとも単純な方法です。

## その代償

イベントを止めるのは、テーマだけでなく**すべて**に対してです。同じカート追加を待ち受けているほかのコードは実行されなくなります。あなたのアナリティクス、トラッキングピクセル、サブスクリプションアプリやバンドルアプリ、自分で追加したスクリプトなどです。

失敗は静かに起きます。ブラウザのコンソールには何も出ませんし、追加自体は動作するので、目に見えて壊れているというよりも、数値がおかしいという症状が普通です:

* GA4、Meta、TikTok から `add_to_cart` イベントが欠落する
* 商品ページでは動くのに、カート経由では動かないサブスクリプションアプリやバンドルアプリ
* フォームに対する自分の `addEventListener` が一度も発火しない

これに心当たりがあるなら、原因はこのページで、対処法は下にあります。

## Aftersell がインターセプトしないとき

インターセプトは常にオンとは限りません。次の場合、Aftersell はカート追加をそのままにします:

* **テーマのカートを認識できる場合。** Aftersell が扱い方を知っているテーマでは、イベントをブロックする代わりにテーマ自身のカートを動かないようにし、テーマに通常どおり追加を実行させます。あなたのスクリプトは以前と同じように動きます。下記の[どのテーマか](#which-themes-aftersell-recognizes)を参照してください。
* **フォームがラインアイテムを追加しない場合。** バリアント `id` も `items[]` も持たないフォームはそのままにされます。
* **あなたが以下の方法のいずれかで**オプトアウトしている場合。

Aftersell が追加を実行しないときも、カートリクエストは監視し続け、それを見つけるとドロワーを開きます。[選ぶ前に: 何が変わるか](#before-you-choose-what-changes)を参照してください。

## Aftersell が認識するテーマ

| テーマ                              |                                                                                   |
| -------------------------------- | --------------------------------------------------------------------------------- |
| **Dawn** および Shopify の無料テーマファミリー | Craft、Colorblock、Crave、Origin、Publisher、Refresh、Ride、Sense、Spotlight、Studio、Taste |
| **Horizon**                      | Shopify の現行デフォルトテーマ                                                               |
| **Impulse**                      |                                                                                   |

Aftersell は名前ではなく**テーマの作りかた**で判別するため、これらから派生したカスタムテーマも通常は認識されます。Aftersell が一度も見たことのないプライベートビルドも含みます。

<Note>
  逆のこともあります。大幅にカスタマイズされたビルドは、名前としてはまだ "Dawn" でも、親テーマから十分に離れて Aftersell に認識されなくなる場合があります。このリストに載っていることは認識される可能性を高めますが、確実ではありません。
</Note>

## 選択肢

問題を解決するもっとも狭い選択肢を選んでください。各行は上の行よりもっと多くを手放すことになります。

| 選択肢                                                                  | 範囲             | Aftersell が引き続きドロワーを開くか |
| -------------------------------------------------------------------- | -------------- | ----------------------- |
| [`registerSkipAddToCartRule`](#per-form-a-rule-in-code)              | ルールが選んだフォーム    | はい、カートリクエストから           |
| [`aftersell-cart-skip-atc`](#per-form-a-class-in-your-theme)         | 1 つのフォームまたはボタン | はい、カートリクエストから           |
| [`skip_add_to_cart_interceptor`](#whole-store-turn-interception-off) | ストア上のすべてのフォーム  | はい、カートリクエストから           |

### 選ぶ前に: 何が変わるか

オプトアウトすると追加をテーマに戻すことになるため、行を選ぶ前に答えておきたい 2 つの質問があります。カートは引き続き開くのか、そしてテーマのカートが横に現れるのかです。

#### 自分のカートは引き続き開くか？

たいていの場合は、こちらで何もしなくても開きます。追加を実行するのが誰であれ、Aftersell は Shopify に向かうリクエストを監視し、通常の **Open cart when an item is added** の設定に従って、それを見つけるとドロワーを開きます。自分で何かを呼び出す必要はありません。

これが崩れる状況は 3 つあり、いずれも対処法があります:

**追加が Shopify のカートエンドポイント以外に送られる場合。** Aftersell は自分のドメイン上の `/cart/add`、`/cart/change`、`/cart/update`、`/cart/clear` を監視します。独自のエンドポイント経由で追加し、あとでカートを同期するアプリはこの監視からは見えません。そのアプリの追加が完了したあとで、自分でカートを開いてください:

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

**クリックからリクエストまでにおよそ 3 秒以上経過する場合。** Aftersell は実際のクリックやキー入力に密接に続く追加を、買い物客が起こしたものとして扱います。そのウィンドウを過ぎるとバックグラウンド追加とみなされ、オプトインしない限りドロワーは開きません:

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

**カート設定でそうしないよう指定されている場合。** **Open cart when an item is added** がオフか、`open_on_add_to_cart: 'never'` を設定している場合、何もドロワーを開きません。それは設定どおりの動作です。

#### テーマのカートも開いてしまう？

これはオプトアウトが伴うリスクで、答えはテーマ次第です。

テーマのカートを動かなくすることは**インターセプトとは別**で、いずれにせよページ読み込み時に発生します。ですので、ここでのオプトアウトのどれもそれをオンに戻しません。[認識済みリスト](#which-themes-aftersell-recognizes)のテーマなら、テーマ自身のカートは静かなままで、買い物客に見えるのはあなたのカート 1 つだけです。

Aftersell が認識しないテーマでは、テーマのカートを抑えるものは何もありません。オプトアウトするとテーマは以前とまったく同じように追加を扱います。これには自分のドロワーを開くことや `/cart` へのリダイレクトが含まれます。同時に Aftersell は監視で見つけたリクエストからドロワーを開きます。これがカート 2 つの状態であり、そもそもインターセプトが存在する理由です。

そうなった場合、選択肢は 3 つです。そのフォームではインターセプトを有効なままにする、その原因のフォームをカバーしないより狭いオプトアウトを使う、あるいはテーマのコードでテーマ自身のカートを自分で止める、です。

<Tip>
  オプトアウトはまずテストストアや未公開テーマで有効にしてみてください。以前は現れなかったテーマ自身のカートが現れる場合、そのテーマは Aftersell が認識するテーマではないので、そのフォームではインターセプトを有効なままにしておいた方がよいでしょう。
</Tip>

<Note>
  これはカート追加のみに当てはまります。**カートアイコン**を `aftersell-cart-wont-open-cart` クラスで Aftersell からバイパスさせるのは別の話です。カートアイコンのクリックはリクエストを送らないため、Aftersell に監視するものがなく、ドロワーは開きません。下記を参照してください。
</Note>

### フォーム単位: コードでのルール

推奨される選択肢です。そのままにしたいフォームに対して `true` を返すルールを登録します:

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

**Cart settings → Custom script → Initialization** に入れてください。ルールは追加式です。あなたのルールは他のルールと並行して実行され、`true` を返すルールがあればそのフォームはスキップされます。詳細は[フック](/ja/aftersell/cart/sdk-hooks#registerskipaddtocartrule)を参照してください。

### フォーム単位: テーマでのクラス

ルールを書きたくない場合は、テーマで `aftersell-cart-skip-atc` クラスを追加してください:

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

<Note>
  フォーム送信の場合、クラスは**フォーム要素そのもの**に付ける必要があります。親の `div` では機能しません。フォーム送信を伴わずにカートに追加するボタンの場合、クラスはボタン自体や周りのどの要素に付けても構いません。
</Note>

### ストア全体: インターセプトをオフにする

大雑把な選択肢です。すべてのフォームで、カート追加はテーマ本来のとおりに動きます:

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

<Warning>
  このオプションは**カートの読み込み時に一度だけ**読み取られます。カートの **Initialization** スクリプトからのみ機能します。後から `ready()` の中やイベントハンドラで設定しても何も起こらず、静かに失敗します。
</Warning>

フォーム単位の選択肢が合わないときにだけ使ってください。たとえば、除外する必要のあるフォームが別のアプリによって生成されており、確実に特定できない場合です。

## カートアイコンは別

ヘッダーのカートアイコンは、独自のインターセプターと独自のオプトアウトで扱われます。カート追加のインターセプトをオフにしても、カートアイコンの挙動は変わりません。その逆も同様です。

カートアイコンをクリックすると `/cart` へ移動する代わりに、Aftersell のドロワーが開きます。特定のアイコンやボタンだけをそのままにするには、それ自身か、周りのどれかの要素に `aftersell-cart-wont-open-cart` クラスを追加してください:

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

そのコントロールはテーマがさせるとおりの挙動になり、通常はカートページに遷移します。Aftersell は完全に関与しなくなるため、**ドロワーは開きません**。カート追加とは違って監視するリクエストがないので、そのコントロールからカートを開きたいなら、そう指示する必要があります:

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

同じ「かき消し」の問題がここにも当てはまります。Aftersell がクリックを止めているので、あなたのアナリティクスやピクセルもカートアイコンのクリックを見られません。それを直したいだけなら、ドロワーは残したまま、かき消しを止めてください:

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

これで自分のリスナーが実行され、ドロワーもいつもどおり開きます。クリックが `/cart` へ遷移しないという挙動も維持されます。詳細は [Configure](/ja/aftersell/cart/sdk-configure#skip_open_cart_interceptor) を参照してください。

<Note>
  カートを開く要素をオフにするのではなく、*どの*要素がカートを開くかを変えるには、テーマを編集する代わりに **Cart settings → Advanced → Cart icon selector** を使ってください。
</Note>

## 次のステップ

* **[Configure](/ja/aftersell/cart/sdk-configure)**: ここで参照したものを含む、すべての SDK オプション。
* **[フック](/ja/aftersell/cart/sdk-hooks)**: フォーム単位・ライン単位の制御。
* **[ページビルダーからドロワーを開く](/ja/aftersell/cart/sdk-use-case-page-builder)**: Replo、PageFly、GemPages、および独自の方法でカートに追加するカスタムボタン向け。