最近、仕事でShopifyを使うことが多くなってきたのですが、私がWebデザイナーだったのはかれこれ20年前ほど。
その頃はHTML2.0なんて言われてる時代で、Dreamweaverを使い倒してWebサイトを作っていた時代、Shopifyで使われているrequidなんて存在していなかったので、一からコードの勉強をしつつ何とかECサイトを作っています。
まだ3か月くらいしか使っていませんが、いろいろと調べてわかってきたことが多くなったので、自分の備忘録の為にブログにしたためて行こうと思います。
私は現職はWeb制作を生業にしてないし、エンジニアでもないので、詳しい質問をされても回答できない場合が多いと思いますのであしからず。
あくまで自分の備忘録ということで。
【Shopifyでカートに入れられる数量を制限する方法】
Shopifyには現在ECサイト構築においてデフォルトでついてる必要がある機能がありません。その一つが「カートに入れられる数量の制限」です。
もちろん、アプリを使えば簡単に数量設定とか一人1回購入可能とかできるのですが、毎月数万円支払いが必要。
最低限一度にカートに入れられる数量を制限できないと、一人が一度に大量購入できてしまい、大量キャンセルにつながったり、転売につながります。
もちろん、何度も購入すれば購入できてしまうので、アカウントレベルでの制限はアプリが必要ですが、せめてデフォルトで数量の制限はしたいのです。
ということで、今回はこの「デフォルトで最大購入数量を設定する」を実装していきたいと思います。
Shopifyにおいて一回での購入制限をかけるには商品ページとカートページ2つのliquidを修正します。
商品ページの設定だけしても、カートページでも数量変更ができるため、カートページの修正もマストです。
商品ページの修正
利用してるテンプレートはDawnです。
修正するliquid：sections/main-product.liquid
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
data-cart-quantity="{{ cart_qty }}"
data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
{% if product.selected_or_first_available_variant.quantity_rule.max != null %}
data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
{% endif %}
step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
form="{{ product_form_id }}"
>
上記コードを下記にまるっと差し替えます。
<input
class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
data-cart-quantity="{{ cart_qty }}"
data-min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
min="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
{% comment %}{% if product.selected_or_first_available_variant.quantity_rule.max != null %}
data-max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
max="{{ product.selected_or_first_available_variant.quantity_rule.max }}"
{% endif %} {% endcomment %}
data-max="5"
max="5"
step="{{ product.selected_or_first_available_variant.quantity_rule.increment }}"
value="{{ product.selected_or_first_available_variant.quantity_rule.min }}"
form="{{ product_form_id }}"
>
data-max=”5″とその下のmax=”5″の数字がMAXの数量となりますので、ここを修正してください。
これが出来たら、とりあえず商品ページに行って、数量セレクタの＋をクリックしていきます。
無事に5で止まればOKです。
商品ページの修正については、こちらのサイトを参照してます。
https://community.shopify.com/t/how-to-set-a-max-quantity-limit-per-item-in-cart/285691/4
次に、カートページの設定をします。
カートページの修正
修正するliquid：sections/main-cart-items.liquid
259行目あたりにある下記ソースを修正します。
data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
min="0"
data-min="{{ item.variant.quantity_rule.min }}"
{% if item.variant.quantity_rule.max != null %}
max="{{ item.variant.quantity_rule.max }}"
{% endif %}
data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
min="0"
data-min="{{ item.variant.quantity_rule.min }}"
data-max="{{ item.variant.quantity_rule.max }}"
max="5"
max=”5″の部分が数量を制限している場所になりますので、ここの数字を変更すればOKです。
商品ページおよびカートページでセレクターの＋を押して行って、制限個数になると下記のようになれば成功です。
限定品などはアカウントレベルで制限をかけたいと思います。今回のやり方ではそれは無理です。そういう対応が多い人はアプリを入れることをお勧めします。
アプリを入れない場合は、専用の商品コードを作って、オーダーが入る度に人力でアカウントチェックをするとか、予約期間を設けて発送前にチェックしてキャンセルするとか、いろいろ検討が必要です。まあ、そういう運用が多いお店はおとなしくアプリを入れるのが良いかと思います。
参考になれば幸いです。
コメント