@constructor-io/constructorio-ui-plp 1.6.4 → 1.6.6

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/hooks/useProduct.js

@@ -6,7 +6,7 @@ const useCioPlpContext_1 = require("./useCioPlpContext");
 const utils_1 = require("../utils");
 const itemFieldGetters_1 = require("../utils/itemFieldGetters");
 const useProductInfo = ({ item }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const state = (0, useCioPlpContext_1.useCioPlpContext)();
     const productSwatch = (0, useProductSwatch_1.default)({ item });
     if (!item.data || !item.itemId || !item.itemName) {
@@ -15,18 +15,22 @@ const useProductInfo = ({ item }) => {
     const getPrice = (0, utils_1.tryCatchify)(((_a = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _a === void 0 ? void 0 : _a.getPrice) || itemFieldGetters_1.getPrice);
     const getSalePrice = (0, utils_1.tryCatchify)(((_b = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _b === void 0 ? void 0 : _b.getSalePrice) || itemFieldGetters_1.getSalePrice);
     const getRolloverImage = (0, utils_1.tryCatchify)(((_c = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _c === void 0 ? void 0 : _c.getRolloverImage) || itemFieldGetters_1.getRolloverImage);
-    const itemName = ((_d = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _d === void 0 ? void 0 : _d.itemName) || item.itemName;
-    const itemPrice = ((_e = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _e === void 0 ? void 0 : _e.price) || getPrice(item);
-    const itemImageUrl = ((_f = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _f === void 0 ? void 0 : _f.imageUrl) || item.imageUrl;
-    const itemUrl = ((_g = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _g === void 0 ? void 0 : _g.url) || item.url;
-    const variationId = (_h = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _h === void 0 ? void 0 : _h.variationId;
-    let rolloverImage = (_j = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _j === void 0 ? void 0 : _j.rolloverImage;
+    const getItemUrl = (0, utils_1.tryCatchify)(((_d = state === null || state === void 0 ? void 0 : state.itemFieldGetters) === null || _d === void 0 ? void 0 : _d.getItemUrl) || itemFieldGetters_1.getItemUrl);
+    const itemName = ((_e = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _e === void 0 ? void 0 : _e.itemName) || item.itemName;
+    const itemPrice = ((_f = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _f === void 0 ? void 0 : _f.price) || getPrice(item);
+    const itemImageUrl = ((_g = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _g === void 0 ? void 0 : _g.imageUrl) || item.imageUrl;
+    // Get href - merge variation URL into item if variation is selected
+    const itemWithVariationUrl = (productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation)
+        ? Object.assign(Object.assign({}, item), { url: productSwatch.selectedVariation.url }) : item;
+    const itemUrl = getItemUrl(itemWithVariationUrl) || ((_h = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _h === void 0 ? void 0 : _h.url);
+    const variationId = (_j = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _j === void 0 ? void 0 : _j.variationId;
+    let rolloverImage = (_k = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _k === void 0 ? void 0 : _k.rolloverImage;
     // Fallback to item's rollover image if all variations don't have a rollover image
-    if (!rolloverImage && ((_k = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.swatchList) === null || _k === void 0 ? void 0 : _k.every((swatch) => !swatch.rolloverImage))) {
+    if (!rolloverImage && ((_l = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.swatchList) === null || _l === void 0 ? void 0 : _l.every((swatch) => !swatch.rolloverImage))) {
         rolloverImage = getRolloverImage(item);
     }
     const { itemId } = item;
-    let salePrice = ((_l = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _l === void 0 ? void 0 : _l.salePrice) || getSalePrice(item);
+    let salePrice = ((_m = productSwatch === null || productSwatch === void 0 ? void 0 : productSwatch.selectedVariation) === null || _m === void 0 ? void 0 : _m.salePrice) || getSalePrice(item);
     let hasSalePrice = true;
     if (!(0, utils_1.isValidSalePrice)(salePrice, itemPrice)) {
         salePrice = undefined;

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/utils/itemFieldGetters.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getIsHiddenGroupField = exports.getSwatchPreview = exports.getSwatches = exports.getRolloverImage = exports.getSalePrice = exports.getPrice = void 0;
+exports.getItemUrl = exports.getIsHiddenGroupField = exports.getSwatchPreview = exports.getSwatches = exports.getRolloverImage = exports.getSalePrice = exports.getPrice = void 0;
 // eslint-disable-next-line import/prefer-default-export
 function getPrice(item) {
     return item.data.price;
@@ -45,3 +45,7 @@ function getIsHiddenGroupField(group) {
     return (_a = group === null || group === void 0 ? void 0 : group.data) === null || _a === void 0 ? void 0 : _a.cio_plp_hidden;
 }
 exports.getIsHiddenGroupField = getIsHiddenGroupField;
+function getItemUrl(item) {
+    return item === null || item === void 0 ? void 0 : item.url;
+}
+exports.getItemUrl = getItemUrl;

package/lib/cjs/version.js

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

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"))));
 }

package/lib/mjs/components/ProductSwatch/ProductSwatch.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React from 'react';
 import { useCioPlpContext } from '../../hooks/useCioPlpContext';
-import { isHexColor } from '../../utils';
+import { isHexColor, cnstrcDataAttrs } from '../../utils';
 export default function ProductSwatch(props) {
     const context = useCioPlpContext();
     const { swatchObject, children } = props;
@@ -31,8 +31,11 @@ export default function ProductSwatch(props) {
             const color = isHexColor(swatch?.swatchPreview)
                 ? swatch?.swatchPreview
                 : `url(${swatch?.swatchPreview})`;
-            return (React.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 = {
+                [cnstrcDataAttrs.common.variationId]: swatch.variationId,
+            };
+            return (React.createElement("button", { 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.createElement("div", { "data-cnstrc-variation-id": swatch.variationId, className: 'cio-swatch-selected', style: { outline: `3px solid ${color}` } }))));
+                }, ...variationIdAttr }, isSelected && (React.createElement("div", { className: 'cio-swatch-selected', style: { outline: `3px solid ${color}` }, ...variationIdAttr }))));
         }))))));
 }

package/lib/mjs/constants.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const DEMO_API_KEY = 'key_M57QS8SMPdLdLx4x';
 export const EMITTED_EVENTS = {
     PRODUCT_CARD_IMAGE_ROLLOVER: 'cio.ui-plp.productCardImageRollover',

package/lib/mjs/hooks/useCioPlp.js

@@ -65,14 +65,15 @@ export default function useCioPlp(props = {}) {
     const pagination = usePagination({ totalNumResults, ...paginationConfigs });
     const groups = useGroups({ groups: rawGroups, ...groupsConfigs });
     const data = isSearchPage ? search.data : browse.data;
-    const plpContainerCnstrcDataAttributes = getPlpContainerCnstrcDataAttributes(data, requestConfigs);
+    const status = isSearchPage ? search.status : browse.status;
+    const plpContainerCnstrcDataAttributes = 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/mjs/hooks/useProduct.js

@@ -1,7 +1,7 @@
 import useProductSwatch from './useProductSwatch';
 import { useCioPlpContext } from './useCioPlpContext';
 import { tryCatchify, isValidSalePrice } from '../utils';
-import { getPrice as defaultGetPrice, getSalePrice as defaultGetSalePrice, getRolloverImage as defaultGetRolloverImage, } from '../utils/itemFieldGetters';
+import { getPrice as defaultGetPrice, getSalePrice as defaultGetSalePrice, getRolloverImage as defaultGetRolloverImage, getItemUrl as defaultGetItemUrl, } from '../utils/itemFieldGetters';
 const useProductInfo = ({ item }) => {
     const state = useCioPlpContext();
     const productSwatch = useProductSwatch({ item });
@@ -11,10 +11,15 @@ const useProductInfo = ({ item }) => {
     const getPrice = tryCatchify(state?.itemFieldGetters?.getPrice || defaultGetPrice);
     const getSalePrice = tryCatchify(state?.itemFieldGetters?.getSalePrice || defaultGetSalePrice);
     const getRolloverImage = tryCatchify(state?.itemFieldGetters?.getRolloverImage || defaultGetRolloverImage);
+    const getItemUrl = tryCatchify(state?.itemFieldGetters?.getItemUrl || defaultGetItemUrl);
     const itemName = productSwatch?.selectedVariation?.itemName || item.itemName;
     const itemPrice = productSwatch?.selectedVariation?.price || getPrice(item);
     const itemImageUrl = productSwatch?.selectedVariation?.imageUrl || item.imageUrl;
-    const itemUrl = productSwatch?.selectedVariation?.url || item.url;
+    // Get href - merge variation URL into item if variation is selected
+    const itemWithVariationUrl = productSwatch?.selectedVariation
+        ? { ...item, url: productSwatch.selectedVariation.url }
+        : item;
+    const itemUrl = getItemUrl(itemWithVariationUrl) || productSwatch?.selectedVariation?.url;
     const variationId = productSwatch?.selectedVariation?.variationId;
     let rolloverImage = productSwatch?.selectedVariation?.rolloverImage;
     // Fallback to item's rollover image if all variations don't have a rollover image

package/lib/mjs/utils/dataAttributeHelpers.js

@@ -1,38 +1,79 @@
 import { isPlpBrowseDataResults, isPlpSearchDataResults } from './typeHelpers';
 import { getPageType } from './requestConfigsHelpers';
-export function getProductCardCnstrcDataAttributes(productInfo) {
-    let dataCnstrc = {};
+export const 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',
+    },
+};
+export function getProductCardCnstrcDataAttributes(productInfo, options) {
     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 = {
+        [cnstrcDataAttrs.common.itemId]: itemId,
+        [cnstrcDataAttrs.common.itemName]: itemName,
     };
+    // Only include variation ID if it exists
+    if (variationId) {
+        dataCnstrc[cnstrcDataAttrs.common.variationId] = variationId;
+    }
+    // Only include price if it exists
+    if (itemPrice !== undefined && itemPrice !== null) {
+        dataCnstrc[cnstrcDataAttrs.common.itemPrice] = itemPrice;
+    }
+    // Add sponsored listing data if available
+    if (options?.labels?.sl_campaign_id) {
+        dataCnstrc[cnstrcDataAttrs.common.slCampaignId] = String(options.labels.sl_campaign_id);
+    }
+    if (options?.labels?.sl_campaign_owner) {
+        dataCnstrc[cnstrcDataAttrs.common.slCampaignOwner] = String(options.labels.sl_campaign_owner);
+    }
     return dataCnstrc;
 }
-export function getPlpContainerCnstrcDataAttributes(data, requestConfigs) {
+export function getPlpContainerCnstrcDataAttributes(data, requestConfigs, isLoading = false) {
     if (!data || (!isPlpSearchDataResults(data) && !isPlpBrowseDataResults(data)))
         return {};
     const { filterName, filterValue } = requestConfigs;
     const pageType = 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,
+                [cnstrcDataAttrs.browse.browseContainer]: true,
+                [cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
+                [cnstrcDataAttrs.common.resultId]: data.resultId,
+                [cnstrcDataAttrs.browse.filterName]: filterName,
+                [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,
+                [cnstrcDataAttrs.search.searchContainer]: true,
+                [cnstrcDataAttrs.common.resultId]: data.resultId,
+                [cnstrcDataAttrs.common.numResults]: data.response.totalNumResults,
             };
+            // Add search term
+            if (data.request?.term) {
+                dataCnstrc[cnstrcDataAttrs.search.searchTerm] = data.request.term;
+            }
             break;
         case 'unknown':
             dataCnstrc = {};
@@ -40,5 +81,21 @@ export 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[cnstrcDataAttrs.common.zeroResults] = true;
+        }
+        // Add section if it's not "Products"
+        if (data.request?.section && data.request.section !== 'Products') {
+            dataCnstrc[cnstrcDataAttrs.common.section] = data.request.section;
+        }
+    }
     return dataCnstrc;
 }
+export function getConversionButtonCnstrcDataAttributes(conversionType) {
+    return {
+        [cnstrcDataAttrs.common.conversionBtn]: conversionType,
+    };
+}

package/lib/mjs/utils/itemFieldGetters.js

@@ -33,3 +33,6 @@ export function getSwatchPreview(variation) {
 export function getIsHiddenGroupField(group) {
     return group?.data?.cio_plp_hidden;
 }
+export function getItemUrl(item) {
+    return item?.url;
+}

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.6.4';
+export default '1.6.6';

package/lib/types/hooks/useCioPlp.d.ts

@@ -59,5 +59,5 @@ export default function useCioPlp(props?: UseCioPlpProps): {
         optionsToRender: PlpItemGroup[];
         setOptionsToRender: import("react").Dispatch<import("react").SetStateAction<PlpItemGroup[]>>;
     };
-    plpContainerCnstrcDataAttributes: Record<`data-cnstrc-${string}`, string | number | boolean>;
+    plpContainerCnstrcDataAttributes: import("../types").CnstrcDataAttrs;
 };

package/lib/types/types.d.ts

@@ -17,6 +17,7 @@ export interface ItemFieldGetters {
     getSwatchPreview: (variation: Variation) => string;
     getSwatches: (item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']) => SwatchItem[] | undefined;
     getIsHiddenGroupField: (group: PlpItemGroup) => boolean | undefined;
+    getItemUrl: (item: Item) => string | undefined;
 }
 export interface Formatters {
     formatPrice: (price?: number) => string;
@@ -75,7 +76,7 @@ export interface ProductCardRenderProps extends ProductCardProps {
     /**
      * Data Attributes to surface on parent div of product card.
      */
-    productCardCnstrcDataAttributes: CnstrcData;
+    productCardCnstrcDataAttributes: CnstrcDataAttrs;
 }
 export type ProductCardProps = IncludeRenderProps<ProductCardBaseProps, ProductCardRenderProps>;
 export interface RenderOverrides {
@@ -295,7 +296,7 @@ export interface PlpItemGroup {
     children: Array<PlpItemGroup>;
     parents: Pick<PlpItemGroup, 'groupId' | 'displayName'>[];
 }
-export type CnstrcData = Record<`data-cnstrc-${string}`, string | number | boolean>;
+export type CnstrcDataAttrs = Record<`data-cnstrc-${string}` | string, string | number | boolean>;
 export type PropsWithChildren<P> = P & {
     children?: ReactNode;
 };

package/lib/types/utils/dataAttributeHelpers.d.ts

@@ -1,3 +1,37 @@
-import { RequestConfigs, PlpSearchDataResults, PlpSearchDataRedirect, PlpBrowseData, CnstrcData, ProductInfoObject } from '../types';
-export declare function getProductCardCnstrcDataAttributes(productInfo: ProductInfoObject): CnstrcData;
-export declare function getPlpContainerCnstrcDataAttributes(data: PlpSearchDataResults | PlpSearchDataRedirect | PlpBrowseData | null, requestConfigs: RequestConfigs): Record<`data-cnstrc-${string}`, string | number | boolean>;
+import { RequestConfigs, PlpSearchDataResults, PlpSearchDataRedirect, PlpBrowseData, CnstrcDataAttrs, ProductInfoObject } from '../types';
+export interface ProductCardDataAttributeOptions {
+    labels?: {
+        sl_campaign_id?: string | number;
+        sl_campaign_owner?: string | number;
+    };
+}
+export declare const cnstrcDataAttrs: {
+    common: {
+        itemId: string;
+        itemName: string;
+        itemPrice: string;
+        variationId: string;
+        numResults: string;
+        conversionBtn: string;
+        resultId: string;
+        section: string;
+        zeroResults: string;
+        slCampaignId: string;
+        slCampaignOwner: string;
+    };
+    search: {
+        searchContainer: string;
+        searchTerm: string;
+    };
+    browse: {
+        browseContainer: string;
+        filterName: string;
+        filterValue: string;
+    };
+};
+export declare function getProductCardCnstrcDataAttributes(productInfo: ProductInfoObject, options?: ProductCardDataAttributeOptions): CnstrcDataAttrs;
+export declare function getPlpContainerCnstrcDataAttributes(data: PlpSearchDataResults | PlpSearchDataRedirect | PlpBrowseData | null, requestConfigs: RequestConfigs, isLoading?: boolean): CnstrcDataAttrs;
+export type ConversionType = 'add_to_cart' | 'add_to_wishlist' | 'like' | 'message' | 'make_offer' | 'read' | string;
+export declare function getConversionButtonCnstrcDataAttributes(conversionType: ConversionType): {
+    [x: string]: string;
+};

package/lib/types/utils/itemFieldGetters.d.ts

@@ -5,3 +5,4 @@ export declare function getRolloverImage(item: Item | Variation): string | undef
 export declare function getSwatches(item: Item, retrievePrice: ItemFieldGetters['getPrice'], retrieveSwatchPreview: ItemFieldGetters['getSwatchPreview'], retrieveSalePrice: ItemFieldGetters['getSalePrice'], retrieveRolloverImage: ItemFieldGetters['getRolloverImage']): SwatchItem[] | undefined;
 export declare function getSwatchPreview(variation: Variation): string;
 export declare function getIsHiddenGroupField(group: PlpItemGroup): any;
+export declare function getItemUrl(item: Item): string | undefined;

package/lib/types/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.6.4";
+declare const _default: "1.6.6";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.6.4",
+  "version": "1.6.6",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",