@constructor-io/constructorio-ui-autocomplete 1.28.2 → 1.29.0

package/lib/cjs/components/Autocomplete/SearchInput/SearchInput.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
+const dataAttributeHelpers_1 = require("../../../utils/dataAttributeHelpers");
 function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQuery }) {
     const inputProps = getInputProps();
     return (react_1.default.createElement("form", Object.assign({}, getFormProps()),
@@ -17,7 +18,7 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
             react_1.default.createElement("div", { className: 'cio-icon' },
                 react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     react_1.default.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
-        react_1.default.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', "data-cnstrc-search-submit-btn": true, onClick: (e) => {
+        react_1.default.createElement("button", Object.assign({ className: 'cio-submit-btn', "data-testid": 'cio-submit-btn' }, { [dataAttributeHelpers_1.cnstrcDataAttrs.autocomplete.searchSubmitButton]: '' }, { onClick: (e) => {
                 var _a;
                 if (!inputProps.value) {
                     e.preventDefault();
@@ -25,7 +26,7 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
                         (_a = document.getElementById(inputProps.id)) === null || _a === void 0 ? void 0 : _a.focus();
                     }
                 }
-            }, type: 'submit', "aria-label": 'Submit Search' },
+            }, type: 'submit', "aria-label": 'Submit Search' }),
             react_1.default.createElement("div", { className: 'cio-icon' },
                 react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     react_1.default.createElement("path", { d: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z' }))))));

package/lib/cjs/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -8,6 +8,7 @@ const helpers_1 = require("../../../utils/helpers");
 const format_1 = require("../../../utils/format");
 const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
 const NoResults_1 = tslib_1.__importDefault(require("../AutocompleteResults/NoResults"));
+const dataAttributeHelpers_1 = require("../../../utils/dataAttributeHelpers");
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     var _a, _b, _c;
@@ -52,7 +53,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         displayShowAllResultsButton &&
             (typeof type === 'undefined' || type === 'autocomplete') &&
             section.indexSectionName === 'Products' && (react_1.default.createElement("div", { className: 'cio-section-footer' },
-            react_1.default.createElement("button", { "data-cnstrc-search-submit-btn": true, className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }, (0, helpers_1.translate)('show all results', translations))))));
+            react_1.default.createElement("button", Object.assign({}, { [dataAttributeHelpers_1.cnstrcDataAttrs.autocomplete.searchSubmitButton]: '' }, { className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }), (0, helpers_1.translate)('show all results', translations))))));
 };
 function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/cjs/hooks/useCioAutocomplete.js

@@ -17,6 +17,7 @@ const useRecommendationsObserver_1 = tslib_1.__importDefault(require("./useRecom
 const typeGuards_1 = require("../typeGuards");
 const useNormalizedProps_1 = tslib_1.__importDefault(require("./useNormalizedProps"));
 const useCustomBlur_1 = tslib_1.__importDefault(require("./useCustomBlur"));
+const dataAttributeHelpers_1 = require("../utils/dataAttributeHelpers");
 const shopifyDefaults_1 = require("../utils/shopifyDefaults");
 exports.defaultSections = [
     {
@@ -54,7 +55,7 @@ const useCioAutocomplete = (options) => {
         cioJsClientOptions: options.cioJsClientOptions,
     });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, podsData, } = (0, useSections_1.default)(query, cioClient, sections, zeroStateSections, advancedParameters);
     const features = (0, react_1.useMemo)(() => (0, features_1.getFeatures)(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = (0, react_1.useMemo)(() => (0, helpers_1.getItemsForActiveSections)(activeSectionsWithData), [activeSectionsWithData]);
@@ -75,12 +76,12 @@ const useCioAutocomplete = (options) => {
         request,
         featureToggles: features,
         isOpen,
-        getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results', 'data-cnstrc-autosuggest': '' })),
+        getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results', [dataAttributeHelpers_1.cnstrcDataAttrs.autocomplete.autocompleteContainer]: '' })),
         getLabelProps,
         openMenu,
         closeMenu,
         getItemProps: (item) => {
-            var _a, _b, _c, _d;
+            var _a;
             const { index, sectionId } = (0, helpers_1.getItemPosition)({ item, items });
             const sectionItemTestId = `cio-item-${sectionId === null || sectionId === void 0 ? void 0 : sectionId.replace(' ', '')}`;
             // Products always have links, Search Suggestions with getSearchResultsUrl have links
@@ -97,9 +98,11 @@ const useCioAutocomplete = (options) => {
                     }
                 },
             };
-            return Object.assign(Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
+            // Get all data attributes using the helper function
+            const dataAttributes = (0, dataAttributeHelpers_1.getItemCnstrcDataAttributes)(item);
+            return Object.assign(Object.assign(Object.assign(Object.assign({}, getItemPropsDownShift({ item, index })), { 
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
-                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId, 'data-cnstrc-item-section': item.section, 'data-cnstrc-item-group': item.groupId, 'data-cnstrc-item-name': item.value, 'data-cnstrc-item-id': (_b = item.data) === null || _b === void 0 ? void 0 : _b.id, 'data-cnstrc-sl-campaign-id': (_c = item.labels) === null || _c === void 0 ? void 0 : _c.sl_campaign_id, 'data-cnstrc-sl-campaign-owner': (_d = item.labels) === null || _d === void 0 ? void 0 : _d.sl_campaign_owner }), (hasLink ? {} : nonInteractiveItemsProps));
+                className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId }), dataAttributes), (hasLink ? {} : nonInteractiveItemsProps));
         },
         getInputProps: () => (Object.assign(Object.assign({}, getInputProps({
             onChange: (e) => {
@@ -131,7 +134,7 @@ const useCioAutocomplete = (options) => {
                     // eslint-disable-next-line no-console
                     console.log(error);
                 }
-            }, className: 'cio-input', 'data-testid': 'cio-input', 'data-cnstrc-search-input': '', placeholder, onKeyDownCapture: ({ code, key, nativeEvent }) => {
+            }, className: 'cio-input', 'data-testid': 'cio-input', [dataAttributeHelpers_1.cnstrcDataAttrs.autocomplete.input]: '', placeholder, onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
                 const isHome = code === 'Home' || key === 'Home';
                 const isEnd = code === 'End' || key === 'End';
@@ -170,7 +173,7 @@ const useCioAutocomplete = (options) => {
             },
             className: 'cio-form',
             'data-testid': 'cio-form',
-            'data-cnstrc-search-form': '',
+            [dataAttributeHelpers_1.cnstrcDataAttrs.autocomplete.inputForm]: '',
         }),
         getSectionProps: (section) => {
             var _a, _b;
@@ -207,16 +210,18 @@ const useCioAutocomplete = (options) => {
                 className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,
                 role: 'none',
-                'data-cnstrc-section': (_b = section.data[0]) === null || _b === void 0 ? void 0 : _b.section,
+                [dataAttributeHelpers_1.cnstrcDataAttrs.common.section]: (_b = section.data[0]) === null || _b === void 0 ? void 0 : _b.section,
             };
             if ((0, typeGuards_1.isCustomSection)(section)) {
-                attributes['data-cnstrc-custom-section'] = true;
-                attributes['data-cnstrc-custom-section-name'] = section.displayName;
+                attributes[dataAttributeHelpers_1.cnstrcDataAttrs.custom.customSection] = true;
+                attributes[dataAttributeHelpers_1.cnstrcDataAttrs.custom.customSectionName] = section.displayName;
             }
-            // Add data attributes for recommendations
+            // Add data attributes for recommendations using helper
             if ((0, typeGuards_1.isRecommendationsSection)(section)) {
-                attributes['data-cnstrc-recommendations'] = true;
-                attributes['data-cnstrc-recommendations-pod-id'] = section.podId;
+                const podData = podsData === null || podsData === void 0 ? void 0 : podsData[section.podId];
+                const seedItems = (0, dataAttributeHelpers_1.normalizeSeedItems)(section.itemIds);
+                const recommendationAttributes = (0, dataAttributeHelpers_1.getRecommendationsSectionCnstrcDataAttributes)(section, podData === null || podData === void 0 ? void 0 : podData.resultId, podData === null || podData === void 0 ? void 0 : podData.numResults, seedItems);
+                Object.assign(attributes, recommendationAttributes);
             }
             return attributes;
         },

package/lib/cjs/hooks/useFetchRecommendationPod.js

@@ -14,7 +14,8 @@ const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroState
         }));
         const recommendationsPodResults = {};
         const recommendationsPodsData = {};
-        responses.forEach(({ response, request }, index) => {
+        responses.forEach(({ response, request, result_id: resultId }, index) => {
+            var _a;
             const { pod, results } = response;
             if (pod === null || pod === void 0 ? void 0 : pod.id) {
                 recommendationsPodResults[pod.id] = results === null || results === void 0 ? void 0 : results.map((item) => {
@@ -25,6 +26,8 @@ const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroState
                     displayName: pod.display_name,
                     podId: pod.id,
                     request,
+                    resultId,
+                    numResults: (_a = response.total_num_results) !== null && _a !== void 0 ? _a : 0,
                 };
             }
         });

package/lib/cjs/hooks/useSections/index.js

@@ -33,6 +33,7 @@ function useSections(query, cioClient, sections, zeroStateSections, advancedPara
         zeroStateActiveSections: showZeroStateSections,
         request: autocomplete.request,
         totalNumResultsPerSection: autocomplete.totalNumResultsPerSection,
+        podsData: recommendations.podsData,
     };
 }
 exports.default = useSections;

package/lib/cjs/utils/dataAttributeHelpers.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConversionButtonCnstrcDataAttributes = exports.getRecommendationsSectionCnstrcDataAttributes = exports.getItemCnstrcDataAttributes = exports.normalizeSeedItems = exports.cnstrcDataAttrs = void 0;
+const typeGuards_1 = require("../typeGuards");
+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',
+        itemSection: 'data-cnstrc-item-section',
+        itemGroup: 'data-cnstrc-item-group',
+        slCampaignId: 'data-cnstrc-sl-campaign-id',
+        slCampaignOwner: 'data-cnstrc-sl-campaign-owner',
+        section: 'data-cnstrc-section',
+    },
+    autocomplete: {
+        input: 'data-cnstrc-search-input',
+        inputForm: 'data-cnstrc-search-form',
+        searchSubmitButton: 'data-cnstrc-search-submit-btn',
+        autocompleteContainer: 'data-cnstrc-autosuggest',
+    },
+    recommendations: {
+        recommendationsContainer: 'data-cnstrc-recommendations',
+        recommendationsPodId: 'data-cnstrc-recommendations-pod-id',
+        item: 'data-cnstrc-item',
+        strategyId: 'data-cnstrc-strategy-id',
+        seedItems: 'data-cnstrc-recommendations-seed-items',
+    },
+    custom: {
+        customSection: 'data-cnstrc-custom-section',
+        customSectionName: 'data-cnstrc-custom-section-name',
+    },
+};
+/**
+ * Normalize itemIds to array format for seed items
+ */
+function normalizeSeedItems(itemIds) {
+    if (!itemIds)
+        return undefined;
+    return Array.isArray(itemIds) ? itemIds : [itemIds];
+}
+exports.normalizeSeedItems = normalizeSeedItems;
+/**
+ * Get data attributes for autocomplete/recommendation items
+ *
+ * @param item - The item to generate data attributes for
+ * @returns An object containing data attributes to be spread onto the element
+ *
+ * @example
+ * ```tsx
+ * // For autocomplete items
+ * const itemProps = getItemCnstrcDataAttributes(searchSuggestionItem);
+ * <li {...itemProps}>Search Suggestion</li>
+ *
+ * // For recommendation items
+ * const recItemProps = getItemCnstrcDataAttributes(recommendationItem);
+ * <div {...recItemProps}>Recommended Product</div>
+ * ```
+ */
+function getItemCnstrcDataAttributes(item) {
+    var _a, _b, _c, _d;
+    const dataCnstrc = {
+        [exports.cnstrcDataAttrs.common.itemSection]: item.section,
+        [exports.cnstrcDataAttrs.common.itemName]: item.value,
+    };
+    // Add item ID only for non-Search Suggestions
+    if (!(0, typeGuards_1.isSearchSuggestion)(item) && ((_a = item.data) === null || _a === void 0 ? void 0 : _a.id)) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.itemId] = item.data.id;
+    }
+    // Add variation ID if exists
+    if ((_b = item.data) === null || _b === void 0 ? void 0 : _b.variation_id) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.variationId] = item.data.variation_id;
+    }
+    // Add group ID for in-group suggestions
+    if ((0, typeGuards_1.isInGroupSuggestion)(item)) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.itemGroup] = item.groupId;
+    }
+    // Add recommendation-specific attributes (check if item has podId and strategy)
+    if (item.podId && item.strategy) {
+        dataCnstrc[exports.cnstrcDataAttrs.recommendations.item] = 'recommendation';
+        // Add strategy ID if available
+        if (item.strategy.id) {
+            dataCnstrc[exports.cnstrcDataAttrs.recommendations.strategyId] = item.strategy.id;
+        }
+    }
+    // Add sponsored listing data if available
+    if ((_c = item.labels) === null || _c === void 0 ? void 0 : _c.sl_campaign_id) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.slCampaignId] = String(item.labels.sl_campaign_id);
+    }
+    if ((_d = item.labels) === null || _d === void 0 ? void 0 : _d.sl_campaign_owner) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.slCampaignOwner] = String(item.labels.sl_campaign_owner);
+    }
+    return dataCnstrc;
+}
+exports.getItemCnstrcDataAttributes = getItemCnstrcDataAttributes;
+/**
+ * Get data attributes for recommendation sections
+ */
+function getRecommendationsSectionCnstrcDataAttributes(section, resultId, numResults, seedItems) {
+    if (!(0, typeGuards_1.isRecommendationsSection)(section)) {
+        return {};
+    }
+    const dataCnstrc = {
+        [exports.cnstrcDataAttrs.recommendations.recommendationsContainer]: true,
+        [exports.cnstrcDataAttrs.recommendations.recommendationsPodId]: section.podId,
+    };
+    // Add result ID if available
+    if (resultId) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.resultId] = resultId;
+    }
+    // Add number of results
+    if (numResults !== undefined) {
+        dataCnstrc[exports.cnstrcDataAttrs.common.numResults] = numResults;
+    }
+    // Add seed items if available
+    if (seedItems && seedItems.length > 0) {
+        dataCnstrc[exports.cnstrcDataAttrs.recommendations.seedItems] = seedItems.join(',');
+    }
+    return dataCnstrc;
+}
+exports.getRecommendationsSectionCnstrcDataAttributes = getRecommendationsSectionCnstrcDataAttributes;
+/**
+ * Get data attributes for conversion buttons
+ *
+ * @example
+ * ```tsx
+ * <button {...getConversionButtonCnstrcDataAttributes('add_to_cart')}>
+ *   Add to Cart
+ * </button>
+ * ```
+ */
+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.28.2';
+exports.default = '1.29.0';

package/lib/mjs/components/Autocomplete/SearchInput/SearchInput.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
+import { cnstrcDataAttrs } from '../../../utils/dataAttributeHelpers';
 function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQuery }) {
     const inputProps = getInputProps();
     return (React.createElement("form", { ...getFormProps() },
@@ -14,7 +15,7 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
             React.createElement("div", { className: 'cio-icon' },
                 React.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
                     React.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
-        React.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', "data-cnstrc-search-submit-btn": true, onClick: (e) => {
+        React.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', ...{ [cnstrcDataAttrs.autocomplete.searchSubmitButton]: '' }, onClick: (e) => {
                 if (!inputProps.value) {
                     e.preventDefault();
                     if (inputProps.id) {

package/lib/mjs/components/Autocomplete/SectionItemsList/SectionItemsList.js

@@ -5,6 +5,7 @@ import { translate } from '../../../utils/helpers';
 import { camelToStartCase } from '../../../utils/format';
 import { CioAutocompleteContext } from '../CioAutocompleteProvider';
 import NoResults from '../AutocompleteResults/NoResults';
+import { cnstrcDataAttrs } from '../../../utils/dataAttributeHelpers';
 // eslint-disable-next-line func-names
 const DefaultRenderSectionItemsList = function ({ section }) {
     const { getSectionProps, query, getFormProps, advancedParameters } = useContext(CioAutocompleteContext);
@@ -47,7 +48,7 @@ const DefaultRenderSectionItemsList = function ({ section }) {
         displayShowAllResultsButton &&
             (typeof type === 'undefined' || type === 'autocomplete') &&
             section.indexSectionName === 'Products' && (React.createElement("div", { className: 'cio-section-footer' },
-            React.createElement("button", { "data-cnstrc-search-submit-btn": true, className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }, translate('show all results', translations))))));
+            React.createElement("button", { ...{ [cnstrcDataAttrs.autocomplete.searchSubmitButton]: '' }, className: 'cio-show-all-results-button', type: 'button', onClick: onSubmit }, translate('show all results', translations))))));
 };
 export default function SectionItemsList(props) {
     const { section, children = DefaultRenderSectionItemsList } = props;

package/lib/mjs/hooks/useCioAutocomplete.js

@@ -13,6 +13,7 @@ import useRecommendationsObserver from './useRecommendationsObserver';
 import { isCustomSection, isRecommendationsSection } from '../typeGuards';
 import useNormalizedProps from './useNormalizedProps';
 import useCustomBlur from './useCustomBlur';
+import { getItemCnstrcDataAttributes, getRecommendationsSectionCnstrcDataAttributes, cnstrcDataAttrs, normalizeSeedItems, } from '../utils/dataAttributeHelpers';
 import { shopifyDefaults } from '../utils/shopifyDefaults';
 export const defaultSections = [
     {
@@ -50,7 +51,7 @@ const useCioAutocomplete = (options) => {
         cioJsClientOptions: options.cioJsClientOptions,
     });
     // Get autocomplete sections (autocomplete + recommendations + custom)
-    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
+    const { fetchRecommendationResults, activeSections, activeSectionsWithData, zeroStateActiveSections, request, totalNumResultsPerSection, podsData, } = useSections(query, cioClient, sections, zeroStateSections, advancedParameters);
     const features = useMemo(() => getFeatures(request), [request]);
     // Get dropdown items array from active sections (autocomplete + recommendations + custom)
     const items = useMemo(() => getItemsForActiveSections(activeSectionsWithData), [activeSectionsWithData]);
@@ -78,7 +79,7 @@ const useCioAutocomplete = (options) => {
             ...getMenuProps(),
             className: 'cio-results',
             'data-testid': 'cio-results',
-            'data-cnstrc-autosuggest': '',
+            [cnstrcDataAttrs.autocomplete.autocompleteContainer]: '',
         }),
         getLabelProps,
         openMenu,
@@ -100,17 +101,14 @@ const useCioAutocomplete = (options) => {
                     }
                 },
             };
+            // Get all data attributes using the helper function
+            const dataAttributes = getItemCnstrcDataAttributes(item);
             return {
                 ...getItemPropsDownShift({ item, index }),
                 // @deprecated `sectionItemTestId` will be removed as a className in the next major version
                 className: `cio-item ${sectionItemTestId}`,
                 'data-testid': sectionItemTestId,
-                'data-cnstrc-item-section': item.section,
-                'data-cnstrc-item-group': item.groupId,
-                'data-cnstrc-item-name': item.value,
-                'data-cnstrc-item-id': item.data?.id,
-                'data-cnstrc-sl-campaign-id': item.labels?.sl_campaign_id,
-                'data-cnstrc-sl-campaign-owner': item.labels?.sl_campaign_owner,
+                ...dataAttributes,
                 ...(hasLink ? {} : nonInteractiveItemsProps),
             };
         },
@@ -149,7 +147,7 @@ const useCioAutocomplete = (options) => {
             },
             className: 'cio-input',
             'data-testid': 'cio-input',
-            'data-cnstrc-search-input': '',
+            [cnstrcDataAttrs.autocomplete.input]: '',
             placeholder,
             onKeyDownCapture: ({ code, key, nativeEvent }) => {
                 const isEnter = code === 'Enter' || key === 'Enter';
@@ -191,7 +189,7 @@ const useCioAutocomplete = (options) => {
             },
             className: 'cio-form',
             'data-testid': 'cio-form',
-            'data-cnstrc-search-form': '',
+            [cnstrcDataAttrs.autocomplete.inputForm]: '',
         }),
         getSectionProps: (section) => {
             // @deprecated ClassNames derived from this fn will be removed in the next major version
@@ -227,16 +225,18 @@ const useCioAutocomplete = (options) => {
                 className: `cio-section cio-section-${sectionListingType} ${getDeprecatedClassNames()}`,
                 ref: section.ref,
                 role: 'none',
-                'data-cnstrc-section': section.data[0]?.section,
+                [cnstrcDataAttrs.common.section]: section.data[0]?.section,
             };
             if (isCustomSection(section)) {
-                attributes['data-cnstrc-custom-section'] = true;
-                attributes['data-cnstrc-custom-section-name'] = section.displayName;
+                attributes[cnstrcDataAttrs.custom.customSection] = true;
+                attributes[cnstrcDataAttrs.custom.customSectionName] = section.displayName;
             }
-            // Add data attributes for recommendations
+            // Add data attributes for recommendations using helper
             if (isRecommendationsSection(section)) {
-                attributes['data-cnstrc-recommendations'] = true;
-                attributes['data-cnstrc-recommendations-pod-id'] = section.podId;
+                const podData = podsData?.[section.podId];
+                const seedItems = normalizeSeedItems(section.itemIds);
+                const recommendationAttributes = getRecommendationsSectionCnstrcDataAttributes(section, podData?.resultId, podData?.numResults, seedItems);
+                Object.assign(attributes, recommendationAttributes);
             }
             return attributes;
         },

package/lib/mjs/hooks/useFetchRecommendationPod.js

@@ -11,7 +11,7 @@ const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroState
         })));
         const recommendationsPodResults = {};
         const recommendationsPodsData = {};
-        responses.forEach(({ response, request }, index) => {
+        responses.forEach(({ response, request, result_id: resultId }, index) => {
             const { pod, results } = response;
             if (pod?.id) {
                 recommendationsPodResults[pod.id] = results?.map((item) => ({
@@ -24,6 +24,8 @@ const useFetchRecommendationPod = (cioClient, recommendationPods, fetchZeroState
                     displayName: pod.display_name,
                     podId: pod.id,
                     request,
+                    resultId,
+                    numResults: response.total_num_results ?? 0,
                 };
             }
         });

package/lib/mjs/hooks/useSections/index.js

@@ -30,5 +30,6 @@ export default function useSections(query, cioClient, sections, zeroStateSection
         zeroStateActiveSections: showZeroStateSections,
         request: autocomplete.request,
         totalNumResultsPerSection: autocomplete.totalNumResultsPerSection,
+        podsData: recommendations.podsData,
     };
 }

package/lib/mjs/utils/dataAttributeHelpers.js

@@ -0,0 +1,133 @@
+import { isInGroupSuggestion, isRecommendationsSection, isSearchSuggestion } from '../typeGuards';
+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',
+        itemSection: 'data-cnstrc-item-section',
+        itemGroup: 'data-cnstrc-item-group',
+        slCampaignId: 'data-cnstrc-sl-campaign-id',
+        slCampaignOwner: 'data-cnstrc-sl-campaign-owner',
+        section: 'data-cnstrc-section',
+    },
+    autocomplete: {
+        input: 'data-cnstrc-search-input',
+        inputForm: 'data-cnstrc-search-form',
+        searchSubmitButton: 'data-cnstrc-search-submit-btn',
+        autocompleteContainer: 'data-cnstrc-autosuggest',
+    },
+    recommendations: {
+        recommendationsContainer: 'data-cnstrc-recommendations',
+        recommendationsPodId: 'data-cnstrc-recommendations-pod-id',
+        item: 'data-cnstrc-item',
+        strategyId: 'data-cnstrc-strategy-id',
+        seedItems: 'data-cnstrc-recommendations-seed-items',
+    },
+    custom: {
+        customSection: 'data-cnstrc-custom-section',
+        customSectionName: 'data-cnstrc-custom-section-name',
+    },
+};
+/**
+ * Normalize itemIds to array format for seed items
+ */
+export function normalizeSeedItems(itemIds) {
+    if (!itemIds)
+        return undefined;
+    return Array.isArray(itemIds) ? itemIds : [itemIds];
+}
+/**
+ * Get data attributes for autocomplete/recommendation items
+ *
+ * @param item - The item to generate data attributes for
+ * @returns An object containing data attributes to be spread onto the element
+ *
+ * @example
+ * ```tsx
+ * // For autocomplete items
+ * const itemProps = getItemCnstrcDataAttributes(searchSuggestionItem);
+ * <li {...itemProps}>Search Suggestion</li>
+ *
+ * // For recommendation items
+ * const recItemProps = getItemCnstrcDataAttributes(recommendationItem);
+ * <div {...recItemProps}>Recommended Product</div>
+ * ```
+ */
+export function getItemCnstrcDataAttributes(item) {
+    const dataCnstrc = {
+        [cnstrcDataAttrs.common.itemSection]: item.section,
+        [cnstrcDataAttrs.common.itemName]: item.value,
+    };
+    // Add item ID only for non-Search Suggestions
+    if (!isSearchSuggestion(item) && item.data?.id) {
+        dataCnstrc[cnstrcDataAttrs.common.itemId] = item.data.id;
+    }
+    // Add variation ID if exists
+    if (item.data?.variation_id) {
+        dataCnstrc[cnstrcDataAttrs.common.variationId] = item.data.variation_id;
+    }
+    // Add group ID for in-group suggestions
+    if (isInGroupSuggestion(item)) {
+        dataCnstrc[cnstrcDataAttrs.common.itemGroup] = item.groupId;
+    }
+    // Add recommendation-specific attributes (check if item has podId and strategy)
+    if (item.podId && item.strategy) {
+        dataCnstrc[cnstrcDataAttrs.recommendations.item] = 'recommendation';
+        // Add strategy ID if available
+        if (item.strategy.id) {
+            dataCnstrc[cnstrcDataAttrs.recommendations.strategyId] = item.strategy.id;
+        }
+    }
+    // Add sponsored listing data if available
+    if (item.labels?.sl_campaign_id) {
+        dataCnstrc[cnstrcDataAttrs.common.slCampaignId] = String(item.labels.sl_campaign_id);
+    }
+    if (item.labels?.sl_campaign_owner) {
+        dataCnstrc[cnstrcDataAttrs.common.slCampaignOwner] = String(item.labels.sl_campaign_owner);
+    }
+    return dataCnstrc;
+}
+/**
+ * Get data attributes for recommendation sections
+ */
+export function getRecommendationsSectionCnstrcDataAttributes(section, resultId, numResults, seedItems) {
+    if (!isRecommendationsSection(section)) {
+        return {};
+    }
+    const dataCnstrc = {
+        [cnstrcDataAttrs.recommendations.recommendationsContainer]: true,
+        [cnstrcDataAttrs.recommendations.recommendationsPodId]: section.podId,
+    };
+    // Add result ID if available
+    if (resultId) {
+        dataCnstrc[cnstrcDataAttrs.common.resultId] = resultId;
+    }
+    // Add number of results
+    if (numResults !== undefined) {
+        dataCnstrc[cnstrcDataAttrs.common.numResults] = numResults;
+    }
+    // Add seed items if available
+    if (seedItems && seedItems.length > 0) {
+        dataCnstrc[cnstrcDataAttrs.recommendations.seedItems] = seedItems.join(',');
+    }
+    return dataCnstrc;
+}
+/**
+ * Get data attributes for conversion buttons
+ *
+ * @example
+ * ```tsx
+ * <button {...getConversionButtonCnstrcDataAttributes('add_to_cart')}>
+ *   Add to Cart
+ * </button>
+ * ```
+ */
+export function getConversionButtonCnstrcDataAttributes(conversionType) {
+    return {
+        [cnstrcDataAttrs.common.conversionBtn]: conversionType,
+    };
+}

package/lib/mjs/version.js

@@ -1 +1 @@
-export default '1.28.2';
+export default '1.29.0';

package/lib/types/components/Autocomplete/CioAutocompleteProvider.d.ts

@@ -18,12 +18,14 @@ export declare const CioAutocompleteContext: React.Context<{
     getItemProps: (item: import("../../types").Item) => any;
     getInputProps: () => any;
     getFormProps: () => {
+        [x: string]: string | ((event: any) => {
+            query: string;
+        });
         onSubmit: (event: any) => {
             query: string;
         };
         className: string;
         'data-testid': string;
-        'data-cnstrc-search-form': string;
     };
     getSectionProps: (section: import("../../types").Section) => import("../../types").HTMLPropsWithCioDataAttributes<any>;
     setQuery: React.Dispatch<React.SetStateAction<string>>;

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

@@ -18,12 +18,14 @@ declare const useCioAutocomplete: (options: UseCioAutocompleteOptions) => {
     getItemProps: (item: Item) => any;
     getInputProps: () => any;
     getFormProps: () => {
+        [x: string]: string | ((event: any) => {
+            query: string;
+        });
         onSubmit: (event: any) => {
             query: string;
         };
         className: string;
         'data-testid': string;
-        'data-cnstrc-search-form': string;
     };
     getSectionProps: (section: Section) => HTMLPropsWithCioDataAttributes<any>;
     setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;

package/lib/types/hooks/useSections/index.d.ts

@@ -1,6 +1,6 @@
 import ConstructorIO from '@constructor-io/constructorio-client-javascript';
 import { Nullable } from '@constructor-io/constructorio-client-javascript/lib/types';
-import { AdvancedParameters, UserDefinedSection } from '../../types';
+import { AdvancedParameters, PodData, UserDefinedSection } from '../../types';
 export default function useSections(query: string, cioClient: Nullable<ConstructorIO>, sections: UserDefinedSection[], zeroStateSections?: UserDefinedSection[], advancedParameters?: AdvancedParameters): {
     fetchRecommendationResults: () => Promise<void>;
     activeSections: UserDefinedSection[];
@@ -8,4 +8,5 @@ export default function useSections(query: string, cioClient: Nullable<Construct
     zeroStateActiveSections: boolean;
     request: Partial<import("@constructor-io/constructorio-client-javascript").AutocompleteRequestType>;
     totalNumResultsPerSection: Record<string, number>;
+    podsData: Record<string, PodData>;
 };