Skip to main content
カートが知っているのは Shopify の Ajax API が伝える情報、つまりタイトル、価格、数量、プロパティだけです。メタフィールドのことは知りません。cart enricher は Storefront API から商品またはバリアントの追加フィールドを取得し、一致するすべてのラインに付与します。これにより、配送予定の目安、「別便で発送」の注意書き、成分リストなど、商品に保存しているあらゆる情報を表示できます。 代表的な用途: 商品ごとの配送期間、アレルゲンや成分のバッジ、カスタムの「残りわずか」フラグ、ロイヤルティポイントの倍率、購読者限定価格。

enricher を登録する

フィールドは 3 つです。 カートが読み込まれたり変更されたりするたびに、Aftersell はカート内のすべての商品またはバリアントについて fragment を取得します。この取得は非ブロッキングです。カートは即座にレンダリングされ、データが届いた時点で cart_updated を再発行します。fragment が遅くても失敗しても、カートが遅延したり壊れたりすることはありません。

データを読み取る

エンリッチメントは非同期なので、最初の取得が完了するまで line.metadata.deliveryundefined です。読み取りは必ずガードしてください。

カートにレンダリングする

エンリッチメントがラインにデータを載せ、React モードのカスタムコードブロックがそれを描画します。ブロックを Cart items のサブブロックとして追加すると、ラインごとに 1 回レンダリングされ、そのラインが props.line として渡されます。
エンリッチされた値は Storefront API からそのまま、サニタイズされずに返されます。上記のようにテキストとしてレンダリングし、dangerouslySetInnerHTML を使ったり生の HTML を書き込んだりしないでください。

バリアントレベルのデータ

メタフィールドが商品ではなくバリアントにある場合は、onType: 'ProductVariant' を設定します。

メタフィールド以外にも

fragment は Storefront API のクエリに差し込まれるため、メタフィールドに限らず、API が Product または ProductVariant 上で公開しているものなら何でも使えます。

押さえておくべきポイント

  • すべての読み取りをガードする。 metadata のデフォルトは {} で、取得が完了するまで名前空間は undefined です。カートは常にデータの到着前にレンダリングされます。
  • id は独立した名前空間。 複数の enricher は、他のアプリが登録したものも含めて、衝突せずに共存します。
  • メタフィールドは Storefront に公開されている必要がある。 Storefront API に公開されていないメタフィールドは null を返します。何も返ってこない場合は、Shopify 管理画面で定義を確認してください。
  • fragment は小さく保つ。 カート内のすべての商品に対して、カートが変更されるたびに実行されます。必要なフィールドだけをリクエストし、すべてを取得しないようにしてください。
  • セットアップ時に登録する。 フックなので、Initialization スクリプトの先頭に置くのが適切です。
  • 波かっこは対応させる。 fragment を外側の波かっこで囲む必要はありませんが、入れ子の選択には対応するペアが必要です。対応が取れていない fragment は拒否されます。

次に読むページ