Marketplace Events

Marketplace PostMessage Documentation

This documentation describes all postMessage events sent from Marketplace components to the parent window (iframe).

Available Events

1. ITEM_SELECTED

Sent when the user selects a product or category in the marketplace.

When it's sent:

  • When clicking on a product in the product list
  • When clicking on a category
  • When clicking on a related product

Format:

{
  type: 'ITEM_SELECTED',
  payload: { 
    itemId: string | number  // ID of the selected product or category
  }
}

Example:

parent.postMessage({
  type: 'ITEM_SELECTED',
  payload: { itemId: product.productId }
}, '*');

2. ITEM_BUY_CLICK

Sent when the user clicks the buy button ("Buy Now") on the product detail page.

When it's sent:

  • When clicking the "Buy Now" button on the product detail page

Format:

{
  type: 'ITEM_BUY_CLICK',
  payload: { 
    itemId: string | number  // ID of the product to be purchased
  }
}

Example:

parent.postMessage({
  type: 'ITEM_BUY_CLICK',
  payload: { itemId: product?.productId || id }
}, '*');

3. VIEW_SIZE_UPDATE

Sent when the marketplace container size changes or when modals are opened/closed.

When it's sent:

  • Initially when the component loads
  • When the container size changes (using ResizeObserver)
  • When the product count changes
  • When modals are opened or closed

Format:

{
  type: 'VIEW_SIZE_UPDATE',
  payload: {
    width: number,              // Container width in pixels
    height: number,             // Container height in pixels
    scrollHeight: number,       // Total content height (with scroll)
    hasModalsOpen: boolean     // Indicates if any modals are open
  }
}

Example:

const rect = containerRef.current.getBoundingClientRect();
parent.postMessage({
  type: 'VIEW_SIZE_UPDATE',
  payload: {
    width: rect.width,
    height: rect.height,
    scrollHeight: containerRef.current.scrollHeight,
    hasModalsOpen: isModalBuy
  }
}, '*');

Technical implementation:

useEffect(() => {
  const sendViewSize = () => {
    if (typeof parent !== 'undefined' && parent.postMessage && containerRef.current) {
      const rect = containerRef.current.getBoundingClientRect();
      parent.postMessage({
        type: 'VIEW_SIZE_UPDATE',
        payload: {
          width: rect.width,
          height: rect.height,
          scrollHeight: containerRef.current.scrollHeight,
          hasModalsOpen: false // or true if modals are open
        }
      }, '*');
    }
  };
 
  sendViewSize();
  const timeoutId = setTimeout(sendViewSize, 100);
 
  const resizeObserver = new ResizeObserver(() => {
    sendViewSize();
  });
 
  if (containerRef.current) {
    resizeObserver.observe(containerRef.current);
  }
 
  return () => {
    clearTimeout(timeoutId);
    resizeObserver.disconnect();
  };
}, [dependencies]); // Dependencies that affect size

Usage in Parent (iframe)

To receive these messages in the parent window, use the following code:

window.addEventListener('message', (event) => {
  // Verify origin for security
  if (event.origin !== 'https://your-marketplace-domain.com') {
    return;
  }
 
  const { type, payload } = event.data;
 
  switch (type) {
    case 'ITEM_SELECTED':
      console.log('Product selected:', payload.itemId);
      // Update UI, tracking, etc.
      break;
 
    case 'ITEM_BUY_CLICK':
      console.log('Buy button clicked:', payload.itemId);
      // Conversion tracking, analytics, etc.
      break;
 
    case 'VIEW_SIZE_UPDATE':
      console.log('Size updated:', payload);
      // Adjust iframe or container
      if (iframeElement) {
        iframeElement.style.height = `${payload.scrollHeight}px`;
      }
      break;
 
    case 'SEARCH_MODAL_TOGGLE':
      console.log('Search modal:', payload.isOpen);
      break;
 
    // ... other cases
  }
});

Implementation

✅ Marketplace Home

  • ITEM_SELECTED in Top Products
  • ITEM_SELECTED in Categories
  • ITEM_SELECTED in Featured Products
  • VIEW_SIZE_UPDATE with ResizeObserver

✅ Shop

  • ITEM_SELECTED in grid products
  • VIEW_SIZE_UPDATE with ResizeObserver

✅ Product Detail

  • ITEM_SELECTED in related products
  • ITEM_BUY_CLICK in "Buy Now" button
  • VIEW_SIZE_UPDATE with ResizeObserver

Copy and Paste - Complete Example

// In any marketplace component
 
import React, { useEffect, useRef } from 'react';
 
const MyComponent = ({ products, playerId }) => {
  const containerRef = useRef(null);
 
  // PostMessage for ITEM_SELECTED
  const handleProductClick = (productId) => {
    if (typeof parent !== 'undefined' && parent.postMessage) {
      parent.postMessage({
        type: 'ITEM_SELECTED',
        payload: { itemId: productId }
      }, '*');
    }
    // ... rest of the logic
  };
 
  // PostMessage for VIEW_SIZE_UPDATE
  useEffect(() => {
    const sendViewSize = () => {
      if (typeof parent !== 'undefined' && parent.postMessage && containerRef.current) {
        const rect = containerRef.current.getBoundingClientRect();
        parent.postMessage({
          type: 'VIEW_SIZE_UPDATE',
          payload: {
            width: rect.width,
            height: rect.height,
            scrollHeight: containerRef.current.scrollHeight,
            hasModalsOpen: false
          }
        }, '*');
      }
    };
 
    sendViewSize();
    const timeoutId = setTimeout(sendViewSize, 100);
 
    const resizeObserver = new ResizeObserver(() => {
      sendViewSize();
    });
 
    if (containerRef.current) {
      resizeObserver.observe(containerRef.current);
    }
 
    return () => {
      clearTimeout(timeoutId);
      resizeObserver.disconnect();
    };
  }, [products.length]);
 
  return (
    <div ref={containerRef}>
      {/* Content */}
    </div>
  );
};

Last updated: October 2025 Version: 1.0

Iframe