【Shopify】組み合わせを選べるセット商品を販売する方法Dawn

Shopifyで複数種類の商品のうち好きなものを3つ選んでセットとして購入できるようにしたかったものの、アプリだと複数商品にまたがると有料になってしまうので、ハックルベリーの定期購入アプリのBOX機能を参考にしながらテーマファイルをカスタマイズして実装しました。

今回のゴールは

組み合わせを選べる商品ページを作成する
その組み合わせの内訳をカートページや注文ページにも連携する

これができることでいくつもの組み合わせのセット商品を作成しなくても、この中から好きなもの3点で○○円！のようなお客様にとっても自由度の高いサービスが実現できます。

完成イメージ

商品ページ

PCでは4列、SPでは2列にしてみました。3セット選択するまで「カートに入れる」ボタンは無効化しています。

カートページ

組み合わせを選べるセット商品を販売する方法

流れは以下の通りで割とシンプルです。

選べるセット商品用の商品ページを作成
テーマファイルに新しくテンプレートとセクションを追加
カスタマイズ画面で新設したテンプレートにサムネと表示する商品を設置
挙動を確認後、実装して１で作った商品ページのテンプレートを2で新設したものに設定

ではそれぞれ見ていきましょう。

1. 選べるセット商品用の商品ページを作成

通常のshopifyでの商品登録と同様です。ただし、お客様の選ぶ商品によって組み合わせが変わるので在庫は個々の商品を手動で管理する必要がある点は要注意。

2. テーマファイルに新しくテンプレートとセクションを追加

それぞれ以下のように名前を付けましたが、テンプレートでproductとliquidタイプを選ぶこと以外は自分で管理しやすい名前にしていただいて大丈夫です。

テンプレート名：product.bundle.liquid

セクション名：product-bundle.liquid

それぞれのファイルに書くコード

テンプレートファイルには「{% section ‘product-bundle’ %}」

セクションファイルには以下を入れました。ここではカートに追加したい商品ページ（選べるセット）をバリアントIDで指定するようにしているので、★の箇所に該当の数値を入れてください。

また、見栄えも好きなようにhtmlやCSSをいじって調整してください。

{% schema %}
{
  “name”: “Product Bundle”,
  “settings”: [
    {
      “type”: “image_picker”,
      “id”: “thumbnail_image”,
      “label”: “サムネイル画像”
    }
  ],
  “blocks”: [
    {
      “type”: “product”,
      “name”: “選択可能な商品”,
      “settings”: [
        {
          “type”: “product”,
          “id”: “bundle_product”,
          “label”: “商品を選択”
        }
      ]
    }
  ],
  “presets”: [
    {
      “name”: “Product Bundle”,
      “blocks”: []
    }
  ]
}
{% endschema %}

<div class="product-bundle">
  
  <div class="bundle-thumbnail">
    {% if section.settings.thumbnail_image != blank %}
      <img decoding="async" src="{{ section.settings.thumbnail_image | img_url: 'master' }}" alt="サムネイル">
    {% endif %}
    <h2 class="bundle-title"><span id="toc9">{{ product.title }}</span></h2>
    <p class="bundle-price">{{ product.price | money }}（税込・送料込み）</p>
  </div>

<div class="bundle-options">
    {% for block in section.blocks %}
      {% if block.settings.bundle_product != blank %}
        {% assign product = all_products[block.settings.bundle_product] %}
        <div class="bundle-option">
          <img decoding="async" src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
          <p class="bundle-product-title">{{ product.title }}</p>
          <div class="quantity-wrapper">
            <button type="button" class="quantity-btn minus" data-title="{{ product.title }}">−</button>
            <span class="quantity-value" data-title="{{ product.title }}">0</span>
            <button type="button" class="quantity-btn plus" data-title="{{ product.title }}">＋</button>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>

<form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}">
    <div id="selected-items"></div>
    <button type="submit" id="add-to-cart-btn" disabled>カートに入れる</button>
  </form>
</div>

let selectedItems = {};
  const MAX_TOTAL_QUANTITY = 3; // 3つ選ばないとカートに追加できない制御

// クリックイベント
  document.addEventListener("click", function(event) {
    if (event.target.classList.contains("quantity-btn")) {
      const productTitle = event.target.getAttribute("data-title");
      const action = event.target.classList.contains("minus") ? "minus" : "plus";

// 未選択のアイテムを 0 に初期化
      if (!selectedItems[productTitle]) {
        selectedItems[productTitle] = 0;
      }

let quantity = selectedItems[productTitle];
      let totalQuantity = Object.values(selectedItems).reduce((total, qty) => total + qty, 0);

if (action === "minus" && quantity > 0) {
        selectedItems[productTitle] -= 1;
      } else if (action === "plus" && totalQuantity < MAX_TOTAL_QUANTITY) {
        selectedItems[productTitle] += 1;
      }

// 商品ごとの数量更新
      let valueSpan = document.querySelector(`.quantity-value[data-title="${productTitle}"]`);
      if (valueSpan) {
        valueSpan.textContent = selectedItems[productTitle];
      }

updateCartButtonState();
    }
  });

// カートに入れるボタンが押されたときの処理
  addToCartBtn.addEventListener("click", function(event) {
    event.preventDefault();
    selectedItemsDiv.innerHTML = "";

let formData = new FormData();
    formData.append("id", "★"); // 商品ID（固定）
    formData.append("quantity", "1"); // カートに追加する商品の数量（固定）

// 選択された商品の情報をカートに追加
    Object.keys(selectedItems).forEach(title => {
      if (selectedItems[title] > 0) {
        formData.append(`properties[${title}]`, `${selectedItems[title]}点`);
      }
    });

// 非同期でカートに追加し、完了後にカートページへリダイレクト
    fetch("/cart/add.js", {
      method: "POST",
      body: formData
    })
    .then(response => response.json())
    .then(data => {
      console.log("カートに追加成功:", data);
      window.location.href = "/cart";
    })
    .catch(error => {
      console.error("カート追加エラー:", error);
    });
  });

// 「カートに入れる」ボタンを有効化・無効化する
  function updateCartButtonState() {
    const totalQuantity = Object.values(selectedItems).reduce((total, qty) => total + qty, 0);
    const hasItems = totalQuantity === MAX_TOTAL_QUANTITY;
    addToCartBtn.disabled = !hasItems;
    addToCartBtn.classList.toggle("enabled", hasItems);
  }
});

</script>

3. カスタマイズ画面で新設したテンプレートにサムネと表示する商品を設置

カスタマイズ画面で商品ページに使用したいサムネと、選べるセットの選択肢に含めたい商品をそれぞれ設定します。

4. 実装後１で作った商品ページのテンプレートを2で新設したものに設定

カスタマイズ画面上で挙動を確認して問題がないことが確認できてからそのファイルを格納したテーマを実装し、選べるセットの商品登録画面で新設したタンプレートを設定します。（今回の例ではbundle）

本番環境でもお試し注文をして動作確認してからリリースとしましょう。

まとめ

shopifyのDawnテーマで組み合わせを選べるセット商品を販売する方法をまとめてみました。バージョンによって少々設定方法は異なるかもしれませんが、似たような感じでできると思います。セクションにファイルに書くコードの設定にかなり手間取りましたが、line item propertiesを活用することでなんとかアプリなしでも複数種類の商品から好きなものを選んでセットとして購入できるようになりました。

まだまだひよっこの修行中の身なのでご質問やアドバイスもお待ちしております🐤

この記事を書いた人

パピティー

htmlとCSSのきほん本を3冊読んだだけの初心者が、やりたいことベースで、shopifyとwordpressに奮闘中。