Shopify Fulfillment Constraints API とは？実装方法まで徹底解説！

はじめに

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

今回の記事でわかること

Shopify Functions の概要
Fulfillment Constraints API の概要
Fulfillment Constraints API の実装方法

今回の記事を読んで、カート内商品の配送に関するカスタムルールの設定を可能にする Fulfillment Constraints API についてマスターしていきましょう！

Fulfillment Constraints API とは

Fulfillment Constraints API は Shopify Functions の一部で、カート内商品の配送に関するカスタムルールを設定できます。これにより、配送条件やプロセスをビジネスの要件や顧客の期待に合わせて細かく調整でき、配送戦略を柔軟にカスタマイズすることが可能になります。
Shopify Functions とは Shopify のバックエンドに独自のカスタムロジックを追加することができる便利なツールです。これを利用することで、配送方法や決済オプションのカスタマイズ、ディスカウント設定の調整などが簡単にできるようになります。

また、Shopify Functions はアプリの機能を拡張する形でストアに導入されます。これにより、 Shopify Functions を搭載したアプリをストアで見つけて導入することも、自分でカスタムアプリを開発してストアに直接追加することも可能です。

Shopify Functions の API の種類

Shopify Functions では、Fulfillment Constraints 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 での注文処理のためのロジックを独自でカスタマイズ可能

Fulfillment Constraints API アプリの作り方

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

今回は「Promotional product」のタグを持った商品が複数カートに存在する場合に、それらすべての商品のロケーションが「Shop location」でないとチェックアウトできないようにするという処理を行います。

事前準備

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

開発ストアの作成

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

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

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

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

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

アプリ作成

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

アプリの本体を作成

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

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

npm init @shopify/app@latest

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

Your project name?（アプリのディレクトリ名）
 -> fulfillment-constraints-api

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

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

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

 cd fulfillment-constraints-api/

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

npm install

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

npm run dev

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

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

App name（アプリ名）
  -> fulfillment-constraints-api

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

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

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

アプリに Fulfillment Constraints API の機能を追加

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

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

 cd fulfillment-constraints-api/

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

npx shopify app generate extension

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

Type of extension?（作成する拡張機能の種類）
  ->  Fulfillment constraints - Function

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

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

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

cd extensions/cart-transformer/

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

query RunInput {
  cart {
    lines {
      id
      quantity
      merchandise {
        __typename
        ... on ProductVariant {
          id
          product {
            title
          }
        }
      }
    }
  }
}

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

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

ディスカウントに必要な情報	`run.graphql`
カートラインアイテムの id	`cart.lines.id`
商品のバリアントの id	`merchandise.id`
商品のタイトル	`merchandise.product.title`

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

npm run typegen

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

import { time } from 'console';
import type {
  RunInput,
  FunctionRunResult,
  ProductVariant,
  ExpandOperation,
} from '../generated/api';

export function run(input: RunInput): FunctionRunResult {
  // ギフトカードのバリアント id（自分のストアのギフトカードのバリアントIDに書き換える）
  const giftCardVariantId = 'gid://shopify/ProductVariant/40587100880973';

  return {
    operations: input.cart.lines.map(
      (
        lineItem,
      ): {
        expand: ExpandOperation;
      } => ({
        expand: {
          cartLineId: lineItem.id,
          title: `${(lineItem.merchandise as ProductVariant).product.title} - ギフトカードつき`,
          image: null,
          expandedCartItems: [
            {
              merchandiseId: (lineItem.merchandise as ProductVariant).id,
              quantity: lineItem.quantity,
            },
            {
              merchandiseId: giftCardVariantId,
              quantity: 1,
            },
          ],
        },
      }),
    ),
  };
}

アクセススコープの更新
shopify.app.toml の scopes を以下のように更新してください。

scopes = "write_fulfillment_constraint_rules,write_products"

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

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 の中の Fulfillment Constraints API を搭載することができました。

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

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

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

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

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

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

ストアで Fulfillment Constraints API を有効化

次に、開発ストアで Fulfillment Constraints API を有効化します。

ここからは、Admin GraphQL を叩いて Fulfillment Constraints API を有効化していきます。

アプリプロジェクトディレクトリの app > routes > app.tsx の loader を下記のように書き換えてください。
YOUR_FUNCTION_ID_HERE の部分は、アプリを作成してきたディレクトリの .env ファイルに SHOPIFY_FULFILLMENT_CONSTRAINTS_ID=xxxxxxxxxxxxxxxxxx という行があると思うので、そこの xxxxxxxxxxxxxxxxxx に該当する部分に書き換えてください。

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const { admin } = await authenticate.admin(request);
  await admin.graphql(
    `#graphql
    mutation fulfillmentConstraintRuleCreate {
    fulfillmentConstraintRuleCreate(functionId: "YOUR_FUNCTION_ID_HERE") {
    fulfillmentConstraintRule {
      id
    }
    userErrors {
      field
      message
    }
  }
}
  `,
  );

  return json({ apiKey: process.env.SHOPIFY_API_KEY || '' });
};

上記の loader を作成したら、アプリの管理画面を開いてください。
アプリ管理画面を開く

以上で、Fulfillment Constraints API の有効化は完了です。

Fulfillment Constraints API の動作確認

Fulfillment Constraints API の動作確認を行なっていきます。

商品に「Promotional product」タグを付与します。今回は「The Multi-managed Snowboard」と「The Multi-location Snowboard」にタグを付与してください。

タグを付与

「The Multi-managed Snowboard」と「The Multi-location Snowboard」をカートに入れてチェックアウト画面に進んでください。チェックアウト画面が通常通り表示されます。

チェックアウト画面に進む

「The Multi-managed Snowboard」のロケーションから「Shop location」を削除します。
Shop location を削除

Shop location を削除完了

この状態でチェックアウト画面に戻ってリロードしてください。以下のようなモーダルが表示されてチェックアウトが実行できないようになっており、正常に動作しています。
チェックアウト画面のリロード

まとめ

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

Fulfillment Constraints API を利用すると、Shopify で商品の配送に関するカスタムルールを設定できます。これにより、商品の配送条件や配送に関するプロセスを細かく制御し、ビジネスの特定の要件や顧客の期待に応じた配送戦略を実現することが可能になります。商品の種類、顧客の位置、注文の大きさに基づくルールを作成することで、配送とチェックアウト戦略を大きく向上させることができます。

また、Shopify Functions は、Fulfillment Constraints API だけではなく、多彩な機能を提供しています。ディスカウント、配送、決済オプションのカスタマイズが可能で、これらの機能をフルに活用することで、開発の可能性を格段に広げることができます。この機会に、Shopify Functions の深い知識を身につけていきましょう！

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

これらの記事では、Shopify Functions を解説しています。

Shopify Delivery Customization API とは？実装方法まで徹底解説！

Shopify Payment Customization API とは？実装方法まで徹底解説！

Shopify Cart Transform API とは？実装方法まで徹底解説！

Shopify Order Discount API とは？実装方法まで徹底解説！

Shopify Shipping Discount API とは？実装方法まで徹底解説！

ブログTOP お問い合わせ