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

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/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/version.js

@@ -1 +1 @@
-export default '1.6.3';
+export default '1.6.5';

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

@@ -75,7 +75,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 +295,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/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.6.3";
+declare const _default: "1.6.5";
 export default _default;

package/package.json

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