@wix/headless-stores 0.0.104 → 0.0.105

package/cjs/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 { AsChildChildren } from '@wix/headless-utils/react';
+import React from 'react';
 import { AsContent } from './types.js';
 /**
  * Context for sharing variant options state between components
@@ -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/cjs/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 { 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";
@@ -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
  */

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

@@ -1,5 +1,5 @@
-import { type Signal } from '@wix/services-definitions/core-services/signals';
 import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
+import { type Signal } from '@wix/services-definitions/core-services/signals';
 /**
  * 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 * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
 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/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 { AsChildChildren } from '@wix/headless-utils/react';
+import React from 'react';
 import { AsContent } from './types.js';
 /**
  * Context for sharing variant options state between components
@@ -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 { 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";
@@ -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
  */

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

@@ -1,5 +1,5 @@
-import { type Signal } from '@wix/services-definitions/core-services/signals';
 import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
+import { type Signal } from '@wix/services-definitions/core-services/signals';
 /**
  * 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/dist/services/product-service.js

@@ -1,6 +1,7 @@
+import * as productsV3 from '@wix/auto_sdk_stores_products-v-3';
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.104",
+  "version": "0.0.105",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -66,12 +66,13 @@
     "@wix/auto_sdk_stores_read-only-variants-v-3": "^1.0.23",
     "@wix/ecom": "^1.0.1461",
     "@wix/essentials": "^0.1.24",
-    "@wix/headless-ecom": "0.0.37",
+    "@wix/headless-ecom": "0.0.38",
     "@wix/headless-media": "0.0.18",
     "@wix/headless-utils": "0.0.8",
     "@wix/redirects": "^1.0.83",
     "@wix/services-definitions": "^0.1.4",
-    "@wix/services-manager-react": "^0.1.26"
+    "@wix/services-manager-react": "^0.1.26",
+    "@wix/site": "^1.27.0"
   },
   "peerDependencies": {
     "@wix/headless-components": "^0.0.0"
@@ -86,5 +87,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "06c8b114cd10bf81e0aac903d34ccd77aaab45f2c0ae2e5977402e8a"
+  "falconPackageHash": "2937c978ada9e33f794daf2161a4f84ffe9ea93141e59938401efb95"
 }