Reselfit

Pluginの設置

Plugin Loader Script の設置から JavaScript API までの手順

事前準備

Reselfit Plugin の設置前に、以下のポイントを確認しておきます。

  1. Site ID

    Reselfitコンソールからサイトを登録し、Site ID を取得します。

  2. 設置先ページの編集権限

    Script タグやプレースホルダーを追加できるテンプレート・CMS・アプリの該当箇所を編集できる状態にしておきます。具体的な設置コードは次節以降で説明します。

準備が整ったら、以下の手順を順番に進めてください。

1. Plugin Loader Script の設置

以下の <script> タグの data-site-id を Reselfitコンソール で発行した自身の Site ID に書き換え、サイト内の任意の場所に設置してください。

<script
  id="reselfit-plugin-script-loader"
  data-site-id="YOUR_SITE_ID_FROM_RESELFIT_CONSOLE"
  src="https://plugin.reselfit.com/loader/loader.js"
  defer
></script>

data-plugin-boot-mode を省略した場合は auto と同等です。読み込みを遅らせたいときは manual を指定します。

Scriptタグの動的挿入の例

<script> タグの直接設置が制限される場合は、以下のように動的に挿入してください。

(function() {
  var script = document.createElement("script");
  script.id = "reselfit-plugin-script-loader";
  script.dataset.siteId = "YOUR_SITE_ID_FROM_RESELFIT_CONSOLE";
  script.src = "https://plugin.reselfit.com/loader/loader.js";
  script.defer = true;
  document.head.appendChild(script);
})();

2. Pluginへdataを渡す

Fitting で利用するアイテム（商品の画像・商品名など）や userId は、<script type="application/json" id="reselfit-plugin-script-config"> に JSON データとして渡します。

<script type="application/json" id="reselfit-plugin-script-config">
{
  "item": {
    "id": "item-unique-id-001",
    "name": "Shirt",
    "images": [
      {"id":"look1","imageUrl":"https://example.com/images/look1.png"},
      {"id":"look2","imageUrl":"https://example.com/images/look2.png"}
    ]
  },
  "userId": "user_33DvAnN9G2tgvwVJc9rNJmtk5Yq"
}
</script>

JSON データの構造

プロパティ型必須説明
itemオブジェクト必須Fitting 対象のアイテム情報
item.id文字列推奨アイテムを一意に識別する ID
item.name文字列推奨アイテムの表示名
item.images配列必須Fitting に利用する画像の一覧（下記参照）
userId文字列任意埋め込みサイト側のユーザー ID
userToken文字列任意ユーザー認証用 JWT（userToken ガイドを参照）

item にはこの他にも available、inventory_quantity、variants などのプロパティを指定できます。 すべてのプロパティの詳細は Config Script Data リファレンス を参照してください。

images（画像一覧）

item.images は 1 つ以上の画像オブジェクトを持つ配列です。各オブジェクトには以下のプロパティを指定します。

プロパティ型必須説明
id文字列推奨画像を一意に識別する ID
imageUrl文字列必須画像の URL
"images": [
  { "id": "look1", "imageUrl": "https://example.com/images/look1.png" },
  { "id": "look2", "imageUrl": "https://example.com/images/look2.png" }
]

id は必須ではありませんが推奨です。 画像 URL が変わらない場合は URL をそのまま id として使っても構いません。 画像 URL が querystring などによって頻繁に変更される場合は、別の一意な id を指定してください。

config tag idについて

id="reselfit-plugin-script-config" はデフォルト値であり、data-config-tag-id を省略する場合、id="reselfit-plugin-script-config"を持つ <script> タグが参照されます。 別のidに変更する場合は、Plugin Loader Script側の data-config-tag-id の値と一致させてください。

<script
  id="reselfit-plugin-script-loader"
  data-site-id="YOUR_SITE_ID_FROM_RESELFIT_CONSOLE"
  data-config-tag-id="CUSTOM-PLUGIN-CONFIG-SCRIPT-TAG-ID"
  src="https://plugin.reselfit.com/loader/loader.js"
  defer
></script>
<script type="application/json" id="CUSTOM-PLUGIN-CONFIG-SCRIPT-TAG-ID">
{
  "item": {
    "id": "item-unique-id-001",
    "name": "Shirt",
    "images": [
      {"id":"look1","imageUrl":"https://example.com/images/look1.png"},
      {"id":"look2","imageUrl":"https://example.com/images/look2.png"}
    ]
  },
  "userId": "user_33DvAnN9G2tgvwVJc9rNJmtk5Yq"
}
</script>

セキュリティとユーザー認証

userId だけを埋め込むと、悪意のある第三者が値を書き換えて任意のユーザーに成りすませるリスクが残ります。 ReselfitではuserToken(JWT)をあわせて渡すことで、userIdの改ざんを防ぎ、真正なアクセスのみを許可できます。

必須ではありませんが、より安全なサービスの利用のため userToken の利用もあわせてご検討ください。

生成から更新までの詳しい手順は userToken の利用ガイド を参照してください。

3. Plugin 表示エリアの設置

Plugin Loader Script が読み込まれると指定した場所にプラグイン起動ボタンを描画します。 設置したい位置に以下の方法でプレースホルダーを配置してください。

Custom Web Component tag を使う場合

Plugin Loader Script は <reselfit-plugin-placeholder> という Custom Element も登録します。div の id を管理する必要がなく、どんなweb環境でも直接組み込めます。

<reselfit-plugin-placeholder></reselfit-plugin-placeholder>

div tag + id で設置する場合

Web Componentが利用できない環境では id="reselfit-plugin-placeholder" を付けた <div> を置く方法をご利用できます。

<div id="reselfit-plugin-placeholder"></div>

4. 自動bootとマニュアルboot

Plugin Loader Script は data-plugin-boot-mode が省略されていると自動で初期化されます（auto モード）。ユーザー操作や特定イベント発火時のみ Plugin を表示したい場合は manual を指定し、任意のタイミングで window.Reselfit('boot') を呼び出します。

ユースケース別の詳しい例は 自動bootとマニュアルboot を参照してください。

5. JavaScript API

Plugin Loader Script 読み込み後の API 呼び出し方法については、JavaScript API ガイド を参照してください。

JavaScript API の初期化

JavaScript API を利用する場合は、Reselfit のキュー処理を初期化してから Plugin Loader Script を読み込みます。

(function(){let r=window.Reselfit;if(!r){let i=function(){i.c(arguments)};i.q=[],i.c=function(a){i.q.push(a)},window.Reselfit=i}})();

設置例

<script>
(function(){let r=window.Reselfit;if(!r){let i=function(){i.c(arguments)};i.q=[],i.c=function(a){i.q.push(a)},window.Reselfit=i}})();
</script>
<script
  id="reselfit-plugin-script-loader"
  data-site-id="YOUR_SITE_ID_FROM_RESELFIT_CONSOLE"
  src="https://plugin.reselfit.com/loader/loader.js"
  defer
></script>
(function(){let r=window.Reselfit;if(!r){let i=function(){i.c(arguments)};i.q=[],i.c=function(a){i.q.push(a)},window.Reselfit=i}})();
(function() {
  var script = document.createElement("script");
  script.id = "reselfit-plugin-script-loader";
  script.dataset.siteId = "YOUR_SITE_ID_FROM_RESELFIT_CONSOLE";
  script.src = "https://plugin.reselfit.com/loader/loader.js";
  script.defer = true;
  document.head.appendChild(script);
})();

Reselfit概要

Reselfit の全体像と導入までの流れをご案内します

Config Script Data リファレンス

Plugin に渡す JSON データの全プロパティ仕様

On this page

事前準備1. Plugin Loader Script の設置Scriptタグの動的挿入の例2. Pluginへdataを渡すJSON データの構造images（画像一覧）config tag idについてセキュリティとユーザー認証3. Plugin 表示エリアの設置Custom Web Component tag を使う場合div tag + id で設置する場合4. 自動bootとマニュアルboot5. JavaScript APIJavaScript API の初期化設置例