window.aftersell.cart.events の下にあります。
購読はセットアップの呼び出しなので、ready() を待つ必要はなく、スクリプトの冒頭で安全に行えます。
利用可能なイベント
購読
events.on(event, handler) はハンドラを登録し、購読を解除する関数を返します:
events.once(event, handler): 一度だけ発火し、その後自動的に購読解除されます。events.off(event, handler): 特定のハンドラを削除します。
2 つのルール
ガードなしで cart_updated からカートを変更しない
cart_updated ハンドラの中でカートを変更すると、cart_updated が再び発火します。そのハンドラが再びカートを変更すると、無限ループになります。買い物客はカートが暴れ回るのを眺め、ページは Shopify を叩き続けます。
ペイロードは読み取り専用として扱う
registerLineTransform を使ってください。
cart_loaded
cart_loaded は遅れて購読した場合にも再送されます。 カートの読み込み後に購読した場合、ハンドラは現在のカートを引数に即座に呼び出されます。購読の順序は問題にならないため、スクリプトがカートより先に実行されたかどうかを気にする必要はありません。
cart_updated
item_added
{ item } で、item はカートラインです。
cart_loaded 経由で届きます。複数の異なる商品を一度に追加すると、イベントはラインごとに 1 回ずつ発火します。
item_removed
{ item } で、消える直前のラインなので、key、variantId、title を引き続き読み取れます。
item_added と同じ注意点があります。ゼロにならずに数量を減らすことは削除ではありません。
cart_opened と cart_closed
checkout
SDK の外からのリッスン
window 上の DOM CustomEvent としてもディスパッチされるため、window.aftersell.cart に触れずにリッスンできます。テーマファイル、サードパーティアプリ、カートとは独立して読み込まれるスクリプトから使う場合に便利です。
命名に注意してください。バスは
snake_case を使い、DOM イベントは aftersell:cart: プレフィックスの後に kebab-case を使います。
event.detail に届き、カートオブジェクトと一致します。イベントは window 上でディスパッチされるため、ページ上のどこにあるリスナーでも受信できます。カートは shadow root 内でレンダリングされますが、shadow の境界がイベントの経路に入ることはありません。ディスパッチごとにペイロードはクローンされるため、event.detail を書き換えるリスナーが他に影響を与えることはなく、throw するリスナーが SDK を妨げることもありません。
Shopify 標準カートイベント
document 上で発行します。これにより、テーマのコードや他のアプリは、テーマの変更に反応するのと同じ方法で Aftersell の変更に反応できます:
各イベントは、Shopify の標準に合わせて、基盤となる書き込みが完了したときに Aftersell が確定させる
promise も持ちます。これは await するもので、resolve するものではありません。これらは document 上でディスパッチされてバブルするため、window のリスナーでも受信できます。