@selwise/widget 0.0.1

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

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

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