@selwise/widget 0.0.1

package/dist/npm/cjs/modules/recommendation/index.js

@@ -0,0 +1,678 @@
+"use strict";
+/**
+ * Recommendation Widget Module - Refactored
+ * Handles fetching and rendering of product recommendations
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initRecommendations = initRecommendations;
+exports.cleanup = cleanup;
+const core_1 = require("../../core");
+const experiment_overrides_1 = require("../../core/experiment-overrides");
+const utils_1 = require("../../utils");
+const sanitize_1 = require("../../utils/sanitize");
+const constants_1 = require("../../constants");
+const logger_1 = require("../../utils/logger");
+const recommendation_contract_1 = require("../contract/recommendation-contract");
+// Import utilities
+const dom_1 = require("./utils/dom");
+// Import renderers
+const slider_renderer_1 = require("./renderers/slider-renderer");
+const grid_1 = require("./renderers/grid");
+const list_1 = require("./renderers/list");
+const masonry_1 = require("./renderers/masonry");
+// Import product card
+const product_card_renderer_1 = require("./components/product-card-renderer");
+// Import slider controls
+const slider_controls_1 = require("./slider-controls");
+// Import cart handlers
+const cart_handlers_1 = require("./cart-handlers");
+// Import tracking
+const tracking_1 = require("./tracking");
+// Track rendered widgets to prevent duplicates
+const renderedWidgets = new Set();
+// Track active observers for cleanup
+const activeObservers = new Map();
+// SPA cleanup setup flag
+let spaCleanupSetup = false;
+const frequencyCapManager = (0, core_1.getFrequencyCapManager)();
+const conflictResolver = (0, core_1.getConflictResolver)();
+/**
+ * Setup SPA navigation cleanup for recommendation module
+ * Automatically cleans up observers when page navigation is detected
+ */
+function setupSPACleanup() {
+    if (spaCleanupSetup)
+        return;
+    spaCleanupSetup = true;
+    // Listen for navigation events common in SPAs
+    const originalPushState = history.pushState;
+    const originalReplaceState = history.replaceState;
+    history.pushState = (...args) => {
+        originalPushState.apply(history, args);
+        scheduleCleanup();
+    };
+    history.replaceState = (...args) => {
+        originalReplaceState.apply(history, args);
+        scheduleCleanup();
+    };
+    window.addEventListener('popstate', () => scheduleCleanup());
+    window.addEventListener('hashchange', () => scheduleCleanup());
+}
+/**
+ * Schedule deferred cleanup with a small delay
+ */
+function scheduleCleanup() {
+    setTimeout(() => {
+        // Cleanup all observers on navigation
+        activeObservers.forEach((observer, widgetId) => {
+            observer.disconnect();
+        });
+        activeObservers.clear();
+        (0, logger_1.testModeDebug)('Recommendation', 'Cleaned up observers on navigation');
+    }, 500);
+}
+/**
+ * Detect current product ID from various sources
+ * Priority:
+ * 1. Config.currentProductId (explicitly set)
+ * 2. Config.detectCurrentProduct callback
+ * 3. Common meta tags and data attributes
+ * 4. URL patterns (e.g., /product/SKU123)
+ */
+function detectCurrentProductId(config) {
+    // 1. Use explicitly set product ID
+    if (config.currentProductId) {
+        return config.currentProductId;
+    }
+    // 2. Use custom detection function
+    if (config.detectCurrentProduct) {
+        const id = config.detectCurrentProduct();
+        if (id)
+            return id;
+    }
+    // 3. Try common meta tags
+    const metaSelectors = [
+        'meta[property="og:product:id"]',
+        'meta[property="product:id"]',
+        'meta[name="product-id"]',
+        'meta[name="product_id"]',
+        'meta[name="sku"]',
+    ];
+    for (const selector of metaSelectors) {
+        const meta = document.querySelector(selector);
+        if (meta?.content)
+            return meta.content;
+    }
+    // 4. Try common data attributes on product containers
+    const dataSelectors = [
+        '[data-product-id]',
+        '[data-product-sku]',
+        '[data-item-code]',
+        '[data-sku]',
+    ];
+    for (const selector of dataSelectors) {
+        const el = document.querySelector(selector);
+        if (el) {
+            const attr = el.getAttribute('data-product-id')
+                || el.getAttribute('data-product-sku')
+                || el.getAttribute('data-item-code')
+                || el.getAttribute('data-sku');
+            if (attr)
+                return attr;
+        }
+    }
+    // 5. Try JSON-LD structured data
+    const jsonLdScript = document.querySelector('script[type="application/ld+json"]');
+    if (jsonLdScript) {
+        try {
+            const data = JSON.parse(jsonLdScript.textContent || '{}');
+            if (data['@type'] === 'Product' && data.sku)
+                return data.sku;
+            if (data['@type'] === 'Product' && data.productID)
+                return data.productID;
+        }
+        catch {
+            // Ignore parse errors
+        }
+    }
+    // 6. No product detected
+    return null;
+}
+function getRecommendationFrequencyCapConfig(widget) {
+    const triggerConfig = widget?.triggerConfig;
+    const frequencyCap = triggerConfig?.frequencyCap;
+    if (!frequencyCap || typeof frequencyCap !== 'object')
+        return undefined;
+    return frequencyCap;
+}
+function selectRecommendationCandidates(widgets) {
+    if (widgets.length <= 1) {
+        return widgets.map((widget) => ({
+            candidateId: `recommendation:${widget.id}`,
+            widget,
+            frequencyKey: `display:recommendation:${widget.id}`,
+            frequencyCapConfig: getRecommendationFrequencyCapConfig(widget),
+        }));
+    }
+    const conflictCandidates = widgets.map((widget) => {
+        const triggerConfig = widget?.triggerConfig || {};
+        const conflictResolution = triggerConfig.conflictResolution || {};
+        const candidate = conflictResolver.applyConfig({
+            id: `recommendation:${widget.id}`,
+            type: 'recommendation',
+            selector: widget.containerSelector,
+            placementPosition: widget.insertPosition,
+            priority: widget.priority ?? conflictResolution.priority,
+            conflictBehavior: conflictResolution.behavior,
+            placementConfig: { conflictResolution },
+        });
+        return {
+            ...candidate,
+            widget,
+            frequencyKey: `display:recommendation:${widget.id}`,
+            frequencyCapConfig: getRecommendationFrequencyCapConfig(widget),
+        };
+    });
+    const resolutionResults = conflictResolver.resolveAll(conflictCandidates);
+    const selectedIds = new Set(resolutionResults.flatMap((result) => result.selected.map((item) => item.id)));
+    return conflictCandidates
+        .filter((candidate) => selectedIds.has(candidate.id))
+        .map((candidate) => ({
+        candidateId: candidate.id,
+        widget: candidate.widget,
+        frequencyKey: candidate.frequencyKey,
+        frequencyCapConfig: candidate.frequencyCapConfig,
+    }));
+}
+async function initRecommendations(config) {
+    try {
+        // Setup SPA cleanup (only once)
+        setupSPACleanup();
+        const preloadedWidgets = Array.isArray(config.widgets) ? config.widgets : [];
+        let widgets = preloadedWidgets
+            .map((widget) => (0, recommendation_contract_1.resolveRecommendationConfig)(widget))
+            .filter((widget) => Boolean(widget));
+        // Fall back to API if preloaded widgets are not available
+        if (widgets.length === 0) {
+            const response = await fetch(`${config.apiEndpoint}/public/sites/${config.siteKey}/recommendations?pageUrl=${encodeURIComponent(window.location.href)}`);
+            if (!response.ok)
+                return;
+            const data = await response.json();
+            widgets = Array.isArray(data.widgets)
+                ? data.widgets
+                    .map((widget) => (0, recommendation_contract_1.resolveRecommendationConfig)(widget))
+                    .filter((widget) => Boolean(widget))
+                : [];
+        }
+        const pageEligibleWidgets = widgets.filter((widget) => {
+            const matchesPage = (0, core_1.evaluatePageTargeting)(widget.pageTargetingJson, window.location.href);
+            if (!matchesPage) {
+                (0, logger_1.testModeLog)('Recommendation', 'Skipping widget due to page targeting:', widget.id);
+            }
+            return matchesPage;
+        });
+        const candidates = selectRecommendationCandidates(pageEligibleWidgets);
+        // Render each candidate that survives conflict resolution
+        for (const candidate of candidates) {
+            await tryRenderWidget(candidate.widget, config, candidate.frequencyKey, candidate.frequencyCapConfig);
+        }
+    }
+    catch (error) {
+        (0, logger_1.testModeError)('Recommendation', 'Error initializing:', error);
+    }
+}
+// Try to render widget, setup observer if container not ready
+async function tryRenderWidget(widget, config, frequencyKey, frequencyCapConfig) {
+    // Keep in-memory render tracking synchronized with real DOM state.
+    const widgetAlreadyInDom = (0, dom_1.isWidgetInDOM)(widget.id);
+    if (widgetAlreadyInDom && !renderedWidgets.has(widget.id)) {
+        renderedWidgets.add(widget.id);
+        return false;
+    }
+    // If marked as rendered but not in DOM, clear stale state (SPA navigation case).
+    if (!widgetAlreadyInDom && renderedWidgets.has(widget.id)) {
+        renderedWidgets.delete(widget.id);
+    }
+    // Already rendered and in DOM?
+    if (renderedWidgets.has(widget.id))
+        return false;
+    const canShowByFrequencyCap = () => {
+        if (!frequencyCapConfig)
+            return true;
+        const check = frequencyCapManager.canShow(frequencyKey, frequencyCapConfig);
+        if (!check.allowed) {
+            (0, logger_1.testModeLog)('Recommendation', `Skipping widget due to frequency cap (${check.reason || 'limit'})`, widget.id);
+            return false;
+        }
+        return true;
+    };
+    // No container selector? Render to body (fallback)
+    if (!widget.containerSelector) {
+        if (await shouldShowWidget(widget, config)) {
+            if (!canShowByFrequencyCap())
+                return false;
+            // Check for experiment suppression
+            if (config.experimentManager && !config.experimentManager.shouldRenderTarget(widget.id)) {
+                return false;
+            }
+            const widgetToRender = applyExperimentOverrides(widget, config);
+            if (!widgetToRender)
+                return false; // Widget should not be rendered
+            renderedWidgets.add(widgetToRender.id);
+            const rendered = await renderWidget(widgetToRender, config);
+            if (rendered && frequencyCapConfig) {
+                frequencyCapManager.recordShown(frequencyKey);
+            }
+            return rendered;
+        }
+        return false;
+    }
+    // Container exists? Render now
+    const container = document.querySelector(widget.containerSelector);
+    if (container) {
+        if (await shouldShowWidget(widget, config)) {
+            if (!canShowByFrequencyCap())
+                return false;
+            // Check for experiment suppression
+            if (config.experimentManager && !config.experimentManager.shouldRenderTarget(widget.id)) {
+                return false;
+            }
+            const widgetToRender = applyExperimentOverrides(widget, config);
+            if (!widgetToRender)
+                return false; // Widget should not be rendered
+            renderedWidgets.add(widgetToRender.id);
+            const rendered = await renderWidget(widgetToRender, config);
+            if (rendered && frequencyCapConfig) {
+                frequencyCapManager.recordShown(frequencyKey);
+            }
+            return rendered;
+        }
+        return false;
+    }
+    // Container doesn't exist yet - watch for it
+    (0, logger_1.testModeLog)('Recommendation', 'Container not found, setting up observer for:', widget.containerSelector);
+    observeForContainer(widget, config, frequencyKey, frequencyCapConfig);
+    return false;
+}
+// Use MutationObserver to efficiently watch for container appearance
+// Performance optimized: debounced callback, scoped observation, proper cleanup
+function observeForContainer(widget, config, frequencyKey, frequencyCapConfig) {
+    // If already observing this widget, skip
+    if (activeObservers.has(widget.id)) {
+        return;
+    }
+    // Debounced check function to avoid excessive DOM queries
+    const checkForContainer = (0, utils_1.debounce)(async () => {
+        // Re-check: if widget now in DOM, stop
+        if ((0, dom_1.isWidgetInDOM)(widget.id)) {
+            cleanupObserver(widget.id);
+            return;
+        }
+        const container = document.querySelector(widget.containerSelector);
+        if (container && await shouldShowWidget(widget, config)) {
+            if (frequencyCapConfig) {
+                const check = frequencyCapManager.canShow(frequencyKey, frequencyCapConfig);
+                if (!check.allowed) {
+                    cleanupObserver(widget.id);
+                    return;
+                }
+            }
+            // Check for experiment suppression
+            if (config.experimentManager && !config.experimentManager.shouldRenderTarget(widget.id)) {
+                cleanupObserver(widget.id);
+                return;
+            }
+            const widgetToRender = applyExperimentOverrides(widget, config);
+            if (!widgetToRender) {
+                cleanupObserver(widget.id);
+                return; // Widget should not be rendered
+            }
+            renderedWidgets.add(widgetToRender.id);
+            const rendered = await renderWidget(widgetToRender, config);
+            if (rendered && frequencyCapConfig) {
+                frequencyCapManager.recordShown(frequencyKey);
+            }
+            cleanupObserver(widget.id);
+            (0, logger_1.testModeLog)('Recommendation', 'Widget rendered via observer:', widgetToRender.id);
+        }
+    }, constants_1.TIMING.RESIZE_DEBOUNCE); // 150ms debounce
+    const observer = new MutationObserver((_mutations, _obs) => {
+        checkForContainer();
+    });
+    // Try to scope observation to a parent element if possible
+    // This reduces the number of mutations we need to process
+    const observeTarget = findBestObserveTarget(widget.containerSelector);
+    observer.observe(observeTarget, {
+        childList: true,
+        subtree: true,
+    });
+    // Store observer for cleanup
+    activeObservers.set(widget.id, observer);
+    // Timeout after 10 seconds to prevent memory leaks
+    setTimeout(() => {
+        cleanupObserver(widget.id);
+        checkForContainer.cancel();
+    }, 10000);
+}
+/**
+ * Find the best DOM element to observe for a given selector
+ * Tries to find a parent element that's already in the DOM to reduce observation scope
+ */
+function findBestObserveTarget(selector) {
+    // Try to find a parent element from the selector
+    // e.g., for "#product-page .recommendations" we could observe #product-page
+    const parts = selector.split(/\s+/);
+    for (let i = 0; i < parts.length - 1; i++) {
+        const parentSelector = parts.slice(0, i + 1).join(' ');
+        const parent = document.querySelector(parentSelector);
+        if (parent) {
+            return parent;
+        }
+    }
+    // Fallback to body
+    return document.body;
+}
+/**
+ * Cleanup a specific observer
+ */
+function cleanupObserver(widgetId) {
+    const observer = activeObservers.get(widgetId);
+    if (observer) {
+        observer.disconnect();
+        activeObservers.delete(widgetId);
+    }
+}
+/**
+ * Cleanup all observers and rendered widgets
+ * Call this when navigating away in SPA
+ */
+function cleanup() {
+    // Disconnect all observers
+    activeObservers.forEach((observer, widgetId) => {
+        observer.disconnect();
+        (0, logger_1.testModeDebug)('Recommendation', 'Cleaned up observer for:', widgetId);
+    });
+    activeObservers.clear();
+    // Remove recommendation DOM roots to prevent duplicate render on SPA re-init.
+    (0, dom_1.removeRecommendationRootsFromDOM)();
+    // Fallback cleanup by known ids in case an old node does not have marker attr.
+    renderedWidgets.forEach((widgetId) => {
+        const existingNode = document.getElementById(`rec-widget-${widgetId}`);
+        if (existingNode) {
+            existingNode.remove();
+        }
+    });
+    // Clear rendered widgets tracking
+    renderedWidgets.clear();
+    // Clear tracking state (e.g. product impression cache)
+    (0, tracking_1.cleanupTracking)();
+    (0, logger_1.testModeDebug)('Recommendation', 'Module cleanup complete');
+}
+function applyExperimentOverrides(widget, config) {
+    if (!config.experimentManager)
+        return widget;
+    // Check for different_module mode - variant module replaces this widget
+    const assignment = config.experimentManager.getVariantModuleForTarget(widget.id);
+    if (assignment && assignment.moduleData) {
+        // Unwrap moduleData - could be { targetType, data } or directly the widget
+        const moduleData = assignment.moduleData;
+        const variantWidget = moduleData.data || moduleData;
+        if (variantWidget && variantWidget.id) {
+            (0, logger_1.testModeLog)('Recommendation', 'Rendering variant module instead of original:', variantWidget.id);
+            // Return the variant widget to be rendered instead
+            variantWidget._experimentAssignment = assignment;
+            return variantWidget;
+        }
+    }
+    // Check for config_override mode
+    const configAssignment = config.experimentManager.getVariant(widget.id) ||
+        config.experimentManager.getAssignmentByTargetId(widget.id);
+    if (configAssignment) {
+        const variantConfig = (0, experiment_overrides_1.getEffectiveConfig)(configAssignment);
+        if (variantConfig) {
+            (0, logger_1.testModeLog)('Recommendation', 'Applying config override:', configAssignment.variantName);
+            const mergedWidget = (0, experiment_overrides_1.deepMergeExperimentConfig)(widget, variantConfig);
+            Object.assign(widget, mergedWidget);
+            if (variantConfig.content && typeof variantConfig.content === 'object') {
+                const content = variantConfig.content;
+                if (content.title !== undefined) {
+                    widget.title = content.title;
+                    if (widget.titleStyles)
+                        widget.titleStyles.enabled = true;
+                }
+                if (content.subtitle !== undefined) {
+                    widget.subtitle = content.subtitle;
+                    if (widget.subtitleStyles)
+                        widget.subtitleStyles.enabled = true;
+                }
+                else if (content.text !== undefined) {
+                    widget.subtitle = content.text;
+                    if (widget.subtitleStyles)
+                        widget.subtitleStyles.enabled = true;
+                }
+                else if (content.description !== undefined) {
+                    widget.subtitle = content.description;
+                    if (widget.subtitleStyles)
+                        widget.subtitleStyles.enabled = true;
+                }
+            }
+            if (variantConfig.styles && typeof variantConfig.styles === 'object') {
+                widget.containerStyles = (0, experiment_overrides_1.deepMergeExperimentConfig)((widget.containerStyles || {}), variantConfig.styles);
+            }
+            if (variantConfig.displayType) {
+                widget.displayType = variantConfig.displayType;
+            }
+        }
+        // Mark widget as part of experiment for tracking
+        widget._experimentAssignment = configAssignment;
+    }
+    return widget;
+}
+async function shouldShowWidget(widget, config) {
+    // Check for experiment suppression FIRST (before other checks)
+    // This ensures excluded widgets (different_module mode) are skipped early
+    if (config.experimentManager && !config.experimentManager.shouldRenderTarget(widget.id)) {
+        (0, logger_1.testModeLog)('Recommendation', 'Skipping widget (excluded by experiment):', widget.id);
+        return false;
+    }
+    // If containerSelector is specified, check if element exists
+    if (widget.containerSelector) {
+        const container = document.querySelector(widget.containerSelector);
+        (0, logger_1.testModeLog)('Recommendation', 'Container check:', widget.containerSelector, '-> Found:', !!container);
+        if (!container)
+            return false;
+    }
+    // Page Targeting Logic
+    const targeting = widget.pageTargetingJson;
+    if (!(0, core_1.evaluatePageTargeting)(targeting, window.location.href)) {
+        return false;
+    }
+    // Segment Targeting Logic
+    if (config.segmentManager && widget.segmentTargetingMode && widget.segmentIds) {
+        const shouldShow = await config.segmentManager.shouldShow(widget.segmentTargetingMode, widget.segmentIds);
+        if (!shouldShow) {
+            (0, logger_1.testModeLog)('Recommendation', 'Skipping widget due to segment targeting:', widget.id);
+            return false;
+        }
+    }
+    return true;
+}
+async function renderWidget(widget, config) {
+    try {
+        // Detect current product ID for product-based strategies (viewed_together, similar_products, etc.)
+        const currentProductId = detectCurrentProductId(config);
+        let sessionId = '';
+        try {
+            sessionId = (0, tracking_1.getSessionId)();
+        }
+        catch {
+            sessionId = `sid_fallback_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
+        }
+        // Fetch products for this widget
+        const response = await fetch(`${config.apiEndpoint}/public/sites/${config.siteKey}/recommendations/${widget.id}/products`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                currentProductId,
+                pageUrl: window.location.href,
+                sessionId,
+                visitorId: window.selwise_vid,
+                userId: window.selwise_suid,
+            }),
+        });
+        if (!response.ok)
+            return false;
+        const data = await response.json();
+        const products = data.products || [];
+        // Update widget product card definition if provided by API
+        if (data.productCard) {
+            widget.productCard = data.productCard;
+        }
+        if (products.length === 0)
+            return false;
+        // Create widget container
+        const widgetElement = createWidgetElement(widget, products, config);
+        // Insert into page
+        (0, dom_1.insertWidget)(widgetElement, widget);
+        // Track widget impression
+        (0, tracking_1.trackWidgetImpression)(widget.id, config).catch(() => {
+            // Non-blocking - don't prevent widget rendering if tracking fails
+        });
+        // Track impression
+        if (widget._experimentAssignment && config.experimentManager) {
+            config.experimentManager.trackImpression(widget._experimentAssignment.experimentId);
+        }
+        // Initialize slider if needed
+        if (widget.displayType === 'slider' || widget.displayType === 'carousel') {
+            (0, slider_controls_1.initSliderControls)(widget, widgetElement, config, tracking_1.trackSliderNavigation, tracking_1.trackSliderSwipe);
+        }
+        // Setup product impression tracking
+        (0, tracking_1.setupProductImpressionTracking)(widgetElement, widget.id, config);
+        // Setup click tracking for experiment conversion
+        if (widget._experimentAssignment && config.experimentManager) {
+            widgetElement.addEventListener('click', (e) => {
+                const target = e.target;
+                if (target.closest('.recommendation-card') || target.closest('[data-selwise-action="add-to-cart"]') || target.closest('a') || target.closest('button')) {
+                    const assignment = widget._experimentAssignment;
+                    config.experimentManager?.trackConversion(assignment.experimentId);
+                }
+            });
+        }
+        // Execute custom JS - this runs arbitrary code from widget configuration
+        if (widget.customJS) {
+            try {
+                // Log warning for security auditing
+                (0, logger_1.testModeWarn)('Recommendation', 'Executing custom JS for widget:', widget.id);
+                const customFn = new Function('widgetElement', 'products', 'widgetConfig', widget.customJS);
+                customFn(widgetElement, products, widget);
+            }
+            catch (error) {
+                (0, logger_1.testModeError)('Recommendation', 'Custom JS error:', error);
+            }
+        }
+        return true;
+    }
+    catch (error) {
+        (0, logger_1.testModeError)('Recommendation', 'Error rendering widget:', error);
+        return false;
+    }
+}
+function createWidgetElement(widget, products, config) {
+    const container = document.createElement('div');
+    container.className = 'recommendation-widget';
+    container.id = `rec-widget-${widget.id}`;
+    container.setAttribute('data-widget-id', widget.id);
+    (0, dom_1.markRecommendationRoot)(container);
+    // Apply container styles
+    const cs = widget.containerStyles;
+    container.style.cssText = `
+    background-color: ${cs?.backgroundColor};
+    padding: ${cs?.padding};
+    border-radius: ${cs?.borderRadius}px;
+    max-width: ${cs?.maxWidth};
+    margin: ${cs?.margin};
+    box-sizing: border-box;
+  `;
+    // Create title
+    if (widget.titleStyles?.enabled && widget.title) {
+        const titleEl = document.createElement('h2');
+        titleEl.className = 'recommendation-title';
+        titleEl.textContent = widget.title;
+        const ts = widget.titleStyles;
+        titleEl.style.cssText = `
+      font-size: ${ts.fontSize || 24}px;
+      font-weight: ${ts.fontWeight || 'bold'};
+      color: ${ts.color || '#111111'};
+      text-align: ${ts.textAlign || 'left'};
+      margin-bottom: ${ts.marginBottom || 16}px;
+      margin-top: 0;
+    `;
+        container.appendChild(titleEl);
+    }
+    // Create subtitle
+    if (widget.subtitleStyles?.enabled && widget.subtitle) {
+        const subtitleEl = document.createElement('p');
+        subtitleEl.className = 'recommendation-subtitle';
+        subtitleEl.textContent = widget.subtitle;
+        const ss = widget.subtitleStyles;
+        subtitleEl.style.cssText = `
+      font-size: ${ss.fontSize || 14}px;
+      font-weight: ${ss.fontWeight || 'normal'};
+      color: ${ss.color || '#666666'};
+      text-align: ${ss.textAlign || 'left'};
+      margin-bottom: ${ss.marginBottom || 24}px;
+      margin-top: 0;
+    `;
+        container.appendChild(subtitleEl);
+    }
+    // Create product container based on display type
+    const productContainer = createProductContainer(widget, products, config);
+    container.appendChild(productContainer);
+    // Add custom CSS (sanitized to prevent CSS injection)
+    if (widget.customCSS) {
+        const style = document.createElement('style');
+        style.textContent = (0, sanitize_1.sanitizeCSS)(widget.customCSS);
+        container.appendChild(style);
+    }
+    // Add custom CSS from Product Card (if custom template)
+    if (widget.productCard && widget.productCard.customCSS) {
+        const cardStyle = document.createElement('style');
+        cardStyle.textContent = (0, sanitize_1.sanitizeCSS)(widget.productCard.customCSS);
+        container.appendChild(cardStyle);
+    }
+    return container;
+}
+function createProductContainer(widget, products, config) {
+    // Generate unique container ID for card JS execution
+    const containerId = widget.productCard?.customJs
+        ? `recommendation-${widget.id}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`
+        : '';
+    // Create product card factory function with bound handlers
+    const productCardFactory = (product) => (0, product_card_renderer_1.createProductCard)(product, widget, config, cart_handlers_1.handleAddToCart, tracking_1.trackEvent, tracking_1.trackBehavior, containerId);
+    let container;
+    switch (widget.displayType) {
+        case 'slider':
+        case 'carousel':
+            container = (0, slider_renderer_1.createSlider)(widget, products, config, productCardFactory);
+            break;
+        case 'grid':
+            container = (0, grid_1.createGrid)(widget, products, config, productCardFactory);
+            break;
+        case 'list':
+            container = (0, list_1.createList)(widget, products, config, productCardFactory);
+            break;
+        case 'masonry':
+            container = (0, masonry_1.createMasonry)(widget, products, config, productCardFactory);
+            break;
+        default:
+            container = (0, grid_1.createGrid)(widget, products, config, productCardFactory);
+    }
+    // Execute custom JavaScript for product cards after DOM insertion
+    if (containerId && widget.productCard?.customJs) {
+        (0, product_card_renderer_1.executeCardScriptsForRecommendations)(containerId, container);
+    }
+    return container;
+}
+//# sourceMappingURL=index.js.map