弊社の担当したプロジェクトでサイトにEC機能を追加したいというを話をいただくことが度々あります。
参考事例）
・ 秘密厨房 -Himitsu Kitchen- https://himitsu.kitchen/
・ Julie - ジュリー｜世界中のワインからあなただけの１本を https://julie.page/

その際に弊社では Shopify の利用をおすすめすることが多いのですが、どれだけ簡単にECのカート機能を追加できるのかというのをご紹介します。

カート機能を追加する際に利用するのは Shopify の Storefront API を利用します。
Storefront APIのメリットは、Shopifyのサービス上にサイトを移行するわけではなく、既存のコードにJavaScriptのコードを追加するだけでECカート機能が構築できるため、開発コストを下げることができます。
またサイト構成の自由度や、使い慣れたテンプレートエンジンやフレームワークの利用が可能になります。
Shopifyで構築する場合、Liquidというテンプレート言語を利用する必要があり、不慣れな人には辛いかもしれません。

Shopify Storefront API ドキュメント

JS・iOS・AndroidのSDKが Storefront API には用意されており、それを使うだけで簡単にShopifyで管理されている商品データやカートを取り扱うことができます。

今回はウェブサイトの話なので、JSのSDKを利用した方法をご紹介します。

必要なパッケージのインストール

$yarn add shopify-buy

使い方

カートの作成

const fetch = require('node-fetch')
const shopify = require('shopify-buy')

// Checkout（カートのこと）を作成する

const shopifyClient = shopify.buildClient(shopifyConfig, fetch)
// Doc : https://github.com/Shopify/js-buy-sdk#creating-a-checkout
const checkout = await shopifyClient.checkout.create()

// 作成した Checkout から Checkout tokenを取得する
const checkoutToken = checkout.id
// 過去に作成した Checkout token から作成済みの Checkout を取得することもできる
const checkout = await shopifyClient.checkout.fetch(checkoutToken)

カートに任意の情報追加

カートに対して何かしら任意の情報を追加することができます。
Shopify のカートには CustomAttributesが用意されており、任意の情報を付与することが可能です。それらの内容はShopifyの受注画面で確認することが可能です。
ユースケースはサービスで利用しているニックネームを追加する場合や、配送希望日などを追加する場合にご利用いただけます。

// Doc : https://github.com/Shopify/js-buy-sdk#fetching-a-checkout
const shopifyClient = shopify.buildClient(shopifyConfig, fetch)
const userName = 'サイト上で使っているニックネームなどカートに保存したい情報'
const input = { customAttributes: { key: 'userName', value: `${userName}` } }
await shopifyClient.checkout.updateAttributes(checkoutToken, input)

カートに商品の追加

const shopifyVariantId = '1234567891011'
// ※ Shopify の商品情報についているID
// Shopifyの商品画面のURLに表示されている Product ID とは異なるので注意

const variantId = btoa(`gid://shopify/ProductVariant/${shopifyVariantId}`)
// カートに追加するデータを作成する
// カートの商品単位でも　CustomAttributes に情報を追加することができる
// 今回はカート画面で表示する内容（商品の画像や値段）を追加
const lineItemsObject = {
  variantId,
  quantity: 1,
  customAttributes: [
    { key: 'price', value: `${payload.price}` },
    { key: 'imageUrl', value: `${payload.coverImageUrl}` },
  ],
}
const shopifyClient = shopify.buildClient(shopifyConfig, fetch)
const checkout = await shopifyClient.checkout.addLineItems(checkoutToken, lineItemsObject)

決済画面に遷移

決済ボタンなどをクリックされた際に以下のコードを実行することで遷移が可能です。

const checkout = await shopifyClient.checkout.fetch(checkoutToken)
location.href = checkout.webUrl

まとめ

このような形でSDKを利用してカートの機能を追加することができました。
残るはそれぞれ必要な機能を関数化して、画面から呼び出してあげれば良いだけです。
反響があれば、もう少し詳しい実装も紹介できればと思います。