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

# ページビルダーからドロワーを開く

> Replo、PageFly、GemPages、カスタムのカート追加ボタンから Aftersell Cart のドロワーを開くための Cart SDK ユースケース。

Aftersell は標準的な Shopify の商品フォームでカート追加をインターセプトします。ランディングページビルダーは、フォーム送信ではなく JavaScript 呼び出しなど独自の方法でカートに追加することが多いため、商品はカートに入るのにドロワーが閉じたままだったり、購入者が `/cart` にリダイレクトされたりします。

<div id="the-fix-in-one-line">
  ## 1 行で直す方法
</div>

ビルダーのカート追加が完了した後に、カートに再取得と表示を指示します。

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

これをビルダー自身の「カートに追加」の後に実行される**2 番目のアクション**としてボタンに追加し、ビルダー側の「カートへ移動」や「追加後にリダイレクト」オプションをオフにします。

<Note>
  まずは [`open_on_background_add`](#the-no-code-option-first) を試してください。ボタンにまったく手を加えずに解決できることがよくあります。
</Note>

<div id="the-no-code-option-first">
  ## まずはノーコードの選択肢から
</div>

Aftersell は、自身が処理していない追加を 2 つの方法で検出します。どちらも常時動作しており、起動時に一緒にアタッチされ、互いを抑制しないため、1 回の追加が両方から通知されることもあります。それぞれの通知に対して、開く条件のルールが独立して適用されます。

* **通信の監視。** Aftersell は Shopify のカートエンドポイントへのリクエストを監視します。追加が実際のクリックまたはキー入力から約 3 秒以内に行われた場合、購入者による操作と見なされ、通常の**商品追加時にカートを開く**設定に従ってドロワーが開きます。Shopify の Ajax cart API(`/cart/add.js`)経由で追加するビルダーはすべてここに該当し、これが最も一般的なケースです。まずはお使いのボタンをそのまま試してみてください。何も変更せずに動作する可能性があります。
* **[Shopify の標準カートイベント](https://shopify.dev/docs/storefronts/themes/best-practices/standard-events)。** この方法で通知された追加は、購入者がクリックしたかどうかにかかわらず、常に*バックグラウンド*追加として扱われます。バックグラウンド追加は、オプトインしない限りドロワーを開きません。

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

これを **Cart settings → Custom script → Initialization** に貼り付けます。これでビルダーの追加ボタンの後にドロワーが開くようになれば完了です。ボタンごとの作業は不要で、すべてのページをカバーします。

<Note>
  `open_on_background_add` は、購入者の操作をまったく伴わない追加(他のアプリやスクリプトによるカートへの書き込み)にも適用されます。そうした追加でもドロワーを開きたい場合にのみオンにしてください。
</Note>

どちらの方法でもドロワーが開かない場合は、以下の明示的な呼び出しにフォールバックしてください。

<div id="per-builder-setup">
  ## ビルダーごとのセットアップ
</div>

<div id="replo">
  ### Replo
</div>

1. Replo エディターでページを開き、**Add to Cart** ボタンを選択します。

2. 右サイドバーで **Interactions** タブを開きます。

3. **On Click** の下で `+` をクリックし、**Run JavaScript** を選択します。

4. 次を貼り付けます。

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

5. **Add Product to Cart** インタラクションを再度選択し、**Go to cart after?** をオフにします。

6. プレビューしてドロワーが開くことを確認し、公開します。

カート追加ボタンがある各ページで同じ手順を繰り返します。

<div id="pagefly-and-gempages">
  ### PageFly と GemPages
</div>

どちらも、ボタンのクリックにカスタム JavaScript をアタッチしたり、ページにカスタムコード要素を追加したりできます。ビルダーのカート追加アクションの後に実行されるように同じスニペットを設定し、ボタンの「カートへリダイレクト」設定を無効にしてください。

<div id="your-own-button">
  ### 独自のボタン
</div>

自分でカートに追加している場合は、往復を省いて SDK 自身のアクションを使えます。1 ステップでカートを更新し、ドロワーを開くことができます。

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

`refresh()` は、*別の何か*がカートを変更し、Aftersell に追随させる必要がある場合にのみ使用します。

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

<div id="when-the-builders-button-should-bypass-aftersell-entirely">
  ## ビルダーのボタンに Aftersell を完全にバイパスさせたい場合
</div>

逆のケースもあります。フォームに独自のフローが必要で、Aftersell のインターセプトが邪魔になる場合です。そのフォームだけを除外します。

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

その後、フォームに `data-skip-aftersell` を追加します。これはページ上のすべてのフォームでインターセプトを無効にする [`skip_add_to_cart_interceptor`](/ja/aftersell/cart/sdk-configure#skip_add_to_cart_interceptor) よりも優れた方法です。

フォームのマークアップを編集できるなら、さらにシンプルな方法があります。`<form>` にクラス **`aftersell-cart-skip-atc`** を追加すれば、スクリプトなしで Aftersell がそのフォームをスキップします。

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

<div id="troubleshooting">
  ## トラブルシューティング
</div>

| 症状                      | 考えられる原因                                                                                                               |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------- |
| 商品は追加されるがドロワーが閉じたまま     | ビルダーが Shopify の標準カートイベントを発行していません。明示的な `refresh()` + `open()` 呼び出しを使用してください。                                          |
| 購入者が `/cart` にリダイレクトされる | ビルダーの「追加後にカートへ移動」オプションがまだオンになっています。オフにしてください。                                                                         |
| ドロワーは開くが古い内容が表示される      | `refresh()` が解決する前に `open()` が実行されました。上記のように `.then()` でチェーンしてください。                                                   |
| まったく何も起きない              | カートの読み込み前に呼び出されたアクションは、コンソールに警告を出して何もしません。そのタイミングでボタンがクリックされ得る場合は `window.aftersell.cart.ready().then(…)` でラップしてください。 |
| あるページでは動くが別のページでは動かない   | ほとんどのビルダーはインタラクションをページ単位で適用します。各ページでセットアップを繰り返してください。                                                                 |

呼び出しが何もしていないように見える場合は、[`window.aftersellCartDebugEvents`](/ja/aftersell/cart/sdk-overview#debugging) を確認してください。SDK の失敗はスローされず、握りつぶされます。

<div id="where-to-go-next">
  ## 次に読むページ
</div>

* **[Configure](/ja/aftersell/cart/sdk-configure#open_on_background_add)**: `open_on_background_add` とその他のドロワーオプション。
* **[アクション](/ja/aftersell/cart/sdk-actions)**: `refresh`、`open`、`addItem`。
* **[フック](/ja/aftersell/cart/sdk-hooks#registerskipaddtocartrule)**: 単一フォームの除外。