Visual Discovery Hooks System

The Visual Discovery widget provides a powerful hook system that allows you to customize the DOM and add custom logic at key points during the widget lifecycle.

Getting Started

Hook Flow

The hook system works in three simple steps:

1. Register: Define your custom hooks using window.FastSimonVisualDiscovery.registerHook() or window.VisualDiscovery.registerHook()
2. Trigger: The Visual Discovery widget triggers registered hooks at specific lifecycle points
3. Execute: Your custom code runs with access to the DOM element and relevant data

Rules

When developing with hooks, follow these important rules:

1. Register Early: Register hooks before the Visual Discovery widget loads, or use the setup event listener
2. Multiple Hooks: You can register multiple hooks for the same event - they all execute in order
3. DOM Safety: Always check if elements exist before manipulating them
4. Shadow DOM: The widget may use Shadow DOM - use appropriate selectors and methods

Basic Hook Registration

function setupVisualDiscoveryHooks() {
    // Register hook for filters
    window.FastSimonVisualDiscovery.registerHook(
        'visual-discovery-filters',
        function({ element, filters, products }) {
            console.log('Filters rendered with', filters.length, 'filter options');
            // Your custom logic here
        }
    );
    window.FastSimonVisualDiscovery.registerHook('visual-discovery-modal', ({ element, galleryImages }) => {
        // Example: customize the upload section
        const uploadSection = element.querySelector('.visual-search-container');
        console.log(uploadSection);

        // Example: customize the gallery section
        const gallerySection = element.querySelector('.gallery');
        console.log(gallerySection);
    });
}

// Execute when Visual Discovery is ready
if (window.FastSimonVisualDiscovery || window.VisualDiscovery) {
    setupVisualDiscoveryHooks();
} else {
    window.addEventListener('fast-visual-discovery-ready', function() {
        setupVisualDiscoveryHooks();
    });
}

Available Hooks

Hook Name	Description	Parameters	Return Type
visual-discovery-modal	Triggered when the initial Discovery modal renders (image upload + gallery selection view), before the user selects or uploads an image	{ element: HTMLElement, galleryImages: DiscoveryImage[] }	void
visual-discovery-gallery-products	Triggered when the product grid renders in the Shop Similar modal, after the user clicks "Shop Similar" or uploads an image	{ element: HTMLElement, products: Record<string, any> }	void
visual-discovery-product-swatches	Triggered when color swatches are rendered on product cards	{ element: HTMLElement, colors: VariantItem[] , swatchClick: Function, showMoreClick: boolean }	void
visual-discovery-filters	Triggered when filters are rendered	{ element: HTMLElement, filters: Facet[] \| PriceFacet[] , products: Product[] }	void