🐷

Shopify の購入制限を行う方法について調べてみた

2024/04/05に公開

Shopify

tech

はじめに

今回は、Shopify で購入制限を行う方法について調べてみました。

コーディングでフロント側から制御を行う方法・API を用いてバリデーションを行う方法・Shopify のアプリを用いて実装を行う方法のそれぞれについて解説していきます。

それでは、頑張っていきましょう。

購入制限とは

Shopify における購入制限とは、特定の条件で商品をカートに追加できないようにすることです。

今回は、個数を指定して商品の購入制限を行う方法についてまとめていきます。

具体的には、商品 A は 3 個以上の個数でなければカートに追加できないようにしたり、商品 B は 5 個以上カートに追加できないようにしたりする、などです。

コーディングを用いてフロントから制御を行う方法

実際、コーディングを用いてフロントから制御を行う方法はかなり苦しいです。

顧客から突破されることが無いような制御はかなり難しいという前提はありつつも、解説していきます。

オンラインストアのコードを編集から、コードの編集画面に移動しましょう。

main-product.liquidのファイルを開きましょう。

こちらのファイルにコーディングを行っていきます。

商品の数量選択部分を編集して、最大値を 3 に設定することが可能です。

<select name="quantity" id="Quantity" >
  {% for i in (1..3) %}
    <option value="{{ i }}">{{ i }}</option>
  {% endfor %}
</select>

また、JavaScript を使用して、動的な制御を行うことも可能です。

document.getElementById('AddToCartButton').addEventListener('click', function(e) {
  var selectedQuantity = parseInt(document.getElementById('Quantity').value, 10);
  var maxQuantity = 3; // この商品の最大購入可能数量
  
  if (selectedQuantity > maxQuantity) {
    e.preventDefault(); // カートへの追加を停止
    alert(`この商品は1回の注文で最大${maxQuantity}個までです。`);
  }
});

上記のような方法で、フロントエンドからコーディングを用いて制御を行うことができました。

ただ、コレクションからのカートに追加や、今すぐ購入による画面遷移など、Shopify は購入の導線が沢山あります。そのすべてをコーディングを用いて制御するのは難しいので、次に紹介するCart and Checkout Validation Function API を用いて実装するのが一般的な方法になるかと思います。

API を用いて制御を行う方法

今回は、Cart and Checkout Validation Function API を用いて購入制限を行う方法について解説していきます。

以下の記事が参考になりました。

こちらについて解説していきます。

Cart and Checkout Validation Function APIは、Shopify が提供するアプリの拡張機能の一つです。

拡張機能が有効になっているストアでカートに追加等の挙動が行われた際に、任意の処理を差し込むことができます。

Cart and Checkout Validation Function API によって追加されるrun.tsに、以下の処理を記述しましょう。

import {
  type RunInput,
  type FunctionRunResult,
  type FunctionError,
  BuyerJourneyStep,
} from '../generated/api';

export function run(input: RunInput): FunctionRunResult {
  const errors: FunctionError[] = [];

  // 顧客がカート操作を行なっている場合、バリデーションを行わない
  if (input.buyerJourney.step === BuyerJourneyStep.CartInteraction) {
    return { errors };
  }

  // ５個を超える注文をされている商品が存在するかどうか
  const hasOverFiveOrders = input.cart.lines.filter((line) => line.quantity > 5).length > 0;

  // ５個を超える商品の注文が存在した場合
  if (hasOverFiveOrders) {
    errors.push({
      // 表示するエラーメッセージ
      localizedMessage: '商品の個数が5個を超える注文は行えません。',
      target: '$.cart',
    });
  }
  return {
    errors,
  };

上記のコードを挿入することで、5 個を超える注文されている商品が有る場合に、バリデーションのメッセージを表示させることが可能になります。

こちらの拡張機能を有効化するためには、カスタムアプリを作成して拡張機能を有効化する必要があります。

しかし、かなりの手間が有るので、既存の安価なアプリを導入することになるかと思われます。