🛍️ 商品表示中級

定期販売プランのデータ属性を動的に生成

商品の定期販売プラン（Selling Plans）をループで取得し、data 属性として HTML に埋め込むスニペット。JavaScript で定期販売オプションを制御するためのデータ基盤として機能する。

用途

定期配送商品の購入画面で、複数の定期販売プランをバリアント選択肢として出し分けたいとき。JavaScript 側で各プランの ID を読み込んで UI に反映させる。

設置場所

sections/main-product.liquid または product-card.liquid の商品コンテナ div に貼り付け。`variant_id` と `product` オブジェクトがスコープに存在する context で呼び出す。

注意点

`product.selling_plan_groups[0]` は最初のグループのみを参照するため、複数グループがある場合はループを追加して全グループを展開する必要がある。`minus: 1` で配列インデックスを 0 ベースに調整しているが、selling_plans が存在しない商品では undefined になるため、`if product.selling_plan_groups` で事前チェックする。data 属性のハイフン命名（`data-sellingId-1`など）は HTML5 準拠だが、JavaScript 側では `dataset.sellingId1` のキャメルケースで取得することに注意する。

タグ:selling-plansubscriptionproductdata-attributejavascript-integration

コード

10 行 / liquid

it should format as expected
<div
  class="bundle-product"
  data-variantId="{{ variant_id }}"
  {% for i in (1..3) %}
    {% assign plan_id = i | minus: 1 %}
    data-sellingId-{{ i }}="{{ product.selling_plan_groups[0].selling_plans[plan_id].id }}"
  {% endfor %}
></div>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/issue-134/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

定期販売プランのデータ属性を動的に生成

コード

出典・ライセンス

関連項目

商品ブロック内のLiquid実行

商品ページの見出し

商品レビューバッジの表示

商品ページの区切り線

商品画像のプリロード出力

商品バリアント選択ラジオボタン