Hedgehog SDK

Appearance

Return to top
On this page

物販

概要

簡易的な物販機能とカート機能を提供します。

物販は複数のイベントに対して紐づける事が可能で、例えばイベント 1、2、3 があった時に

  • 「イベント記念 T シャツ」はイベント 1 でのみ購入可能
  • 「ライブ会場ステッカー」は全てのイベントで購入可能

といった運用が可能です。

サンプル

ここでは、物販を作成してフロントエンド側で情報を取得するまでの流れを解説します。

TIP

ステップ 1 ～ 3 は、Hedgehog Dashboard でも同様の操作が可能です。

WARNING

以下サンプルは、環境変数に STAGE_UUID がセットされている前提になります。

1. イベントを作成する admin

まずはイベント作成します。

ts
const event = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .event.admin.create({
    title: "〇〇イベント",
    isPublic: true,
    isFree: true,
    startDate: new Date(Date.now() + 10 * 24 * 60 * 60 * 1000).toISOString(),
    image: new File([], ""), // 本来はイベントのタイトル画像を入力します
  });

2. 物販を作成する admin

イベントと紐づける物販を作成します。

物販作成のためには支払先情報が必要なので、先に支払い先情報を取得し、得られたデータを物販に紐づけます。

ts
// 支払先情報取得
const payee = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .admin.payee.list();

// 物販作成
const product = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .product.admin.create({
    name: "記念Tシャツ",
    images: [
      {
        file: new File([], ""), // 本来は商品画像を入力します
        index: 1,
      },
    ],
    deliveryChargeFlag: false,
    salesFlag: true,
    stripeAccountUuid: payee[0].uuid,
    tax: 10,
    description: "商品説明",
    amount: 1000,
  });

WARNING

現在の所送料設定には対応していません。価格は全て送料込みで記載して下さい。

3. 物販をイベントに紐づける admin

作成したイベントと物販を紐づけます。

ts
  await product.admin.associate(event.uuid);

ここまでで、物販の作成は完了となります。

4. フロントエンドを作成する

イベントに使用する web サイトを作成します。イベントの趣旨に沿った web サイトを、自由に作成してください。

5. 物販情報を取得する

イベントに紐づく物販をすべて取得します。

ts
const products = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .event.ref("イベントのUUID")
  .products()
  .all();

console.log(products[0].name); // 記念Tシャツ

あるいは、イベントに関わらず全ての商品を取得する事も可能です。

ts
const allProducts = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .product.list()
  .all();

ここでは一覧取得時に all() を使用していますが、数が多くなるようであれば page() を使用して取得数を制限し、フロントエンド上でもページネーションを実装する必要があるでしょう。

hedgehog では簡易的に商品の在庫も管理しており、以下のように商品の在庫を核にする事が出来ます。

ts
const stock = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .product.ref("物販のUUID")
  .stock();

6. 物販の購入ダイアログを実装する

WARNING

ダイアログのリニューアルを検討しているため、リニューアル後に追記します。

7. カート機能を利用する

購入ダイアログを利用するためにはカート機能を利用すると便利です。

カートを作成するには以下のようにします。

ts
const cart = await Hedgehog.stage
  .ref(process.env.STAGE_UUID as string)
  .product.cart.create();

作成したカートは以下のように操作できます。

ts
// 商品追加
cart.add(product, 1, stock);

// 個数変更
cart.updateCount(product.uuid, 2);

// カート内にあるアイテムの在庫情報更新
await cart.updateStock();

// 商品削除
cart.remove(product.uuid);

// カートを空にする
cart.clear();

購入ダイアログへデータを渡す際は、以下の関数を呼び出して適切なフォーマットのデータを取得します。

ts
  const data = cart.makeLiquidationData();