Cart and checkout validation API とは？実装方法まで徹底解説！

今回の記事では Shopify Functions の概要から具体的な Cart and checkout validation API の実装方法まで丁寧に解説していきます。

今回の記事でわかること

• Shopify Functions の概要
• Cart and checkout validation API の概要
• Cart and checkout validation API の実装方法

今回の記事を読んで、チェックアウトページの柔軟なカスタマイズを可能にする Cart and checkout validation API についてマスターしていきましょう！

目次

• Cart and checkout validation API とは
• Shopify Functions の API の種類
• Cart and checkout validation API アプリの作り方
  • 事前準備
  • アプリ作成
  • アプリに Cart and checkout validation API の機能を追加
  • 作成したアプリを開発ストアにインストール
  • ストアで Cart and checkout validation API を有効化
  • Cart and checkout validation API の動作確認
• Cart and checkout validation API を使って実装されたおすすめアプリ
  • シンプル Coming Soon ｜商品ページ発売予告アプリ
  • シンプル予約販売｜受注販売や在庫切れ商品販売で使える
  • シンプル購入制限｜お手軽注文制限
  • シンプル顧客タグごとの限定販売｜お手軽ロイヤリティ
  • お手軽 VIP 会員限定販売｜シンプル VIP プログラム
• まとめ

Cart and checkout validation API とは

Cart and checkout validation API とは、Shopify Functions の機能の中の一つです。

Shopify Functions とは Shopify のバックエンド処理にカスタマイズした処理を挿入することができる機能です。Shopify Functions を用いれば配送や決済のカスタマイズ、ディスカウントのカスタマイズを行うことができます。

また、Shopify Functions はアプリの拡張機能としてストアに導入されるかたちになるので、Shopify Functions を組み込んでいるアプリをストアから探してインストールするか、カスタムアプリを独自で作成してストアにインストールする必要があります。

Shopify Functions の API の種類

Shopify Functions は、Cart and checkout validation API 以外にもさまざまな API が用意されており、各 API でカスタマイズできる処理が異なります。現在公開されている API の種類と概要の一覧を表にまとめてみました。

Function API	Description
Delivery Customization API	顧客に表示される配送オプションの名前変更、順序変更、並び替えが可能
Order Discount API	カート内の全ての商品に適用される割引を作成可能
Product Discount API	カート内の特定の商品または商品バリアントに適用される割引を作成可能
Shipping Discount API	配送料に対して送料無料や割引などのロジックを作成可能
Payment Customization API	決済方法の名前変更、順序変更、並び替えが可能
Cart TransForm API	カート内の商品を拡張し、カート内の商品の表示を更新可能
Cart and Checkout Validation API	カートとチェックアウトの独自のバリデーションを作成可能
Fulfillment Constraints	Shopify での注文処理のためのロジックを独自でカスタマイズ可能

Cart and checkout validation API アプリの作り方

ここからは実際に Cart and checkout validation API を使用したアプリの作成方法を解説していきます。

今回はカート内の商品に注文数が 5 個を超える商品が含まれている場合、チェックアウトを実行できないというバリデーションを作ってみます。バリデーションが実行されるタイミングは、チェックアウト画面に遷移したときにします。

事前準備

アプリ開発を行う前の事前準備をしていきます。

開発ストアの作成

今回作成するアプリをインストールするストアを作成します。

アプリ作成に必要なツールをインストール

Shopify Functions が組み込まれているアプリを開発するために以下のものが必要になるのでローカル PC にインストールしてください。

• Node.js
• Node.js のパッケージマネージャ（npm, yarn)
• ShopifyCLI

以上で事前準備は終了です。

アプリ作成

ここからは実際に Cart and checkout validation API が搭載されたアプリを作成していきます。

アプリの本体を作成

Cart and checkout validation API はアプリの拡張機能になるので、まずはアプリ本体を作成していきます。

1. ターミナルを立ち上げて、アプリを作成したいディレクトリで以下のコマンドを実行します。

npm init @shopify/app@latest

2. コマンド実行後、プロジェクト名や使用する言語などを聞かれるのでそれぞれ以下のように答えてください。

Your project name?（アプリのディレクトリ名）
 -> cart-checkout-validation-demo

Get Started building your app?（Remix を使用するかどうか）
 -> Start with Remix

For your Remix template, which language do you want?（使用する言語）
 -> Typescript

3. アプリのディレクトリに移動します。

 cd cart-checkout-validation-demo/

4. アプリに必要なライブラリをインストールします。

npm install

5. 以下のコマンドを実行して、アプリのローカルサーバーを起動します。

npm run dev

コマンド実行後、いくつか質問されるので以下のように答えてください。

Create this project as a new app on Shopify
（パートナーダッシュボードに新規でアプリを作成するかどうか）
  -> Yes, create it as a new app

App name（アプリ名）
  -> cart-checkout-validation-demo

Which store would you like to use to view your project?
（どのストアでアプリの動作を確認したいか）
  -> cart-checkout-validation-test（事前準備で作成した開発ストアを入力してください）

Have Shopify automatically update your app's URL in order to create a preview experience?
（アプリをプレビューするための URL を Shopify が自動で生成してくれる）
  -> Yes, automatically update

ここまででアプリ本体の作成は完了です。

アプリに Cart and checkout validation API の機能を追加

ここからは、作成したアプリの本体に Cart and checkout validation API の拡張機能を追加していきます。

1. アプリのディレクトリに移動します。

 cd cart-checkout-validation-demo/

2. 以下の拡張機能を作成するコマンドを実行して、アプリに拡張機能を追加します。

npx shopify app generate extension

コマンド実行後の質問には以下のように答えてください。

Type of extension?（作成する拡張機能の種類）
  -> Cart and checkout validation - Function

Name your extension?（作成される拡張機能の名前）
  -> 何も入力しない

What would you like to work in?（使用する言語）
  -> TypeScript

3. インストールした拡張機能のディレクトリに移動します。

cd extensions/cart-checkout-validation/

4. run.graphql を以下のコードに書き換えます。

query RunInput {
  buyerJourney {
    step
  }
  cart {
    lines {
      quantity
    }
  }
}

run.graphql にはバリデーションで必要な情報を取得してくる GraphQL クエリを作成しています。 どのような情報が取得できるかはこちらのドキュメントで詳しく確認できます。

今回のバリデーションの実行に必要な情報と run.graphql の内容の対応関係は以下のようになっています。

バリデーションに必要な情報	run.graphql
顧客がチェックアウトを行おうとしているかどうか	buyerJourney.step
商品の注文数	quantity

5. run.graphql を元に型 RunInput を生成します。
   以下のコマンドを実行して型を生成します。この型は、次に編集するrun.ts ファイルで使用されます。run.ts は実際にバリデーション処理を書いていくファイルです。

npm run typegen

6. 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,
  };
}

7. アプリのディレクトリに移動してアプリをデプロイします。

cd ../.. && npm run deploy

コマンド実行後の質問には以下のように答えてください。

Include `shopify.app.toml` configuration on `deploy`?
  -> Yes, always

Release a new version of cart-chekout-validation-demo?
  -> Yes, release this new version

ここまででアプリに Shopify Functions の中の Cart and checkout validation API を搭載することができました。

作成したアプリを開発ストアにインストール

次に、作成したアプリを開発ストアにインストールします。
パートナーダッシュボードの「アプリ管理」から今回作成したアプリを選択します。

アプリ詳細画面に遷移したら「ストアを選択する」をクリックしてください。

アプリの機能を試すストアを選択します。最初に作成した開発ストアを選択してください。

「インストール」をクリックしてアプリをストアにインストールします。

ここまでで、Cart and checkout validation API を搭載したアプリを開発ストアにインストールすることができました。

ストアで Cart and checkout validation API を有効化

次に、開発ストアで Cart and checkout validation API を有効化します。

ストア管理画面左側のサイドバーから「設定」をクリックしてください。

「チェクアウト」を選択します。

チェックアウト画面に移動したら 1 番下までスクロールして「チェックアウトルール」の「ルールを追加」をクリックします。

先ほど作成した「cart-checkout-validation」のルールを追加します。

右上の「オン」をクリックしてルールを有効化します。

以上で、Cart and checkout validation API を有効化は完了です。

Cart and checkout validation API の動作確認

実際に、有効化した Cart and checkout validation API の動作確認を行なっていきます。

注文数が５個を超える商品がカートに含まれている状態でチェックアウト画面に進むと、チェックアウトページで左上にエラーメッセージが表示されています。正しく動作していますね。

Cart and checkout validation API を使って実装されたおすすめアプリ

実際に Cart and checkout validation API を使って実装されているアプリを紹介します。

シンプル Coming Soon ｜商品ページ発売予告アプリ

「シンプル Coming Soon ｜商品ページ発売予告アプリ」は、商品の発売予告（Coming Soon）を設定することができるアプリです。商品を購入できない状態で、ストアに表示することができます。カウントダウン機能もあるので、商品の期待感を高めることが可能です。こちらからインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify で Coming Soon（発売予告）を実施するアプリについて徹底解説｜ご利用ガイド

シンプル予約販売｜受注販売や在庫切れ商品販売で使える

「シンプル予約販売｜受注販売や在庫切れ商品販売で使える」は、ストア上で予約販売機能を設定することができるアプリです。予約商品を購入すると、注文に自動でタグが付きます。また、予約販売前・販売中・予約販売終了後の表示を簡単に設定できます。こちらからインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify に予約販売機能を追加して受注販売や在庫切れ販売を簡単に実現できるアプリについて徹底解説｜ご利用ガイド

シンプル購入制限｜お手軽注文制限

「シンプル購入制限｜お手軽注文制限」は、Shopify ストアに商品の購入数制限機能を導入できるアプリです。商品の購入数制限をを行うことで、注文と在庫管理を効果的に調整できます。こちらからインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify に購入制限機能を追加して数量制限・注文規制を実現できるアプリについて徹底解説｜ご利用ガイド

シンプル顧客タグごとの限定販売｜お手軽ロイヤリティ

「シンプル顧客タグごとの限定販売」は、Shopify ストアに簡単に顧客タグごとの限定販売機能を導入することができます。特定の顧客しか購入できない商品を作成することで、顧客のロイヤリティを高めることができます。こちらからインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify に顧客タグごとの限定販売機能を追加するアプリについて徹底解説｜ご利用ガイド

お手軽 VIP 会員限定販売｜シンプル VIP プログラム

「お手軽 VIP 会員限定販売｜シンプル VIP プログラム」は、Shopify ストアに簡単に VIP 限定販売機能を導入することができるアプリです。こちらからインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify で VIP 会員限定販売ができるアプリについて徹底解説｜ご利用ガイド

まとめ

今回は Shopify Functions の概要から Cart and checkout validation API を使用して、Shopify Functions の具体的な実装方法まで解説しました。

今回はカートに入っている商品の個数でバリデーションを行うとても簡単なロジックでしたが、商品のメタフィールドを利用したバリデーション、顧客の情報に基づくバリデーションなどより高度なバリデーションが実装できます。

Shopify Functions には、今回実装した Cart and checkout validation API 以外にもたくさん種類があり、ディスカウント、配送、決済方法のカスタマイズを行うことができるので、マスターすれば開発の幅が飛躍的に広がります。ぜひ勉強してみてください！

最後まで読んでいただきありがとうございました！

そのほかの API に関しての記事もありますので、ぜひご覧ください。

• Shopify Admin API とは？具体的な使用方法まで徹底解説！
• Shopify Product Discount API とは？実装方法まで徹底解説！
• Shopify Shipping Discount API とは？実装方法まで徹底解説！
• Shopify Order Discount API とは？実装方法まで徹底解説！
• Shopify Fulfillment Constraints API とは？実装方法まで徹底解説！
• Shopify Cart Transform API とは？実装方法まで徹底解説！
• Shopify Payment Customization API とは？実装方法まで徹底解説！
• Shopify Delivery Customization API とは？実装方法まで徹底解説！