弊社の担当したプロジェクトでサイトにEC機能を追加したいというを話をいただくことが度々あります。 参考事例） ・ 秘密厨房 -Himitsu Kitchen- https://himitsu.kitchen/ ・ Julie - ジュリー｜世界中のワインからあなただけの１本を https://julie.page/
その際に弊社では Shopify の利用をおすすめすることが多いのですが、どれだけ簡単にECのカート機能を追加できるのかというのをご紹介します。
カート機能を追加する際に利用するのは Shopify の Storefront API を利用します。 Storefront APIのメリットは、Shopifyのサービス上にサイトを移行するわけではなく、既存のコードにJavaScriptのコードを追加するだけでECカート機能が構築できるため、開発コストを下げることができます。 またサイト構成の自由度や、使い慣れたテンプレートエンジンやフレームワークの利用が可能になります。 Shopifyで構築する場合、Liquidというテンプレート言語を利用する必要があり、不慣れな人には辛いかもしれません。
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を利用してカートの機能を追加することができました。 残るはそれぞれ必要な機能を関数化して、画面から呼び出してあげれば良いだけです。 反響があれば、もう少し詳しい実装も紹介できればと思います。
