商品バリエーションを選択できるセレクトボックスをliquidで作りたいです

日本語 ディスカッション 技術的なQ＆A
,

Topic summary

商品詳細ページでバリエーション選択機能の実装方法についての質問です。

実装済みの機能:

  • 商品情報の表示
  • 購入数変更ボタン(+/-)
  • カートに追加ボタン

実装したい機能:
商品バリエーションを選択できるセレクトボックスで、以下の要件があります:

  • 各オプションをループで表示
  • オプション項目もループで表示(select要素)
  • 選択したバリエーションでカートへ追加可能にする

現在は product.variants[0].id で最初のバリエーションを固定で使用していますが、Dawnテーマに実装例があるため実現可能と考えています。Liquidでのコード実装方法を求めています。

投稿にはJavaScriptコードが含まれていますが、一部文字化けしており正確な内容の確認が困難な状態です。

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

商品詳細ページにて下記のセクションをliquidで作成しています。
①商品情報を表示

②商品バリエーションを選択できるセレクトボックス

③購入数を変更できるボタン

④カートに追加するボタン

①、③、④は作成できたのですが②の作成方法がわかりません。
dawnテーマで存在しているので物理的には可能だと思っていますが、どのようなコードで実装できるでしょうか？

②の要件としては、各オプションをループで表示する、オプションの項目もループで表示する(select)、選択したバリエーションでカートへ追加できる。です。。。

以下は③、④箇所のコードです。

<div class="item-count">
  <form method="post" action="/cart/add" id="AddToCartForm">
  <input
    type="hidden"
    name="id"
    value="{{ product.variants[0].id }}" />
    <div class="product-quantity_wrapper">
      <p>購入数</p>
      <div class="product-quantity">
        <button type="button" id="minus" class="minus">ー</button>
        <input type="number" id="quantity" name="quantity" min="1" value="1">
        <button type="button" id="plus" class="plus">＋</button>
      </div>
    </div>
    <div class="cart-btn-wrapper">
      <button type="submit" class="cart-btn">カートに入れる</button>
    </div>
  </form>
</div> <!-- /.item-count -->

▼数量変更する仕組み(JS)

<script>
  document.addEventListener('DOMContentLoaded', (event) => {
    var quantityInput = document.getElementById('quantity');
    var minusButton = document.getElementById('minus');
    var plusButton = document.getElementById('plus');
    minusButton.addEventListener('click', function() {
      var currentVal = parseInt(quantityInput.value, 10);
      if (currentVal > 1) {
        quantityInput.value = currentVal - 1;
      }
    });
    plusButton.addEventListener('click', function() {
      var currentVal = parseInt(quantityInput.value, 10);
      quantityInput.value = currentVal + 1;
    });
  });
</script>

htmlで一度静的なサイトをコーディングしてからshopifyのDAWNテーマで使えるように組み直すやり方をしています。デフォルトのセクションを使用しないというのがややこしいポイントだと思うのですが、可能であればご教示のほどよろしくお願いします。

1 Like