【shopify】商品ごとに購入制限する方法

商品ごとに購入制限させたい方がどれだけいるのか…という気はしますが、受注生産とか特注品などを扱う場合に必要な機能だったりします。
前回の記事で購入制限について少し書きましたが、実際のサイト構築では商品ごとに購入制限をさせています。
受注生産品のみを扱うECサイトの構築で、材料の仕入れ状況などによって製造できる個数が変わるという内容だったため、お客さまでも自由に変更できるようにメタフィールドを使って構築しました。
アプリなどもあるようですが、liquidを触れる人なら自分でカスタマイズした方が余計な費用もかからないし、いいかなと思います。

ここで紹介するコードの特徴
・商品ごとに購入数を制限できる（上限、下限ともに設定可能）
・購入数の上限までしか追加ボタンをクリックできない
・バリエーション登録がある時にバリエーションごとに購入制限をかけることはできない。全バリエーションに対して購入数制限されてしまう。
※例：5つのバリエーション登録があり、ここで購入制限を2個にした場合、最大で5×2＝10個まで購入できる。この場合、1つのバリエーションだけ購入しようとすると2個しか購入できない仕様です。

テストサイトで再度コードチェックしようと思ってみてたら、DAWNのバージョン9.0.0がアップデートされていました。
該当コードに関する設定も追加されているかなと思ってネットでチェックしていたら、どうもこの機能はshopifyPLUSのB2B用機能で実装されているようでした。
いかにも設定できそうなコードが入っていたので、実装前なのかと思っていたらまさかのPLUSプランのみの実装でした。
自分でコード編集する時に参考になりそうなので、参考URLも掲載しておきます。

https://help.shopify.com/ja/manual/b2b/catalogs/code

ちなみにですが、下記で紹介するコードは単純に製品ページからカートに入れる、という操作において購入制限できるようにしているだけなので、動的チェックアウトボタンとかからの購入は考慮しておりません。
実装される場合にはご注意ください。

メタフィールドに購入制限数用の定義を追加する

設定＞カスタムデータ＞商品から定義を追加してください。
種類は「整数」を選択してください。
最小値や最大値もすでに決まっている場合は、ここで設定してください。
今回は最小値だけ1で設定しています。
ここで設定するのは購入数の「上限数」になります。最小値や最大値を入れたからといって、購入数自体の下限数と上限数を一度に設定できるわけではありませんので、ご注意ください。

この後で出てくるliquidに入れるコードに作成したネームスペースとキーの箇所を入れますので、ご自分で設定したネームスペースとキーはコピーしておいてください。
ここでは、「custom.unit」で設定しています。

liquidの編集

もし、shopifyPLUSにプランをアップグレードしようと思っているなら、ここから紹介する箇所はコメントアウトしてアップグレード後に元のコードに戻せるようにしておく方が無難かと思います。

DAWN9.0.0の場合、「main-product.liquid」を直接編集していきます。
243行の「{% if product.selected_or_first_available_variant.quantity_rule.max != null %}」と246行の「{% endif %}」を削除もしくはコメントアウトしてください。

data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"

244・245行あたりにある上記コードを編集していきます。
それぞれの値を先ほど設定したメタフィールドのネームスペースとキーに置き換えます。

data-max="{{ product.metafields.custom.unit }}"
max="{{ product.metafields.custom.unit }}"

くどいようですが、「custom.unit」の部分をご自分が設定したネームスペースとキーに設定してください。

購入下限数を制限したいなら

241・242行の下記のコードを同じ要領で設定してください。
その場合、メタフィールドは新しく作ってください。

data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"

デメリットと課題

在庫管理をしながら購入制限をするなら、在庫数の表示と合わせて実装する方が現実的かなと思います。
shopifyのデフォルトでは在庫数までしか購入できなかったとしても数量ボタンは在庫数以上にクリックできてしまうという仕様のため、ユーザーには使い勝手の悪い仕様だと感じています。
特にバリエーションが多い場合には注意しておいた方がいいです。
バリエーション、数量ボタン、購入ボタンの連動が問題になるので、個人的には手を出したくないカスタマイズだったりします（苦笑）
アップデータが頻繁にあるので、その都度対応を考えないといけないので対応箇所は最小限にしておきたいものです。
そういう意味ではアプリの導入もありかなと思いますが、やっぱり月額料とか余計な影響が出ることも懸念すると自分でできるカスタマイズは自分でやった方がいいような気がします。

まとめ

今回の設定では商品ごとに数量ボタンそのものに制限をかけることができるので、受注生産や特注品、アウトレットなどの商品が混在する場合に使えるかなと思います。
ただ、一般的なECサイトで使うことはほとんどないとは思いますが、最近はD2CでECを始めたりするケースもあるので、自分でカスタマイズできると利便性はぐっと上がります。
ちなみに、通常の在庫数管理と購入制限を混在させて運営したい場合は、製品ページのテンプレートを2つに分けて商品ごとに反映させた方が楽です。

※ご注意
このコードはshopifyのdawn8.0.0と9.0.0で検証しています。
dawn7.0.0以下の場合、「data-max」の設定項目自体がありません。それ以外の箇所は基本的には同じです。
保障、サポートなどは一切しておりませんので、ご自身の責任下でお試しください。
すでにカスタマイズされている場合や環境、バージョンによっては崩れたり正常に動作しないこともありますので、ご注意ください。