@selwise/widget 0.0.1

package/dist/npm/esm/modules/search/components/suggestions.js

@@ -0,0 +1,129 @@
+/**
+ * Search Suggestions Component
+ * Renders recent searches, popular searches, categories, and products
+ */
+export function renderSuggestions(suggestions, config, recentSearches, helpers) {
+    const s = config.styles || {};
+    const ss = suggestions.styles || {};
+    const sugg = suggestions;
+    let html = '<div class="ws-suggestions">';
+    // 1. Recent Searches
+    if (sugg.recentSearches?.enabled && recentSearches.length > 0) {
+        html += `
+      <div class="ws-suggestions-section ws-recent-searches">
+        <div class="ws-suggestions-header">
+          <span>${ss.textRecentSearches || 'Recent Searches'}</span>
+          <button class="ws-suggestions-clear ws-clear-recent">${ss.textClearRecent || 'Clear'}</button>
+        </div>
+    `;
+        recentSearches.slice(0, sugg.recentSearches.maxCount || 5).forEach(term => {
+            html += `
+        <div class="ws-suggestion-item ws-recent-item" data-term="${helpers.escapeHtml(term)}">
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polyline points="12 6 12 12 16 14"></polyline>
+          </svg>
+          <span class="ws-suggestion-text">${helpers.escapeHtml(term)}</span>
+          <button class="ws-suggestion-remove ws-remove-recent" data-term="${helpers.escapeHtml(term)}">
+            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+      `;
+        });
+        html += '</div>';
+    }
+    // 2. Popular Searches
+    if (sugg.popularSearches?.enabled && sugg.popularSearches.items?.length > 0) {
+        html += `
+      <div class="ws-suggestions-section ws-popular-searches">
+        <div class="ws-suggestions-header">
+          <span>${ss.textPopularSearches || 'Popular Searches'}</span>
+        </div>
+    `;
+        sugg.popularSearches.items.forEach(term => {
+            html += `
+        <div class="ws-suggestion-item ws-popular-search-item" data-term="${helpers.escapeHtml(term)}">
+          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2">
+            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+            <polyline points="17 6 23 6 23 12"></polyline>
+          </svg>
+          <span class="ws-suggestion-text">${helpers.escapeHtml(term)}</span>
+        </div>
+      `;
+        });
+        html += '</div>';
+    }
+    // 3. Popular Categories
+    if (sugg.popularCategories?.enabled && sugg.popularCategories.items?.length > 0) {
+        html += `
+      <div class="ws-suggestions-section ws-popular-categories-section">
+        <div class="ws-suggestions-header">
+          <span>${ss.textPopularCategories || 'Popular Categories'}</span>
+        </div>
+        <div class="ws-popular-categories">
+    `;
+        sugg?.popularCategories?.items?.forEach(cat => {
+            html += `
+        <a href="#" class="ws-category-card" data-category="${helpers.escapeHtml(cat.name)}">
+          ${cat?.imageUrl ? `<img src="${cat.imageUrl}" alt="${helpers.escapeHtml(cat.name)}" class="ws-category-img" onerror="var fb=this.parentElement.querySelector('.ws-category-img-fallback');if(fb)fb.classList.remove('hidden');this.style.display='none'" />` : ''}
+          <div class="ws-category-img${cat.imageUrl ? ' hidden ws-category-img-fallback' : ''}" style="display:${cat.imageUrl ? 'none' : 'flex'};align-items:center;justify-content:center;">
+            <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5">
+              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+            </svg>
+          </div>
+          <span class="ws-category-name">${helpers.escapeHtml(helpers.formatCategoryName(cat.name))}</span>
+        </a>
+      `;
+        });
+        html += '</div></div>';
+    }
+    // 4. Popular Products
+    if (sugg.popularProducts?.enabled && sugg.popularProducts.items?.length > 0) {
+        html += `
+      <div class="ws-suggestions-section ws-popular-products-section">
+        <div class="ws-suggestions-header">
+          <span>${ss.textPopularProducts || 'Popular Products'}</span>
+        </div>
+        <div class="ws-popular-products">
+    `;
+        sugg.popularProducts.items.forEach(product => {
+            const hasDiscount = product.originalPrice && product.originalPrice > product.price;
+            const discountPercent = hasDiscount ? Math.round((1 - product.price / product.originalPrice) * 100) : 0;
+            const productItemCode = product.itemCode || product.id;
+            html += `
+        <a href="${product.url || '#'}" class="ws-product-card" data-product-id="${productItemCode}">
+          <div class="ws-product-card-img-wrap" style="position:relative;">
+            ${product.imageUrl ? `<img src="${product.imageUrl}" alt="${helpers.escapeHtml(product.title)}" class="ws-product-card-img" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'" />` : ''}
+            <div class="ws-product-card-img" style="display:${product.imageUrl ? 'none' : 'flex'};align-items:center;justify-content:center;">
+              <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="#cbd5e1" stroke-width="1.5">
+                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                <polyline points="21 15 16 10 5 21"></polyline>
+              </svg>
+            </div>
+            ${hasDiscount ? `<span class="ws-product-card-discount">-${discountPercent}%</span>` : ''}
+          </div>
+          <div class="ws-product-card-info">
+            <p class="ws-product-card-name">${helpers.escapeHtml(product.title)}</p>
+            <div class="ws-product-card-prices">
+              <span class="ws-product-card-price">${helpers.formatPrice(product.price)}</span>
+              ${hasDiscount ? `<span class="ws-product-card-old-price">${helpers.formatPrice(product.originalPrice)}</span>` : ''}
+            </div>
+          </div>
+        </a>
+      `;
+        });
+        html += '</div></div>';
+    }
+    html += '</div>';
+    // Check if there's any content to show
+    const hasContent = (sugg.recentSearches?.enabled && recentSearches.length > 0) ||
+        (sugg.popularSearches?.enabled && sugg.popularSearches.items?.length > 0) ||
+        (sugg.popularCategories?.enabled && sugg.popularCategories.items?.length > 0) ||
+        (sugg.popularProducts?.enabled && sugg.popularProducts.items?.length > 0);
+    return hasContent ? html : '';
+}
+//# sourceMappingURL=suggestions.js.map

package/dist/npm/esm/modules/search/components/suggestions.js.map

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

package/dist/npm/esm/modules/search/index.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Search Module for Widget Script
+ * Refactored version - uses modular components
+ */
+import { ExperimentManager } from '../../core';
+export declare class SearchModule {
+    private apiUrl;
+    private siteKey;
+    private config;
+    private suggestions;
+    private container;
+    private input;
+    private resultsContainer;
+    private debounceTimer;
+    private cache;
+    private cacheMaxAge;
+    private isOpen;
+    private focusedIndex;
+    private sessionId;
+    private selectedCategory;
+    private overlayElement;
+    private searchOpenTime;
+    private lastQuery;
+    private lastResultCount;
+    private experimentManager?;
+    private segmentManager?;
+    private abortController;
+    private boundHandleDocumentClick;
+    private boundHandleDocumentKeydown;
+    private boundHandleHotkey;
+    private boundHandleClearClick;
+    private clearButtonEl;
+    private spaObserver;
+    private isDestroyed;
+    constructor(apiUrl: string, siteKey: string, experimentManager?: ExperimentManager, segmentManager?: any);
+    /**
+     * Destroy the search module and cleanup all resources
+     * Call this when navigating away in SPA or when module is no longer needed
+     */
+    destroy(): void;
+    private getOrCreateVisitorId;
+    private getStoredSiteUserId;
+    private generateEventId;
+    private getAPIConfig;
+    init(): Promise<void>;
+    private getSuggestionStyles;
+    private setupSpaNavigationWatcher;
+    private render;
+    private attachEventListeners;
+    private setupHotkey;
+    private handleInput;
+    private handleFocus;
+    private handleKeydown;
+    private search;
+    private renderResults;
+    private handleAddToCartClick;
+    private renderSuggestions;
+    private attachSuggestionListeners;
+    private showLoading;
+    private showEmpty;
+    private openResults;
+    private closeResults;
+    private openOverlay;
+    private closeOverlay;
+    private clearSearch;
+    private formatCategoryName;
+}