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

目次

• はじめに
• Shipping Discount API とは
• Shopify Functions の API の種類
• Shipping Discount API アプリの作り方
  • 事前準備
  • アプリ作成
  • アプリに Shipping Discount API の機能を追加
  • 作成したアプリを開発ストアにインストール
  • ストアで Shipping Discount API を有効化
  • Shipping Discount API の動作確認
• Shipping Discount API を使って実装されたおすすめアプリ
  • シンプル VIP 送料割引｜お手軽 VIP 会員送料無料
  • シンプル顧客タグ送料割引｜お手軽顧客タグ送料無料
  • シンプル会員送料割引｜お手軽ログイン送料無料
  • シンプル会員初回送料割引｜お手軽初回ログイン送料無料
• まとめ

はじめに

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

今回の記事でわかること

• Shopify Functions の概要
• Shipping Discount API の概要
• Shipping Discount API の実装方法

今回の記事を読んで、柔軟なディスカウントを可能にする Shipping Discount API についてマスターしていきましょう！

Shipping Discount API とは

Shipping Discount API とは、Shopify Functions の機能の中の一つで、送料に関するディスカウントをカスタマイズできます。

Shopify Functions とは Shopify のバックエンドに独自のカスタムロジックを追加することができる便利なツールです。これを利用することで、配送方法や決済オプションのカスタマイズ、ディスカウント設定の調整などが簡単にできるようになります。

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

Shopify Functions の API の種類

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

Shipping Discount API アプリの作り方

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

今回は合計の商品注文数が 10 個を超える場合に配送料を 20%引きにするというディスカウントを作成していきます。

事前準備

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

開発ストアの作成

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

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

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

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

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

アプリ作成

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

アプリの本体を作成

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

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

npm init @shopify/app@latest

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

Your project name?（アプリのディレクトリ名）
 -> shipping-discount-api-app

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

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

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

 cd shipping-discount-api-app/

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（アプリ名）
  -> shipping-discount-api-app

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

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

アプリに Shipping Discount API の機能を追加

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

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

 cd shipping-discount-api-app/

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

npx shopify app generate extension

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

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

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

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

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

cd extensions/product-discount/

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

query RunInput {
  cart {
    deliveryGroups {
      id
    }
    lines {
      quantity
    }
  }
}

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

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

ディスカウントに必要な情報	run.graphql
配送方法グループの id	deliveryGroups.id
商品の注文数	quantity

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

npm run typegen

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

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

const EMPTY_DISCOUNT: FunctionRunResult = {
  discounts: [],
};

export function run(input: RunInput): FunctionRunResult {
  // 合計注文数
  const totalOrders = input.cart.lines.reduce((acc, lineItem) => acc + lineItem.quantity, 0);

  // 合計注文数が 10 を超える場合に配送料のディスカウントを実行する
  if (totalOrders > 10) {
    return {
      discounts: [
        {
          targets: input.cart.deliveryGroups.map((deliveryGroup) => ({
            deliveryGroup: { id: deliveryGroup.id },
          })),
          message: '合計注文数が10を超えたので配送料を20%OFF',
          value: {
            percentage: {
              value: '20',
            },
          },
        },
      ],
    };
  }
  return EMPTY_DISCOUNT;
}

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

scopes = "write_products,write_discounts"

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

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

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

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

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

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

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

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

ストアで Shipping Discount API を有効化

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

Shipping Discount API を有効化させるためには、GraphQL Admin API を叩く必要があります。今回は Shopify が提供している「Shopify GraphiQL App」というアプリを使用して Admin GraphQL を叩いていきます。「Shopify GraphiQL App」についてはこちらの記事で詳しく解説しているのでよければ読んでみてください。

こちらから「Shopify GraphiQL App」をインストールできます。

▼ 「Shopify GraphiQL App」インストール画面

「Shop URL」の項目にはアプリをインストールストアのドメインを入力します。最初に作成した開発ストアのドメインを入力してください。

「Admin API」の項目では、「Shopify GraphiQL App」に許可するアクセススコープを選択します。「Select all」をクリックしてください。

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

「インストール」をクリックしてください。

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

下記のクエリを使用して Shipping Discount API を有効化します。YOUR_FUNCTION_ID_HERE の部分は、アプリを作成してきたディレクトリの .env ファイルに SHOPIFY_SHIPPING_DISCOUNT_ID=xxxxxxxxxxxxxxxxxx という行があると思うので、そこの xxxxxxxxxxxxxxxxxx に該当する部分に書き換えてください。

mutation {
  discountAutomaticAppCreate(
    automaticAppDiscount: {
      title: "Shipping discount"
      # .env ファイルの「SHOPIFY_SHIPPING_DISCOUNT_ID」を設定する
      functionId: "YOUR_FUNCTION_ID_HERE"
      startsAt: "2022-06-22T00:00:00"
    }
  ) {
    automaticAppDiscount {
      discountId
    }
    userErrors {
      field
      message
    }
  }
}

以上で、Shipping Discount API を有効化することができました。

有効化できているか確認してみましょう。

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

「Shipping discount」が作成されていれば有効化されています。

以上で、Shipping Discount API の有効化は完了です。

Shipping Discount API の動作確認

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

合計注文数が 10 個を超える場合に配送料が 20% OFF になっていて正常に動作していますね。

Shipping Discount API を使って実装されたおすすめアプリ

実際に Shipping Discount API を使って実装されているアプリを紹介します。

シンプル VIP 送料割引｜お手軽 VIP 会員送料無料

「シンプル VIP 送料割引｜お手軽 VIP 会員送料無料」は、特別な顧客に対して、配送料割引を実現するアプリです。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify に注文回数や注文金額に応じた自動 VIP 送料割引機能を実現できるアプリについて徹底解説｜ご利用ガイド

シンプル顧客タグ送料割引｜お手軽顧客タグ送料無料

「シンプル顧客タグ送料割引｜お手軽顧客タグ送料無料」は、顧客タグに応じて配送料を割引したり、無料にしたりできるアプリです。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify に顧客タグに応じた自動送料割引機能を追加できるアプリについて徹底解説｜ご利用ガイド

シンプル会員送料割引｜お手軽ログイン送料無料

「シンプル会員送料割引｜お手軽ログイン送料無料」は、ログイン状態に応じた自動配送料割引機能を導入できるアプリです。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify でログイン状態に応じた会員配送料割引ができるアプリについて徹底解説｜ご利用ガイド

シンプル会員初回送料割引｜お手軽初回ログイン送料無料

「シンプル会員初回送料割引｜お手軽初回ログイン送料無料」は、ログインしている顧客に対して、初回購入時に配送料割引を実現するアプリです。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify でアカウント作成後の初回購入で、送料割引ができるアプリについて徹底解説｜ご利用ガイド

まとめ

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

今回ご紹介したカート内商品の合計注文数に基づくディスカウントは、基本的な例に過ぎません。商品のメタフィールドを利用したディスカウントや、顧客情報に基づいたより高度なディスカウント設定の実現も可能です。

Shopify Functions には、今回紹介した Shipping Discount API 以外にも様々なタイプがあります。ディスカウント、配送、決済方法のカスタマイズが行えるため、これらを理解し使いこなすことで、開発の幅が大きく広がります。このチャンスに、ぜひとも深く探求してみてください！

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

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

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