@salla.sa/twilight-components 3.0.12 → 3.0.14

package/dist/collection/components/salla-search/salla-search.js

@@ -7,7 +7,7 @@ import Cancel from "../../assets/svg/cancel.svg";
 import ClockHistory from "../../assets/svg/clock-history.svg";
 import KeyBoardArrowLeftIcon from "../../assets/svg/keyboard_arrow_left.svg";
 import KeyBoardArrowRightIcon from "../../assets/svg/keyboard_arrow_right.svg";
-import { DEFAULT_LABELS, addToSearchHistory, getSearchResultsUrl, loadLabels, loadPopularSearches, loadSearchHistory, registerTranslationDefaults, saveSearchHistory, withSvsParam, } from "./utils";
+import { DEFAULT_LABELS, addToSearchHistory, getSearchResultsUrl, loadLabels, loadPopularSearches, loadSearchHistory, registerTranslationDefaults, saveSearchHistory, saveTermToSearchHistory, withSvsParam, } from "./utils";
 import Helper from "../../Helpers/Helper";
 export class SallaSearch {
     constructor() {
@@ -68,6 +68,7 @@ export class SallaSearch {
             productClick: (product, position) => {
                 Helper.saveProductSource('search');
                 this.commitSearchHistory(this.search_term);
+                this.commitRecommendation(product.name);
                 salla.event.emit('salla-search::product.clicked', [{ product, position }]);
                 this.modal?.close();
             },
@@ -151,6 +152,14 @@ export class SallaSearch {
         this.searchHistory = addToSearchHistory(this.searchHistory, val);
         saveSearchHistory(this.searchHistory);
     }
+    // Top (trending/suggested) items navigate away on click, so the write is synchronous
+    // (salla.storage.set) and happens in the click handler itself, before the navigation starts.
+    commitRecommendation(name) {
+        if (!name?.trim()) {
+            return;
+        }
+        this.searchHistory = saveTermToSearchHistory(name);
+    }
     removeFromSearchHistory(term) {
         this.searchHistory = this.searchHistory.filter(existing => existing !== term);
         saveSearchHistory(this.searchHistory);
@@ -225,13 +234,19 @@ export class SallaSearch {
         if (!this.trendingCategories.length) {
             return null;
         }
-        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("div", { class: "s-search-idle-categories-list" }, this.trendingCategories.map(category => (h("a", { class: "s-search-idle-category-chip", href: category.url, onClick: () => this.tracking.recommendationClick(category.name, 'category') }, category.name, category.count ? (h("span", { class: "s-search-idle-category-count" }, category.count)) : null))))));
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("div", { class: "s-search-idle-categories-list" }, this.trendingCategories.map(category => (h("a", { class: "s-search-idle-category-chip", href: category.url, onClick: () => {
+                this.commitRecommendation(category.name);
+                this.tracking.recommendationClick(category.name, 'category');
+            } }, category.name, category.count ? (h("span", { class: "s-search-idle-category-count" }, category.count)) : null))))));
     }
     renderMostSearchedProductsSection(title, source) {
         if (!this.mostSearchedProducts.length) {
             return null;
         }
-        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("ul", { class: "s-search-most-searched-list" }, this.mostSearchedProducts.map(product => (h("li", null, h("a", { class: "s-search-most-searched-item", href: product.url, onClick: () => this.tracking.recommendationClick(product.name, source) }, h("span", { class: "s-search-most-searched-icon", innerHTML: Search }), product.name)))))));
+        return (h("div", null, h("p", { class: "s-search-idle-section-title" }, title), h("ul", { class: "s-search-most-searched-list" }, this.mostSearchedProducts.map(product => (h("li", null, h("a", { class: "s-search-most-searched-item", href: product.url, onClick: () => {
+                this.commitRecommendation(product.name);
+                this.tracking.recommendationClick(product.name, source);
+            } }, h("span", { class: "s-search-most-searched-icon", innerHTML: Search }), product.name)))))));
     }
     renderSearchHistorySection() {
         // Only in the empty/zero state - hidden as soon as there's input text or results.

package/dist/collection/components/salla-search/utils.js

@@ -71,6 +71,13 @@ export function addToSearchHistory(history, term) {
     const withoutDuplicate = history.filter(existing => existing.toLowerCase() !== trimmed.toLowerCase());
     return [trimmed, ...withoutDuplicate].slice(0, SEARCH_HISTORY_LIMIT);
 }
+// Re-reads storage instead of trusting a component's in-memory copy, so another <salla-search>
+// instance on the page (e.g. header + mobile menu) can't have its entry overwritten by a stale list.
+export function saveTermToSearchHistory(term) {
+    const updated = addToSearchHistory(loadSearchHistory(), term);
+    saveSearchHistory(updated);
+    return updated;
+}
 const EMPTY_POPULAR_SEARCH_DATA = {
     trendingCategories: [],
     mostSearchedProducts: [],