@constructor-io/constructorio-ui-plp 1.6.3 → 1.6.5

package/lib/cjs/components/Filters/FilterRangeSlider.js

@@ -16,25 +16,48 @@ function getValueFromOnChangeEvent(e) {
     }
     return parsedValue;
 }
-function FilterRangeSlider(props) {
+/**
+ * Calculate the display range for the slider.
+ * When there's only one price value (min === max), use the user's previous selection
+ * to position the knobs at the edges. Otherwise, use the actual facet min/max.
+ */
+function getDisplayRange(facet, isSingleValue) {
     var _a, _b;
+    if (isSingleValue && ((_a = facet.status) === null || _a === void 0 ? void 0 : _a.min) !== undefined && ((_b = facet.status) === null || _b === void 0 ? void 0 : _b.max) !== undefined) {
+        return {
+            displayMin: facet.status.min,
+            displayMax: facet.status.max,
+        };
+    }
+    return {
+        displayMin: facet.min,
+        displayMax: facet.max,
+    };
+}
+// Default track styles when range collapses to a single value
+const COLLAPSED_TRACK_STYLE = { left: '0%', width: '100%' };
+function FilterRangeSlider(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { rangedFacet: facet, modifyRequestRangeFilter, isCollapsed, sliderStep = 0.1 } = props;
     const visibleTrack = (0, react_1.useRef)(null);
     const [selectedTrackStyles, setSelectedTrackStyles] = (0, react_1.useState)({});
-    const [minValue, setMinValue] = (0, react_1.useState)(facet.min);
-    const [maxValue, setMaxValue] = (0, react_1.useState)(facet.max);
-    const [inputMinValue, setInputMinValue] = (0, react_1.useState)(((_a = facet.status) === null || _a === void 0 ? void 0 : _a.min) || facet.min);
-    const [inputMaxValue, setInputMaxValue] = (0, react_1.useState)(((_b = facet.status) === null || _b === void 0 ? void 0 : _b.max) || facet.max);
-    const [filterRange, setFilterRange] = (0, react_1.useState)('');
-    const [isModified, setIsModified] = (0, react_1.useState)(false);
-    const isValidMinValue = (value) => typeof value !== 'string' && value < maxValue && value >= facet.min;
-    const isValidMaxValue = (value) => typeof value !== 'string' && value > minValue && value <= facet.max;
+    const isSingleValue = facet.min === facet.max;
+    const { displayMin, displayMax } = getDisplayRange(facet, isSingleValue);
+    const [minValue, setMinValue] = (0, react_1.useState)((_b = (_a = facet.status) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : facet.min);
+    const [maxValue, setMaxValue] = (0, react_1.useState)((_d = (_c = facet.status) === null || _c === void 0 ? void 0 : _c.max) !== null && _d !== void 0 ? _d : facet.max);
+    const [inputMinValue, setInputMinValue] = (0, react_1.useState)((_f = (_e = facet.status) === null || _e === void 0 ? void 0 : _e.min) !== null && _f !== void 0 ? _f : facet.min);
+    const [inputMaxValue, setInputMaxValue] = (0, react_1.useState)((_h = (_g = facet.status) === null || _g === void 0 ? void 0 : _g.max) !== null && _h !== void 0 ? _h : facet.max);
+    const isValidMinValue = (value) => typeof value !== 'string' &&
+        value < maxValue &&
+        value >= (isSingleValue ? displayMin : facet.min);
+    const isValidMaxValue = (value) => typeof value !== 'string' &&
+        value > minValue &&
+        value <= (isSingleValue ? displayMax : facet.max);
     const onMinSliderMove = (event) => {
         const sliderValue = getValueFromOnChangeEvent(event);
         if (isValidMinValue(sliderValue)) {
             setMinValue(sliderValue);
             setInputMinValue(sliderValue);
-            setIsModified(true);
         }
     };
     const onMaxSliderMove = (event) => {
@@ -42,7 +65,6 @@ function FilterRangeSlider(props) {
         if (isValidMaxValue(sliderValue)) {
             setMaxValue(sliderValue);
             setInputMaxValue(sliderValue);
-            setIsModified(true);
         }
     };
     const onSliderMoveEnd = () => {
@@ -54,7 +76,6 @@ function FilterRangeSlider(props) {
         setInputMaxValue(inputValue);
         if (isValidMaxValue(inputValue)) {
             setMaxValue(inputValue);
-            setIsModified(true);
         }
     };
     const onMinInputValueChange = (event) => {
@@ -62,12 +83,11 @@ function FilterRangeSlider(props) {
         setInputMinValue(inputValue);
         if (isValidMinValue(inputValue)) {
             setMinValue(inputValue);
-            setIsModified(true);
         }
     };
     const onInputBlurApplyFilter = () => {
-        if (isModified && isValidMaxValue(inputMaxValue) && isValidMinValue(inputMinValue)) {
-            modifyRequestRangeFilter(filterRange);
+        if (isValidMaxValue(inputMaxValue) && isValidMinValue(inputMinValue)) {
+            modifyRequestRangeFilter(`${minValue}-${maxValue}`);
         }
     };
     const onTrackClick = (event) => {
@@ -75,9 +95,11 @@ function FilterRangeSlider(props) {
             return;
         if (event.target !== visibleTrack.current)
             return;
+        if (isSingleValue)
+            return; // Prevent interaction when only one price exists
         const totalWidth = visibleTrack.current.offsetWidth;
         const clickedX = event.nativeEvent.offsetX;
-        const selectedValue = Math.round((clickedX / totalWidth) * (facet.max - facet.min)) + facet.min;
+        const selectedValue = Math.round((clickedX / totalWidth) * (displayMax - displayMin)) + displayMin;
         const distMinToClicked = Math.abs(selectedValue - minValue);
         const distMaxToClicked = Math.abs(selectedValue - maxValue);
         if (distMinToClicked <= distMaxToClicked) {
@@ -92,30 +114,40 @@ function FilterRangeSlider(props) {
             setInputMaxValue(selectedValue);
             modifyRequestRangeFilter(newRange);
         }
-        setIsModified(true);
     };
-    // Update internal state
+    // Update internal state when facet changes
     (0, react_1.useEffect)(() => {
-        if (facet.status.min !== undefined && !isModified) {
-            // Initial state
-            setMinValue(facet.status.min);
-            setMaxValue(facet.status.max);
-            setFilterRange(`${facet.status.min}-${facet.status.max}`);
-        }
-        else if (isModified) {
-            // Future updates
-            setFilterRange(`${minValue}-${maxValue}`);
+        var _a;
+        if (((_a = facet.status) === null || _a === void 0 ? void 0 : _a.min) !== undefined) {
+            const clampedMin = Math.max(displayMin, Math.min(displayMax, facet.status.min));
+            const clampedMax = Math.max(displayMin, Math.min(displayMax, facet.status.max));
+            setMinValue(clampedMin);
+            setMaxValue(clampedMax);
+            setInputMinValue(isSingleValue ? facet.status.min : clampedMin);
+            setInputMaxValue(isSingleValue ? facet.status.max : clampedMax);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [minValue, maxValue, facet]);
+    }, [
+        facet.min,
+        facet.max,
+        (_j = facet.status) === null || _j === void 0 ? void 0 : _j.min,
+        (_k = facet.status) === null || _k === void 0 ? void 0 : _k.max,
+        displayMin,
+        displayMax,
+        isSingleValue,
+    ]);
     // Update selected track styles
     (0, react_1.useEffect)(() => {
-        const trackLen = facet.max - facet.min;
-        const rebasedStartValue = minValue - facet.min;
+        const trackLen = displayMax - displayMin;
+        // Prevent division by zero when range collapses
+        if (trackLen === 0) {
+            setSelectedTrackStyles(COLLAPSED_TRACK_STYLE);
+            return;
+        }
+        const rebasedStartValue = minValue - displayMin;
         const startPercentage = ((100 * rebasedStartValue) / trackLen).toFixed(2);
         const widthPercentage = ((100 * (maxValue - minValue)) / trackLen).toFixed(2);
         setSelectedTrackStyles({ left: `${startPercentage}%`, width: `${widthPercentage}%` });
-    }, [minValue, maxValue, facet]);
+    }, [minValue, maxValue, displayMin, displayMax]);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)({
             'cio-collapsible-wrapper': true,
             'cio-collapsible-is-open': !isCollapsed,
@@ -125,13 +157,13 @@ function FilterRangeSlider(props) {
                 react_1.default.createElement("div", { className: 'cio-slider-inputs' },
                     react_1.default.createElement("span", { className: 'cio-slider-input cio-slider-input-min' },
                         react_1.default.createElement("span", { className: 'cio-slider-input-prefix' }, "from "),
-                        react_1.default.createElement("input", { required: true, type: 'number', value: inputMinValue, onChange: onMinInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.min.toString(), min: facet.min, max: maxValue, step: sliderStep })),
+                        react_1.default.createElement("input", { required: true, type: 'number', value: inputMinValue, onChange: onMinInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.min.toString(), min: isSingleValue ? undefined : facet.min, max: isSingleValue ? undefined : maxValue, step: sliderStep, disabled: isSingleValue })),
                     react_1.default.createElement("div", { className: 'cio-slider-input cio-slider-input-max' },
                         react_1.default.createElement("span", { className: 'cio-slider-input-prefix' }, "to "),
-                        react_1.default.createElement("input", { required: true, type: 'number', value: inputMaxValue, onChange: onMaxInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.max.toString(), min: minValue, max: facet.max, step: sliderStep }))),
-                react_1.default.createElement("div", { className: 'cio-doubly-ended-slider', ref: visibleTrack, role: 'presentation', onClick: (e) => onTrackClick(e) },
+                        react_1.default.createElement("input", { required: true, type: 'number', value: inputMaxValue, onChange: onMaxInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.max.toString(), min: isSingleValue ? undefined : minValue, max: isSingleValue ? undefined : facet.max, step: sliderStep, disabled: isSingleValue }))),
+                react_1.default.createElement("div", { className: 'cio-doubly-ended-slider', ref: visibleTrack, role: 'presentation', onClick: (e) => !isSingleValue && onTrackClick(e) },
                     react_1.default.createElement("div", { className: 'cio-slider-track-selected', style: selectedTrackStyles }),
-                    react_1.default.createElement("input", { className: 'cio-min-slider', type: 'range', step: sliderStep, min: facet.min, max: facet.max, value: minValue, onChange: onMinSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd }),
-                    react_1.default.createElement("input", { className: 'cio-max-slider', type: 'range', step: sliderStep, min: facet.min, max: facet.max, value: maxValue, onChange: onMaxSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd }))))));
+                    react_1.default.createElement("input", { className: 'cio-min-slider', type: 'range', step: sliderStep, min: displayMin, max: displayMax, value: minValue, onChange: onMinSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd, disabled: isSingleValue }),
+                    react_1.default.createElement("input", { className: 'cio-max-slider', type: 'range', step: sliderStep, min: displayMin, max: displayMax, value: maxValue, onChange: onMaxSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd, disabled: isSingleValue }))))));
 }
 exports.default = FilterRangeSlider;

package/lib/cjs/components/ProductCard/ProductCard.js

@@ -30,7 +30,10 @@ function ProductCard(props) {
     const onAddToCart = (0, callbacks_1.useOnAddToCart)(client, state.callbacks.onAddToCart);
     const { formatPrice } = state.formatters;
     const onClick = (0, callbacks_1.useOnProductCardClick)(client, state.callbacks.onProductCardClick);
-    const cnstrcData = (0, utils_1.getProductCardCnstrcDataAttributes)(productInfo);
+    const cnstrcDataAttrs = (0, utils_1.getProductCardCnstrcDataAttributes)(productInfo, {
+        labels: item.labels,
+    });
+    const addToCartBtnAttrs = (0, utils_1.getConversionButtonCnstrcDataAttributes)('add_to_cart');
     const handleRolloverImageState = (isShown) => {
         var _a;
         setIsRolloverImageShown(isShown);
@@ -63,9 +66,9 @@ function ProductCard(props) {
             onMouseEnter,
             onMouseLeave,
             isRolloverImageShown,
-            productCardCnstrcDataAttributes: cnstrcData,
-        }, override: children, htmlOverride: (_a = state.renderOverrides.productCard) === null || _a === void 0 ? void 0 : _a.renderHtml, topLevelAttributes: Object.assign(Object.assign({}, cnstrcData), { className: 'cio-product-card' }) },
-        react_1.default.createElement("a", Object.assign({}, cnstrcData, { className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => { var _a; return onClick(e, item, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }),
+            productCardCnstrcDataAttributes: cnstrcDataAttrs,
+        }, override: children, htmlOverride: (_a = state.renderOverrides.productCard) === null || _a === void 0 ? void 0 : _a.renderHtml, topLevelAttributes: Object.assign(Object.assign({}, cnstrcDataAttrs), { className: 'cio-product-card' }) },
+        react_1.default.createElement("a", Object.assign({}, cnstrcDataAttrs, { className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => { var _a; return onClick(e, item, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }),
             react_1.default.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
                 react_1.default.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
                 rolloverImage && (react_1.default.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: (0, utils_1.concatStyles)('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
@@ -75,6 +78,6 @@ function ProductCard(props) {
                     Number(itemPrice) >= 0 && (react_1.default.createElement("div", { className: (0, utils_1.concatStyles)('cio-item-price', hasSalePrice && 'cio-item-price-strikethrough') }, formatPrice(itemPrice)))),
                 react_1.default.createElement("div", { className: 'cio-item-name' }, itemName),
                 productSwatch && react_1.default.createElement(ProductSwatch_1.default, { swatchObject: productSwatch })),
-            react_1.default.createElement("button", { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => { var _a; return onAddToCart(e, item, itemPrice, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }, "Add to Cart"))));
+            react_1.default.createElement("button", Object.assign({}, addToCartBtnAttrs, { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => { var _a; return onAddToCart(e, item, itemPrice, (_a = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _a === void 0 ? void 0 : _a.variationId); } }), "Add to Cart"))));
 }
 exports.default = ProductCard;

package/lib/cjs/components/ProductSwatch/ProductSwatch.js

@@ -34,9 +34,12 @@ function ProductSwatch(props) {
             const color = (0, utils_1.isHexColor)(swatch === null || swatch === void 0 ? void 0 : swatch.swatchPreview)
                 ? swatch === null || swatch === void 0 ? void 0 : swatch.swatchPreview
                 : `url(${swatch === null || swatch === void 0 ? void 0 : swatch.swatchPreview})`;
-            return (react_1.default.createElement("button", { type: 'button', key: swatch.variationId, "data-cnstrc-variation-id": swatch.variationId, "data-testid": `cio-swatch-${swatch.variationId}`, className: 'cio-swatch-button cio-swatch-item', onClick: (e) => swatchClickHandler(e, swatch), style: {
+            const variationIdAttr = {
+                [utils_1.cnstrcDataAttrs.common.variationId]: swatch.variationId,
+            };
+            return (react_1.default.createElement("button", Object.assign({ type: 'button', key: swatch.variationId, "data-testid": `cio-swatch-${swatch.variationId}`, className: 'cio-swatch-button cio-swatch-item', onClick: (e) => swatchClickHandler(e, swatch), style: {
                     background: color,
-                } }, isSelected && (react_1.default.createElement("div", { "data-cnstrc-variation-id": swatch.variationId, className: 'cio-swatch-selected', style: { outline: `3px solid ${color}` } }))));
+                } }, variationIdAttr), isSelected && (react_1.default.createElement("div", Object.assign({ className: 'cio-swatch-selected', style: { outline: `3px solid ${color}` } }, variationIdAttr)))));
         }))))));
 }
 exports.default = ProductSwatch;

package/lib/cjs/constants.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EMITTED_EVENTS = exports.DEMO_API_KEY = void 0;
-// eslint-disable-next-line import/prefer-default-export
 exports.DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
 exports.EMITTED_EVENTS = {
     PRODUCT_CARD_IMAGE_ROLLOVER: 'cio.ui-plp.productCardImageRollover',

package/lib/cjs/hooks/useCioPlp.js

@@ -69,14 +69,15 @@ function useCioPlp(props = {}) {
     const pagination = (0, usePagination_1.default)(Object.assign({ totalNumResults }, paginationConfigs));
     const groups = (0, useGroups_1.default)(Object.assign({ groups: rawGroups }, groupsConfigs));
     const data = isSearchPage ? search.data : browse.data;
-    const plpContainerCnstrcDataAttributes = (0, utils_1.getPlpContainerCnstrcDataAttributes)(data, requestConfigs);
+    const status = isSearchPage ? search.status : browse.status;
+    const plpContainerCnstrcDataAttributes = (0, utils_1.getPlpContainerCnstrcDataAttributes)(data, requestConfigs, status === 'fetching');
     return {
         isSearchPage,
         isBrowsePage,
         searchQuery: search.query,
         browseFilterName: browse.filterName,
         browseFilterValue: browse.filterValue,
-        status: isSearchPage ? search.status : browse.status,
+        status,
         data,
         refetch,
         filters,

package/lib/cjs/utils/dataAttributeHelpers.js

@@ -1,42 +1,85 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPlpContainerCnstrcDataAttributes = exports.getProductCardCnstrcDataAttributes = void 0;
+exports.getConversionButtonCnstrcDataAttributes = exports.getPlpContainerCnstrcDataAttributes = exports.getProductCardCnstrcDataAttributes = exports.cnstrcDataAttrs = void 0;
 const typeHelpers_1 = require("./typeHelpers");
 const requestConfigsHelpers_1 = require("./requestConfigsHelpers");
-function getProductCardCnstrcDataAttributes(productInfo) {
-    let dataCnstrc = {};
+exports.cnstrcDataAttrs = {
+    common: {
+        itemId: 'data-cnstrc-item-id',
+        itemName: 'data-cnstrc-item-name',
+        itemPrice: 'data-cnstrc-item-price',
+        variationId: 'data-cnstrc-item-variation-id',
+        numResults: 'data-cnstrc-num-results',
+        conversionBtn: 'data-cnstrc-btn',
+        resultId: 'data-cnstrc-result-id',
+        section: 'data-cnstrc-section',
+        zeroResults: 'data-cnstrc-zero-result',
+        slCampaignId: 'data-cnstrc-sl-campaign-id',
+        slCampaignOwner: 'data-cnstrc-sl-campaign-owner',
+    },
+    search: {
+        searchContainer: 'data-cnstrc-search',
+        searchTerm: 'data-cnstrc-search-term',
+    },
+    browse: {
+        browseContainer: 'data-cnstrc-browse',
+        filterName: 'data-cnstrc-filter-name',
+        filterValue: 'data-cnstrc-filter-value',
+    },
+};
+function getProductCardCnstrcDataAttributes(productInfo, options) {
+    var _a, _b;
     const { itemId, itemPrice, itemName, variationId } = productInfo;
-    dataCnstrc = {
-        'data-cnstrc-item-id': itemId,
-        'data-cnstrc-item-name': itemName,
-        'data-cnstrc-item-price': itemPrice,
-        'data-cnstrc-item-variation-id': variationId,
+    const dataCnstrc = {
+        [exports.cnstrcDataAttrs.common.itemId]: itemId,
+        [exports.cnstrcDataAttrs.common.itemName]: itemName,
     };
+    // Only include variation ID if it exists
+    if (variationId) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.variationId] = variationId;
+    }
+    // Only include price if it exists
+    if (itemPrice !== undefined && itemPrice !== null) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.itemPrice] = itemPrice;
+    }
+    // Add sponsored listing data if available
+    if ((_a = options === null || options === void 0 ? void 0 : options.labels) === null || _a === void 0 ? void 0 : _a.sl_campaign_id) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.slCampaignId] = String(options.labels.sl_campaign_id);
+    }
+    if ((_b = options === null || options === void 0 ? void 0 : options.labels) === null || _b === void 0 ? void 0 : _b.sl_campaign_owner) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.slCampaignOwner] = String(options.labels.sl_campaign_owner);
+    }
     return dataCnstrc;
 }
 exports.getProductCardCnstrcDataAttributes = getProductCardCnstrcDataAttributes;
-function getPlpContainerCnstrcDataAttributes(data, requestConfigs) {
+function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoading = false) {
+    var _a, _b;
     if (!data || (!(0, typeHelpers_1.isPlpSearchDataResults)(data) && !(0, typeHelpers_1.isPlpBrowseDataResults)(data)))
         return {};
     const { filterName, filterValue } = requestConfigs;
     const pageType = (0, requestConfigsHelpers_1.getPageType)(requestConfigs);
+    const isZeroResults = data.response.totalNumResults === 0;
     let dataCnstrc = {};
     switch (pageType) {
         case 'browse':
             dataCnstrc = {
-                'data-cnstrc-browse': true,
-                'data-cnstrc-num-results': data.response.totalNumResults,
-                'data-cnstrc-result-id': data.resultId,
-                'data-cnstrc-filter-name': filterName,
-                'data-cnstrc-filter-value': filterValue,
+                [exports.cnstrcDataAttrs.browse.browseContainer]: true,
+                [exports.cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
+                [exports.cnstrcDataAttrs.common.resultId]: data.resultId,
+                [exports.cnstrcDataAttrs.browse.filterName]: filterName,
+                [exports.cnstrcDataAttrs.browse.filterValue]: filterValue,
             };
             break;
         case 'search':
             dataCnstrc = {
-                'data-cnstrc-search': true,
-                'data-cnstrc-result-id': data.resultId,
-                'data-cnstrc-num-results': data.response.totalNumResults,
+                [exports.cnstrcDataAttrs.search.searchContainer]: true,
+                [exports.cnstrcDataAttrs.common.resultId]: data.resultId,
+                [exports.cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
             };
+            // Add search term
+            if ((_a = data.request) === null || _a === void 0 ? void 0 : _a.term) {
+                dataCnstrc[exports.cnstrcDataAttrs.search.searchTerm] = data.request.term;
+            }
             break;
         case 'unknown':
             dataCnstrc = {};
@@ -44,6 +87,23 @@ function getPlpContainerCnstrcDataAttributes(data, requestConfigs) {
         default:
             break;
     }
+    // Add common conditional attributes (applies to both search and browse)
+    if (pageType === 'search' || pageType === 'browse') {
+        // Add zero-result attribute only if not loading and there are no results
+        if (isZeroResults && !isLoading) {
+            dataCnstrc[exports.cnstrcDataAttrs.common.zeroResults] = true;
+        }
+        // Add section if it's not "Products"
+        if (((_b = data.request) === null || _b === void 0 ? void 0 : _b.section) && data.request.section !== 'Products') {
+            dataCnstrc[exports.cnstrcDataAttrs.common.section] = data.request.section;
+        }
+    }
     return dataCnstrc;
 }
 exports.getPlpContainerCnstrcDataAttributes = getPlpContainerCnstrcDataAttributes;
+function getConversionButtonCnstrcDataAttributes(conversionType) {
+    return {
+        [exports.cnstrcDataAttrs.common.conversionBtn]: conversionType,
+    };
+}
+exports.getConversionButtonCnstrcDataAttributes = getConversionButtonCnstrcDataAttributes;

package/lib/cjs/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.6.3';
+exports.default = '1.6.5';

package/lib/mjs/components/Filters/FilterRangeSlider.js

@@ -12,24 +12,46 @@ function getValueFromOnChangeEvent(e) {
     }
     return parsedValue;
 }
+/**
+ * Calculate the display range for the slider.
+ * When there's only one price value (min === max), use the user's previous selection
+ * to position the knobs at the edges. Otherwise, use the actual facet min/max.
+ */
+function getDisplayRange(facet, isSingleValue) {
+    if (isSingleValue && facet.status?.min !== undefined && facet.status?.max !== undefined) {
+        return {
+            displayMin: facet.status.min,
+            displayMax: facet.status.max,
+        };
+    }
+    return {
+        displayMin: facet.min,
+        displayMax: facet.max,
+    };
+}
+// Default track styles when range collapses to a single value
+const COLLAPSED_TRACK_STYLE = { left: '0%', width: '100%' };
 export default function FilterRangeSlider(props) {
     const { rangedFacet: facet, modifyRequestRangeFilter, isCollapsed, sliderStep = 0.1 } = props;
     const visibleTrack = useRef(null);
     const [selectedTrackStyles, setSelectedTrackStyles] = useState({});
-    const [minValue, setMinValue] = useState(facet.min);
-    const [maxValue, setMaxValue] = useState(facet.max);
-    const [inputMinValue, setInputMinValue] = useState(facet.status?.min || facet.min);
-    const [inputMaxValue, setInputMaxValue] = useState(facet.status?.max || facet.max);
-    const [filterRange, setFilterRange] = useState('');
-    const [isModified, setIsModified] = useState(false);
-    const isValidMinValue = (value) => typeof value !== 'string' && value < maxValue && value >= facet.min;
-    const isValidMaxValue = (value) => typeof value !== 'string' && value > minValue && value <= facet.max;
+    const isSingleValue = facet.min === facet.max;
+    const { displayMin, displayMax } = getDisplayRange(facet, isSingleValue);
+    const [minValue, setMinValue] = useState(facet.status?.min ?? facet.min);
+    const [maxValue, setMaxValue] = useState(facet.status?.max ?? facet.max);
+    const [inputMinValue, setInputMinValue] = useState(facet.status?.min ?? facet.min);
+    const [inputMaxValue, setInputMaxValue] = useState(facet.status?.max ?? facet.max);
+    const isValidMinValue = (value) => typeof value !== 'string' &&
+        value < maxValue &&
+        value >= (isSingleValue ? displayMin : facet.min);
+    const isValidMaxValue = (value) => typeof value !== 'string' &&
+        value > minValue &&
+        value <= (isSingleValue ? displayMax : facet.max);
     const onMinSliderMove = (event) => {
         const sliderValue = getValueFromOnChangeEvent(event);
         if (isValidMinValue(sliderValue)) {
             setMinValue(sliderValue);
             setInputMinValue(sliderValue);
-            setIsModified(true);
         }
     };
     const onMaxSliderMove = (event) => {
@@ -37,7 +59,6 @@ export default function FilterRangeSlider(props) {
         if (isValidMaxValue(sliderValue)) {
             setMaxValue(sliderValue);
             setInputMaxValue(sliderValue);
-            setIsModified(true);
         }
     };
     const onSliderMoveEnd = () => {
@@ -49,7 +70,6 @@ export default function FilterRangeSlider(props) {
         setInputMaxValue(inputValue);
         if (isValidMaxValue(inputValue)) {
             setMaxValue(inputValue);
-            setIsModified(true);
         }
     };
     const onMinInputValueChange = (event) => {
@@ -57,12 +77,11 @@ export default function FilterRangeSlider(props) {
         setInputMinValue(inputValue);
         if (isValidMinValue(inputValue)) {
             setMinValue(inputValue);
-            setIsModified(true);
         }
     };
     const onInputBlurApplyFilter = () => {
-        if (isModified && isValidMaxValue(inputMaxValue) && isValidMinValue(inputMinValue)) {
-            modifyRequestRangeFilter(filterRange);
+        if (isValidMaxValue(inputMaxValue) && isValidMinValue(inputMinValue)) {
+            modifyRequestRangeFilter(`${minValue}-${maxValue}`);
         }
     };
     const onTrackClick = (event) => {
@@ -70,9 +89,11 @@ export default function FilterRangeSlider(props) {
             return;
         if (event.target !== visibleTrack.current)
             return;
+        if (isSingleValue)
+            return; // Prevent interaction when only one price exists
         const totalWidth = visibleTrack.current.offsetWidth;
         const clickedX = event.nativeEvent.offsetX;
-        const selectedValue = Math.round((clickedX / totalWidth) * (facet.max - facet.min)) + facet.min;
+        const selectedValue = Math.round((clickedX / totalWidth) * (displayMax - displayMin)) + displayMin;
         const distMinToClicked = Math.abs(selectedValue - minValue);
         const distMaxToClicked = Math.abs(selectedValue - maxValue);
         if (distMinToClicked <= distMaxToClicked) {
@@ -87,30 +108,39 @@ export default function FilterRangeSlider(props) {
             setInputMaxValue(selectedValue);
             modifyRequestRangeFilter(newRange);
         }
-        setIsModified(true);
     };
-    // Update internal state
+    // Update internal state when facet changes
     useEffect(() => {
-        if (facet.status.min !== undefined && !isModified) {
-            // Initial state
-            setMinValue(facet.status.min);
-            setMaxValue(facet.status.max);
-            setFilterRange(`${facet.status.min}-${facet.status.max}`);
-        }
-        else if (isModified) {
-            // Future updates
-            setFilterRange(`${minValue}-${maxValue}`);
+        if (facet.status?.min !== undefined) {
+            const clampedMin = Math.max(displayMin, Math.min(displayMax, facet.status.min));
+            const clampedMax = Math.max(displayMin, Math.min(displayMax, facet.status.max));
+            setMinValue(clampedMin);
+            setMaxValue(clampedMax);
+            setInputMinValue(isSingleValue ? facet.status.min : clampedMin);
+            setInputMaxValue(isSingleValue ? facet.status.max : clampedMax);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [minValue, maxValue, facet]);
+    }, [
+        facet.min,
+        facet.max,
+        facet.status?.min,
+        facet.status?.max,
+        displayMin,
+        displayMax,
+        isSingleValue,
+    ]);
     // Update selected track styles
     useEffect(() => {
-        const trackLen = facet.max - facet.min;
-        const rebasedStartValue = minValue - facet.min;
+        const trackLen = displayMax - displayMin;
+        // Prevent division by zero when range collapses
+        if (trackLen === 0) {
+            setSelectedTrackStyles(COLLAPSED_TRACK_STYLE);
+            return;
+        }
+        const rebasedStartValue = minValue - displayMin;
         const startPercentage = ((100 * rebasedStartValue) / trackLen).toFixed(2);
         const widthPercentage = ((100 * (maxValue - minValue)) / trackLen).toFixed(2);
         setSelectedTrackStyles({ left: `${startPercentage}%`, width: `${widthPercentage}%` });
-    }, [minValue, maxValue, facet]);
+    }, [minValue, maxValue, displayMin, displayMax]);
     return (React.createElement("div", { className: classNames({
             'cio-collapsible-wrapper': true,
             'cio-collapsible-is-open': !isCollapsed,
@@ -120,12 +150,12 @@ export default function FilterRangeSlider(props) {
                 React.createElement("div", { className: 'cio-slider-inputs' },
                     React.createElement("span", { className: 'cio-slider-input cio-slider-input-min' },
                         React.createElement("span", { className: 'cio-slider-input-prefix' }, "from "),
-                        React.createElement("input", { required: true, type: 'number', value: inputMinValue, onChange: onMinInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.min.toString(), min: facet.min, max: maxValue, step: sliderStep })),
+                        React.createElement("input", { required: true, type: 'number', value: inputMinValue, onChange: onMinInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.min.toString(), min: isSingleValue ? undefined : facet.min, max: isSingleValue ? undefined : maxValue, step: sliderStep, disabled: isSingleValue })),
                     React.createElement("div", { className: 'cio-slider-input cio-slider-input-max' },
                         React.createElement("span", { className: 'cio-slider-input-prefix' }, "to "),
-                        React.createElement("input", { required: true, type: 'number', value: inputMaxValue, onChange: onMaxInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.max.toString(), min: minValue, max: facet.max, step: sliderStep }))),
-                React.createElement("div", { className: 'cio-doubly-ended-slider', ref: visibleTrack, role: 'presentation', onClick: (e) => onTrackClick(e) },
+                        React.createElement("input", { required: true, type: 'number', value: inputMaxValue, onChange: onMaxInputValueChange, onBlur: onInputBlurApplyFilter, placeholder: facet.max.toString(), min: isSingleValue ? undefined : minValue, max: isSingleValue ? undefined : facet.max, step: sliderStep, disabled: isSingleValue }))),
+                React.createElement("div", { className: 'cio-doubly-ended-slider', ref: visibleTrack, role: 'presentation', onClick: (e) => !isSingleValue && onTrackClick(e) },
                     React.createElement("div", { className: 'cio-slider-track-selected', style: selectedTrackStyles }),
-                    React.createElement("input", { className: 'cio-min-slider', type: 'range', step: sliderStep, min: facet.min, max: facet.max, value: minValue, onChange: onMinSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd }),
-                    React.createElement("input", { className: 'cio-max-slider', type: 'range', step: sliderStep, min: facet.min, max: facet.max, value: maxValue, onChange: onMaxSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd }))))));
+                    React.createElement("input", { className: 'cio-min-slider', type: 'range', step: sliderStep, min: displayMin, max: displayMax, value: minValue, onChange: onMinSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd, disabled: isSingleValue }),
+                    React.createElement("input", { className: 'cio-max-slider', type: 'range', step: sliderStep, min: displayMin, max: displayMax, value: maxValue, onChange: onMaxSliderMove, onMouseUp: onSliderMoveEnd, onTouchEnd: onSliderMoveEnd, disabled: isSingleValue }))))));
 }

package/lib/mjs/components/ProductCard/ProductCard.js

@@ -3,7 +3,7 @@ import { useCioPlpContext } from '../../hooks/useCioPlpContext';
 import { useOnAddToCart, useOnProductCardClick } from '../../hooks/callbacks';
 import ProductSwatch from '../ProductSwatch';
 import useProductInfo from '../../hooks/useProduct';
-import { concatStyles, getProductCardCnstrcDataAttributes } from '../../utils';
+import { concatStyles, getProductCardCnstrcDataAttributes, getConversionButtonCnstrcDataAttributes, } from '../../utils';
 import RenderPropsWrapper from '../RenderPropsWrapper/RenderPropsWrapper';
 import { EMITTED_EVENTS } from '../../constants';
 /**
@@ -26,7 +26,10 @@ export default function ProductCard(props) {
     const onAddToCart = useOnAddToCart(client, state.callbacks.onAddToCart);
     const { formatPrice } = state.formatters;
     const onClick = useOnProductCardClick(client, state.callbacks.onProductCardClick);
-    const cnstrcData = getProductCardCnstrcDataAttributes(productInfo);
+    const cnstrcDataAttrs = getProductCardCnstrcDataAttributes(productInfo, {
+        labels: item.labels,
+    });
+    const addToCartBtnAttrs = getConversionButtonCnstrcDataAttributes('add_to_cart');
     const handleRolloverImageState = (isShown) => {
         setIsRolloverImageShown(isShown);
         if (isShown && rolloverImage) {
@@ -58,9 +61,9 @@ export default function ProductCard(props) {
             onMouseEnter,
             onMouseLeave,
             isRolloverImageShown,
-            productCardCnstrcDataAttributes: cnstrcData,
-        }, override: children, htmlOverride: state.renderOverrides.productCard?.renderHtml, topLevelAttributes: { ...cnstrcData, className: 'cio-product-card' } },
-        React.createElement("a", { ...cnstrcData, className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
+            productCardCnstrcDataAttributes: cnstrcDataAttrs,
+        }, override: children, htmlOverride: state.renderOverrides.productCard?.renderHtml, topLevelAttributes: { ...cnstrcDataAttrs, className: 'cio-product-card' } },
+        React.createElement("a", { ...cnstrcDataAttrs, className: 'cio-product-card', href: itemUrl, ref: cardRef, onClick: (e) => onClick(e, item, productSwatch?.selectedVariation?.variationId) },
             React.createElement("div", { className: 'cio-image-container', onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
                 React.createElement("img", { alt: itemName, src: itemImageUrl, className: 'cio-image' }),
                 rolloverImage && (React.createElement("img", { alt: `${itemName} rollover`, src: rolloverImage, loading: 'lazy', className: concatStyles('cio-image cio-rollover-image', isRolloverImageShown && 'is-active') }))),
@@ -70,5 +73,5 @@ export default function ProductCard(props) {
                     Number(itemPrice) >= 0 && (React.createElement("div", { className: concatStyles('cio-item-price', hasSalePrice && 'cio-item-price-strikethrough') }, formatPrice(itemPrice)))),
                 React.createElement("div", { className: 'cio-item-name' }, itemName),
                 productSwatch && React.createElement(ProductSwatch, { swatchObject: productSwatch })),
-            React.createElement("button", { className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => onAddToCart(e, item, itemPrice, productSwatch?.selectedVariation?.variationId) }, "Add to Cart"))));
+            React.createElement("button", { ...addToCartBtnAttrs, className: 'cio-add-to-cart-button', type: 'button', onClick: (e) => onAddToCart(e, item, itemPrice, productSwatch?.selectedVariation?.variationId) }, "Add to Cart"))));
 }