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
        }
    );
}

// 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-gallery-products	Triggered when the gallery/image selection is rendered	{ 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