Skip to main content
カスタムスクリプトを使うと、Cart SDK を使って独自の JavaScript をカートに対して実行できます。カートエディタの Cart settings → Custom script で追加でき、ドロップダウンで Initialization と On cart update の 2 つのスロットを切り替えられます。 これらのエディタには <script> タグなしのプレーンな JavaScript を記述します。On cart update には初期テンプレートを復元する Reset to default アクションがありますが、Initialization にはないため、削除する前に自分でコピーを保管しておいてください。
かつてマーチャントがスクリプトで実現していたことの多くは、現在では組み込みの設定になっています。まずスクリプトを書く前にを確認してください。設定はカートの再設計後も機能し続けますが、スクリプトはそうとは限りません。

​
どちらのスロットを使うか

​
Initialization

Initialization スクリプトはカートの読み込み時に一度だけ実行されます。カートの動作の設定、イベントの購読、フックの登録など、セットアップのエントリーポイントです。SDK は window.aftersell.cart として利用できます。 ここで行うセットアップの呼び出し（configure(...)、events.on(...)、hooks.*）は、カートの起動が完了する前でもスクリプトの冒頭で安全に呼び出せます。バッファリングされ、起動後に適用されます。カートを読み取ったり変更したりするアクション（addItem や getCart など）は、ready() またはイベントハンドラの中で実行してください。 このスロットには最初、コメントアウトされた 3 つの例（追加のたびにドロワーを開く、cart_loaded に反応する、無料ギフトのラインを非表示にする）が入っているため、手を加えていない Initialization スクリプトは何もしません。試すにはいずれかのコメントを解除するか、置き換えてください。 このスロットに自然な形は、イベントを介さない一度きりの登録です。動作を一度登録すれば、以降はカートがそれを適用し続けます。合計金額を変えずに無料ギフトのラインをドロワーから非表示にするのが、同梱されているその例です:
registerLineTransform はレンダリング時にすべてのラインに対して実行され、setHidden は表示のみに作用するため、ラインはカートに残り合計金額にも計上されたまま、ドロワーに表示されなくなるだけです。変換でできることの詳細は、カートラインの非表示とラベル変更を参照してください。 カートを読み取るアクションは ready() の中に置きます:
カートの DOM にアクセスする場合も同じ待機が必要で、さらに shadowRoot が必要です。カートは shadow root の中でレンダリングされるため、document.querySelector ではドロワー内の要素は見つかりません。
カートの読み込み前にマーケット、国、通貨で分岐したい場合は、代わりに context を読み取ってください。ready() なしで同期的に利用できるため、ルールが適用されない買い物客に対してはハンドラの登録自体をスキップできます。

​
On cart update

On cart update スクリプトは、カートが変更されるたびに実行されます。cart_updated の購読を囲むロックされたラッパーになっており、編集できるのは本体だけで、コードは更新後の cart を受け取ります。 このスロットは、カートの変更ごとに再評価が必要なルールのためのものです。無料ギフトのしきい値が典型的なケースです（$75 の購入で無料のトートバッグを進呈）。答えは現在の内容次第で、内容が変わったことを教えてくれるものは他にないためです:

​
カートを望ましい状態に保つ

これを安全にしているのが if (shouldHaveGift === hasGift) return; の行で、この考え方はカートを望ましい状態に保つあらゆるスクリプトに一般化できます。このスロットはカートの変更に反応すると同時に変更を引き起こすため、addItem や removeItem を呼ぶたびに再入します。望む状態を記述し、現在の状態と比較して、すでに一致していれば早期リターンすることで、ハンドラはループせずに 1 回のパスで収束します。避けるべきガードなしのバージョンと、ペイロードが読み取り専用である理由については、2 つのルールを参照してください。 動作の遅いストアでは、モジュールレベルの実行中フラグも保持しておく価値があります。これにより、2 つの連続した変更が、最初の追加が完了する前にどちらも追加を開始してしまうことを防げます。
cart_updated は初回読み込み後の変更でのみ発火するため（イベントのタイミング）、このスロットのスクリプトは、ページ読み込み時点ですでに条件を満たしているカートを調整しません。両方に対応するバージョンにするには、Initialization スロットから同じ関数で cart_loaded と cart_updated を購読してください。しきい値で無料ギフトを自動追加するを参照してください。

​
スクリプトが壊れたとき

各スロットは独自のサンドボックス内で実行されるため、壊れた Initialization スクリプトが On cart update の実行を止めることはなく、どちらもカート自体を壊すことはできません。 ただし、スロット内では実行は最初のエラーで停止します。その行より下はすべてスキップされるため、それ以降にある configure、events.on、hooks.register* は登録されません。コードは正しく見えるのに「ハンドラが発火しない」場合の典型的な原因がこれです。 カートはブラウザのコンソールで失敗した行を示し、各スロットは独自のファイル名（aftersell-cart-init.js と aftersell-cart-cart-update.js）で実行されるため、DevTools の Sources パネルからどちらも開いてブレークポイントを設定できます。具体的なメッセージや、コンソールに出ないフックの失敗を捕捉するデバッグチャンネルについては、デバッグを参照してください。 cart_loaded は遅れて購読した場合も再送されるため、登録の順序は問題になりません。最も安全な構成は、まずすべてを登録し、リスクのある処理はハンドラの中で行うことです。ハンドラ内での throw はそのハンドラに隔離されます。

​
次のステップ

  • Cart SDK: SDK コードの実行手段がカスタムスクリプトです。API 全体については configure、イベント、アクション、フックの各リファレンスを、ハンドラが受け取るデータの形についてはカートオブジェクトを、すぐ使えるスニペットについてはユースケースを参照してください。
  • カスタムコードブロック: カートにマークアップを追加するためのものです。Custom code ブロックの HTML モードは JavaScript を実行しない点に注意してください。ロジックにはカスタムスクリプト（またはブロックの React モード）を使用します。