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

package/lib/cjs/hooks/useCioPlpProvider.js

@@ -6,8 +6,9 @@ const useCioClient_1 = tslib_1.__importDefault(require("./useCioClient"));
 const defaultGetters = tslib_1.__importStar(require("../utils/itemFieldGetters"));
 const defaultFormatters = tslib_1.__importStar(require("../utils/formatters"));
 const defaultUrlHelpers = tslib_1.__importStar(require("../utils/urlHelpers"));
+const shopifyDefaults_1 = require("../utils/shopifyDefaults");
 function useCioPlpProvider(props) {
-    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, } = props;
+    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, useShopifyDefaults = false, } = props;
     const [cioClientOptions, setCioClientOptions] = (0, react_1.useState)(customCioClientOptions);
     const cioClient = (0, useCioClient_1.default)({ apiKey, cioClient: customCioClient, options: cioClientOptions });
     const contextValue = (0, react_1.useMemo)(() => ({
@@ -17,8 +18,8 @@ function useCioPlpProvider(props) {
         staticRequestConfigs,
         itemFieldGetters: Object.assign(Object.assign({}, defaultGetters), itemFieldGetters),
         formatters: Object.assign(Object.assign({}, defaultFormatters), formatters),
-        callbacks: Object.assign({}, callbacks),
-        urlHelpers: Object.assign(Object.assign({}, defaultUrlHelpers), urlHelpers),
+        callbacks: Object.assign(Object.assign({}, (useShopifyDefaults && shopifyDefaults_1.shopifyDefaults.callbacks)), callbacks),
+        urlHelpers: Object.assign(Object.assign(Object.assign({}, defaultUrlHelpers), (useShopifyDefaults && shopifyDefaults_1.shopifyDefaults.urlHelpers)), urlHelpers),
         renderOverrides: Object.assign({}, renderOverrides),
     }), [
         cioClient,
@@ -29,6 +30,7 @@ function useCioPlpProvider(props) {
         urlHelpers,
         renderOverrides,
         staticRequestConfigs,
+        useShopifyDefaults,
     ]);
     return contextValue;
 }

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

@@ -10,3 +10,4 @@ tslib_1.__exportStar(require("./dataAttributeHelpers"), exports);
 tslib_1.__exportStar(require("./urlHelpers"), exports);
 tslib_1.__exportStar(require("./requestConfigsHelpers"), exports);
 tslib_1.__exportStar(require("./common"), exports);
+tslib_1.__exportStar(require("./shopifyDefaults"), exports);

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shopifyDefaults = void 0;
+// eslint-disable-next-line import/prefer-default-export
+exports.shopifyDefaults = {
+    selector: '#cio-plp-ui-container',
+    urlHelpers: {
+        setUrl(url) {
+            const modifiedUrl = url.replace('/group_id', '/collections');
+            if (typeof window !== 'undefined') {
+                window.location.href = modifiedUrl;
+            }
+        },
+    },
+    callbacks: {
+        onAddToCart(_event, item, selectedVariation) {
+            var _a;
+            // eslint-disable-next-line no-underscore-dangle
+            const shopifyId = ((_a = item.data) === null || _a === void 0 ? void 0 : _a.__shopify_id) || (selectedVariation === null || selectedVariation === void 0 ? void 0 : selectedVariation.variationId) || item.itemId;
+            if (typeof window !== 'undefined') {
+                fetch('/cart/add.js', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        id: shopifyId,
+                        quantity: 1,
+                    }),
+                }).catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error('Failed to add item to cart:', error);
+                });
+            }
+        },
+        onProductCardClick(_event, item) {
+            if (typeof window !== 'undefined') {
+                const url = new URL(`/products/${item.itemId}`, window.location.origin);
+                window.location.href = url.href;
+            }
+        },
+    },
+};

package/lib/cjs/version.js

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

package/lib/mjs/hooks/useCioPlpProvider.js

@@ -3,8 +3,9 @@ import useCioClient from './useCioClient';
 import * as defaultGetters from '../utils/itemFieldGetters';
 import * as defaultFormatters from '../utils/formatters';
 import * as defaultUrlHelpers from '../utils/urlHelpers';
+import { shopifyDefaults } from '../utils/shopifyDefaults';
 export default function useCioPlpProvider(props) {
-    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, } = props;
+    const { apiKey, formatters, callbacks, itemFieldGetters, urlHelpers, staticRequestConfigs = {}, renderOverrides = {}, cioClient: customCioClient, cioClientOptions: customCioClientOptions = {}, useShopifyDefaults = false, } = props;
     const [cioClientOptions, setCioClientOptions] = useState(customCioClientOptions);
     const cioClient = useCioClient({ apiKey, cioClient: customCioClient, options: cioClientOptions });
     const contextValue = useMemo(() => ({
@@ -14,8 +15,12 @@ export default function useCioPlpProvider(props) {
         staticRequestConfigs,
         itemFieldGetters: { ...defaultGetters, ...itemFieldGetters },
         formatters: { ...defaultFormatters, ...formatters },
-        callbacks: { ...callbacks },
-        urlHelpers: { ...defaultUrlHelpers, ...urlHelpers },
+        callbacks: { ...(useShopifyDefaults && shopifyDefaults.callbacks), ...callbacks },
+        urlHelpers: {
+            ...defaultUrlHelpers,
+            ...(useShopifyDefaults && shopifyDefaults.urlHelpers),
+            ...urlHelpers,
+        },
         renderOverrides: { ...renderOverrides },
     }), [
         cioClient,
@@ -26,6 +31,7 @@ export default function useCioPlpProvider(props) {
         urlHelpers,
         renderOverrides,
         staticRequestConfigs,
+        useShopifyDefaults,
     ]);
     return contextValue;
 }

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

@@ -7,3 +7,4 @@ export * from './dataAttributeHelpers';
 export * from './urlHelpers';
 export * from './requestConfigsHelpers';
 export * from './common';
+export * from './shopifyDefaults';

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

@@ -0,0 +1,37 @@
+// eslint-disable-next-line import/prefer-default-export
+export const shopifyDefaults = {
+    selector: '#cio-plp-ui-container',
+    urlHelpers: {
+        setUrl(url) {
+            const modifiedUrl = url.replace('/group_id', '/collections');
+            if (typeof window !== 'undefined') {
+                window.location.href = modifiedUrl;
+            }
+        },
+    },
+    callbacks: {
+        onAddToCart(_event, item, selectedVariation) {
+            // eslint-disable-next-line no-underscore-dangle
+            const shopifyId = item.data?.__shopify_id || selectedVariation?.variationId || item.itemId;
+            if (typeof window !== 'undefined') {
+                fetch('/cart/add.js', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        id: shopifyId,
+                        quantity: 1,
+                    }),
+                }).catch((error) => {
+                    // eslint-disable-next-line no-console
+                    console.error('Failed to add item to cart:', error);
+                });
+            }
+        },
+        onProductCardClick(_event, item) {
+            if (typeof window !== 'undefined') {
+                const url = new URL(`/products/${item.itemId}`, window.location.origin);
+                window.location.href = url.href;
+            }
+        },
+    },
+};

package/lib/mjs/version.js

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

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;
@@ -215,6 +216,7 @@ export interface CioPlpProviderProps {
     initialSearchResponse?: SearchResponse;
     initialBrowseResponse?: GetBrowseResultsResponse;
     staticRequestConfigs?: Partial<RequestConfigs>;
+    useShopifyDefaults?: boolean;
 }
 export type UseSortReturn = {
     sortOptions: PlpSortOption[];

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

@@ -7,3 +7,4 @@ export * from './dataAttributeHelpers';
 export * from './urlHelpers';
 export * from './requestConfigsHelpers';
 export * from './common';
+export * from './shopifyDefaults';

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/utils/shopifyDefaults.d.ts

@@ -0,0 +1,7 @@
+import type { Callbacks, UrlHelpers } from '../types';
+export interface ShopifyDefaults {
+    selector: string;
+    urlHelpers: Pick<UrlHelpers, 'setUrl'>;
+    callbacks: Pick<Callbacks, 'onAddToCart' | 'onProductCardClick'>;
+}
+export declare const shopifyDefaults: ShopifyDefaults;

package/lib/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-plp",
-  "version": "1.6.5",
+  "version": "1.7.1",
   "description": "Constructor PLP UI library for web applications",
   "author": "Constructor.io Corporation",
   "license": "MIT",
@@ -70,20 +70,20 @@
     "@babel/preset-typescript": "^7.27.1",
     "@chromatic-com/storybook": "^3.2.6",
     "@cspell/eslint-plugin": "^6.18.1",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-actions": "^8.6.14",
+    "@storybook/addon-a11y": "^8.6.15",
+    "@storybook/addon-actions": "^8.6.15",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-links": "^8.6.14",
+    "@storybook/addon-links": "^8.6.15",
     "@storybook/addon-mdx-gfm": "^8.6.14",
     "@storybook/blocks": "^8.6.14",
-    "@storybook/manager-api": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/react-webpack5": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@storybook/manager-api": "^8.6.15",
+    "@storybook/react": "^8.6.15",
+    "@storybook/react-vite": "^8.6.15",
+    "@storybook/react-webpack5": "^8.6.15",
+    "@storybook/test": "^8.6.15",
     "@storybook/test-runner": "^0.22.0",
-    "@storybook/theming": "^8.6.14",
+    "@storybook/theming": "^8.6.15",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.8",
@@ -110,7 +110,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^8.6.14",
+    "storybook": "^8.6.15",
     "typescript": "^4.9.4",
     "vite": "^6.3.5",
     "vite-plugin-css-injected-by-js": "^3.1.0",