商品に対して金額を上乗せできる機能を作成したい

[nekonoha]

ShopifyでBoothのBOOST↑機能のように特定の商品に対して金額を上乗せして購入できる機能を作成したいのですが、実現可能でしょうか。

Shopifyのデフォルト機能でチップ機能がありますが、これは商品に紐づかないのと、最大でも注文の合計金額までの制限があるので、金額の制限なしに商品のバリアントに紐づけられるようにしたいです。

もし実現可能であれば方法を教えていただけるとありがたいです。

[bluetree · Accepted solution]

@nekonoha 以下の方法で商品に対して金額を上乗せできます。ご検討お願いします。

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

なお、shopify plusプランでないとこちらは実現できません。

※ 以下、shopify appをの知識がある前提の説明ですので一部省略しています。

詳細はBuild an extension-only appをご確認ください。

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

1. Shopify CLI を使用して新しい Checkout UI Extension を作成します。

shopify app generate extension --template=checkout_ui

2. 拡張機能のファイルを編集し、ユーザーがチップ金額を入力できる UI を追加します。

shopify.extension.tomlの例:

[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.checkout.cart-line-item.render-after"

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}
    />
  );
}

3.UI Extensionをデプロイします。

shopify app deploy

4. チェックアウト画面に UI を追加します。
管理画面のチェックアウト設定で、注文サマリーセクションに作成した UI Extension を追加します。
これでチップを入力するたびに、カートの line item にチップ代が設定されます。

なお、UI ExtensionについてはCheckout Blocks  アプリでも実装可能です。

2. Cart Transform Function の実装

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

shopify app generate extension --type=cart_transform

2. `src/run.graphql`ファイルで、チップの操作に必要な GraphQL スキーマを定義します。
run.graphql`の例:

query RunInput {
  cart {
    lines {
      id
      cost {
        amountPerQuantity {
          amount
        }
      }
      # UI側で"_チップ代"とした場合、こちらも"_チップ代"としてください
      attribute(key: "チップ代") {
        key
        value
      }
    }
  }
}

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

shopify app function generate

3. `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,
  };
}

4. Function をデプロイします。

shopify app deploy

5. Cart Transform Function を有効化します。
先にFunction一覧を取得し、該当のcart_transformのFunction Idをメモします

query shopifyFunctions {
  shopifyFunctions(first: 30) {
    nodes {
      app {
        title
      }
      apiType
      title
      id
    }
  }
}

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

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

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