サムネイル

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

目次

はじめに

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

今回の記事でわかること

  • Shopify Functions の概要
  • Cart Transform API の概要
  • Cart Transform API の実装方法

今回の記事を読んで、カート内の商品の表示のカスタマイズを可能にする Cart Transform API についてマスターしていきましょう!

Cart Transform API とは

Cart Transform API とは、Shopify Functions の機能の中の一つで、カート内の商品を柔軟にカスタマイズできるようになります。

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

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

Shopify Functions の API の種類

Shopify Functions では、Cart Transform API だけではなく、多種多様な API が提供されており、それぞれ異なるカスタマイズ処理を実行できます。現在利用可能な API の種類とその概要を一覧表にしてまとめました。

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

Cart Transform API アプリの作り方

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

今回はカート内の商品をギフトカードとのセット商品としてバンドルするという処理を行なっていきます。

事前準備

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

開発ストアの作成

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

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

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

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

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

アプリ作成

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

アプリの本体を作成

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

  1. ターミナルを立ち上げて、アプリを作成したいディレクトリで以下のコマンドを実行します。
npm init @shopify/app@latest
  1. コマンド実行後、プロジェクト名や使用する言語などを聞かれるのでそれぞれ以下のように答えてください。
Your project name?(アプリのディレクトリ名)
 -> cart-transform-api-app

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

For your Remix template, which language do you want?(使用する言語)
 -> Typescript
  1. アプリのディレクトリに移動します。
 cd cart-transform-api-app/
  1. アプリに必要なライブラリをインストールします。
npm install
  1. 以下のコマンドを実行して、アプリのローカルサーバーを起動します。
npm run dev

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

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

App name(アプリ名)
  -> cart-transform-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

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

アプリに Cart Transform API の機能を追加

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

  1. アプリのディレクトリに移動します。
 cd cart-transform-api-app/
  1. 以下の拡張機能を作成するコマンドを実行して、アプリに拡張機能を追加します。
npx shopify app generate extension

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

Type of extension?(作成する拡張機能の種類)
  ->  Cart transformer - Function

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

What would you like to work in?(使用する言語)
  -> TypeScript
  1. インストールした拡張機能のディレクトリに移動します。
cd extensions/cart-transformer/
  1. run.graphql を以下のコードに書き換えます。
query RunInput {
  cart {
    lines {
      id
      quantity
      merchandise {
        __typename
        ... on ProductVariant {
          id
          product {
            title
          }
        }
      }
    }
  }
}

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

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

ディスカウントに必要な情報run.graphql
カートラインアイテムの idcart.lines.id
商品のバリアントの idmerchandise.id
商品のタイトルmerchandise.product.title
  1. run.graphql を元に型 RunInput を生成します。
    以下のコマンドを実行して型を生成します。この型は、次に編集するrun.ts ファイルで使用されます。run.ts は実際にバリデーション処理を書いていくファイルです。
npm run typegen
  1. 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,
            },
          ],
        },
      }),
    ),
  };
}
  1. アクセススコープの更新
    shopify.app.toml の scopes を以下のように更新してください。
scopes = "write_products,write_cart_transforms"
  1. アプリのディレクトリに移動してアプリをデプロイします。
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 Transform API を搭載することができました。

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

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

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

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

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

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

ストアで Cart Transform API を有効化

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

Cart Transform 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」をクリックしてください。
Select all をクリック

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

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

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

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

mutation {
  cartTransformCreate(functionId: "YOUR_FUNCTION_ID_HERE", blockOnFailure: false) {
    cartTransform {
      id
      functionId
    }
    userErrors {
      field
      message
    }
  }
}

以上で、Cart Transform API の有効化は完了です。

Cart Transform API の動作確認

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

各商品がギフトカードとのセット商品になっていて正常に動作していますね
動作確認

Cart Transform API を用いたアプリの紹介

以下のようなアプリでは、Cart Transform API を用いて実装されています。

シンプルセット販売|お手軽クロスセル

「シンプルセット販売|お手軽クロスセル」はクロスセルを促すアプリです。セット購入時に割り引きを設定して、クロスセルを促します。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify でセット販売(クロスセル)を簡単に実現できるアプリについて徹底解説|ご利用ガイド

シンプルセット販売|お手軽クロスセル

シンプル延長保証|お手軽保証付き商品販売

「シンプル延長保証|お手軽保証付き商品販売」は Shopify ストアに保証付与機能を導入できるアプリです。こちらのアプリを利用すれば、任意の商品に対して任意の保証商品を付与できます。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify に保証商品や保険商品を作成し延長保証機能を実現できるアプリについて徹底解説|ご利用ガイド

シンプル延長保証|お手軽保証付き商品販売のバナー

シンプルボリュームディスカウント|お手軽まとめ買い割引

「シンプルボリュームディスカウント|お手軽まとめ買い割引」は、商品毎にボリュームディスカウントを実現できるアプリです。割引率・定額割引による割引ができます。こちらからアプリをインストールできます。

詳しい使い方については、以下のご利用ガイドをご覧ください。
Shopify で商品毎にボリュームディスカウント(まとめ買い割引)を実現できるアプリについて徹底解説|ご利用ガイド

シンプルボリュームディスカウント|お手軽まとめ買い割引のバナー

まとめ

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

今回紹介したカート内商品をギフトカードと組み合わせるアイデアは入門編にすぎません。商品のメタフィールドを駆使した割引や、顧客データに基づく複雑な割引設定など、さらに高度なカスタマイズが可能です。

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

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

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

おすすめ Shopify アプリ

シンプルブログタグ絞り込み|お手軽タグ一覧挿入のアイコン

シンプルブログタグ絞り込み|お手軽タグ一覧挿入

シンプルなブログ絞り込みアプリ。ストアにタグによるブログ絞り込み機能を簡単に導入できます。

シンプル会員商品割引|お手軽ログイン商品セール設定のアイコン

シンプル会員商品割引|お手軽ログイン商品セール設定

シンプルな日本製の商品割引アプリ。ログインしている顧客を対象とした商品割引を簡単に実現できます。

シンプルボリュームディスカウント|お手軽まとめ買い割引のアイコン

シンプルボリュームディスカウント|お手軽まとめ買い割引

商品毎に、割引テーブルに応じたまとめ買い割引を行えます。

シンプルノベルティ|お手軽ギフト特典のアイコン

シンプルノベルティ|お手軽ギフト特典

シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。シンプルな日本製のノベルティ付与アプリ。条件を満たした注文に対してノベルティ商品を自動で付与します。

シンプルおひとり様一点限りの購入制限設定のアイコン

シンプルおひとり様一点限りの購入制限設定

シンプルな日本製のおひとり様一点限りの購入制限アプリ。商品毎に、おひとり様一点限りの購入制限を行えます。

シンプル期間限定セール|お手軽バーゲンセールのアイコン

シンプル期間限定セール|お手軽バーゲンセール

「シンプル期間限定セール|お手軽バーゲンセール」は、ストアの全商品に対して期間限定セールを簡単に実現できるアプリです。

シンプルVIP会員商品割引|お手軽VIP商品セール設定のアイコン

シンプルVIP会員商品割引|お手軽VIP商品セール設定

シンプルな日本製の条件に応じた商品割引アプリ。特別な顧客を対象とした商品割引を簡単に実現できます。

シンプル決済カスタマイズ|お手軽条件ごとの決済方法のアイコン

シンプル決済カスタマイズ|お手軽条件ごとの決済方法

シンプルな日本製の決済カスタマイズアプリ。チェックアウト画面で、特定の条件に基づいて、決済方法の非表示を行えます。

シンプル配送カスタマイズ|お手軽条件ごとの配送方法のアイコン

シンプル配送カスタマイズ|お手軽条件ごとの配送方法

シンプルな日本製の配送カスタマイズアプリ。指定した条件下で特定の配送方法を非表示にできます。

シンプルクラウドファンディング|お手軽自社クラファンのアイコン

シンプルクラウドファンディング|お手軽自社クラファン

シンプルなクラウドファンディングアプリ。商品毎にクラウドファンディングを実現できます。

シンプル会員初回注文割引|お手軽初回ログインセール設定のアイコン

シンプル会員初回注文割引|お手軽初回ログインセール設定

シンプルな日本製の条件に応じた注文割引アプリ。ログインしている顧客を対象とした初回購入時の注文割引を簡単に実現できます。

シンプル顧客タグ注文割引|顧客タグ BtoB 割引のアイコン

シンプル顧客タグ注文割引|顧客タグ BtoB 割引

シンプルな日本製の注文割引アプリ。顧客タグに応じて注文を割引したり、無料にしたりできます。

シンプル会員初回送料割引|お手軽初回ログイン送料無料のアイコン

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

シンプルな日本製の条件に応じた送料割引アプリ。ログインしている顧客を対象とした初回購入時の配送料割引を簡単に実現できます。

シンプル会員送料割引|お手軽ログイン送料無料のアイコン

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

シンプルな日本製の会員配送料割引アプリ。ログイン状態に応じて配送料を割引できます。

シンプル会員注文割引|お手軽ログインセール設定のアイコン

シンプル会員注文割引|お手軽ログインセール設定

シンプルな日本製の注文割引アプリ。顧客のログイン状態に応じて注文を自動割引できる。

シンプルセット商品在庫連携|お手軽セット商品管理の自動化のアイコン

シンプルセット商品在庫連携|お手軽セット商品管理の自動化

シンプルな日本製のセット商品在庫連携アプリ。在庫連携したセット商品販売を簡単に実現できます。

シンプルVIP注文割引|お手軽VIP会員セール設定のアイコン

シンプルVIP注文割引|お手軽VIP会員セール設定

シンプルな日本製の条件に応じた注文割引アプリ。特別な顧客を対象とした注文割引を簡単に実現できます。

シンプル延長保証|お手軽保証付き商品販売のアイコン

シンプル延長保証|お手軽保証付き商品販売

シンプルな保証付与アプリ。商品毎に保証付与ができます。

シンプルVIP送料割引|お手軽VIP会員送料無料のアイコン

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

シンプルな日本製の条件に応じた送料割引アプリ。特別な顧客を対象とした配送料割引を簡単に実現できます。

シンプル追従カート|追従購入ボタン(Buy Button)のアイコン

シンプル追従カート|追従購入ボタン(Buy Button)

シンプルな追従カートアプリ。ストアに追従カートを簡単に導入できます。

シンプル顧客タグ送料割引|お手軽顧客タグ送料無料のアイコン

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

シンプルな日本製の送料割引アプリ。顧客タグに応じて配送料を割引したり、無料にしたりできます。

シンプルパンくずリスト|お手軽 Breadcrumbsのアイコン

シンプルパンくずリスト|お手軽 Breadcrumbs

カスタマイズ性の高いパンくずをストアに表示できる!

シンプルブログ記事カスタマイズ|お手軽ブログテンプレートのアイコン

シンプルブログ記事カスタマイズ|お手軽ブログテンプレート

シンプルなブログ記事カスタマイズアプリ。ストアにブログ記事カスタマイズ機能を簡単に実現できます。

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリのアイコン

シンプルお知らせ一覧|お手軽ブログ一覧挿入アプリ

シンプルなお知らせセクションアプリ。ストアにお知らせセクションを簡単に挿入できます。

シンプルブログ記事目次|自動見出し一覧挿入のアイコン

シンプルブログ記事目次|自動見出し一覧挿入

シンプルなブログ目次生成アプリ。ストアにブログ目次を簡単に表示できます。

シンプルスライドショー|お手軽画像スライダーのアイコン

シンプルスライドショー|お手軽画像スライダー

シンプルなスライドショーアプリ。ストアにスライドショーを簡単に表示できます。

シンプル流れるロゴ|流れるロゴリスト挿入アプリのアイコン

シンプル流れるロゴ|流れるロゴリスト挿入アプリ

シンプルな流れるロゴリストアプリ。ストアに流れるロゴリストを簡単に表示できます。

シンプル名入れ|お手軽名前入りギフトオプションのアイコン

シンプル名入れ|お手軽名前入りギフトオプション

シンプルな日本製の名入れオプションアプリ。商品毎に名入れオプションを追加できます。

シンプル在庫数表示|お手軽残りわずか表示のアイコン

シンプル在庫数表示|お手軽残りわずか表示

シンプルな商品の残りわずか表示アプリ。ストアに商品の残りわずか表示を簡単に導入できます。

シンプルギフトラッピング|お手軽ギフト包装アプリのアイコン

シンプルギフトラッピング|お手軽ギフト包装アプリ

シンプルな日本製のギフトラッピングアプリ。カートページに簡単にギフト包装オプションを追加できます。

シンプル購入制限|お手軽注文制限について徹底解説のアイコン

シンプル購入制限|お手軽注文制限について徹底解説

シンプルな日本製の購入数制限アプリ。商品ごとに数量の規制を行えます。

シンプルランキング表示|お手軽ベストセラーのアイコン

シンプルランキング表示|お手軽ベストセラー

購入促進!コレクションにランキングラベルを表示してストアの人気商品をアピール

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

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

日本製の顧客タグごとの購入制限アプリ。特定のタグを持つ顧客への限定販売を簡単に実現できます。

シンプルロゴ一覧|お手軽ロゴリスト表示のアイコン

シンプルロゴ一覧|お手軽ロゴリスト表示

シンプルなロゴリストアプリ。ストアにロゴリストを簡単に導入できます。

シンプル余白調整|お手軽レイアウトのアイコン

シンプル余白調整|お手軽レイアウト

シンプルな日本製の余白調整アプリ。余白を挿入することでページデザインの調整が簡単にできます。

シンプルのし(熨斗)アプリのアイコン

シンプルのし(熨斗)アプリ

シンプルな日本製のしアプリ。のし選択機能を簡単に実現できます。

シンプル画像バナー|お手軽広告バナーアプリのアイコン

シンプル画像バナー|お手軽広告バナーアプリ

シンプルな画像バナーアプリ。ストアに画像バナーを簡単に表示できます。

シンプル Q&A|どこでも FAQのアイコン

シンプル Q&A|どこでも FAQ

シンプルな Q&A アプリ。ストアに FAQ を簡単に導入できます。

シンプルモバイルアプリバナー|スマホアプリに誘導のアイコン

シンプルモバイルアプリバナー|スマホアプリに誘導

シンプルなモバイルアプリバナー。ストアにモバイルアプリバナーを簡単に導入できます。

シンプル流れる告知|流れるお知らせ挿入アプリのアイコン

シンプル流れる告知|流れるお知らせ挿入アプリ

シンプルな流れる告知アプリ。ストアに流れる告知を簡単に導入できます。

シンプル売り切れ非表示|在庫切れ商品の表示変更のアイコン

シンプル売り切れ非表示|在庫切れ商品の表示変更

売り切れ商品を非表示にすることができる日本製アプリ。売り切れになった商品を、自動的に非表示(下書き状態)にすることができます。

シンプルレビュー|お手軽口コミのアイコン

シンプルレビュー|お手軽口コミ

シンプルな日本製のレビューアプリ。レビュー機能を簡単に実現できます。

シンプル会員限定販売|お手軽アカウント必須販売のアイコン

シンプル会員限定販売|お手軽アカウント必須販売

シンプルな日本製の会員限定販売アプリ。商品毎に、ログインしていない顧客の購入制限を行えます。

シンプル会員ランク|お手軽顧客タグ付けのアイコン

シンプル会員ランク|お手軽顧客タグ付け

日本製の会員ランク管理アプリ。条件を達成した顧客に自動でタグを追加し、顧客管理を手助けします。

シンプル Wishlist|お手軽お気に入りのアイコン

シンプル Wishlist|お手軽お気に入り

商品数・お気に入り数の上限なしで使えるお手軽お気に入りアプリ。簡単にお気に入り機能を実現できます。

シンプル Coming Soon|商品ページ発売予告アプリのアイコン

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

シンプルな日本製の Coming Soonアプリ。商品毎に発売予告を行えます。

シンプルセット販売|お手軽クロスセルのアイコン

シンプルセット販売|お手軽クロスセル

シンプルな日本製のセット販売アプリ。セット販売でのクロスセルを簡単に実現できます。

シンプル予約販売|受注販売や在庫切れ商品販売で使えるのアイコン

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

日本製の予約販売アプリ。予約販売や受注販売、在庫切れ商品販売を簡単に実現できます。

シンプル販売期間設定|商品ごとに期間限定販売のアイコン

シンプル販売期間設定|商品ごとに期間限定販売

シンプルな日本製の期間限定販売アプリ。商品ごとに販売期間を設定することができます。

シンプルVIPプログラム|お手軽VIP会員限定販売のアイコン

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

日本製の VIP 限定販売アプリ。特別な顧客を対象とした限定商品の販売を簡単に実現できます。

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリのアイコン

シンプルポイント|追加料金なしで使えるお手軽ポイントアプリ

シンプルな日本製の定額ポイントアプリ。顧客はポイントをそのまま利用することができます。

おすすめ記事