2023.07.18[Tue]

Shopify Plus以外でも、Shopifyの決済画面をカスタマイズする方法 (Shopify Functions)

  • Shopify

目次

こんにちは。
ディレクターの田辺です。

「Shopifyのチェックアウト画面は、Shopify Plusじゃないとカスタマイズできない」
そんなふうに考えていた時期が私にもありました。

確かに、以前から、Shopify Plusではない、ベーシックプランやスタンダードプランであっても、ロケールファイルで設定されている文言であれば、チェックアウト画面の文言を変更可能でした。

しかし、Shopify Plusでなくとも、文言変更以外の変更を、チェックアウト画面に加えることができます。

今回は、古くからShopifyをご存知である方ほど盲点になるShopify Functionsを使用したチェックアウトのカスタマイズ方法をご紹介します。

Shopify Functionsとは

https://shopify.dev/docs/api/functions

Shopifyアプリの拡張機能の1つです。
Shopifyアプリの拡張機能はいくつか用意されていますが、みなさんがよく見るのは、何かしらアプリをインストール時、テーマカスタマイズ画面に追加されるアプリブロックではないでしょうか？

Shopify Functionsも、そのようなShopifyアプリの拡張機能の1つとして提供されています。

Shopify Functionsを利用することで、下記のようなことができます。

  • 配送方法や支払方法を、カート内の商品や顧客タグなどに応じて出し分ける
  • 通常のディスカウント設定ではできないような割引設定を作る (例えば、10,000円以下の購入の時のみ利用可能なディスカウントなど)

残念ながら、Shopify Functionsが制御できるのは、ロジックのみです。
チェックアウト画面に何か要素を追加する、ことはできません。
それは、Checkout UI Extensionsという拡張機能が担っており、Shopify Plusでのみ利用できます。

しかし、Checkout UI Extensionsは、「要素を追加する」ことはできても、チェックアウト画面に元々存在する要素に変更を加えることはできません。
例えば、配送方法や支払方法を選択するUIは、Shopifyのチェックアウト画面に元々備わっているものです。こういったものを変更したり削除したりすることは、Checkout UI Extensionsにはできないのです。

配送方法や支払方法を選択するUIにおいて、何をどうやって表示させるか、というロジックのカスタマイズを担っているのがShopify Functionsというわけです。

チュートリアルを実際にやってみる

https://shopify.dev/docs/api/functions#getting-started
こちらのページに懇切丁寧なチュートリアルがありますので、ぜひお試しください。

本記事では、上記ページで紹介されているチュートリアルに少しだけ手を加えて、実際にありそうなシナリオにしてみます。

シナリオ

  1. 代引決済をさせたくない商品がある
  2. 商品情報に「代引決済が可能かどうか」のメタフィールド(custom.enableDaibiki)がある
  3. 代引決済をさせたくない商品が1つでもカートに含まれていたら代引決済をチェックアウト画面の支払方法の選択画面で非表示にする

ベースとなるチュートリアル

https://shopify.dev/docs/apps/checkout/payment-customizations/getting-started
こちらのチュートリアルをベースにします。
まず、上記チュートリアルを進めてください。
なお、上記ページのStep 3まで進めていただければ大丈夫です。
"Next Steps" の  "Add configuration" 以降は、本記事では扱いません。

準備

商品情報に、custom.enableDaibiki というメタフィールドを追加します。
タイプはtrue or flase(boolean)とします。

そして、テストしたい商品のcustom.enableDaibikiの値をfalseにしておきます。
準備は以上です。

チュートリアルからの変更点

input.graphqlを下記のように変更し、カートに投入された商品のメタフィールドcustom.enableDaibikiを取得できるようにします。

query Input {
  cart {
    lines {
      merchandise {
        __typename
        ... on ProductVariant {
          product {
            metafield(namespace: "custom", key: "enableDaibiki") {
                value
            }
          }
        }
      }
    }
  }
  paymentMethods {
    id
    name
  }
}

input.graphqlを保存後、下記を実行します。

npm run shopify app function typegen

次に、src/index.jsの内容を下記に変更します。

// @ts-check

// Use JSDoc annotations for type safety
/**
* @typedef {import("../generated/api").InputQuery} InputQuery
* @typedef {import("../generated/api").FunctionResult} FunctionResult
* @typedef {import("../generated/api").HideOperation} HideOperation
* @typedef {import("../generated/api").ProductVariant} ProductVariant
*/

/**
* @type {FunctionResult}
*/
const NO_CHANGES = {
    operations: [],
  };
  
  // The @shopify/shopify_function package will use the default export as your function entrypoint
  export default /**
      * @param {InputQuery} input
      * @returns {FunctionResult}
      */
    (input) => {  
      const cartLineProductMetafields = input.cart.lines
      .filter(line => line.merchandise.__typename == "ProductVariant")
      .map(line => {
        const variant = /** @type {ProductVariant} */ (line.merchandise);
        return variant.product.metafield?.value;
      });
      console.error(cartLineProductMetafields);
      if(!cartLineProductMetafields.some(metafield => metafield === "false")) {
        return NO_CHANGES;
      }  
  
      // Find the payment method to hide
      const hidePaymentMethod = input.paymentMethods
        .find(method => method.name.includes("Cash on Delivery"));
  
      if (!hidePaymentMethod) {
        return NO_CHANGES;
      }
  
      // The @shopify/shopify_function package applies JSON.stringify() to your function result
      // and writes it to STDOUT
      return {
        operations: [{
          hide: {
            paymentMethodId: hidePaymentMethod.id
          }
        }]
      };
    };

※ custom.enableDaibikiのタイプはbooleanですが、JSONで返却される都合上、stringとして扱われます。

src/index.jsを保存後、下記を実行しデプロイします。

npm run deploy

最初に実践いただいた
https://shopify.dev/docs/apps/checkout/payment-customizations/getting-started
を完了されていれば、
その際に作成した「決済のカスタマイズ」に今回の変更が反映されます。
※「決済のカスタマイズ」に何が設定されているかは、「ストア管理画面 > 設定 > 決済」のページ下部から確認できます。

実際に代引不可にした商品をカートに入れチェックアウトを進めていただくと、支払方法の選択画面にて「代引引換」が非表示になっていることを確認いただけるはずです。

アプリを使って簡単にチェックアウトカスタマイズ

「自分で開発するのはちょっと難しいので、もっと簡単にShopify Functionsを利用できないか」という方は、Shopify Functionsを使ったShopifyアプリが既にありますので、そちらをお試しになると良いでしょう。

HidePay: Hide Payment Methods
https://apps.shopify.com/hidepay?locale=ja

HideShip:Hide Shipping Methods
https://apps.shopify.com/hideship-hide-shipping-methods?locale=ja

もちろん、Shopify Plusではないストアにインストールして使用可能です。

まとめ

チュートリアルで紹介した以外にも、
「顧客タグに応じて支払方法や配送方法を出し分ける」ことや、
「配送先に応じて配送方法を出し分ける」こともできます。

ご興味あれば、お問い合わせいただければ、ある程度までは無料でご相談に乗りますので、お気軽にお問い合わせください。

お問い合わせフォーム: https://techlab.q-co.jp/contact/

それでは。

Share

Shopifyでカゴ落ちメールを送る方法Shopifyの決済アイコンをヘッダー・フッターに追加する方法