@salla.sa/twilight-components 2.14.486 → 2.14.487

package/dist/collection/components/salla-cart-summary-card/salla-cart-summary-card.js

@@ -0,0 +1,401 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+const SKELETON_ROWS = [
+    { label: '100px', value: '56px' },
+    { label: '72px', value: '64px' },
+    { label: '96px', value: '48px' },
+];
+/**
+ * Cart summary card. Inline on desktop (≥1024px), sticky bar with
+ * collapsible sheet on mobile.
+ */
+export class SallaCartSummaryCard {
+    constructor() {
+        this.validateForms = true;
+        this.cartCount = 0;
+        this.cartTotal = 0;
+        this.cartTotalDiscount = 0;
+        this.cartSubTotal = 0;
+        this.cartOptionsTotal = 0;
+        this.cartShippingCost = 0;
+        this.cartTaxAmount = 0;
+        this.cartHasShipping = false;
+        this.isOpen = false;
+        this.isDesktop = false;
+        /** True until the first cart payload (API response or cart event) arrives. */
+        this.isLoading = true;
+        // Original DOM location — needed to restore the host on the mobile→desktop flip.
+        this.originalParent = null;
+        this.originalNextSibling = null;
+        this.bodyObserver = null;
+        this.mediaQueryList = null;
+        this.submitObserver = null;
+        this.isSubmitting = false;
+        // Stable handler refs — anonymous functions can't be unbound from listeners.
+        this.mqlChangeHandler = (e) => {
+            this.isDesktop = e.matches;
+            this.applyMode();
+        };
+        this.cartEventNames = [
+            'cart::details.fetched',
+            'cart::updated',
+            'cart::latest.fetched',
+            'cart::coupon.added',
+            'cart::coupon.deleted',
+        ];
+        this.cartEventHandler = (payload) => this.applyCartData(this.extractCart(payload));
+        this.toggleSheet = () => {
+            if (!this.isDesktop)
+                this.isOpen = !this.isOpen;
+        };
+        this.handleSubmit = async (event) => {
+            // Re-entrancy guard, set before the async validation so a second tap during
+            // that window can't fire a second submit. Covers all user types.
+            if (this.isSubmitting) {
+                event.preventDefault();
+                return;
+            }
+            this.isSubmitting = true;
+            if (this.validateForms && !(await this.validateCartForms())) {
+                event.preventDefault();
+                salla.notify?.error?.(salla.lang?.get?.('common.messages.required_fields'));
+                this.isSubmitting = false; // validation failed → allow retry
+                return;
+            }
+            const btn = this.host.querySelector('#s-cart-summary-card-submit');
+            if (typeof salla !== 'undefined' && salla.config?.get?.('user.type') !== 'guest' && btn) {
+                btn.load?.();
+                // Pin loading across re-renders; auto-clear after 10s so a failed submit
+                // doesn't lock the button forever.
+                this.submitObserver?.disconnect();
+                if (this.submitObserverTimeout)
+                    clearTimeout(this.submitObserverTimeout);
+                this.submitObserver = new MutationObserver(() => {
+                    if (!btn.hasAttribute('loading'))
+                        btn.setAttribute('loading', '');
+                });
+                this.submitObserver.observe(btn, { attributes: true, attributeFilter: ['loading'] });
+                this.submitObserverTimeout = window.setTimeout(() => {
+                    this.submitObserver?.disconnect();
+                    this.submitObserver = null;
+                    btn.removeAttribute?.('loading');
+                }, 10000);
+            }
+            salla.cart?.submit?.();
+            // Release after submit kicks off: success navigates away, a guest opens the
+            // login modal. Short delay blocks the double-tap race without a long lock.
+            window.setTimeout(() => { this.isSubmitting = false; }, 1500);
+        };
+    }
+    // Sync: returning a promise would make Stencil defer first paint. init() runs async.
+    componentWillLoad() {
+        this.mediaQueryList = window.matchMedia(this.desktopMediaQuery());
+        this.isDesktop = this.mediaQueryList.matches;
+        if (this.isDesktop)
+            this.isOpen = true;
+        // isLoading is true by default → first paint is the skeleton.
+        this.init();
+    }
+    // Not awaited by componentWillLoad, so it can't block first paint.
+    async init() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.loadTranslations();
+        // 'cart::updated' is in cartEventNames — don't also use onUpdated (it leaks, no off()).
+        this.cartEventNames.forEach(name => salla.event.on(name, this.cartEventHandler));
+        this.fetchCart();
+    }
+    loadTranslations() {
+        this.summaryLabel = salla.lang.get('pages.cart.summary');
+        this.itemsTotalLabel = salla.lang.get('pages.cart.items_total');
+        this.itemsTotalNoTaxLabel = salla.lang.get('pages.cart.items_total_without_tax');
+        this.optionsTotalLabel = salla.lang.get('pages.cart.order_options_total');
+        this.shippingCostLabel = salla.lang.get('pages.cart.shipping_cost');
+        this.vatTaxLabel = salla.lang.get('pages.cart.VAT_tax_amount');
+        this.savedLabel = salla.lang.get('pages.cart.discount');
+        this.discountBadge = salla.lang.get('pages.cart.saved');
+        this.finalTotalLabel = salla.lang.get('pages.cart.final_total');
+        this.pricesTaxedLabel = salla.lang.get('pages.cart.prices_taxed');
+        this.completeOrderLabel = salla.lang.get('pages.cart.complete_order');
+        this.openSummaryLabel = salla.lang.get('pages.cart.open_summary');
+        this.closeSummaryLabel = salla.lang.get('pages.cart.close_summary');
+        this.itemsCountTemplate = salla.lang.get('pages.cart.items_with_count');
+    }
+    /** Coerces PHP cart values: numbers, strings, and Money/MoneyTaxable objects. */
+    num(v) {
+        if (v === null || v === undefined)
+            return 0;
+        if (typeof v === 'number')
+            return isFinite(v) ? v : 0;
+        if (typeof v === 'string')
+            return parseFloat(v) || 0;
+        if (typeof v === 'object') {
+            if ('amount' in v)
+                return this.num(v.amount);
+            if ('value' in v)
+                return this.num(v.value);
+            if ('formatted' in v)
+                return this.num(v.formatted);
+        }
+        return 0;
+    }
+    // Desktop cutoff — must match the SCSS media queries so JS and CSS never diverge.
+    breakpointPx() {
+        return 1024;
+    }
+    desktopMediaQuery() {
+        return `(min-width: ${this.breakpointPx()}px)`;
+    }
+    componentDidLoad() {
+        // Capture original location BEFORE the portal relocates the host.
+        this.originalParent = this.host.parentElement;
+        this.originalNextSibling = this.host.nextSibling;
+        // Re-init if componentWillLoad failed to set it (rare hydration/race edge case).
+        if (!this.mediaQueryList) {
+            this.mediaQueryList = window.matchMedia(this.desktopMediaQuery());
+            this.isDesktop = this.mediaQueryList.matches;
+        }
+        this.applyMode();
+        // iOS Safari < 14 lacks addEventListener on MediaQueryList — fall back to addListener.
+        if (this.mediaQueryList.addEventListener) {
+            this.mediaQueryList.addEventListener('change', this.mqlChangeHandler);
+        }
+        else {
+            this.mediaQueryList.addListener(this.mqlChangeHandler);
+        }
+    }
+    // Mobile: portal host to <body> so position:fixed escapes any transformed
+    // ancestor. Desktop: restore to its original DOM location.
+    applyMode() {
+        if (this.isDesktop) {
+            this.isOpen = true;
+            this.bodyObserver?.disconnect();
+            this.bodyObserver = null;
+            if (this.originalParent && this.host.parentElement !== this.originalParent) {
+                // Sibling may have been removed while we were portaled — fall back
+                // to appendChild instead of letting insertBefore throw.
+                const ref = this.originalNextSibling?.parentNode === this.originalParent
+                    ? this.originalNextSibling
+                    : null;
+                this.originalParent.insertBefore(this.host, ref);
+            }
+        }
+        else {
+            this.pinToBodyEnd();
+        }
+    }
+    // Re-pin via MutationObserver so a late-mounted footer can't paint over us.
+    pinToBodyEnd() {
+        if (this.host.parentElement !== document.body || document.body.lastElementChild !== this.host) {
+            document.body.appendChild(this.host);
+        }
+        if (!this.bodyObserver) {
+            this.bodyObserver = new MutationObserver(() => {
+                if (!this.isDesktop && document.body.lastElementChild !== this.host) {
+                    document.body.appendChild(this.host);
+                }
+            });
+            this.bodyObserver.observe(document.body, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        // Fires synchronously on every removal, incl. our own reparenting — defer a
+        // microtask and bail if reconnected, else the portal loses its listeners.
+        Promise.resolve().then(() => {
+            if (this.host.isConnected)
+                return;
+            this.bodyObserver?.disconnect();
+            this.submitObserver?.disconnect();
+            if (this.submitObserverTimeout) {
+                clearTimeout(this.submitObserverTimeout);
+                this.submitObserverTimeout = undefined;
+            }
+            // Mirror the iOS-Safari-<14 path used in componentDidLoad.
+            if (this.mediaQueryList?.removeEventListener) {
+                this.mediaQueryList.removeEventListener('change', this.mqlChangeHandler);
+            }
+            else {
+                this.mediaQueryList?.removeListener(this.mqlChangeHandler);
+            }
+            this.mediaQueryList = null;
+            this.cartEventNames.forEach(name => salla.event.off(name, this.cartEventHandler));
+        });
+    }
+    fetchCart() {
+        const cartId = salla.config?.get?.('page.id');
+        const result = salla.cart?.api?.details?.(cartId);
+        if (result && typeof result.then === 'function') {
+            result
+                .then((res) => this.applyCartData(this.extractCart(res)))
+                // On failure, fall back to the cached summary instead of stranding the skeleton.
+                .catch(() => this.applyCachedSummary());
+        }
+        else {
+            this.applyCachedSummary();
+        }
+    }
+    // Cart API failed → use the SDK's cached summary (localStorage, set on
+    // cart::updated). May be stale but beats zeros; events refresh it. Clears the
+    // skeleton either way so the CTA always renders.
+    applyCachedSummary() {
+        const summary = salla.storage?.get?.('cart.summary');
+        if (summary && typeof summary === 'object')
+            this.applyCartData(summary);
+        this.isLoading = false;
+    }
+    extractCart(payload) {
+        if (!payload)
+            return null;
+        if (payload.data?.cart)
+            return payload.data.cart;
+        if (payload.cart)
+            return payload.cart;
+        return payload;
+    }
+    applyCartData(data) {
+        if (!data)
+            return;
+        // First real payload ends the skeleton.
+        this.isLoading = false;
+        if (data.count !== undefined)
+            this.cartCount = this.num(data.count);
+        if (data.total !== undefined)
+            this.cartTotal = this.num(data.total);
+        // `total_discount` is the live field (untyped); `discount` is the typed fallback.
+        const discount = data.total_discount ?? data.discount;
+        if (discount !== undefined)
+            this.cartTotalDiscount = this.num(discount);
+        if (data.sub_total !== undefined)
+            this.cartSubTotal = this.num(data.sub_total);
+        if (data.options_total !== undefined)
+            this.cartOptionsTotal = this.num(data.options_total);
+        if (data.tax_amount !== undefined)
+            this.cartTaxAmount = this.num(data.tax_amount);
+        // Shipping cost (free-shipping aware): prefer `shipping_cost`, else `real_shipping_cost`.
+        const hasFreeShipping = !!data.free_shipping_bar?.has_free_shipping;
+        if (data.shipping_cost !== undefined)
+            this.cartShippingCost = this.num(data.shipping_cost);
+        else if (data.real_shipping_cost !== undefined)
+            this.cartShippingCost = hasFreeShipping ? 0 : this.num(data.real_shipping_cost);
+        // `has_shipping` isn't in the API response — derive row visibility from the cost.
+        this.cartHasShipping = this.cartShippingCost > 0 || !!data.has_shipping;
+    }
+    // Native reportValidity() covers standard fields; custom product options
+    // validate via their own async reportValidity() (incl. multi-option required
+    // logic), so await that too — else option validation is skipped at checkout.
+    async validateCartForms() {
+        let isValid = true;
+        document
+            .querySelectorAll('form[id^="item-"]')
+            .forEach(f => {
+            if (!f.reportValidity())
+                isValid = false;
+        });
+        const optionEls = Array.from(document.querySelectorAll('form[id^="item-"] salla-product-options'));
+        for (const el of optionEls) {
+            if (typeof el.reportValidity === 'function' && !(await el.reportValidity()))
+                isValid = false;
+        }
+        return isValid;
+    }
+    money(value) {
+        try {
+            if (typeof salla !== 'undefined' && typeof salla.money === 'function') {
+                return salla.money(value);
+            }
+        }
+        catch (_) { }
+        return String(value ?? 0);
+    }
+    getItemsLabel() {
+        return this.itemsCountTemplate?.replace(':count', String(this.cartCount)) ?? '';
+    }
+    // Skeleton during the initial fetch
+    renderSkeleton() {
+        return (h(Host, { class: {
+                's-cart-summary-card': true,
+                's-cart-summary-card--loading': true,
+                's-cart-summary-card--desktop': this.isDesktop,
+                's-cart-summary-card--mobile': !this.isDesktop,
+            } }, this.isDesktop && (h("div", { class: "s-cart-summary-card-sheet-wrap s-cart-summary-card-sheet-wrap--open" }, h("div", { class: "s-cart-summary-card-sheet" }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, h("salla-skeleton", { width: "140px", height: "16px" }))), SKELETON_ROWS.map(({ label, value }, i) => (h("div", { class: "s-cart-summary-card-line", key: i }, h("salla-skeleton", { width: label, height: "16px" }), h("salla-skeleton", { width: value, height: "16px" }))))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("salla-skeleton", { width: "90px", height: "16px" }), h("salla-skeleton", { width: "48px", height: "12px" }))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, h("salla-skeleton", { width: "80px", height: "20px" })))), h("div", { class: "s-cart-summary-card-action" }, h("salla-skeleton", { width: "100%", height: "44px" }))));
+    }
+    render() {
+        if (this.isLoading)
+            return this.renderSkeleton();
+        const showSavings = this.cartTotalDiscount > 0;
+        const subTotalLabel = this.cartTaxAmount ? this.itemsTotalNoTaxLabel : this.itemsTotalLabel;
+        // Inline transform so sheet motion doesn't depend on SCSS load order.
+        const sheetStyle = this.isDesktop
+            ? {}
+            : {
+                transform: this.isOpen ? 'translateY(0)' : 'translateY(100%)',
+                transition: 'transform 0.4s cubic-bezier(0.32, 0.72, 0, 1)',
+            };
+        return (h(Host, { class: {
+                's-cart-summary-card': true,
+                's-cart-summary-card--open': this.isOpen,
+                's-cart-summary-card--desktop': this.isDesktop,
+                's-cart-summary-card--mobile': !this.isDesktop,
+            } }, h("div", { class: {
+                's-cart-summary-card-sheet-wrap': true,
+                's-cart-summary-card-sheet-wrap--open': this.isOpen,
+            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.cartTotal + this.cartTotalDiscount))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), showSavings && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
+    }
+    static get is() { return "salla-cart-summary-card"; }
+    static get properties() {
+        return {
+            "validateForms": {
+                "type": "boolean",
+                "attribute": "validate-forms",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cartCount": {},
+            "cartTotal": {},
+            "cartTotalDiscount": {},
+            "cartSubTotal": {},
+            "cartOptionsTotal": {},
+            "cartShippingCost": {},
+            "cartTaxAmount": {},
+            "cartHasShipping": {},
+            "isOpen": {},
+            "isDesktop": {},
+            "isLoading": {},
+            "summaryLabel": {},
+            "itemsTotalLabel": {},
+            "itemsTotalNoTaxLabel": {},
+            "optionsTotalLabel": {},
+            "shippingCostLabel": {},
+            "vatTaxLabel": {},
+            "savedLabel": {},
+            "discountBadge": {},
+            "finalTotalLabel": {},
+            "pricesTaxedLabel": {},
+            "completeOrderLabel": {},
+            "openSummaryLabel": {},
+            "closeSummaryLabel": {},
+            "itemsCountTemplate": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/salla-filters/salla-filters.css

@@ -8,4 +8,9 @@
 
 .s-filters-radio {
   background-image: none !important;
+}
+
+.s-filters-applied-remove {
+  pointer-events: auto !important;
+  cursor: pointer;
 }

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

@@ -7,11 +7,14 @@ import Helper from "../../Helpers/Helper";
 export class SallaFilters {
     constructor() {
         this.isReady = false; //to avoid triggering the changed event
+        this.isInitialFetch = true; //the base-category auto-append may only run on the first filters::fetched
         this.filtersData = {};
+        this.appliedOpen = true;
         salla.event.on('filters::hidden', () => this.host.style.display = 'none');
         salla.lang.onLoaded(() => {
             this.apply = salla.lang.get('pages.checkout.apply');
             this.reset = salla.lang.get('pages.categories.filters_reset');
+            this.selectedTitle = salla.lang.getWithDefault('pages.categories.selected_filters', 'لقد اخترت');
         });
         salla.event.on('filters::fetched', ({ filters }) => {
             this.host.style.display = '';
@@ -46,7 +49,9 @@ export class SallaFilters {
                         break; // No need to continue checking once a match is found
                     }
                 }
-                if (salla.config.get('page.slug') == "product.index" && Object.keys(freshFilterData).length == 0 && !hasFilters) {
+                // only on the first fetch after page load — re-appending on later fetches
+                // would silently undo an explicit "remove all filters" (COD-10662)
+                if (this.isInitialFetch && salla.config.get('page.slug') == "product.index" && Object.keys(freshFilterData).length == 0 && !hasFilters) {
                     // Append the current category to the url if there are no pre-selected filters
                     let currentUrl = window.location.href;
                     let filterValue = salla.config.get('page.id');
@@ -57,6 +62,7 @@ export class SallaFilters {
                 }
                 return filter;
             });
+            this.isInitialFetch = false;
             this.filtersData = freshFilterData;
             this.host.childNodes.forEach(async (widget) => widget.setWidgetHeight && await widget.setWidgetHeight());
         });
@@ -118,9 +124,7 @@ export class SallaFilters {
                 const value = filters[key];
                 const fullKey = parentKey ? `${parentKey}[${key}]` : key;
                 if (Array.isArray(value)) {
-                    for (let i = 0; i < value.length; i++) {
-                        encodedFilters.push(`${fullKey}[${i}]=${value[i]}`);
-                    }
+                    value.forEach(item => encodedFilters.push(`${fullKey}[]=${item}`));
                 }
                 else if (typeof value === 'object' && value !== null) {
                     encodedFilters.push(this.encodeFilters(value, fullKey));
@@ -175,21 +179,105 @@ export class SallaFilters {
             isChecked && (this.filtersData[option.key] = value);
             isChecked || (delete this.filtersData[option.key]);
         }
-        //it's checkbox
-        // add if condition to avoid error when the filter is not existed in the filtersData
+        //it's checkbox (multi-select / OR within the same group)
         else if (event.target.type == "checkbox") {
-            this.filtersData[option.key] = this.filtersData[option.key] || [];
+            const current = this.filtersData[option.key];
+            // coerce legacy scalar values (e.g. ?filters[brand_id]=1) into an array
+            this.filtersData[option.key] = Array.isArray(current) ? current : (current != null ? [current] : []);
             if (isChecked) {
                 this.filtersData[option.key].push(value);
             }
-            this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);
+            else {
+                this.filtersData[option.key] = this.filtersData[option.key].filter(val => val != value);
+            }
+            if (!this.filtersData[option.key].length) {
+                delete this.filtersData[option.key];
+            }
+        }
+        this.filtersData = { ...this.filtersData }; // reassign so @State re-renders the applied chips
+        this.applyFilters();
+    }
+    /**
+     * Flatten the selected filtersData into displayable chips, resolving the
+     * human label for each group + option from `this.filters`. Selections that
+     * can't be resolved to a known option (e.g. the auto-added base category)
+     * are skipped.
+     */
+    getAppliedFilters() {
+        const chips = [];
+        const data = this.filtersData || {};
+        for (const key of Object.keys(data)) {
+            if (key === 'variants') {
+                const variantFilter = this.filters?.find(f => f.type === FilterOptionTypes.VARIANTS);
+                for (const variantKey of Object.keys(data.variants || {})) {
+                    const value = data.variants[variantKey];
+                    const opt = variantFilter?.values?.find(o => (o.key || o.value) == value);
+                    if (!opt)
+                        continue;
+                    chips.push({ key, variantKey, value, type: FilterOptionTypes.VARIANTS, groupLabel: variantFilter?.label, optionLabel: opt.value });
+                }
+                continue;
+            }
+            const group = this.filters?.find(f => f.key === key);
+            if (!group)
+                continue;
+            const raw = data[key];
+            // RANGE (e.g. price) is stored as a { min, max } object
+            if (group.type === FilterOptionTypes.RANGE || (raw && typeof raw === 'object' && !Array.isArray(raw))) {
+                chips.push({ key, value: raw, type: FilterOptionTypes.RANGE, groupLabel: group.label, optionLabel: `${raw.min} - ${raw.max}` });
+                continue;
+            }
+            // the auto-appended base category (see filters::fetched) is page scoping, not a user
+            // selection — skip it. It's stored as a scalar; user selections are always arrays.
+            if (key === 'category_id' && !Array.isArray(raw) && salla.config.get('page.slug') == 'product.index' && raw == salla.config.get('page.id')) {
+                continue;
+            }
+            const values = Array.isArray(raw) ? raw : [raw];
+            for (const value of values) {
+                // rating values are bare numbers; everything else maps key -> value label
+                const opt = group.values?.find(o => (typeof o === 'number' ? o : (o.key || o.value)) == value);
+                const optionLabel = group.key === 'rating' ? `${value}` : (opt && typeof opt !== 'number' ? opt.value : undefined);
+                if (optionLabel == null)
+                    continue;
+                chips.push({ key, value, type: group.type, groupLabel: group.label, optionLabel });
+            }
+        }
+        return chips;
+    }
+    /**
+     * Remove a single applied filter — the direct inverse of handleOptionChange.
+     */
+    removeFilter(chip) {
+        if (chip.type === FilterOptionTypes.VARIANTS) {
+            if (this.filtersData.variants) {
+                delete this.filtersData.variants[chip.variantKey];
+                if (!Object.keys(this.filtersData.variants).length)
+                    delete this.filtersData.variants;
+            }
+        }
+        else if (chip.type === FilterOptionTypes.RANGE) {
+            delete this.filtersData[chip.key];
+        }
+        else {
+            const raw = this.filtersData[chip.key];
+            if (Array.isArray(raw)) {
+                this.filtersData[chip.key] = raw.filter(val => val != chip.value);
+                if (!this.filtersData[chip.key].length)
+                    delete this.filtersData[chip.key];
+            }
+            else {
+                delete this.filtersData[chip.key];
+            }
         }
+        this.filtersData = { ...this.filtersData }; // reassign so the panel + widgets re-render immediately
         this.applyFilters();
     }
     render() {
-        return h(Host, { key: 'f94496fa176d99cf04b98fea8732b7c7c5912159' }, this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
+        const appliedFilters = this.getAppliedFilters();
+        const removeText = salla.lang.getWithDefault('common.elements.delete', 'Remove');
+        return h(Host, { key: 'd6dacbf458eadefda7ec2b2c6845c54f553abea8' }, appliedFilters.length ? h("div", { class: "s-filters-applied s-filters-widget-container" }, h("h3", { class: "s-filters-widget-title", onClick: () => this.appliedOpen = !this.appliedOpen }, h("span", null, this.selectedTitle), h("span", { class: `s-filters-widget-plusminus ${this.appliedOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { class: `s-filters-widget-content ${this.appliedOpen ? 's-filters-widget-opened' : 's-filters-widget-closed'}` }, h("div", { class: "s-filters-widget-values" }, appliedFilters.map(chip => h("div", { class: "s-filters-label s-filters-applied-item" }, h("span", { class: "s-filters-option-name" }, chip.groupLabel, ": ", chip.optionLabel), h("button", { type: "button", class: "s-filters-applied-remove", "aria-label": `${removeText} ${chip.groupLabel}: ${chip.optionLabel}`, onClick: () => this.removeFilter(chip) }, h("i", { class: "sicon-cancel", "aria-hidden": "true" }))))), h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)))) : '', this.filters?.map(option => h("salla-filters-widget", { option: option, filtersData: this.filtersData, onChanged: ({ detail: { event, option, value } }) => {
                 this.handleOptionChange(event, option, value);
-            } })), this.filters?.length ? h("div", { class: "s-filters-footer" }, h("salla-button", { color: 'gray', fill: 'outline', onClick: () => this.resetFilters() }, this.reset)) : '');
+            } })));
     }
     componentDidLoad() {
         this.isReady = true;
@@ -238,7 +326,9 @@ export class SallaFilters {
             "isSidebarOpen": {},
             "filtersData": {},
             "apply": {},
-            "reset": {}
+            "reset": {},
+            "selectedTitle": {},
+            "appliedOpen": {}
         };
     }
     static get events() {

package/dist/collection/components/salla-filters-widget/salla-filters-widget.js

@@ -135,7 +135,7 @@ export class SallaFiltersWidget {
         //@ts-ignore
         return filteredValues.map((filterOption, index) => {
             let value = typeof filterOption == 'number' ? filterOption : (filterOption.key || filterOption.value);
-            return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${value}`, key: `${option.key}-option-${value}` }, h("input", { id: `${option.key}-option-${value}`, name: option.key, type: "radio", checked: this.isSelectedOption(option, value), class: `s-filters-radio`, onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
+            return h("label", { class: "s-filters-label", htmlFor: `${option.key}-option-${value}`, key: `${option.key}-option-${value}` }, h("input", { id: `${option.key}-option-${value}`, name: option.key, type: option.type === FilterOptionTypes.VALUES ? 'checkbox' : 'radio', checked: this.isSelectedOption(option, value), class: option.type === FilterOptionTypes.VALUES ? 's-filters-checkbox' : 's-filters-radio', onChange: event => this.changed.emit({ event, option, value }) }), this.getOptionLabel(option, filterOption));
         });
     }
     isSelectedOption(option, value) {
@@ -143,13 +143,18 @@ export class SallaFiltersWidget {
             return this.filtersData[option.key] == value;
         }
         if (option.type === FilterOptionTypes.VARIANTS) {
-            return this.filtersData[option.type] && this.filtersData[option.type][Object.keys(this.filtersData[option.type])[0]] == value;
+            // selections are stored per widget key (handleOptionChange: filtersData.variants[option.key])
+            return this.filtersData[option.type] && this.filtersData[option.type][option.key] == value;
         }
         if (option.type === FilterOptionTypes.RANGE) {
             return this.filtersData[option.key] && this.filtersData[option.key].min == value.min && this.filtersData[option.key].max == value.max;
         }
         if (option.type === FilterOptionTypes.VALUES) {
-            return this.filtersData[option.key] && Number(this.filtersData[option.key]) == Number(value);
+            const selected = this.filtersData[option.key];
+            if (Array.isArray(selected)) {
+                return selected.some(v => Number(v) === Number(value));
+            }
+            return selected != null && Number(selected) === Number(value);
         }
         return false;
     }
@@ -159,16 +164,18 @@ export class SallaFiltersWidget {
             return h("salla-rating-stars", { size: "small", value: filterOption });
         }
         let label = filterOption.value || 'null';
-        //label+=filterOption.count ? ` (${salla.helpers.number(filterOption.count)})` : '';
+        if (filterOption.count != null) {
+            label += ` (${salla.helpers.number(filterOption.count)})`;
+        }
         return h("span", { class: "s-filters-option-name" }, label);
     }
     render() {
-        return (h(Host, { key: '2cdd3bbc88b473e9b5d52bf5e95de16f9ad47a51', class: "s-filters-widget-container" }, h("h3", { key: '4d3d522469681c5d7cde040938b0ce15324d7cc3', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '60fa18c667a1b00f03e8eebc484da68e78fa8d90' }, this.option.label), h("span", { key: 'ac8cff411fbb76c43e0134b0c7381b682a8afcd0', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: '5705ab244d712512e156994bbf21d9bb49dbb43b', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: 'a59f45a5fbd803dcd65f0a5b40060a1dcfed00e0', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '3275790105bfe9b84df564b9385c4a9556c2f03a', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '70d57184a8089422d96ea62ddaa7697f7f207441', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '959512d2256b5a29236572fc8078c5baa5d9a571' }), this.option.type !== FilterOptionTypes.RANGE
+        return (h(Host, { key: '3ea32331738365fc422b500b3e70fa590d4dbdb5', class: "s-filters-widget-container" }, h("h3", { key: 'c5cb7a27841bf85e4c108e15d606c1c45059e5ca', class: "s-filters-widget-title", onClick: () => this.toggleWidget() }, h("span", { key: '641164d403dd4c9b79a540f4da5829f5238cded4' }, this.option.label), h("span", { key: '5cf687d80ff627f306f5876f69b799b6b7a3813d', class: `s-filters-widget-plusminus ${this.isOpen ? 's-filters-widget-plusminus-active' : ''}` })), h("div", { key: 'd9b753223b4fb1c468ed6c4c3a269b861bc5b34b', class: "s-filters-widget-content", ref: (el) => this.widgetContent = el }, Array.isArray(this.option.values) && this.option.values.length > 5 && (h("div", { key: '0ca4f8c598e5965e23ef56610df7afc31799f168', class: "s-filters-widget-search-wrapper", style: { padding: '8px 0', marginBottom: '8px' } }, h("input", { key: '7b43ec84dcbeb5b7f9cbe9335133e32c278c00fd', type: "text", class: "s-filters-widget-search-input", placeholder: salla.lang.get('blocks.header.search_placeholder') || 'بحث...', value: this.searchQuery, onInput: (e) => this.searchQuery = e.target.value }))), h("div", { key: '5bf79fc5f51389d087fed93acee51a097a46af65', class: "s-filters-widget-values", ref: (el) => this.widgetValues = el }, h("slot", { key: '8dacd49ba003562d347a6c1b62e85ac447a62fcb' }), this.option.type !== FilterOptionTypes.RANGE
             ? this.renderFilterOption(this.option)
             : h("salla-price-range", { onChanged: (event) => {
                     this.changed.emit(event.detail);
                 }, ref: price => this.priceRange = price, filtersData: this.filtersData, option: this.option })), this.withLoadMore && (!this.searchQuery || this.filteredCount > this.initialItemCount) &&
-            h("a", { key: '305b4a155c2b3705bcf139c81b5f8bcb3d744d05', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
+            h("a", { key: '85ca188ff9f0db7c0a23b94e4705ae2ca5c38d55', class: "s-filters-widget-more", onClick: () => this.showMore() }, !this.isShowMore ? this.showMoreLabel : this.showLessLabel))));
     }
     static get is() { return "salla-filters-widget"; }
     static get originalStyleUrls() {