Using with an SPA | PerfittSize Docs

How to use PerfittSize on a site such as React, Vue or Angular that changes the screen without reloading the page.

Script insertion

Put the PerfittSize script tag in the head of index.html, the starting page of the SPA. Once is enough.

Initialization

In an SPA the script does not run again on navigation, so run PerfittSize yourself with the code below after the product page components have rendered. productId is required for the button to be drawn.

JavaScript

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

Note

This call works only in a project with manual execution mode enabled. If you run an SPA, ask your Perfitt contact for manual execution mode in advance. When the product changes, call it again so the button for the new product is drawn.

Examples by framework

Each example runs after the screen has rendered whenever the product changes. See Synced items for what each value means.

React

With React Router, run it on every route change like this.

ProductPage.jsx

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

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

  useEffect(() => {
    // After the product has rendered, on every page change
    window.initializePerfittSize({
      productId: product.id,
      brand: product.brand,
      modelNo: product.modelNo,
      gender: product.gender, // 'f' or 'm'
    });
  }, [location, product.id]);

  return (
    // ... product page component
  );
}

Vue 3

Watch the product ID and run after the DOM has updated (flush: 'post') whenever it changes.

ProductPage.vue

import { watch } from 'vue';

export default {
  props: ['product'],
  setup(props) {
    // Whenever the product changes, after the screen has rendered
    watch(
      () => props.product.id,
      () => {
        window.initializePerfittSize({
          productId: props.product.id,
          brand: props.product.brand,
          modelNo: props.product.modelNo,
          gender: props.product.gender, // 'f' or 'm'
        });
      },
      { immediate: true, flush: 'post' }
    );
  },
};

Next.js (App Router)

Run it in a client component on every path change. Put the script tag once in the <head> of app/layout.

perfitt-init.jsx

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

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

  useEffect(() => {
    // Run on every path or product change
    window.initializePerfittSize({
      productId: product.id,
      brand: product.brand,
      modelNo: product.modelNo,
      gender: product.gender, // 'f' or 'm'
    });
  }, [pathname, product.id]);

  return null;
}

// Place <PerfittInit product={product} /> below the product info on the product page