@salla.sa/twilight-components 2.14.350 → 2.14.352

package/dist/collection/components/salla-products-list/salla-products-list.js

@@ -197,19 +197,6 @@ export class SallaProductsList {
         //as a request they don't want to let the user to open the product details
         //todo:: find a better way to handle this request
         this.getSource() === 'landing-page' && (product.url = '');
-        try {
-            // Add source query param to product URL for tracking in Product Viewed event
-            if (this.source && product.url && !product.url.includes('s-product-source=')) {
-                const [urlWithoutFragment, fragment] = product.url.split('#');
-                const separator = urlWithoutFragment.includes('?') ? '&' : '?';
-                const pageSlug = salla.config?.get('page.slug') || 'unknown';
-                const sourceValue = `${pageSlug}.${this.source}`;
-                product.url = `${urlWithoutFragment}${separator}s-product-source=${sourceValue}${fragment ? '#' + fragment : ''}`;
-            }
-        }
-        catch (error) {
-            Salla.log('Error with source');
-        }
         const customComponentTag = this.hasCustomComponent ? this.productCardComponent : 'salla-product-card';
         const productCard = document.createElement(customComponentTag);
         productCard.product = product;
@@ -217,15 +204,15 @@ export class SallaProductsList {
         this.applyHorizontalCardStyles(productCard);
         // Attach click event listener to save the current products snapshot
         productCard.addEventListener('click', (event) => {
-            if (!this.hasInfiniteScroll) {
-                return;
-            }
             const target = event.target;
             // Check if the clicked element is an anchor or inside an anchor
             const anchor = target.closest('a');
             if (anchor) {
-                this.takeStateSnapshot();
-                sessionStorage.setItem(this.lastViewedProductKey, product.id);
+                Helper.saveProductSource(this.getSource());
+                if (this.hasInfiniteScroll) {
+                    this.takeStateSnapshot();
+                    sessionStorage.setItem(this.lastViewedProductKey, product.id);
+                }
             }
         });
         return productCard;
@@ -555,7 +542,7 @@ export class SallaProductsList {
     }
     getInitialData() {
         this.loading();
-        return salla.product.api.fetch({ source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit }).then(async (response) => {
+        return salla.product.api.fetch({ source: Helper.getApiSource(this.getSource()), source_value: this.getSourceValue(), limit: this.limit }).then(async (response) => {
             if (!response.data.length) {
                 this.showPlaceholder = true;
                 this.placeholderLoader && this.placeholderLoader.remove();
@@ -581,7 +568,7 @@ export class SallaProductsList {
             .then(() => {
             this.hasCustomComponent = !!customElements.get(this.productCardComponent);
             this.sourceValueIsValid = !!(this.getSourceValue() || this.isSourceWithoutValue());
-            this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page'].includes(this.getSource()) && !this.limit;
+            this.hasInfiniteScroll = !['json', 'selected', 'related', 'landing-page', 'recently'].includes(this.getSource()) && !this.limit;
             let searchParams = new URLSearchParams(window.location.search);
             try {
                 this.sortBy = this.sortBy || searchParams.get('sort') || searchParams.get('by');
@@ -773,8 +760,8 @@ export class SallaProductsList {
                 "attribute": "source",
                 "mutable": true,
                 "complexType": {
-                    "original": "'categories' | 'latest' | 'related' | 'brands' | 'json' | 'search' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'sales' | 'wishlist' | 'top-rated' | 'reorder'",
-                    "resolved": "\"brands\" | \"categories\" | \"json\" | \"landing-page\" | \"latest\" | \"offers\" | \"related\" | \"reorder\" | \"sales\" | \"search\" | \"selected\" | \"tags\" | \"top-rated\" | \"wishlist\"",
+                    "original": "'categories' | 'latest' | 'related' | 'brands' | 'json' | 'search' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'sales' | 'wishlist' | 'top-rated' | 'reorder' | 'recently'",
+                    "resolved": "\"brands\" | \"categories\" | \"json\" | \"landing-page\" | \"latest\" | \"offers\" | \"recently\" | \"related\" | \"reorder\" | \"sales\" | \"search\" | \"selected\" | \"tags\" | \"top-rated\" | \"wishlist\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/salla-products-slider/salla-products-slider.js

@@ -42,7 +42,7 @@ export class SallaProductsSlider {
                 this.isReady = false;
                 return;
             }
-            return salla.product.api.fetch({ source: this.getSource(), source_value: this.getSourceValue(), limit: this.limit })
+            return salla.product.api.fetch({ source: Helper.getApiSource(this.getSource()), source_value: this.getSourceValue(), limit: this.limit })
                 .then(response => Helper.injectExtraFieldsToResponse(response))
                 .then(response => {
                 this.productsData = response.data;
@@ -72,18 +72,20 @@ export class SallaProductsSlider {
     getItemHTML(product) {
         //as a request they don't want to let the user to open the product details
         //todo:: find a better way to handle this request
-        this.getSource() === 'landing-page' && (product.url = '');
+        const isLandingPage = this.getSource() === 'landing-page';
+        isLandingPage && (product.url = '');
+        const handleClick = isLandingPage ? undefined : () => Helper.saveProductSource(this.getSource());
         if (this.hasCustomComponent && this.productCardComponent.toLowerCase() == 'custom-salla-product-card') {
-            return h("div", { class: "s-products-slider-card" }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
+            return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("custom-salla-product-card", { product: product, source: this.getSource(), "source-value": this.getSourceValue() }));
         }
         if (this.hasCustomComponent) {
             const customElem = document.createElement(this.productCardComponent);
             customElem.setAttribute('product', JSON.stringify(product));
             customElem.setAttribute('source', this.getSource());
             customElem.setAttribute('source-value', this.getSourceValue());
-            return h("div", { class: "s-products-slider-card", innerHTML: customElem.outerHTML });
+            return h("div", { class: "s-products-slider-card", onClick: handleClick, innerHTML: customElem.outerHTML });
         }
-        return h("div", { class: "s-products-slider-card" }, h("salla-product-card", { "show-quantity": this.getSource() == 'landing-page', "hide-add-btn": this.getSource() == 'landing-page', "shadow-on-hover": true, product: product }));
+        return h("div", { class: "s-products-slider-card", onClick: handleClick }, h("salla-product-card", { "show-quantity": isLandingPage, "hide-add-btn": isLandingPage, "shadow-on-hover": true, product: product }));
     }
     canRender() {
         return this.sourceValueIsValid && this.isReady;
@@ -237,8 +239,8 @@ export class SallaProductsSlider {
                 "attribute": "source",
                 "mutable": true,
                 "complexType": {
-                    "original": "'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'wishlist' | 'top-rated'",
-                    "resolved": "\"brands\" | \"categories\" | \"json\" | \"landing-page\" | \"latest\" | \"offers\" | \"related\" | \"selected\" | \"tags\" | \"top-rated\" | \"wishlist\"",
+                    "original": "'categories' | 'latest' | 'related' | 'brands' | 'json' | 'tags' | 'selected' | 'offers' | 'landing-page' | 'wishlist' | 'top-rated' | 'recently'",
+                    "resolved": "\"brands\" | \"categories\" | \"json\" | \"landing-page\" | \"latest\" | \"offers\" | \"recently\" | \"related\" | \"selected\" | \"tags\" | \"top-rated\" | \"wishlist\"",
                     "references": {}
                 },
                 "required": false,

package/dist/components/Helper.js

@@ -51,6 +51,10 @@ class Helper {
             'components.most_sales_products': 'sales', //temporary, delete it after two days from now
         }[source || salla.config.get('page.slug')] || source || 'latest';
     }
+    getApiSource(source) {
+        const apiSourceMap = { 'recently': 'selected' };
+        return apiSourceMap[source] || source;
+    }
     getPageTitleForSource(source) {
         source = {
             'brands': 'common.titles.brands',
@@ -177,6 +181,16 @@ class Helper {
     productsIncludes() {
         return this.includes?.filter(field => field != 'metadata');
     }
+    saveProductSource(source) {
+        if (!source)
+            return;
+        try {
+            sessionStorage.setItem('s-viewed-source', source);
+        }
+        catch (error) {
+            salla.logger.warn('Error saving product source to session storage');
+        }
+    }
     parseJson(includes) {
         if (typeof includes !== 'string') {
             return includes;