Skip to main content
ほとんどのバンドルアプリは、各コンポーネントを個別のカートラインとして追加し、独自設計のラインアイテムプロパティでそれらをリンクすることでバンドルを構築します。ShopifyのAjax APIはそれらのラインが一緒に属していることを示さないままカートに渡すため、デフォルトではドロワーは3点構成のバンドルを、それぞれ独自の価格と数量ステッパーを持つ3つの無関係なアイテムとして表示します。 setInternalPropertiesは、それらが1つのものであることをカートに伝える方法です。

グループ化の仕組み

カートは2つの正規プロパティに基づいてラインをグループ化します。カートはバンドルアプリのプロパティ名を知らないため、あなたが変換します。アプリが書き込んだ内容を読み取り、ライントランスフォームで正規のペアを各ラインに刻印します。 これらはShopify経由ではなく、setInternalPropertiesを通じて設定します。これらはレンダリング専用のオーバーレイです。propertiesには決して届かず、Shopifyに永続化されることも、注文に表示されることもありません。

ステップ1:アプリが何を書き込んでいるか確認する

バンドルアプリごとにプロパティの命名は異なるため、まず実際のカートを見ることから始めます。ストアフロントでバンドルを追加し、ブラウザのコンソールで次を実行してください。
探すのは、バンドルのライン間で共有されているプロパティです。通常はIDや参照、バンドル名を保持する非表示プロパティ(名前が_で始まる)です。_bundle_id_bundle_ref_parent_idなどが典型的です。正確なキーと、いずれかのラインがメイン商品としてマークされているかどうかをメモしてください。

ステップ2:正規プロパティにマッピングする

Cart settings → Custom script → Initializationに貼り付け、プロパティ名を見つけたものに置き換えてください。
これが連携のすべてです。2つ以上のラインがIDを共有すると、カートはそれらを1つのバンドルにまとめます。
アプリがメイン商品をマークしていない場合は、_aftersell_cart_bundle_roleを完全に省略してください。カートが自動的にアンカーを選択します。

得られるもの

ラインがグループ化されると、アンカーラインはbundleオブジェクトを持ち、ドロワーはバンドルを単一のアイテムとしてレンダリングします。
  • 子は個別の行として表示される代わりに、アンカーの下にネストされます。
  • 数量はアトミックです。 バンドルの数量を変更すると、各子のperAnchorQty比率を使ってすべてのメンバーが一緒にスケーリングされます。あるコンポーネントを2つ含むバンドルは、その2対1の関係を維持します。
  • 削除はアトミックです。 バンドルを削除すると、孤立したコンポーネントを残すことなく、1回のリクエストですべてのメンバーラインが削除されます。
  • 価格行は1つです。 表示内容はCart itemsブロックのバンドル価格設定に従います。全メンバーの合計か、メイン商品の価格のみかを選べます。

アンカーの選ばれ方

アンカーはバンドルの表示元となるラインです。カートは次の順序で選択します。
  1. _aftersell_cart_bundle_roleparentに設定されたライン。
  2. それがなければ、最も価格の高いメンバー。
  3. それもなければ、カート内の最初のメンバー。
バンドルアプリはディスカウントをメイン商品に付ける傾向があるため、価格によるフォールバックはたいてい正しく機能します。そうでない場合、たとえばメイン商品が最安のアイテムや無料の場合は、ロールを明示的に設定してください。

知っておくべきルール

  • バンドルには少なくとも2つのラインが必要です。 バンドルIDを持つ単一のラインはそのまま残され、通常どおりレンダリングされます。
  • Shopifyネイティブのバンドルはすでに処理されています。 Shopify自体がコンポーネント化としてマークしたラインは、このグループ化ではスキップされ、自動的に適応されます。これが必要なのは、個別のラインを追加するアプリの場合のみです。
  • トランスフォームはレンダリングのたびに実行されます。 軽量に保ち、副作用を避けてください。その内部からアクションを呼び出したりフェッチしたりしないでください。
  • マージは加算的です。 あなたのプロパティは、他のトランスフォームが設定したものとマージされます。同じキーで真の競合が発生した場合は、最後に登録されたトランスフォームが優先されます。
  • グループ化は非表示化とリネームの後、ソートの前に実行されます。 そのため、setHiddenで非表示にしたラインがバンドルの一部になることはなく、コンパレーターは子ではなくアンカーを参照します。
グループ化された子はstate.itemsから外れます。 ラインがバンドルにまとめられると、getCart().itemsとイベントペイロードにはアンカーのみが表示され、子はanchor.bundle.childrenに移動します。また、itemCountにもカウントされなくなります。カート合計には影響しません。 合計はShopifyから直接取得されるためです。グループ化が変えるのは表示のみで、購入者が支払う金額は決して変わりません。

バンドルの読み取り

バンドルのラインに対して操作を行うには、アンカーを含むすべてのメンバーのkeyを保持するbundle.memberKeysを使用してください。

他の用途での活用

バンドルのグループ化はsetInternalPropertiesが作られた目的ですが、このオーバーレイはラインから導出したレンダリング専用データのための汎用チャネルです。ここに置いたものは、実際のカートに触れることなく、line.internalPropertiesカスタムコードブロックで読み取れます。
値が導出されたもので表示専用の場合に使用してください。データが注文まで残る必要がある場合は、実際のラインアイテムプロパティに置くべきです。商品フォームに properties[...] の hidden input を追加すれば、追加を実行するのが誰であれ、Shopify にその値が届きます。

次に読むべきページ