ユーザーがカートに入れたアイテムの数が一定数以上でないと、チェックアウト(支払い)ページへ進む事ができないようにする手法について紹介します。
Shopifyはデフォルト機能やアプリで、BtoBビジネス(卸・仕入れ)に適した様々な機能を提供しております。
BtoBビジネスに必須な機能はいくつかあります。例えば、
・ 顧客ごとの価格設定
・ 商品やコンテンツごとのアクセス制限
・大量注文対応
・様々な支払いオプション
などが挙げられます。
今回は、BtoBビジネスで欠かせないロット(LOT)の制限について考察してみたいと思います。
ロット(LOT)とは
ロット(LOT)とは、注文の最小単位になります。
BtoBビジネスは、大量注文により、商品単価を安く設定できるため「〇〇個以上でないと購入できない」という条件付き販売が多いです。
本記事では、ユーザーがカートに入れたアイテムの数が一定数以上でないと、チェックアウト(支払い)ページへ進む事ができないようにする手法について紹介します。
こんなイメージ
例えば、冷凍アイスクリームを販売する卸売サイトのロットが100個だとしましょう。
小売業者のAさんが、以下のように注文しようとします。
・イチゴ味アイス：33個
・バニラ味アイス：33個
・チョコ味アイス：30個
合計注文数は96個で、販売ロット100個になっていないので、チェックアウトページへ遷移するボタンが表示されず、「注文可能なロットに達していません」というテキストが表示されます。
このように、カート内の注文アイテム数の合計に応じて、チェックアウトページへ遷移するボタン(ご購入手続きへ)を表示/非表示するのが今回のゴールになります。
注文アイテム数のオブジェクト
Shopifyにはもともと、注文アイテム数を取得・表示できる「cart.item_count」というオブジェクが用意されています。
単純に「cart.item_count」オブジェクを用いて条件分岐をするだけで、ボタン(ご購入手続きへ)の表示/非表示が可能になります。
ボタン(ご購入手続きへ)は「テーマコードを編集 > セクション > main-cart-footer.liquidにて修正が可能です。（テーマによって異なるかもしれませんが、約90行あたり）
以下はサンプルコードです。
{% assign item_count = cart.item_count %}
{% if item_count >= 100 %}
<button
type="submit"
id="checkout"
class="cart__checkout-button button"
name="checkout"
{% if cart == empty %}
disabled
{% endif %}
form="cart"
>
{{ 'sections.cart.checkout' | t }}
</button>
{% else %}
<p id="item_countText">最少購入ロットは100個以上です。</p>
{% endif %}１つ問題が‥
いかがでしょうか。すごくシンプルではないでしょうか‥と締めくくりたいものの、実はこの修正だけでは１つ問題があります。
もしユーザーがカート内で数量を調整した場合、こちらのコードだけでは、ブラウザの再読み込みをしないと「cart.item_count」にその数値が反映されません。
ユーザーは「あら？調整したのになぜボタンが表示されないの？」と思うはず。もちろん「カート内で数量を調整後はブラウザを再読み込みしてください」と追記しておくという手もありますが、ちょっとユーザーフレンドリーではない‥。
実はカート内では、Shopify AJAX APIというものが活用されているようで、それを修正するのは、難易度の高い領域になります。
カート内でアイテム数の変更が検知されるとShopify AJAX APIを呼び出して合計金額など、カート情報をDOM操作する仕組みです。
可能であれば、ユーザーがカート内で数量調整をしたら、上記のサンプルコードも連動し、リアルタイムでボタン(ご購入手続きへ)の表示/非表示を制御したいものです。
Shopify AJAX APIに関しては私も正直詳しくないので、ここでは触れませんが、実は1行を修正する事で解決できます。
注目してほしいのは、main-cart-footer.liquidの構造。同テンプレートファイルは、
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{%- when 'subtotal' -%}
合計金額などの情報
{%- else -%}
購入ボタンなど
{%- endcase -%}という構造となっており、{%- when 'subtotal' -%}の下の情報は、Shopify AJAX APIを呼び出し制御が施されています。
そのため、ユーザーがカート内でアイテム数を調整したら、合計金額が変動します。
しかし、{%- else -%}の下の情報はリアルタイムで更新されず、これをコメントアウト（無効）し、上記で紹介した条件文でボタン(ご購入手続きへ)の表示/非表示が可能になります。
ちなみに、{%- else -%}は、「case文」におけるデフォルト処理、例えばボタン(ご購入手続きへ)などのHTMLを生成しますが、別になくても挙動上の問題はないように見受けられます。
以上、BtoBサイトに活用できるかもしれない、注文アイテム数による条件分岐について紹介しました。もちろん、商品ページからカートページを経由せず「今すぐ購入」ボタンでチェックアウトページへ移動するケースをどうするかなど、色々課題は残りますが、カートページのカスタマイズに少しでもヒントになれたらと思い、共有いたします。
