SPAで使う | PerfittSize Docs

React、Vue、Angularのように、ページを再読み込みせずに画面を切り替えるサイトでPerfittSizeを使う方法です。

スクリプトの挿入

SPAの開始ページであるindex.htmlのheadにPerfittSizeスクリプトタグを入れます。1回入れれば十分です。

初期化の方法

SPAではページを移動してもスクリプトが再実行されないため、商品ページのコンポーネントの描画が終わった後に、次のコードでPerfittSizeを直接実行します。productIdを必ず渡さないとボタンは描画されません。

JavaScript

window.initializePerfittSize({ productId: '{{商品ID}}' });

注意事項

この呼び出しは手動実行モードが有効なプロジェクトでのみ動作します。SPAの場合は、Perfitt担当者に手動実行モードを事前にご依頼ください。商品が変わったら再度呼び出さないと、新しい商品のボタンは描画されません。

フレームワーク別の例

商品が変わるたびに、画面の描画後に実行する例です。渡す値の意味は連携項目をご覧ください。

React

React Routerを使う場合は、ルートが変わるたびに実行されるよう次のように実装します。

ProductPage.jsx

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function ProductPage({ product }) {
  const location = useLocation();

  useEffect(() => {
    // 商品情報の描画後、ページが変わるたびに実行
    window.initializePerfittSize({
      productId: product.id,
      brand: product.brand,
      modelNo: product.modelNo,
      gender: product.gender, // 'f' または 'm'
    });
  }, [location, product.id]);

  return (
    // ... 商品ページのコンポーネント
  );
}

Vue 3

商品IDを監視し、変わったら画面の描画後(flush: 'post')に実行します。

ProductPage.vue

import { watch } from 'vue';

export default {
  props: ['product'],
  setup(props) {
    // 商品が変わるたびに、画面の描画後に実行
    watch(
      () => props.product.id,
      () => {
        window.initializePerfittSize({
          productId: props.product.id,
          brand: props.product.brand,
          modelNo: props.product.modelNo,
          gender: props.product.gender, // 'f' または 'm'
        });
      },
      { immediate: true, flush: 'post' }
    );
  },
};

Next.js (App Router)

クライアントコンポーネントでパスが変わるたびに実行します。スクリプトタグはapp/layoutの<head>に1回入れます。

perfitt-init.jsx

'use client';
import { useEffect } from 'react';
import { usePathname } from 'next/navigation';

export default function PerfittInit({ product }) {
  const pathname = usePathname();

  useEffect(() => {
    // パスや商品が変わるたびに実行
    window.initializePerfittSize({
      productId: product.id,
      brand: product.brand,
      modelNo: product.modelNo,
      gender: product.gender, // 'f' または 'm'
    });
  }, [pathname, product.id]);

  return null;
}

// 商品ページで商品情報の下に <PerfittInit product={product} /> を置きます