Pluginの設置
Plugin Loader Script の設置から JavaScript API までの手順
事前準備
Reselfit Plugin の設置前に、以下のポイントを確認しておきます。
-
Site ID
Reselfitコンソールからサイトを登録し、Site ID を取得します。
-
設置先ページの編集権限
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で利用する items（商品の画像・商品名・品番など）やuserIdは <script type="application/json" id="reselfit-plugin-script-config"></script> に指定した 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>id="reselfit-plugin-script-config" はデフォルト値であり、data-config-tag-id を省略すると、このid="reselfit-plugin-script-config"を持つ <script> タグが参照されます。
別のidに変更する場合は、Plugin Loader Script側の data-config-tag-id とJSON scriptタグの 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);
})();