@wix/headless-stores 0.0.104 → 0.0.106

package/cjs/dist/services/product-service.d.ts

@@ -1,5 +1,5 @@
+import { productsV3 } from '@wix/stores';
 import { type Signal } from '@wix/services-definitions/core-services/signals';
-import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
 /**
  * API interface for the Product service, providing reactive product data management.
  * This service handles loading and managing a single product's data, loading state, and errors.
@@ -15,6 +15,22 @@ export interface ProductServiceAPI {
     error: Signal<string | null>;
     /** Function to load a product by its slug */
     loadProduct: (slug: string) => Promise<void>;
+    /** Reports a ViewContent analytics event for the current product */
+    reportViewContentTrackEvent: () => void;
+    /** Reports an AddToCart analytics event for the current product */
+    reportAddToCartTrackEvent: (options?: {
+        quantity?: number;
+        variant?: string;
+        origin?: string;
+        position?: string;
+    }) => void;
+    /** Reports a ClickProduct analytics event for the current product */
+    reportClickProductTrackEvent: (options?: {
+        variant?: string;
+        list?: string;
+        position?: string;
+        origin?: string;
+    }) => void;
 }
 /**
  * Service definition for the Product service.

package/cjs/dist/services/product-service.js

@@ -1,6 +1,7 @@
+import { productsV3 } from '@wix/stores';
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
+import { analytics } from '@wix/site';
 /**
  * Service definition for the Product service.
  * This defines the contract that the ProductService must implement.
@@ -61,11 +62,160 @@ export const ProductService = implementService.withConfig()(ProductServiceDefini
     if (config.productSlug) {
         loadProduct(config.productSlug);
     }
+    /**
+     * Reports a ViewContent analytics event for product page tracking.
+     * This function automatically formats and sends a standardized ViewContent event
+     * to the Wix Analytics service when a user views a product page. It extracts
+     * relevant product information (brand, category, price, SKU) and sends it in
+     * the proper format for analytics tracking.
+     *
+     * @example
+     * ```tsx
+     * // Track when a product page loads
+     * import { useService } from '@wix/services-manager-react';
+     * import { ProductServiceDefinition } from '@wix/stores/services';
+     *
+     * function ProductPage() {
+     *   const productService = useService(ProductServiceDefinition);
+     *
+     *   useEffect(() => {
+     *     productService.reportViewContentTrackEvent();
+     *   }, []);
+     *
+     *   return <div>Product Page</div>;
+     * }
+     * ```
+     */
+    const reportViewContentTrackEvent = () => {
+        const currentProduct = product.get();
+        if (!currentProduct)
+            return;
+        const eventData = {
+            brand: currentProduct.brand?.name ?? undefined,
+            category: currentProduct.breadcrumbsInfo?.breadcrumbs?.[0]?.categoryName,
+            currency: currentProduct.currency ?? undefined,
+            id: currentProduct._id,
+            name: currentProduct.name || '',
+            price: parseFloat(currentProduct.variantsInfo?.variants?.[0]?.price?.actualPrice
+                ?.amount ?? '0'),
+            sku: currentProduct.variantsInfo?.variants?.[0]?.sku ?? undefined,
+        };
+        analytics.trackEvent('ViewContent', eventData);
+    };
+    /**
+     * Reports an AddToCart analytics event for cart tracking.
+     * This function automatically formats and sends a standardized AddToCart event
+     * to the Wix Analytics service when a user adds a product to their cart. It extracts
+     * relevant product information (brand, category, price, SKU, variant, quantity) and sends
+     * it in the proper format for analytics tracking.
+     *
+     * @param options Additional options for the AddToCart event
+     * @param options.quantity The quantity being added to cart (defaults to 1)
+     * @param options.variant The selected product variant (e.g., "Large", "Green")
+     * @param options.origin Event origin (e.g., "Product Page", "Quick View")
+     * @param options.position List or collection position (e.g., "Product Gallery", "Search Results")
+     *
+     * @example
+     * ```tsx
+     * // Track add to cart from product page
+     * import { useService } from '@wix/services-manager-react';
+     * import { ProductServiceDefinition } from '@wix/stores/services';
+     *
+     * function AddToCartButton() {
+     *   const productService = useService(ProductServiceDefinition);
+     *
+     *   const handleAddToCart = () => {
+     *     productService.reportAddToCartTrackEvent({
+     *       quantity: 1,
+     *       variant: 'Large Blue'
+     *     });
+     *   };
+     *
+     *   return <button onClick={handleAddToCart}>Add to Cart</button>;
+     * }
+     * ```
+     */
+    const reportAddToCartTrackEvent = (options) => {
+        const currentProduct = product.get();
+        if (!currentProduct)
+            return;
+        const eventData = {
+            brand: currentProduct.brand?.name ?? undefined,
+            category: currentProduct.breadcrumbsInfo?.breadcrumbs?.[0]?.categoryName,
+            currency: currentProduct.currency ?? undefined,
+            id: currentProduct._id,
+            name: currentProduct.name || '',
+            price: parseFloat(currentProduct.variantsInfo?.variants?.[0]?.price?.actualPrice
+                ?.amount ?? '0'),
+            quantity: options?.quantity ?? 1,
+            sku: currentProduct.variantsInfo?.variants?.[0]?.sku ?? undefined,
+            variant: options?.variant,
+            origin: options?.origin,
+            position: options?.position,
+        };
+        analytics.trackEvent('AddToCart', eventData);
+    };
+    /**
+     * Reports a ClickProduct analytics event for product click tracking.
+     * This function automatically formats and sends a standardized ClickProduct event
+     * to the Wix Analytics service when a user clicks on a product link. It extracts
+     * relevant product information (brand, category, price, SKU, variant) and sends
+     * it in the proper format for analytics tracking.
+     *
+     * @param options Additional options for the ClickProduct event
+     * @param options.variant The selected product variant (e.g., "Large", "Green")
+     * @param options.list List or collection the product is part of (e.g., "Category: T-Shirts")
+     * @param options.position Position of the product within a list or collection (e.g., "3")
+     * @param options.origin Event origin (e.g., "Search Results", "Related Products")
+     *
+     * @example
+     * ```tsx
+     * // Track product click from category page
+     * import { useService } from '@wix/services-manager-react';
+     * import { ProductServiceDefinition } from '@wix/stores/services';
+     *
+     * function ProductLink() {
+     *   const productService = useService(ProductServiceDefinition);
+     *
+     *   const handleClick = () => {
+     *     productService.reportClickProductTrackEvent({
+     *       list: 'Category: T-Shirts',
+     *       position: '3'
+     *     });
+     *   };
+     *
+     *   return <a onClick={handleClick}>View Product</a>;
+     * }
+     * ```
+     */
+    const reportClickProductTrackEvent = (options) => {
+        const currentProduct = product.get();
+        if (!currentProduct)
+            return;
+        const eventData = {
+            brand: currentProduct.brand?.name ?? undefined,
+            category: currentProduct.breadcrumbsInfo?.breadcrumbs?.[0]?.categoryName,
+            currency: currentProduct.currency ?? undefined,
+            id: currentProduct._id,
+            name: currentProduct.name || '',
+            price: parseFloat(currentProduct.variantsInfo?.variants?.[0]?.price?.actualPrice
+                ?.amount ?? '0'),
+            sku: currentProduct.variantsInfo?.variants?.[0]?.sku ?? undefined,
+            variant: options?.variant,
+            list: options?.list,
+            position: options?.position,
+            origin: options?.origin,
+        };
+        analytics.trackEvent('ClickProduct', eventData);
+    };
     return {
         product,
         isLoading,
         error,
         loadProduct,
+        reportViewContentTrackEvent,
+        reportAddToCartTrackEvent,
+        reportClickProductTrackEvent,
     };
 });
 /**

package/cjs/dist/services/selected-variant-service.d.ts

@@ -1,5 +1,5 @@
 import { type Signal, type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
-import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 export interface SelectedVariantServiceAPI {
     selectedQuantity: Signal<number>;
     selectedChoices: Signal<Record<string, string>>;
@@ -39,15 +39,15 @@ export interface SelectedVariantServiceAPI {
     decrementQuantity: () => void;
     selectVariantById: (id: string) => void;
     resetSelections: () => void;
-    getAvailableChoicesForOption: (optionName: string) => string[];
-    getChoiceInfo: (optionName: string, choiceValue: string) => {
+    getAvailableChoicesForOption: (optionKey: string) => string[];
+    getChoiceInfo: (optionKey: string, choiceValue: string) => {
         isAvailable: boolean;
         isInStock: boolean;
         isPreOrderEnabled: boolean;
     };
-    isChoiceAvailable: (optionName: string, choiceValue: string) => boolean;
-    isChoiceInStock: (optionName: string, choiceValue: string) => boolean;
-    isChoicePreOrderEnabled: (optionName: string, choiceValue: string) => boolean;
+    isChoiceAvailable: (optionKey: string, choiceValue: string) => boolean;
+    isChoiceInStock: (optionKey: string, choiceValue: string) => boolean;
+    isChoicePreOrderEnabled: (optionKey: string, choiceValue: string) => boolean;
     hasAnySelections: () => boolean;
     IsAllVariantsAreOutOfStock: () => boolean;
 }

package/cjs/dist/services/selected-variant-service.js

@@ -1,7 +1,6 @@
 import { defineService, implementService } from '@wix/services-definitions';
 import { SignalsServiceDefinition, } from '@wix/services-definitions/core-services/signals';
-import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
-import * as inventoryItemsV3 from '@wix/auto_sdk_stores_inventory-items-v-3';
+import { inventoryItemsV3, productsV3 } from '@wix/stores';
 import { CurrentCartServiceDefinition } from '@wix/headless-ecom/services';
 import { MediaGalleryServiceDefinition } from '@wix/headless-media/services';
 import { ProductServiceDefinition } from './product-service.js';
@@ -202,8 +201,8 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
             if (Object.keys(choices).length !==
                 Object.keys(variantChoices).length)
                 return false;
-            return Object.entries(choices).every(([optionName, optionValue]) => {
-                return variantChoices[optionName] === optionValue;
+            return Object.entries(choices).every(([optionKey, optionValue]) => {
+                return variantChoices[optionKey] === optionValue;
             });
         }) || null);
     }));
@@ -410,7 +409,7 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         selectedQuantity.set(newQuantity);
     };
     // New methods for smart variant selection
-    const getAvailableChoicesForOption = (optionName) => {
+    const getAvailableChoicesForOption = (optionKey) => {
         const currentChoices = selectedChoices.get();
         const variantsList = variants.get();
         // Get all possible choices for this option that result in valid variants
@@ -419,21 +418,21 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
             const variantChoices = processVariantChoices(variant);
             // Check if this variant matches all currently selected choices (except for the option we're checking)
             const matchesOtherChoices = Object.entries(currentChoices)
-                .filter(([key]) => key !== optionName)
+                .filter(([key]) => key !== optionKey)
                 .every(([key, value]) => variantChoices[key] === value);
-            if (matchesOtherChoices && variantChoices[optionName]) {
-                availableChoices.add(variantChoices[optionName]);
+            if (matchesOtherChoices && variantChoices[optionKey]) {
+                availableChoices.add(variantChoices[optionKey]);
             }
         });
         return Array.from(availableChoices);
     };
     // Core method that provides both availability and stock info efficiently
-    const getChoiceInfo = (optionName, choiceValue) => {
+    const getChoiceInfo = (optionKey, choiceValue) => {
         // Create hypothetical choices with this choice selected
         const currentChoices = selectedChoices.get();
         const hypotheticalChoices = {
             ...currentChoices,
-            [optionName]: choiceValue,
+            [optionKey]: choiceValue,
         };
         // Get all variants and find one that matches these choices
         const variantsList = variants.get();
@@ -459,14 +458,14 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
         return { isAvailable, isInStock, isPreOrderEnabled };
     };
     // Simplified methods using the core getChoiceInfo
-    const isChoiceAvailable = (optionName, choiceValue) => {
-        return getChoiceInfo(optionName, choiceValue).isAvailable;
+    const isChoiceAvailable = (optionKey, choiceValue) => {
+        return getChoiceInfo(optionKey, choiceValue).isAvailable;
     };
-    const isChoiceInStock = (optionName, choiceValue) => {
-        return getChoiceInfo(optionName, choiceValue).isInStock;
+    const isChoiceInStock = (optionKey, choiceValue) => {
+        return getChoiceInfo(optionKey, choiceValue).isInStock;
     };
-    const isChoicePreOrderEnabled = (optionName, choiceValue) => {
-        return getChoiceInfo(optionName, choiceValue).isPreOrderEnabled;
+    const isChoicePreOrderEnabled = (optionKey, choiceValue) => {
+        return getChoiceInfo(optionKey, choiceValue).isPreOrderEnabled;
     };
     const hasAnySelections = () => {
         const currentChoices = selectedChoices.get();

package/dist/react/Option.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { AsChildChildren } from '@wix/headless-utils/react';
 export interface Option {
     name: string;
+    key?: string;
     choices?: any[];
     hasChoices?: boolean;
     type?: string;

package/dist/react/Product.d.ts

@@ -1,6 +1,6 @@
-import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
-import React from 'react';
+import { productsV3 } from '@wix/stores';
 import { AsChildChildren } from '@wix/headless-utils/react';
+import React from 'react';
 import { AsContent } from './types.js';
 /**
  * Context for sharing variant options state between components
@@ -37,7 +37,7 @@ export type StockStatus = BasicStockStatus | 'can-pre-order';
  */
 export interface ProductRootProps {
     children: React.ReactNode;
-    product: V3Product;
+    product: productsV3.V3Product;
     selectedVariant?: any;
 }
 /**
@@ -268,7 +268,7 @@ export interface RawProps {
     asChild?: boolean;
     /** Custom render function when using asChild */
     children?: AsChildChildren<{
-        product: V3Product;
+        product: productsV3.V3Product;
     }>;
     /** CSS classes to apply to the default element */
     className?: string;
@@ -885,6 +885,53 @@ export declare const Action: {
     /** Pre-order action button */
     readonly PreOrder: React.ForwardRefExoticComponent<ProductActionProps & React.RefAttributes<HTMLButtonElement>>;
 };
+/**
+ * Props for Product Link component
+ */
+export interface ProductLinkProps {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Custom render function when using asChild */
+    children?: React.ReactNode;
+    /** CSS classes to apply to the link */
+    className?: string;
+    /** List or collection the product is part of (e.g., "Category: T-Shirts") */
+    list?: string;
+    /** Position of the product within a list or collection */
+    position?: string;
+    /** Event origin (e.g., "Search Results", "Related Products") */
+    origin?: string;
+}
+/**
+ * Product link component that automatically tracks ClickProduct events.
+ * Wraps a link to the product page and fires analytics when clicked.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Product.Link className="btn-secondary">
+ *   View Product
+ * </Product.Link>
+ *
+ * // With tracking parameters
+ * <Product.Link
+ *   list="Category: T-Shirts"
+ *   position="3"
+ *   className="btn-secondary"
+ * >
+ *   View Product
+ * </Product.Link>
+ *
+ * // asChild with custom link
+ * <Product.Link asChild list="Search Results" position="5">
+ *   <a href="/custom-url" className="custom-link">
+ *     <Product.Name />
+ *   </a>
+ * </Product.Link>
+ * ```
+ */
+export declare const Link: React.ForwardRefExoticComponent<ProductLinkProps & React.RefAttributes<HTMLAnchorElement>>;
 /**
  * Props for ProductVariantStock component
  */

package/dist/react/Product.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { InventoryAvailabilityStatus } from '@wix/auto_sdk_stores_products-v-3';
-import React from 'react';
+import { productsV3 } from '@wix/stores';
+import { Quantity as QuantityComponent } from '@wix/headless-components/react';
 import { Commerce } from '@wix/headless-ecom/react';
-import { AsChildSlot } from '@wix/headless-utils/react';
 import { MediaGallery } from '@wix/headless-media/react';
-import { Quantity as QuantityComponent } from '@wix/headless-components/react';
+import { AsChildSlot } from '@wix/headless-utils/react';
+import { useService } from '@wix/services-manager-react';
+import React from 'react';
+import { DataComponentTags } from '../data-component-tags.js';
+import { ProductServiceDefinition, SelectedVariantServiceDefinition, } from '../services/index.js';
 import * as CoreProduct from './core/Product.js';
-import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
 import * as CoreProductModifiers from './core/ProductModifiers.js';
+import * as CoreProductVariantSelector from './core/ProductVariantSelector.js';
 import * as CoreSelectedVariant from './core/SelectedVariant.js';
 import * as Option from './Option.js';
 import { AsContent } from './types.js';
-import { DataComponentTags } from '../data-component-tags.js';
 const VariantsContext = React.createContext(null);
 /**
  * Hook to access variants context
@@ -61,6 +63,7 @@ var TestIds;
     TestIds["productActionAddToCart"] = "product-action-add-to-cart";
     TestIds["productActionBuyNow"] = "product-action-buy-now";
     TestIds["productActionPreOrder"] = "product-action-can-pre-order";
+    TestIds["productLink"] = "product-link";
     TestIds["productQuantity"] = "product-quantity";
     TestIds["productQuantityDecrement"] = "product-quantity-decrement";
     TestIds["productQuantityInput"] = "product-quantity-input";
@@ -403,15 +406,15 @@ export const Stock = React.forwardRef((props, ref) => {
             let status;
             let label;
             switch (availabilityStatus) {
-                case InventoryAvailabilityStatus.IN_STOCK:
+                case productsV3.InventoryAvailabilityStatus.IN_STOCK:
                     status = 'in-stock';
                     label = finalLabels.inStock;
                     break;
-                case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+                case productsV3.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
                     status = 'limited-stock';
                     label = finalLabels.limitedStock;
                     break;
-                case InventoryAvailabilityStatus.OUT_OF_STOCK:
+                case productsV3.InventoryAvailabilityStatus.OUT_OF_STOCK:
                 default:
                     status = 'out-of-stock';
                     label = finalLabels.outOfStock;
@@ -879,6 +882,19 @@ export const ProductVariantSelectorReset = React.forwardRef((props, ref) => {
  */
 export const ProductActionAddToCart = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
+    // Get services for tracking
+    const productService = useService(ProductServiceDefinition);
+    const variantService = useService(SelectedVariantServiceDefinition);
+    // Track after successful add to cart
+    const handleSuccess = async () => {
+        const choices = variantService.selectedChoices.get();
+        const quantity = variantService.selectedQuantity.get();
+        const variantString = Object.values(choices).join(' ') || undefined;
+        productService.reportAddToCartTrackEvent({
+            quantity,
+            variant: variantString,
+        });
+    };
     return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, canAddToCart, isLoading, addToCart, isPreOrderEnabled, }) => {
             if (isPreOrderEnabled) {
                 return null;
@@ -886,13 +902,13 @@ export const ProductActionAddToCart = React.forwardRef((props, ref) => {
             const onClick = addToCart;
             const disabled = !canAddToCart || isLoading;
             if (asChild && children) {
-                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, onSuccess: handleSuccess, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading, customElement: children, customElementProps: {
                             disabled,
                             isLoading,
                             onClick,
                         } }) }));
             }
-            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading }));
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, onSuccess: handleSuccess, "data-testid": TestIds.productActionAddToCart, "data-in-progress": isLoading }));
         } }));
 });
 /**
@@ -923,6 +939,19 @@ export const ProductActionBuyNow = React.forwardRef((props, ref) => {
  */
 export const ProductActionPreOrder = React.forwardRef((props, ref) => {
     const { asChild, children, className, label, loadingState } = props;
+    // Get services for tracking
+    const productService = useService(ProductServiceDefinition);
+    const variantService = useService(SelectedVariantServiceDefinition);
+    // Track after successful pre-order
+    const handleSuccess = async () => {
+        const choices = variantService.selectedChoices.get();
+        const quantity = variantService.selectedQuantity.get();
+        const variantString = Object.values(choices).join(' ') || undefined;
+        productService.reportAddToCartTrackEvent({
+            quantity,
+            variant: variantString,
+        });
+    };
     return (_jsx(CoreSelectedVariant.Actions, { children: ({ lineItems, isLoading, addToCart, isPreOrderEnabled }) => {
             if (!isPreOrderEnabled) {
                 return null;
@@ -931,13 +960,13 @@ export const ProductActionPreOrder = React.forwardRef((props, ref) => {
             const onClick = addToCart;
             const disabled = !canPreOrder;
             if (asChild && children) {
-                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading, customElement: children, customElementProps: {
+                return (_jsx(Commerce.Actions.AddToCart, { lineItems: lineItems, asChild: asChild, onSuccess: handleSuccess, children: _jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading, customElement: children, customElementProps: {
                             disabled,
                             isLoading,
                             onClick,
                         } }) }));
             }
-            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading }));
+            return (_jsx(Commerce.Actions.AddToCart, { ref: ref, label: label, lineItems: lineItems, className: className, disabled: disabled, loadingState: loadingState, onSuccess: handleSuccess, "data-testid": TestIds.productActionPreOrder, "data-in-progress": isLoading }));
         } }));
 });
 /**
@@ -952,6 +981,57 @@ export const Action = {
     /** Pre-order action button */
     PreOrder: ProductActionPreOrder,
 };
+/**
+ * Product link component that automatically tracks ClickProduct events.
+ * Wraps a link to the product page and fires analytics when clicked.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Simple usage
+ * <Product.Link className="btn-secondary">
+ *   View Product
+ * </Product.Link>
+ *
+ * // With tracking parameters
+ * <Product.Link
+ *   list="Category: T-Shirts"
+ *   position="3"
+ *   className="btn-secondary"
+ * >
+ *   View Product
+ * </Product.Link>
+ *
+ * // asChild with custom link
+ * <Product.Link asChild list="Search Results" position="5">
+ *   <a href="/custom-url" className="custom-link">
+ *     <Product.Name />
+ *   </a>
+ * </Product.Link>
+ * ```
+ */
+export const Link = React.forwardRef((props, ref) => {
+    const { asChild, children, className, list, position, origin } = props;
+    // Get services for tracking
+    const productService = useService(ProductServiceDefinition);
+    const variantService = useService(SelectedVariantServiceDefinition);
+    return (_jsx(CoreProduct.Slug, { children: ({ slug }) => {
+            const handleClick = () => {
+                const choices = variantService.selectedChoices.get();
+                const variantString = Object.values(choices).join(' ') || undefined;
+                productService.reportClickProductTrackEvent({
+                    variant: variantString,
+                    list,
+                    position,
+                    origin,
+                });
+            };
+            if (asChild && children) {
+                return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.productLink, customElement: children, customElementProps: { onClick: handleClick } }));
+            }
+            return (_jsx("a", { ref: ref, href: `/${slug}`, onClick: handleClick, className: className, "data-testid": TestIds.productLink, children: children }));
+        } }));
+});
 /**
  * Helper function to determine stock status and label based on availability and can-pre-order settings
  */
@@ -966,12 +1046,12 @@ function getStockStatusMessage(inStock, isPreOrderEnabled, availabilityStatus, l
     // Handle stock status based on availability
     if (inStock) {
         switch (availabilityStatus) {
-            case InventoryAvailabilityStatus.IN_STOCK:
+            case productsV3.InventoryAvailabilityStatus.IN_STOCK:
                 return {
                     status: 'in-stock',
                     label: labels.inStock,
                 };
-            case InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
+            case productsV3.InventoryAvailabilityStatus.PARTIALLY_OUT_OF_STOCK:
                 return {
                     status: 'limited-stock',
                     label: labels.limitedStock,

package/dist/react/ProductList.d.ts

@@ -1,4 +1,3 @@
-import type { V3Product } from '@wix/auto_sdk_stores_products-v-3';
 import { Sort as SortPrimitive, GenericListTotalsRenderProps, GenericListLoadMoreRenderProps, ListVariant, GenericListRepeaterRenderProps } from '@wix/headless-components/react';
 import React from 'react';
 import type { ProductsListServiceConfig } from '../services/products-list-service.js';
@@ -9,7 +8,7 @@ import { AsChildChildren } from '@wix/headless-utils/react';
  */
 export interface ProductListRootProps {
     children: React.ReactNode;
-    products?: V3Product[];
+    products?: productsV3.V3Product[];
     productsListConfig?: ProductsListServiceConfig;
     className?: string;
     variant?: ListVariant;
@@ -95,7 +94,7 @@ export declare const Products: React.ForwardRefExoticComponent<ProductsProps & R
 /**
  * Render props for ProductRepeater asChild pattern
  */
-export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<V3Product>;
+export type ProductRepeaterRenderProps = GenericListRepeaterRenderProps<productsV3.V3Product>;
 /**
  * Props for ProductList ProductRepeater component
  */

package/dist/react/core/Product.d.ts

@@ -1,5 +1,5 @@
 import { ProductServiceConfig } from '../../services/product-service.js';
-import type { V3Product, ProductMedia } from '@wix/auto_sdk_stores_products-v-3';
+import { productsV3 } from '@wix/stores';
 export interface RootProps {
     children: React.ReactNode;
     productServiceConfig: ProductServiceConfig;
@@ -81,18 +81,18 @@ export interface ProductDescriptionProps {
  */
 export interface ProductDescriptionRenderProps {
     /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
-    description: NonNullable<V3Product['description']>;
+    description: NonNullable<productsV3.V3Product['description']>;
     /** Product description with plain html */
-    plainDescription: NonNullable<V3Product['plainDescription']>;
+    plainDescription: NonNullable<productsV3.V3Product['plainDescription']>;
 }
 /**
  * Render props for ProductDescription component
  */
 export interface ProductDescriptionRenderProps {
     /** Product description using the RICOS (Rich Content Object) format. See https://dev.wix.com/docs/ricos/api-reference/ricos-document */
-    description: NonNullable<V3Product['description']>;
+    description: NonNullable<productsV3.V3Product['description']>;
     /** Product description with plain html */
-    plainDescription: NonNullable<V3Product['plainDescription']>;
+    plainDescription: NonNullable<productsV3.V3Product['plainDescription']>;
 }
 /**
  * Headless component for product description display
@@ -129,15 +129,15 @@ export interface ProductMediaProps {
     children: (props: ProductMediaRenderProps) => React.ReactNode;
 }
 export interface ProductMediaRenderProps {
-    mediaItems: ProductMedia[];
-    mainMedia?: ProductMedia;
+    mediaItems: productsV3.ProductMedia[];
+    mainMedia?: productsV3.ProductMedia;
 }
 export declare function Media(props: ProductMediaProps): import("react").ReactNode;
 export interface ProductProps {
     children: (props: ProductRenderProps) => React.ReactNode;
 }
 export interface ProductRenderProps {
-    product: V3Product;
+    product: productsV3.V3Product;
 }
 export declare function Content(props: ProductProps): import("react").ReactNode;
 export interface LoadingProps {