Reselfit Docs

loader.js は data-plugin-boot-mode 属性で boot モードを制御します。モードによって Plugin が初期化されるタイミングが変わるため、ページの構成やイベントに合わせて選択してください。

値	デフォルト	説明
`auto`	✅	Plugin Loader Script の読み込み完了後に自動で Plugin を初期化します。
`manual`		Plugin Loader Script を読み込んだあと、任意のタイミングで `window.Reselfit('boot')` を呼び出すまで初期化を待機します。

自動boot（data-plugin-boot-mode="auto"）

ほとんどのケースでは auto を使えば十分です。ページの <head> または <body> で Plugin Loader Script を読み込むだけで、Plugin 表示エリア（placeholder）が見つかり次第ボタンが描画されます。

<reselfit-plugin-placeholder></reselfit-plugin-placeholder>
<script
  id="reselfit-plugin-script-loader"
  data-site-id="YOUR_SITE_ID_FROM_RESELFIT_CONSOLE"
  data-plugin-boot-mode="auto"
  data-config-tag-id="reselfit-plugin-script-config"
  src="https://plugin.reselfit.com/loader/loader.js"
  defer
></script>

こんなときに便利

SSR/SSG で構成された商品ページに Plugin を常設したいとき
Plugin Loader Script を defer 読み込みし、DOM Ready 後に自動描画させたいとき
Loader を動的に挿入するが、挿入した瞬間に Plugin も起動してよいとき

マニュアルboot（data-plugin-boot-mode="manual"）

Plugin を表示するタイミングを自分で調整したい場合は data-plugin-boot-mode="manual" を指定します。Plugin Loader Script を読み込んだあと好きなタイミングで window.Reselfit('boot') を呼び出します。複数回呼び出しても安全です（追加で起動したいときにも利用できます）。

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

例1: CTA ボタンが押されたときだけ Plugin を起動する

<button id="open-fitting">サイズを確認する</button>
<reselfit-plugin-placeholder></reselfit-plugin-placeholder>
<!-- 上記の manual 設定で Plugin Loader Script を読み込み済み -->
<script>
  document
    .getElementById('open-fitting')
    .addEventListener('click', () => window.Reselfit('boot'));
</script>

サイズ確認ボタンが押されるまで Plugin を表示したくない、あるいはユーザーの明示的なアクションでだけ起動したい場合に有効です。

例2: SPA で商品詳細コンポーネントがマウントされたタイミングで boot する

import { useEffect } from 'react';

export function ProductDetails({ item }) {
  useEffect(() => {
    // script-config に item 情報を書き込んだあと boot する
    window.Reselfit?.('boot');
  }, [item.code]);

  return (
    <>
      <div id="reselfit-plugin-placeholder"></div>
      {/* item に応じた JSON script をここで更新 */}
    </>
  );
}

SPA のように DOM が差し替わる構成では、商品情報の書き換えが完了してから boot することで最新のコンテンツが読み込まれます。

例3: IntersectionObserver で画面内に入ったら boot する

<div id="fitting-area">
  <reselfit-plugin-placeholder></reselfit-plugin-placeholder>
</div>
<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        window.Reselfit('boot');
        observer.disconnect();
      }
    });
  });
  observer.observe(document.getElementById('fitting-area'));
</script>

スクロール位置が遠い場所に Plugin を配置している場合、ユーザーが近づいたタイミングで boot させることで初期読み込みを軽くできます。

より詳細な API の使い方は JavaScript API ガイドを参照してください。

bootモード(自動、マニュアル)