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

​

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

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

​

なぜ存在するのか

​

その代償

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

​

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

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

​

Aftersell が認識するテーマ

​

選択肢

​

選ぶ前に: 何が変わるか

​

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

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

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

​

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

​

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

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

​

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

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

​

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

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

​

カートアイコンは別

<a href="/cart" class="aftersell-cart-wont-open-cart">Cart</a>

document.querySelector('#my-cart-link').addEventListener('click', (event) => {
  event.preventDefault();
  window.aftersell.cart.actions.open();
});

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

​

次のステップ

• Configure: ここで参照したものを含む、すべての SDK オプション。
• フック: フォーム単位・ライン単位の制御。
• ページビルダーからドロワーを開く: Replo、PageFly、GemPages、および独自の方法でカートに追加するカスタムボタン向け。