@selwise/widget 0.0.3 → 1.0.1

package/dist/npm/cjs/modules/recommendation/components/product-card-renderer.js

@@ -1,287 +0,0 @@
-"use strict";
-/**
- * Product Card Component and Renderers
- * Complete rendering logic for product cards with custom templates
- *
- * Uses shared product-card module for unified rendering
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderCustomProductCard = renderCustomProductCard;
-exports.renderDefaultCard = renderDefaultCard;
-exports.createProductCard = createProductCard;
-exports.executeCardScriptsForRecommendations = executeCardScriptsForRecommendations;
-const format_1 = require("../utils/format");
-const product_card_1 = require("../../../shared/product-card");
-const sanitize_1 = require("../../../utils/sanitize");
-// Store rendered data for later JS execution
-const renderedCardsData = new Map();
-/**
- * Render custom product card using shared renderer
- *
- * @param containerId - Optional ID for tracking cards to execute JS later
- */
-function renderCustomProductCard(product, productCard, containerId) {
-    // Convert to unified product type
-    const unifiedProduct = (0, product_card_1.fromRecommendationProduct)(product);
-    // Create template from productCard definition - INCLUDE JS FIELDS
-    const template = {
-        id: productCard.id,
-        template: productCard.template,
-        fields: productCard.fields || [],
-        layoutType: productCard.layoutType,
-        imagePosition: productCard.imagePosition,
-        imageSize: productCard.imageSize,
-        showBadges: productCard.showBadges,
-        showButton: productCard.showButton,
-        buttonText: productCard.buttonText,
-        buttonStyle: productCard.buttonStyle,
-        hoverEffect: productCard.hoverEffect,
-        customCSS: productCard.customCSS,
-        customHTML: productCard.customHTML,
-        customJs: productCard.customJs,
-        jsTiming: productCard.jsTiming || 'immediate',
-        jsEventName: productCard.jsEventName,
-    };
-    // Create context
-    const context = {
-        source: 'recommendation',
-        formatPrice: format_1.formatPrice,
-    };
-    // Store data for later JS execution if we have a containerId
-    if (containerId && template.customJs) {
-        if (!renderedCardsData.has(containerId)) {
-            renderedCardsData.set(containerId, []);
-        }
-        renderedCardsData.get(containerId).push({
-            template,
-            unifiedProduct,
-            productItemCode: product.itemCode || product.id,
-        });
-    }
-    // Use shared renderer
-    return (0, product_card_1.renderProductCard)(unifiedProduct, template, context);
-}
-/**
- * Render default card when no product card template is defined
- */
-function renderDefaultCard(product, widget) {
-    const hasDiscount = product.originalPrice && product.originalPrice > product.price;
-    const discountPercent = hasDiscount
-        ? Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)
-        : 0;
-    let badgesHTML = '';
-    if (product.isNew)
-        badgesHTML += '<span class="recommendation-badge recommendation-badge-new">New</span>';
-    if (hasDiscount)
-        badgesHTML += `<span class="recommendation-badge recommendation-badge-sale">-${discountPercent}%</span>`;
-    if (product.isBestseller)
-        badgesHTML += '<span class="recommendation-badge recommendation-badge-bestseller">Bestseller</span>';
-    let addToCartHTML = '';
-    if (widget.addToCartEnabled) {
-        const productItemCode = product.itemCode || product.id;
-        addToCartHTML = `
-      <button class="recommendation-add-to-cart" 
-        ${product_card_1.DATA_ATTRS.ACTION}="${product_card_1.ACTIONS.ADD_TO_CART}"
-        ${product_card_1.DATA_ATTRS.PRODUCT_ID}="${productItemCode}">
-        ${widget.cartButtonText || 'Add to Cart'}
-      </button>
-    `;
-    }
-    return `
-    <div class="recommendation-card-inner">
-      <div class="recommendation-card-image">
-        ${badgesHTML ? `<div class="recommendation-badges">${badgesHTML}</div>` : ''}
-        <img src="${product.imageUrl}" alt="${product.title}" loading="lazy" />
-      </div>
-      <div class="recommendation-card-content">
-        <h3 class="recommendation-card-title">${product.title}</h3>
-        <div class="recommendation-card-price">
-          ${hasDiscount ? `<span class="recommendation-price-original">${(0, format_1.formatPrice)(product.originalPrice)}</span>` : ''}
-          <span class="recommendation-price-current">${(0, format_1.formatPrice)(product.price)}</span>
-        </div>
-        ${addToCartHTML}
-      </div>
-    </div>
-    <style>
-      .recommendation-card-inner {
-        background: white;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
-        cursor: pointer;
-      }
-      .recommendation-card-inner:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
-      }
-      .recommendation-card-image {
-        position: relative;
-        padding-top: 100%;
-      }
-      .recommendation-card-image img {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-      .recommendation-badges {
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        z-index: 1;
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-      }
-      .recommendation-badge {
-        padding: 4px 8px;
-        font-size: 12px;
-        font-weight: 600;
-        border-radius: 4px;
-        text-transform: uppercase;
-      }
-      .recommendation-badge-new {
-        background: #22c55e;
-        color: white;
-      }
-      .recommendation-badge-sale {
-        background: #ef4444;
-        color: white;
-      }
-      .recommendation-badge-bestseller {
-        background: #f59e0b;
-        color: white;
-      }
-      .recommendation-card-content {
-        padding: 12px;
-      }
-      .recommendation-card-title {
-        font-size: 14px;
-        font-weight: 500;
-        color: #111;
-        margin: 0 0 8px;
-        line-height: 1.4;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-      .recommendation-card-price {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .recommendation-price-original {
-        text-decoration: line-through;
-        color: #999;
-        font-size: 13px;
-      }
-      .recommendation-price-current {
-        font-weight: 600;
-        color: #111;
-        font-size: 16px;
-      }
-      .recommendation-add-to-cart {
-        width: 100%;
-        margin-top: 12px;
-        padding: 10px;
-        background: #111;
-        color: white;
-        border: none;
-        border-radius: 6px;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: background 0.2s ease;
-      }
-      .recommendation-add-to-cart:hover {
-        background: #333;
-      }
-    </style>
-  `;
-}
-/**
- * Create product card DOM element with event handlers
- * This is the main entry point for creating product cards
- *
- * @param containerId - Optional ID for tracking cards to execute JS later
- */
-function createProductCard(product, widget, config, handleAddToCart, trackEvent, trackBehavior, containerId) {
-    const card = document.createElement('div');
-    card.className = 'recommendation-card';
-    card.setAttribute('data-product-id', product.itemCode || product.id);
-    // If custom product card template is defined
-    if (widget.productCard) {
-        // Custom templates are already sanitized in renderCustomProductCard -> sharedRenderProductCard
-        card.innerHTML = renderCustomProductCard(product, widget.productCard, containerId);
-    }
-    else {
-        // Default card template - sanitize the output
-        card.innerHTML = (0, sanitize_1.sanitizeProductHTML)(renderDefaultCard(product, widget));
-    }
-    // Check if custom template has its own links (has <a> tags)
-    const hasCustomLinks = widget.productCard?.customHTML &&
-        (widget.productCard.customHTML.includes('<a ') || widget.productCard.customHTML.includes('<a\''));
-    // Add click handler for add-to-cart actions
-    card.addEventListener('click', (e) => {
-        const target = e.target;
-        const isAddToCart = target.closest(`[${product_card_1.DATA_ATTRS.ACTION}="${product_card_1.ACTIONS.ADD_TO_CART}"]`);
-        if (isAddToCart) {
-            e.preventDefault();
-            handleAddToCart(product, widget, config, trackEvent, trackBehavior);
-            return;
-        }
-        // If using custom template with links, let anchor tags handle navigation
-        // Only navigate automatically for non-custom templates
-        if (!hasCustomLinks) {
-            // Track click and navigate for default templates
-            trackEvent('click', widget.id, product.itemCode || product.id, config);
-            // Also track behavior for AI personalization (view = product page click)
-            if (trackBehavior) {
-                trackBehavior('view', {
-                    itemCode: product.itemCode || product.id,
-                    category: product.categories,
-                    price: product.price,
-                }, config);
-            }
-            window.location.href = product.url;
-            return;
-        }
-        // For custom templates with links:
-        // Check if clicked on or inside an anchor tag - if yes, track event and let anchor handle it
-        const closestAnchor = target.closest('a');
-        if (closestAnchor) {
-            trackEvent('click', widget.id, product.itemCode || product.id, config);
-            // Let the anchor tag handle its own navigation
-            return;
-        }
-        // Clicked outside any anchor in custom template - do nothing, don't navigate
-        // User can add custom JS if they want other click behavior
-    });
-    return card;
-}
-/**
- * Execute JavaScript for product cards after DOM insertion
- * Call this after inserting the HTML into the DOM
- */
-function executeCardScriptsForRecommendations(containerId, container) {
-    const cardsData = renderedCardsData.get(containerId);
-    if (!cardsData)
-        return;
-    cardsData.forEach((cardData) => {
-        const cardElement = container.querySelector(`[data-product-id="${cardData.productItemCode}"] .selwise-card-inner`);
-        if (cardElement && cardData.template.customJs) {
-            const context = {
-                source: 'recommendation',
-                formatPrice: format_1.formatPrice,
-            };
-            (0, product_card_1.executeCardScript)(cardElement, cardData.template, cardData.unifiedProduct, context);
-        }
-    });
-    // Clean up stored data
-    renderedCardsData.delete(containerId);
-}
-//# sourceMappingURL=product-card-renderer.js.map

package/dist/npm/cjs/modules/recommendation/components/product-card-renderer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"product-card-renderer.js","sourceRoot":"","sources":["../../../../../../src/modules/recommendation/components/product-card-renderer.ts"],"names":[],"mappings":"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"}