Headless commerceproduct configurator

// components/SignCustomiser.tsx
'use client';

import { useEffect, useRef } from 'react';

interface SignCustomiserProps {
  customiserId: string;
  onProductCreated: (data: any) => void;
}

export function SignCustomiser({ customiserId, onProductCreated }: SignCustomiserProps) {
  const iframeRef = useRef<HTMLIFrameElement>(null);
  // Store callback in ref to avoid re-running effect when it changes
  const callbackRef = useRef(onProductCreated);
  callbackRef.current = onProductCreated;

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      // Verify the message origin for security
      if (event.origin !== 'https://web.signcustomiser.com') return;

      if (event.data.type === 'onProductCreated') {
        callbackRef.current(event.data);

        // Hide loading screen after processing
        iframeRef.current?.contentWindow?.postMessage(
          { type: 'hideLoadingScreen' },
          'https://web.signcustomiser.com'
        );
      }
    }

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <iframe
      ref={iframeRef}
      src={`https://web.signcustomiser.com/embed/${customiserId}`}
      width="100%"
      height="600"
      frameBorder="0"
      allow="clipboard-write"
    />
  );
}

<template>
  <iframe
    ref="iframeRef"
    :src="`https://web.signcustomiser.com/embed/${customiserId}`"
    width="100%"
    height="600"
    frameborder="0"
    allow="clipboard-write"
  />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  customiserId: String
});

const emit = defineEmits(['productCreated']);
const iframeRef = ref(null);

function handleMessage(event) {
  // Verify the message origin for security
  if (event.origin !== 'https://web.signcustomiser.com') return;

  if (event.data.type === 'onProductCreated') {
    emit('productCreated', event.data);

    // Hide loading screen
    iframeRef.value?.contentWindow?.postMessage(
      { type: 'hideLoadingScreen' },
      'https://web.signcustomiser.com'
    );
  }
}

onMounted(() => {
  window.addEventListener('message', handleMessage);
});

onUnmounted(() => {
  window.removeEventListener('message', handleMessage);
});
</script>

// app/routes/products.$handle.tsx
import { useLoaderData } from '@shopify/remix-oxygen';
import { useEffect, useRef } from 'react';

export default function Product() {
  const { product, customiserId } = useLoaderData();
  const iframeRef = useRef<HTMLIFrameElement>(null);

  useEffect(() => {
    function handleMessage(event: MessageEvent) {
      // Verify the message origin for security
      if (event.origin !== 'https://web.signcustomiser.com') return;

      if (event.data.type === 'onProductCreated') {
        // Add to Hydrogen cart
        console.log('Product created:', event.data);

        iframeRef.current?.contentWindow?.postMessage(
          { type: 'hideLoadingScreen' },
          'https://web.signcustomiser.com'
        );
      }
    }

    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);

  return (
    <div>
      <h1>{product.title}</h1>
      <iframe
        ref={iframeRef}
        src={`https://web.signcustomiser.com/embed/${customiserId}`}
        width="100%"
        height="600"
        frameBorder="0"
        allow="clipboard-write"
      />
    </div>
  );
}