【Shopify】カートページ内商品の同時注文不可設定制御・数量上限制御【アプリ不要！】

「特定の商品群は、カート内の合計金額が〇〇円以上で送料無料」という特典は、多くのECサイトで使われている。

ただし、イレギュラーに「ただしまた別の特定の商品群がカート内にあるときは〇〇円以上で送料無料にしないようにしたい」という要件を実現したいとする。

そのような際には、配送プロファイルを別にしなければ、送料設定の条件だけでは設定しきれない。

複数の配送プロファイルを設定する

配送プロファイル1つ目は、Aという商品に適用。「カート内の合計金額が〇〇円以上」の条件で送料無料になるようにする。

配送プロファイル2つ目は、Bという商品に適用。1つ目で設定した「カート内の合計金額が〇〇円以上」でも送料がかかるようにする。

ただし、Shopifyでは複数の配送プロファイルがカート内にあったとき、配送料は各配送プロファイルの合計の金額になる。

このAとBの商品（配送プロファイル1と2）が混在する場合、カート内の合計金額が〇〇円に達していなければ、かかる送料は単純に1と2の合算の送料がかかる。

しかもお客様は、どの商品がなんの配送プロファイルかを知らないので、組み合わせによっては送料無料がないどころか、なんだかすごく効率の悪い高い送料の額になっていることで、購買意欲がなくなり、カート落ちすることになりかねない。

長くなったが、本記事は、カートページ内商品の同時注文不可設定制御について取り上げ、この問題を解消する。

カートページ内商品の同時注文不可設定制御

したい挙動としては、以下の通り。

カート内の商品で、異なる配送プロファイルの商品があったら、その商品を削除して別の注文として購入をわけてもらうようにアナウンスする。

Amazonのように、1回の注文で複数の配送業者や配送日時、配送料が並列で表記できれば、わざわざユーザにカートから商品を削除してもらわなくてもよいのだが、現状のShopifyではそのような高機能な配送制御ができない。Shopify Edition 2023 Summerの新仕様で、お客様の注文後に、カート内の商品の配送を分割したりできるようになったらしいが、これはあくまでストア側がお客様の注文後に、手動で行う操作で実現が可能なものであって、お客様ファーストというわけではなく、あくまでストアが都合よい配送の仕方をできるようになった、ということかと思う。

また、本記事ではおまけで、

カートページ内商品の数量上限制御

についても紹介する。

追加するコード紹介

<!--同梱不可設定追加部分START-->
{%- for item in cart.items -%}
    {%- if item.product.type == 'A商品' -%}
        {% assign typeA = true %} 
    {%- endif -%}
    {%- if item.product.type == 'B商品' -%}
        {% assign typeB = true %}
    {%- endif -%}
{%- endfor -%}
{%- if typeA == true and typeB == true -%}
<div>
  <p>A商品とB商品を同時にご注文することはできません。<br>
  お手数ですが、別々ご注文いただくために、カートからどちらかの商品を「×」ボタンで削除して更新ボタンを押してください。
  </p>
  <input style="width: 150px;" class="no-purchase_reload" type="button" value="更新" onclick="window.location.reload();" />
</div>
<br><br>
{%- endif -%}
<!--同梱不可設定追加部分END-->
<!--数量調整不可設定追加部分START-->
{%- if typeB == true -%}
  {% if cart.item_count > 1 %}
    <div>
      <p>B商品は専用のギフトボックスに入れてお送りするため、一度の注文で1つまでとなります。お手数をおかけしますが、カートから商品を「×」ボタンで削除して更新ボタンを押し、再度カートに入れてください。
      </p>
      <input style="width: 150px;" class="no-purchase_reload" type="button" value="更新" onclick="window.location.reload();" />
    </div>
    <br><br>    
  {% endif %}
{%- endif -%}
<!--数量調整不可設定追加部分END-->

このコードでは、A商品、B商品を「商品タイプ」で判別できるように登録している。

{%- if item.product.type == 'A商品' -%}

というように、判別可能だ。

商品タイプでなければ、タグでもよいし、メタフィールドでもよい。

商品名に特定のテキストがある場合、という判別方法でもよい。

（A商品は商品名頭に【A商品】と付与し、B商品は商品名頭に【B商品】と付与するようなイメージ）

以下のコードは、B商品がカートにあるときに数量セレクターのmax要素に最大注文個数の上限を設定している。必要ならこの制御もするとよいかと思います。cssやjsのコードは適宜書き換えてください。

<!--数量調整不可設定追加部分START-->
{%- for item in cart.items -%}
    {%- if item.product.type == 'B商品' -%}
        {% assign typeB = true %}
    {%- endif -%}
{%- endfor -%}
{%- if typeB == true -%}
	<div class="quantity-selector">
	 <a class="quantity-adjust quantity-control-down decrease-qty" data-variant="{{ item.variant.id }}" data-line="{{ forloop.index }}">
	   -
	 </a>
	 <input type="text" class="cart-qty quantity" name="updates[]" id="updates_{{ forloop.index }}" data-id="{{ item.key }}" {% if item.variant.inventory_management == 'shopify' %}{% unless item.variant.inventory_policy == 'continue' %}max="{{ item.variant.inventory_quantity }}"{% endunless %}{% endif %} value="{{ item.quantity }}" />
	 <a class="quantity-adjust quantity-control-up increase-qty" data-variant="{{ item.variant.id }}" data-line="{{ forloop.index }}" >
	   +
	 </a>
	</div>
{%- endif -%}
<!--数量調整不可設定追加部分END-->

以上です！