React

Интеграция с React-приложением (Vite / CRA)

Интеграция с React

Работает с любым React-окружением — Vite, Create React App или своим решением.

1. Загрузка скрипта виджета

Добавьте скрипт в ваш index.html:

<!-- В public/index.html или index.html (Vite) -->
<script
  src="https://widget.try-on.ru/fitting-widget-bundle.js"
  id="fitting-widget-bundle"
></script>
<script id="fitting-init">
  window.fitting = window.fitting || function() {
    (window.fitting.q = window.fitting.q || []).push(arguments);
  };
  window.fitting('init', {
    apiKey: '%VITE_TRY_ON_API_KEY%'
  });
</script>

Замените %VITE_TRY_ON_API_KEY% на ваш реальный ключ во время сборки, или используйте инъекцию во время выполнения.

2. Создайте свой хук

// hooks/useFittingWidget.ts
interface TryonItem {
  productName: string;
  url: string;
  productId?: string;
}

interface CreateOptions {
  targetElementId: string;
  model?: 'balanced' | 'quality' | 'speed';
  tryonItems: TryonItem[];
}

declare global {
  interface Window {
    fitting: (command: string, options?: unknown) => void;
  }
}

export function useFittingWidget() {
  const open = (options: CreateOptions) => {
    window.fitting('create', options);
  };

  const close = () => {
    window.fitting('close');
  };

  return { open, close };
}

3. Использование в компоненте

// components/TryOnWidget.tsx
import { useFittingWidget } from '../hooks/useFittingWidget';

interface Props {
  productName: string;
  imageUrl: string;
}

export function TryOnWidget({ productName, imageUrl }: Props) {
  const { open } = useFittingWidget();

  return (
    <div>
      <div
        id="widget-container"
        style={{ width: '100%', maxWidth: 600, aspectRatio: '3/4' }}
      />
      <button
        onClick={() =>
          open({
            targetElementId: 'widget-container',
            model: 'balanced',
            tryonItems: [{ productName, url: imageUrl }],
          })
        }
      >
        Примерка
      </button>
    </div>
  );
}