@selwise/widget 0.0.1

package/dist/npm/esm/shared/product-card/renderer.js

@@ -0,0 +1,334 @@
+/**
+ * Shared Product Card Renderer
+ * Unified rendering logic for both search and recommendation modules
+ */
+import { sanitizeProductHTML } from '../../utils/sanitize.js';
+/**
+ * Data attributes for widget actions
+ * Using data-selwise-* attributes for flexible element targeting
+ */
+export const DATA_ATTRS = {
+    ACTION: 'data-selwise-action',
+    PRODUCT_ID: 'data-product-id',
+    WIDGET_ID: 'data-widget-id',
+};
+export const ACTIONS = {
+    ADD_TO_CART: 'add-to-cart',
+    QUICK_VIEW: 'quick-view',
+};
+/**
+ * Render custom HTML template with variable replacement
+ */
+export function renderCustomTemplate(product, template, context) {
+    if (!template.customHTML)
+        return '';
+    let html = template.customHTML;
+    const fields = template.fields || [];
+    // Replace mapped fields from template configuration
+    // User defines field mappings in the panel (e.g., fieldId 'shortDesc' -> productField 'shortDescription')
+    fields.forEach((field) => {
+        if (field.id && field.productField) {
+            // Get value directly from product using the mapped field name
+            const value = product[field.productField];
+            const safeValue = value ?? '';
+            html = html.replace(new RegExp(`\\$\\{${field.id}\\}`, 'g'), String(safeValue));
+        }
+    });
+    const canonicalProductItemCode = product.itemCode || product.id;
+    // Built-in variables - comprehensive list for template authors
+    const builtIns = {
+        // Identity
+        id: product.id,
+        productId: product.id,
+        itemCode: canonicalProductItemCode,
+        sku: product.sku || '',
+        // Display
+        name: product.title,
+        title: product.title,
+        description: product.description,
+        shortDescription: product.shortDescription || '',
+        shortDesc: product.shortDescription || '', // Alias
+        // Images
+        image: product.imageUrl,
+        imageUrl: product.imageUrl,
+        // Links
+        url: product.url,
+        link: product.url,
+        // Pricing
+        price: product.price,
+        formattedPrice: context.formatPrice(product.price),
+        oldPrice: product.originalPrice,
+        formattedOldPrice: product.originalPrice ? context.formatPrice(product.originalPrice) : '',
+        originalPrice: product.originalPrice,
+        // Discounts
+        discount: product.discountRate || '',
+        discountRate: product.discountRate || '',
+        salePercentage: product.originalPrice && product.price
+            ? Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)
+            : '',
+        // Categories & Brand
+        brand: product.brand || '',
+        category: product.categories || '',
+        categories: product.categories || '', // Now using plural
+        // Status flags
+        isSale: !!product.originalPrice && product.originalPrice > product.price,
+        isNew: product.isNew || false,
+        isBestseller: product.isBestseller || false,
+        // Stock
+        stock: product.stock,
+        inStock: product.inStock !== false,
+        // Reviews
+        rating: product.rating || '',
+        reviewCount: product.reviewCount || '',
+        // Widget context
+        widgetId: context.widgetId || '',
+        source: context.source,
+        // Add to cart data attributes (for easy copy-paste in templates)
+        addToCartAttrs: `${DATA_ATTRS.ACTION}="${ACTIONS.ADD_TO_CART}" ${DATA_ATTRS.PRODUCT_ID}="${canonicalProductItemCode}"`,
+    };
+    // Replace all built-in variables
+    Object.entries(builtIns).forEach(([key, val]) => {
+        const value = val !== undefined && val !== null ? val : '';
+        html = html.replace(new RegExp(`\\$\\{${key}\\}`, 'g'), String(value));
+    });
+    // Sanitize the final HTML to prevent XSS attacks
+    return sanitizeProductHTML(html);
+}
+/**
+ * Render default product card with standard layout
+ */
+export function renderDefaultCard(product, template, context) {
+    const canonicalProductItemCode = product.itemCode || product.id;
+    const layoutType = template.layoutType || 'vertical';
+    const imagePosition = template.imagePosition || 'top';
+    const isHorizontal = layoutType === 'horizontal';
+    const flexDirection = isHorizontal ? 'row' : 'column';
+    const objectFit = template.imageSize || 'cover';
+    // Badges
+    let badgesHTML = '';
+    if (template.showBadges) {
+        if (product.isNew) {
+            badgesHTML += '<span class="selwise-badge selwise-badge-new">New</span>';
+        }
+        if (product.isSale) {
+            badgesHTML += '<span class="selwise-badge selwise-badge-sale">Sale</span>';
+        }
+        if (product.isBestseller) {
+            badgesHTML += '<span class="selwise-badge selwise-badge-bestseller">Bestseller</span>';
+        }
+    }
+    // Image
+    const imgWidth = isHorizontal ? '40%' : '100%';
+    const imgHeight = isHorizontal ? 'auto' : '200px';
+    const imageHtml = `
+    <div class="selwise-card-image" style="position:relative;width:${imgWidth};height:${imgHeight};flex-shrink:0;overflow:hidden;">
+      <a href="${product.url}" style="display:block;width:100%;height:100%;">
+        <img src="${product.imageUrl}" alt="${escapeHtmlDefault(product.title)}" loading="lazy" style="width:100%;height:100%;object-fit:${objectFit};" />
+      </a>
+      ${badgesHTML ? `<div class="selwise-badges">${badgesHTML}</div>` : ''}
+    </div>
+  `;
+    // Fields
+    const fields = template.fields || [];
+    let fieldsHtml = '';
+    fields.forEach((field) => {
+        const isVisible = field.visible !== undefined ? field.visible : field.enabled;
+        if (!isVisible)
+            return;
+        if (field.type === 'image')
+            return; // Skip image fields
+        switch (field.type) {
+            case 'text':
+                const textValue = getFieldValue(product, field);
+                const isName = field.id === 'name' || field.productField === 'title';
+                fieldsHtml += `<div class="selwise-card-text ${isName ? 'selwise-card-title' : ''}">${escapeHtmlDefault(String(textValue))}</div>`;
+                break;
+            case 'price':
+                fieldsHtml += `<div class="selwise-card-price">${context.formatPrice(product.price)}</div>`;
+                break;
+            case 'old_price':
+                if (product.originalPrice) {
+                    fieldsHtml += `<div class="selwise-card-old-price">${context.formatPrice(product.originalPrice)}</div>`;
+                }
+                break;
+            case 'rating':
+                if (product.rating) {
+                    fieldsHtml += `<div class="selwise-card-rating">${'★'.repeat(Math.floor(product.rating))}${'☆'.repeat(5 - Math.floor(product.rating))}</div>`;
+                }
+                break;
+            case 'button':
+                const btnBg = template.buttonStyle?.backgroundColor || '#111';
+                const btnColor = template.buttonStyle?.color || '#fff';
+                fieldsHtml += `
+          <button class="selwise-card-button" 
+            ${DATA_ATTRS.ACTION}="${ACTIONS.ADD_TO_CART}" 
+            ${DATA_ATTRS.PRODUCT_ID}="${canonicalProductItemCode}"
+            style="width:100%;margin-top:auto;padding:8px;background:${btnBg};color:${btnColor};border:none;border-radius:4px;cursor:pointer;">
+            ${field.label || template.buttonText || 'Add to Cart'}
+          </button>`;
+                break;
+        }
+    });
+    // Add button if showButton is true but no button field defined
+    const hasButtonField = fields.some((f) => f.type === 'button' && (f.visible || f.enabled));
+    if (template.showButton && !hasButtonField) {
+        const btnBg = template.buttonStyle?.backgroundColor || '#111';
+        const btnColor = template.buttonStyle?.color || '#fff';
+        fieldsHtml += `
+      <button class="selwise-card-button" 
+        ${DATA_ATTRS.ACTION}="${ACTIONS.ADD_TO_CART}" 
+        ${DATA_ATTRS.PRODUCT_ID}="${canonicalProductItemCode}"
+        style="width:100%;margin-top:8px;padding:8px;background:${btnBg};color:${btnColor};border:none;border-radius:4px;cursor:pointer;">
+        ${template.buttonText || 'Add to Cart'}
+      </button>`;
+    }
+    const contentHtml = `
+    <div class="selwise-card-content" style="padding:12px;flex:1;display:flex;flex-direction:column;">
+      ${fieldsHtml}
+    </div>
+  `;
+    // Assemble based on image position
+    let innerHtml = '';
+    if (imagePosition === 'left' || imagePosition === 'top') {
+        innerHtml = imageHtml + contentHtml;
+    }
+    else if (imagePosition === 'right' || imagePosition === 'bottom') {
+        innerHtml = contentHtml + imageHtml;
+    }
+    else {
+        innerHtml = imageHtml + contentHtml;
+    }
+    return `
+    <div class="selwise-card-inner" style="display:flex;flex-direction:${flexDirection};background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,0.05);height:100%;">
+      ${innerHtml}
+    </div>
+  `;
+}
+/**
+ * Main rendering function - chooses between custom and default templates
+ */
+export function renderProductCard(product, template, context) {
+    if (!template) {
+        // Return a minimal default card if no template provided
+        return renderMinimalCard(product, context);
+    }
+    if (template.template === 'custom' && template.customHTML) {
+        return renderCustomTemplate(product, template, context);
+    }
+    return renderDefaultCard(product, template, context);
+}
+/**
+ * Minimal card fallback when no template is provided
+ */
+function renderMinimalCard(product, context) {
+    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="selwise-badge selwise-badge-new">New</span>';
+    if (hasDiscount)
+        badgesHTML += `<span class="selwise-badge selwise-badge-sale">-${discountPercent}%</span>`;
+    if (product.isBestseller)
+        badgesHTML += '<span class="selwise-badge selwise-badge-bestseller">Bestseller</span>';
+    return `
+    <div class="selwise-card-inner">
+      <div class="selwise-card-image">
+        ${badgesHTML ? `<div class="selwise-badges">${badgesHTML}</div>` : ''}
+        <img src="${product.imageUrl}" alt="${escapeHtmlDefault(product.title)}" loading="lazy" />
+      </div>
+      <div class="selwise-card-content">
+        <h3 class="selwise-card-title">${escapeHtmlDefault(product.title)}</h3>
+        <div class="selwise-card-price-row">
+          ${hasDiscount ? `<span class="selwise-price-original">${context.formatPrice(product.originalPrice)}</span>` : ''}
+          <span class="selwise-price-current">${context.formatPrice(product.price)}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+/**
+ * Helper: Get field value from product
+ */
+function getFieldValue(product, field) {
+    if (field.productField) {
+        // Handle 'name' -> 'title' mapping from legacy data
+        const fieldName = field.productField;
+        if (fieldName === 'name')
+            return product.title;
+        // Return the mapped field value
+        return product[fieldName] || '';
+    }
+    if (field.type === 'price')
+        return product.price;
+    if (field.type === 'old_price')
+        return product.originalPrice;
+    if (field.type === 'text' && field.id === 'name')
+        return product.title;
+    return '';
+}
+/**
+ * Default HTML escaping function
+ */
+function escapeHtmlDefault(str) {
+    if (!str)
+        return '';
+    return str
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+/**
+ * Execute custom JavaScript for a product card
+ * Call this after inserting the rendered HTML into the DOM
+ */
+export function executeCardScript(cardElement, template, product, context) {
+    if (!template.customJs?.trim())
+        return;
+    const timing = template.jsTiming || 'immediate';
+    const executeNow = () => {
+        try {
+            const script = document.createElement('script');
+            script.setAttribute('data-selwise-card-js', 'true');
+            // Create context object available to the script
+            const contextData = {
+                product,
+                container: cardElement,
+                widgetId: context.widgetId,
+                template: template.id,
+            };
+            script.textContent = `(function() {
+        const product = ${JSON.stringify(product)};
+        const container = document.currentScript.parentElement;
+        const context = ${JSON.stringify(contextData)};
+        ${template.customJs}
+      }).call(window);`;
+            cardElement.appendChild(script);
+        }
+        catch (error) {
+            console.error('[Selwise] Card script execution error:', error);
+        }
+    };
+    switch (timing) {
+        case 'immediate':
+            executeNow();
+            break;
+        case 'domReady':
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', executeNow);
+            }
+            else {
+                executeNow();
+            }
+            break;
+        case 'customEvent':
+            if (template.jsEventName) {
+                document.addEventListener(template.jsEventName, executeNow, { once: true });
+            }
+            break;
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/dist/npm/esm/shared/product-card/renderer.js.map

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

package/dist/npm/esm/shared/product-card/styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Shared Product Card Styles
+ * Centralized CSS injection for product cards
+ * Injected once per page instead of per card
+ */
+/**
+ * Get the shared product card styles
+ */
+export declare function getProductCardStyles(): string;
+/**
+ * Inject product card styles into the page (once)
+ */
+export declare function injectProductCardStyles(): void;
+/**
+ * Reset injection state (for testing)
+ */
+export declare function resetStylesInjection(): void;

package/dist/npm/esm/shared/product-card/styles.js

@@ -0,0 +1,190 @@
+/**
+ * Shared Product Card Styles
+ * Centralized CSS injection for product cards
+ * Injected once per page instead of per card
+ */
+let stylesInjected = false;
+/**
+ * Get the shared product card styles
+ */
+export function getProductCardStyles() {
+    return `
+    /* SELWISE Product Card Styles */
+    .selwise-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;
+    }
+    
+    .selwise-card-inner:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+    }
+    
+    .selwise-card-image {
+      position: relative;
+      padding-top: 100%;
+    }
+    
+    .selwise-card-image img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    
+    .selwise-badges {
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      z-index: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    
+    .selwise-badge {
+      padding: 4px 8px;
+      font-size: 12px;
+      font-weight: 600;
+      border-radius: 4px;
+      text-transform: uppercase;
+    }
+    
+    .selwise-badge-new {
+      background: #22c55e;
+      color: white;
+    }
+    
+    .selwise-badge-sale {
+      background: #ef4444;
+      color: white;
+    }
+    
+    .selwise-badge-bestseller {
+      background: #f59e0b;
+      color: white;
+    }
+    
+    .selwise-card-content {
+      padding: 12px;
+    }
+    
+    .selwise-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;
+    }
+    
+    .selwise-card-text {
+      font-size: 12px;
+      color: #666;
+      margin-bottom: 4px;
+    }
+    
+    .selwise-card-price-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .selwise-card-price,
+    .selwise-price-current {
+      font-weight: 600;
+      color: #111;
+      font-size: 16px;
+    }
+    
+    .selwise-card-old-price,
+    .selwise-price-original {
+      text-decoration: line-through;
+      color: #999;
+      font-size: 13px;
+    }
+    
+    .selwise-card-rating {
+      color: #fbbf24;
+      font-size: 12px;
+      margin-bottom: 4px;
+    }
+    
+    .selwise-card-button {
+      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;
+    }
+    
+    .selwise-card-button:hover {
+      background: #333;
+    }
+    
+    .selwise-card-button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    
+    /* Shared class styles for product card buttons */
+    .recommendation-add-to-cart,
+    .product-card-button {
+      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,
+    .product-card-button:hover {
+      background: #333;
+    }
+  `;
+}
+/**
+ * Inject product card styles into the page (once)
+ */
+export function injectProductCardStyles() {
+    if (stylesInjected)
+        return;
+    const existingStyle = document.getElementById('selwise-product-card-styles');
+    if (existingStyle) {
+        stylesInjected = true;
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = 'selwise-product-card-styles';
+    style.textContent = getProductCardStyles();
+    document.head.appendChild(style);
+    stylesInjected = true;
+}
+/**
+ * Reset injection state (for testing)
+ */
+export function resetStylesInjection() {
+    stylesInjected = false;
+}
+//# sourceMappingURL=styles.js.map

package/dist/npm/esm/shared/product-card/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/shared/product-card/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,IAAI,cAAc,GAAG,KAAK,CAAC;AAE3B;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0JN,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,uBAAuB;IACrC,IAAI,cAAc;QAAE,OAAO;IAE3B,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,6BAA6B,CAAC,CAAC;IAC7E,IAAI,aAAa,EAAE,CAAC;QAClB,cAAc,GAAG,IAAI,CAAC;QACtB,OAAO;IACT,CAAC;IAED,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,6BAA6B,CAAC;IACzC,KAAK,CAAC,WAAW,GAAG,oBAAoB,EAAE,CAAC;IAC3C,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IACjC,cAAc,GAAG,IAAI,CAAC;AACxB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,oBAAoB;IAClC,cAAc,GAAG,KAAK,CAAC;AACzB,CAAC"}

package/dist/npm/esm/shared/product-card/types.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Unified Product Type
+ * Normalizes Product (recommendation) and SearchHit (search) into a common interface
+ */
+export interface UnifiedProduct {
+    id: string;
+    itemCode?: string;
+    sku?: string;
+    title: string;
+    description?: string;
+    shortDescription?: string;
+    imageUrl: string;
+    url: string;
+    price: number;
+    originalPrice?: number;
+    discountRate?: number;
+    inStock?: boolean;
+    stock?: number;
+    categories?: string;
+    brand?: string;
+    productType?: string;
+    categoryHierarchy?: string;
+    isNew?: boolean;
+    isSale?: boolean;
+    isBestseller?: boolean;
+    rating?: number;
+    reviewCount?: number;
+    variantId?: string;
+    wooProductId?: string;
+    magentoProductId?: string;
+    prestaProductId?: string;
+    attributeId?: number;
+}
+/**
+ * Product Card Template Definition
+ * Shared across search and recommendation modules
+ */
+export interface ProductCardTemplate {
+    id: string;
+    template: 'minimal' | 'standard' | 'detailed' | 'compact' | 'horizontal' | 'custom';
+    fields: ProductCardField[];
+    layoutType?: 'vertical' | 'horizontal';
+    imagePosition?: 'top' | 'left' | 'right' | 'bottom' | 'background';
+    imageSize?: 'contain' | 'cover' | 'fill';
+    showBadges?: boolean;
+    showButton?: boolean;
+    buttonText?: string;
+    buttonStyle?: {
+        backgroundColor?: string;
+        color?: string;
+        borderRadius?: string;
+    };
+    hoverEffect?: 'none' | 'shadow' | 'scale' | 'border' | 'glow';
+    customCSS?: string;
+    customHTML?: string;
+    customJs?: string;
+    jsTiming?: 'immediate' | 'domReady' | 'customEvent';
+    jsEventName?: string;
+}
+export interface ProductCardField {
+    id: string;
+    type: 'text' | 'image' | 'price' | 'old_price' | 'button' | 'rating' | 'badge' | 'custom_html';
+    label?: string;
+    productField?: string;
+    visible?: boolean;
+    enabled?: boolean;
+}
+/**
+ * Context for product card rendering
+ */
+export interface ProductCardContext {
+    source: 'search' | 'recommendation';
+    widgetId?: string;
+    formatPrice: (price: number) => string;
+    escapeHtml?: (str: string) => string;
+}
+/**
+ * Adapter: Convert recommendation Product to UnifiedProduct
+ */
+export declare function fromRecommendationProduct(product: any): UnifiedProduct;
+/**
+ * Adapter: Convert search SearchHit to UnifiedProduct
+ */
+export declare function fromSearchHit(hit: any): UnifiedProduct;