roulette-app-client

Shopifyのテーマ上からルーレットアプリとのやりとりができるJavaScriptクライアントライブラリです。

インストール

NPM

npm install roulette-app-client

CDN

<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>

使い方

npmでの利用

import { RouletteClient } from 'roulette-app-client';

const client = new RouletteClient('{{ request.origin }}');

ブラウザ (UMD)

<script src="https://unpkg.com/roulette-app-client@latest/dist/index.umd.js"></script>
<script>
  const client = new RouletteAppClient.RouletteClient('{{ request.origin }}');
</script>

APIリファレンス

コンストラクタ

new RouletteClient(baseUrl)

RouletteClientの新しいインスタンスを作成します。

パラメータ:

• baseUrl (string): ShopifyストアのベースURL（例: {{ request.origin }}）

例:

const client = new RouletteClient('{{ request.origin }}');

メソッド

getBonusItems(customerId)

指定された顧客のボーナスアイテムを取得します。

パラメータ:

• customerId (string): 顧客ID

戻り値:

• bonusItems: 利用可能なボーナスアイテムの配列
• hasChallengedToday: パラメータで指定した顧客が本日すでにチャレンジ済みかどうか

例:

try {
  const response = await client.getBonusItems('{{ customer.id }}');
  console.log('ボーナスアイテム:', response.bonusItems);
  console.log('本日チャレンジ済み:', response.hasChallengedToday);
} catch (error) {
  console.error('ボーナスアイテムの取得に失敗しました:', error);
}

challengeRoulette(customerId)

指定された顧客でルーレットチャレンジを実行します。

パラメータ:

• customerId (string): 顧客ID

戻り値:

• result.enable: チャレンジできたかどうか(顧客が1日に複数回チャレンジした場合はtrueを返します。チャレンジ済みかどうか判定する際は、getBonusItems.hasChallengedTodayで判定してください。)
• result.flowResult: Shopify Flowの実行結果
• result.item: チャレンジで獲得したアイテム(獲得アイテムがない場合はnull)
• error: エラーメッセージ

例:

try {
  const response = await client.challengeRoulette('{{ customer.id }}');
  
  if (response.error) {
    console.error('エラー:', response.error);
    return;
  }
  
  if (response.result.enable && response.result.item) {
    console.log('獲得アイテム:', response.result.item.title);
  } else {
    console.log('アイテムを獲得できませんでした');
  }
} catch (error) {
  console.error('ルーレットチャレンジに失敗しました:', error);
}

型定義

BonusItem

ボーナスアイテムの情報を表す型です。

type BonusItem = {
  id: string;              // アイテムID
  title: string;           // アイテム名
  status: string;          // ステータス
  percentage: number;      // パーセンテージ
  shop: string;            // ショップ名
  createdAt: string;       // 作成日時
}

BonusItemsResponse

ボーナスアイテム取得APIのレスポンス型です。

type BonusItemsResponse = {
  bonusItems: BonusItem[];      // ボーナスアイテムの配列
  hasChallengedToday: boolean;  // 本日すでにチャレンジ済みかどうか
}

RouletteResponse

ルーレットチャレンジAPIのレスポンス型です。

type RouletteResponse = {
  result: {
    enable: boolean;            //  チャレンジできたかどうか
    flowResult: any;            // Flow結果
    item: BonusItem | null;     // 獲得したアイテム（nullの場合もあり）
  }
  error: string;                // エラーメッセージ
}

ライセンス

MIT