@selwise/widget 0.0.2 → 1.0.0

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

@@ -1,678 +0,0 @@
-"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