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

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

1 行で直す方法

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

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

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

まずは open_on_background_add を試してください。ボタンにまったく手を加えずに解決できることがよくあります。

まずはノーコードの選択肢から

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

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

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

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

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

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

ビルダーごとのセットアップ

Replo

Replo エディターでページを開き、Add to Cart ボタンを選択します。
右サイドバーで Interactions タブを開きます。
On Click の下で + をクリックし、Run JavaScript を選択します。

次を貼り付けます。

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

Add Product to Cart インタラクションを再度選択し、Go to cart after? をオフにします。
プレビューしてドロワーが開くことを確認し、公開します。

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

PageFly と GemPages

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

独自のボタン

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

document.querySelector('#my-add-button').addEventListener('click', () => {
  window.aftersell.cart.actions.addItem(VARIANT_ID, 1).then(() => {
    window.aftersell.cart.actions.open();
  });
});

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

fetch('/cart/add.js', { method: 'POST', /* … */ })
  .then(() => window.aftersell.cart.actions.refresh())
  .then(() => { window.aftersell.cart.actions.open(); });

ビルダーのボタンに Aftersell を完全にバイパスさせたい場合

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

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

その後、フォームに data-skip-aftersell を追加します。これはページ上のすべてのフォームでインターセプトを無効にする skip_add_to_cart_interceptor よりも優れた方法です。フォームのマークアップを編集できるなら、さらにシンプルな方法があります。<form> にクラス aftersell-cart-skip-atc を追加すれば、スクリプトなしで Aftersell がそのフォームをスキップします。

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

トラブルシューティング

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

呼び出しが何もしていないように見える場合は、window.aftersellCartDebugEvents を確認してください。SDK の失敗はスローされず、握りつぶされます。

次に読むページ

Configure: open_on_background_add とその他のドロワーオプション。
アクション: refresh、open、addItem。
フック: 単一フォームの除外。

はじめに

ホームページ

ベストプラクティス

購入後アップセル

カート

チェックアウトアップセル（Shopify Plus）

サンキューページ

商品ページアップセル

Rokt Thanks

戦略

アナリティクスとトラッキング

連携

Aftersell MCP

請求とアカウント

トラブルシューティング

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

1 行で直す方法

まずはノーコードの選択肢から

ビルダーごとのセットアップ

Replo

PageFly と GemPages

独自のボタン

ビルダーのボタンに Aftersell を完全にバイパスさせたい場合

トラブルシューティング

次に読むページ

​1 行で直す方法

​まずはノーコードの選択肢から

​ビルダーごとのセットアップ

​Replo

​PageFly と GemPages

​独自のボタン

​ビルダーのボタンに Aftersell を完全にバイパスさせたい場合

​トラブルシューティング

​次に読むページ

1 行で直す方法

まずはノーコードの選択肢から

ビルダーごとのセットアップ

Replo

PageFly と GemPages

独自のボタン

ビルダーのボタンに Aftersell を完全にバイパスさせたい場合

トラブルシューティング

次に読むページ