1. Top
  2. ブログ一覧
  3. 【Shopify Tips】特定の商品に任意の金額を上乗せして支払う機能の実装方法
Eコマース

【Shopify Tips】特定の商品に任意の金額を上乗せして支払う機能の実装方法

公開日

2024.12.04

【Shopify Tips】特定の商品に任意の金額を上乗せして支払う機能の実装方法のサムネイル

特定の商品に対して、ユーザーが任意の金額を上乗せして支払う機能を実現したいと考えていませんか？ この機能は、寄付オプションやチップを追加したい場合に特に有用です。本記事では、初心者が簡単に設定できるShopify標準機能の活用方法と、エンジニア向けにカスタマイズ手法を紹介します。この設定により、ユーザー体験を向上させ、収益増加を目指すことが可能です。

Shopify標準の設定機能を活用する

チップ機能を活用する

Shopifyでは、特定の商品やサービスに対してチップを受け取る機能を標準で提供しています。

手順

  1. Shopify管理画面で、「設定」 > 「チェックアウト」 に進みます。
  2. 「チェックアウト時にチップオプションを表示する」オプションを有効にします。
  3. 表示されるチップ金額をカスタマイズします。
    • パーセンテージ（例: 5%、10%）を3段階まで設定可能。
    • または、お客様ご自身で金額を指定して追加することもできます。
  4. 保存をクリックして設定を完了します。

Capture

チップ機能を特定の商品に関連付ける

チップ機能は通常全体のチェックアウトプロセスで表示されますが、特定の商品の購入時にのみチップを促す方法もあります。以下の手順を参考にしてください：

  1. 商品ページにチップ機能を説明するメッセージを追加します。
    • 「この商品をご購入の際、任意のチップを追加して応援いただけます。」と記載。
  2. チェックアウト時に、購入者がチップを追加するよう明示的に誘導するカスタムメッセージを追加します。

例:

  • 商品名: アーティスト支援ポスター
  • チップメッセージ: 「収益の一部はアーティストの活動をサポートします。」

詳細な設定手順はShopify公式ガイドを参照してください。

細かくカスタマイズする　※技術者向け

Checkout UI Extension と Cart Transform Function を活用したカスタマイズ

Shopify Functions の一部である Cart Transform を使用すると、カートのアイテムに対して動的な変更が可能になります。これを Checkout UI Extension と組み合わせることで、購入者が入力した金額を基にカートを更新し、任意のチップ金額を追加する仕組みを構築できます。

1. Checkout UI Extension のセットアップ

  1. Shopify CLI を使用して新しい Checkout UI Extension を作成します。
shopify app generate extension --template=checkout_ui
  1. 拡張機能のファイルを編集し、ユーザーがチップ金額を入力できる UI を追加します。

src/Checkout.tsxの例:

チップ代の上限は要件に合わせて変更してください。

import {
  reactExtension,
  Stepper,
  useCartLineTarget,
  useApplyCartLinesChange,
} from "@shopify/ui-extensions-react/checkout";

// 各line itemにチップ代を追加するコンポーネント追加
export default reactExtension(
  "purchase.checkout.cart-line-item.render-after",
  () => <Extension />
);

function Extension() {
  const applyCartAttributeChange = useApplyCartLinesChange();

  const MAX_TIP_AMOUNT = 10000;
  const cartId = useCartLineTarget().id;

  // チップの変更をline item attributeとして適用する
  const handleChange = async (value: number) => {
    // 直接の値の変更を防ぐ
    if (value < 0) {
      value = 0;
    } else if (value > MAX_TIP_AMOUNT) {
      value = MAX_TIP_AMOUNT;
    }

    await applyCartAttributeChange({
      id: cartId,
      type: "updateCartLine",
      attributes: [
        {
          key: "チップ代",
          value: value.toString(),
        },
      ],
    });
  };

  // チップの金額を変更するフォーム
  return (
    <Stepper
      label={`チップ (最大 ${MAX_TIP_AMOUNT})`}
      min={0}
      max={MAX_TIP_AMOUNT}
      step={100}
      onChange={(value) => handleChange(value)}
      value={0}
    />
  );
}
  1. チェックアウト画面に UI を追加します。

管理画面のチェックアウト設定で、注文サマリーセクションに作成した UI Extension を追加します。

これでチップを入力するたびに、カートの line item にチップ代が設定されます。

2. Cart Transform Function の実装

Cart Transform Function を使用して入力されたチップ金額を商品価格に上乗せするロジックを実装します。

  1. 新しい Function を作成します：
shopify app generate extension --type=cart_transform
  1. src/run.graphqlファイルで、チップの操作に必要な GraphQL スキーマを定義します。

run.graphqlの例:

query RunInput {
  cart {
    lines {
      id
      cost {
        amountPerQuantity {
          amount
        }
      }
      attribute(key: "チップ代") {
        key
        value
      }
    }
  }
}

定義したら、extension ディレクトリにてshopify app function generateを実行して function が受け取るデータの型を生成します。

  1. src/run.tsにロジックを追加します。

run.tsの例:

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

const NO_CHANGES: FunctionRunResult = {
  operations: [],
};

export function run(input: RunInput): FunctionRunResult {
  const tipItems = input.cart.lines.filter((line) => line.attribute?.value);

  // チップが設定されていない場合は何もしない
  if (tipItems.length === 0) {
    return NO_CHANGES;
  }

  const operations: CartOperation[] = tipItems.map(
    ({ id, cost, attribute }) => {
      const price = Number(cost.amountPerQuantity.amount);
      const tip = Number(attribute?.value || 0);
      const total = price + tip;

      return {
        update: {
          cartLineId: id,
          price: {
            adjustment: {
              fixedPricePerUnit: { amount: total },
            },
          },
        },
      };
    }
  );

  return {
    operations,
  };
}
  1. Function をデプロイします。
shopify app deploy
  1. Cart Transform Function を有効化します。

Admin API を使用して、Function を有効化します。

mutation CreateCartTransform {
  cartTransformCreate(functionId: "<Function Id>") {
    cartTransform {
      id
      functionId
    }
    userErrors {
      message
    }
  }
}

これで、チップ金額の変更を検知して、カートの価格に上乗せされます。

注意点

  • UI Extension と Function が適切に実行されるかを確認するために十分にテストを行ってください。

参考文献