@wix/headless-stores 0.0.35 → 0.0.36

package/cjs/dist/react/Category.d.ts

@@ -1,5 +1,51 @@
 import { type Category } from "@wix/auto_sdk_categories_categories";
 import React, { type ReactNode } from "react";
+import { type CategoryServiceConfig } from "../services/category-service.js";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    categoryServiceConfig?: CategoryServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 export interface CategoryListProps {
     children: (data: {
         categories: Category[];

package/cjs/dist/react/Category.js

@@ -1,6 +1,72 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CategoryServiceDefinition } from "../services/category-service.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { createServicesMap } from "@wix/services-manager";
+// Create navigation handler for category URLs
+const handleCategoryChange = (categoryId, category) => {
+    if (typeof window !== "undefined") {
+        let newPath = "/category";
+        if (categoryId !== null) {
+            // Use category slug for URL
+            if (!category?.slug) {
+                console.warn(`Category ${categoryId} has no slug, using category ID as fallback`);
+            }
+            const categorySlug = category?.slug || categoryId;
+            newPath = `/category/${categorySlug}`;
+        }
+        window.history.pushState(null, "Showing Category " + category?.name, newPath);
+    }
+};
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoryServiceDefinition, CategoryService, {
+            ...(props.categoryServiceConfig ?? {
+                categories: [],
+                initialCategoryId: null,
+            }),
+            onCategoryChange: handleCategoryChange,
+        }), children: props.children }));
+}
 /**
  * Headless component for displaying a list of categories
  *

package/cjs/dist/react/FilteredCollection.d.ts

@@ -1,7 +1,90 @@
 import React, { type ReactNode } from "react";
 import { type AvailableOptions, type FilterServiceAPI, type Filter } from "../services/filter-service.js";
 import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
 export type { AvailableOptions, Filter, FilterServiceAPI };
+/**
+ * Root component that provides the FilteredCollection service context to its children.
+ * This component sets up the necessary services for managing filtered collection functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsPage() {
+ *   return (
+ *     <FilteredCollection.Root>
+ *       <div>
+ *         <FilteredCollection.Filters>
+ *           {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *             <div className="filters">
+ *               <h3>Filters</h3>
+ *               <div className="price-filter">
+ *                 <label>Price Range</label>
+ *                 <input
+ *                   type="range"
+ *                   min={availableOptions.priceRange.min}
+ *                   max={availableOptions.priceRange.max}
+ *                   value={currentFilters.priceRange.min}
+ *                   onChange={(e) => applyFilters({
+ *                     ...currentFilters,
+ *                     priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *                   })}
+ *                 />
+ *               </div>
+ *               {isFiltered && (
+ *                 <button onClick={clearFilters}>Clear All Filters</button>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Filters>
+ *
+ *         <FilteredCollection.Grid>
+ *           {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *             <div>
+ *               {isLoading && <div>Loading filtered products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {isEmpty && <div>No products match your filters</div>}
+ *               {products.length > 0 && (
+ *                 <div>
+ *                   <p>Showing {products.length} of {totalProducts} products</p>
+ *                   <div className="filtered-grid">
+ *                     {products.map(product => (
+ *                       <FilteredCollection.Item key={product.id} product={product}>
+ *                         {({ title, image, price, available, slug }) => (
+ *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *                             {image && <img src={image} alt={title} />}
+ *                             <h3>{title}</h3>
+ *                             <div className="price">{price}</div>
+ *                             <a href={`/product/${slug}`}>View Details</a>
+ *                           </div>
+ *                         )}
+ *                       </FilteredCollection.Item>
+ *                     ))}
+ *                   </div>
+ *                   {hasMoreProducts && (
+ *                     <FilteredCollection.LoadMore>
+ *                       {({ loadMore, isLoading }) => (
+ *                         <button onClick={loadMore} disabled={isLoading}>
+ *                           {isLoading ? 'Loading...' : 'Load More'}
+ *                         </button>
+ *                       )}
+ *                     </FilteredCollection.LoadMore>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Grid>
+ *       </div>
+ *     </FilteredCollection.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
 export interface FiltersLoadingProps {
     children: (data: {
         isFullyLoaded: boolean;

package/cjs/dist/react/FilteredCollection.js

@@ -1,8 +1,104 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CollectionServiceDefinition } from "../services/collection-service.js";
-import { FilterServiceDefinition, } from "../services/filter-service.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CollectionServiceDefinition, CollectionService, } from "../services/collection-service.js";
+import { FilterServiceDefinition, FilterService, } from "../services/filter-service.js";
+import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { SortServiceDefinition, SortService, } from "../services/sort-service.js";
+import { CatalogServiceDefinition, CatalogService, } from "../services/catalog-service.js";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the FilteredCollection service context to its children.
+ * This component sets up the necessary services for managing filtered collection functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsPage() {
+ *   return (
+ *     <FilteredCollection.Root>
+ *       <div>
+ *         <FilteredCollection.Filters>
+ *           {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *             <div className="filters">
+ *               <h3>Filters</h3>
+ *               <div className="price-filter">
+ *                 <label>Price Range</label>
+ *                 <input
+ *                   type="range"
+ *                   min={availableOptions.priceRange.min}
+ *                   max={availableOptions.priceRange.max}
+ *                   value={currentFilters.priceRange.min}
+ *                   onChange={(e) => applyFilters({
+ *                     ...currentFilters,
+ *                     priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *                   })}
+ *                 />
+ *               </div>
+ *               {isFiltered && (
+ *                 <button onClick={clearFilters}>Clear All Filters</button>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Filters>
+ *
+ *         <FilteredCollection.Grid>
+ *           {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *             <div>
+ *               {isLoading && <div>Loading filtered products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {isEmpty && <div>No products match your filters</div>}
+ *               {products.length > 0 && (
+ *                 <div>
+ *                   <p>Showing {products.length} of {totalProducts} products</p>
+ *                   <div className="filtered-grid">
+ *                     {products.map(product => (
+ *                       <FilteredCollection.Item key={product.id} product={product}>
+ *                         {({ title, image, price, available, slug }) => (
+ *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *                             {image && <img src={image} alt={title} />}
+ *                             <h3>{title}</h3>
+ *                             <div className="price">{price}</div>
+ *                             <a href={`/product/${slug}`}>View Details</a>
+ *                           </div>
+ *                         )}
+ *                       </FilteredCollection.Item>
+ *                     ))}
+ *                   </div>
+ *                   {hasMoreProducts && (
+ *                     <FilteredCollection.LoadMore>
+ *                       {({ loadMore, isLoading }) => (
+ *                         <button onClick={loadMore} disabled={isLoading}>
+ *                           {isLoading ? 'Loading...' : 'Load More'}
+ *                         </button>
+ *                       )}
+ *                     </FilteredCollection.LoadMore>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Grid>
+ *       </div>
+ *     </FilteredCollection.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(CatalogServiceDefinition, CatalogService, {})
+            .addService(CategoryServiceDefinition, CategoryService, {
+            categories: [],
+            initialCategoryId: null,
+        })
+            .addService(SortServiceDefinition, SortService, {})
+            .addService(FilterServiceDefinition, FilterService, {})
+            .addService(CollectionServiceDefinition, CollectionService, {}), children: props.children }));
+}
 /**
  * Headless component for displaying a loading state for filters
  *

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

@@ -1,4 +1,4 @@
-import { defineService, implementService, } from "@wix/services-definitions";
+import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { productsV3, readOnlyVariantsV3 } from "@wix/stores";
 import { FilterServiceDefinition } from "./filter-service.js";

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

@@ -9,7 +9,6 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     const signalsService = getService(SignalsServiceDefinition);
     const cartService = getService(CurrentCartServiceDefinition);
     const productService = getService(ProductServiceDefinition);
-    // const mediaService = getService(MediaGalleryServiceDefinition);
     const selectedChoices = signalsService.signal({});
     const preOrderMessage = signalsService.signal(null);
     const initialProduct = productService.product.get();

package/dist/react/Category.d.ts

@@ -1,5 +1,51 @@
 import { type Category } from "@wix/auto_sdk_categories_categories";
 import React, { type ReactNode } from "react";
+import { type CategoryServiceConfig } from "../services/category-service.js";
+import type { PropsWithChildren } from "react";
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{
+    categoryServiceConfig?: CategoryServiceConfig;
+}>): import("react/jsx-runtime").JSX.Element;
 export interface CategoryListProps {
     children: (data: {
         categories: Category[];

package/dist/react/Category.js

@@ -1,6 +1,72 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CategoryServiceDefinition } from "../services/category-service.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { createServicesMap } from "@wix/services-manager";
+// Create navigation handler for category URLs
+const handleCategoryChange = (categoryId, category) => {
+    if (typeof window !== "undefined") {
+        let newPath = "/category";
+        if (categoryId !== null) {
+            // Use category slug for URL
+            if (!category?.slug) {
+                console.warn(`Category ${categoryId} has no slug, using category ID as fallback`);
+            }
+            const categorySlug = category?.slug || categoryId;
+            newPath = `/category/${categorySlug}`;
+        }
+        window.history.pushState(null, "Showing Category " + category?.name, newPath);
+    }
+};
+/**
+ * Root component that provides the Category service context to its children.
+ * This component sets up the necessary services for managing category functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { Category } from '@wix/stores/components';
+ *
+ * function CategoryNavigation({ categories }) {
+ *   return (
+ *     <Category.Root categoryServiceConfig={{ categories }}>
+ *       <div>
+ *         <Category.List>
+ *           {({ categories, selectedCategory, setSelectedCategory }) => (
+ *             <nav>
+ *               <button
+ *                 onClick={() => setSelectedCategory(null)}
+ *                 className={selectedCategory === null ? 'active' : ''}
+ *               >
+ *                 All Categories
+ *               </button>
+ *               {categories.map(category => (
+ *                 <button
+ *                   key={category.id}
+ *                   onClick={() => setSelectedCategory(category.id)}
+ *                   className={selectedCategory === category.id ? 'active' : ''}
+ *                 >
+ *                   {category.name}
+ *                 </button>
+ *               ))}
+ *             </nav>
+ *           )}
+ *         </Category.List>
+ *       </div>
+ *     </Category.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(CategoryServiceDefinition, CategoryService, {
+            ...(props.categoryServiceConfig ?? {
+                categories: [],
+                initialCategoryId: null,
+            }),
+            onCategoryChange: handleCategoryChange,
+        }), children: props.children }));
+}
 /**
  * Headless component for displaying a list of categories
  *

package/dist/react/FilteredCollection.d.ts

@@ -1,7 +1,90 @@
 import React, { type ReactNode } from "react";
 import { type AvailableOptions, type FilterServiceAPI, type Filter } from "../services/filter-service.js";
 import { type V3Product } from "@wix/auto_sdk_stores_products-v-3";
+import type { PropsWithChildren } from "react";
 export type { AvailableOptions, Filter, FilterServiceAPI };
+/**
+ * Root component that provides the FilteredCollection service context to its children.
+ * This component sets up the necessary services for managing filtered collection functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsPage() {
+ *   return (
+ *     <FilteredCollection.Root>
+ *       <div>
+ *         <FilteredCollection.Filters>
+ *           {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *             <div className="filters">
+ *               <h3>Filters</h3>
+ *               <div className="price-filter">
+ *                 <label>Price Range</label>
+ *                 <input
+ *                   type="range"
+ *                   min={availableOptions.priceRange.min}
+ *                   max={availableOptions.priceRange.max}
+ *                   value={currentFilters.priceRange.min}
+ *                   onChange={(e) => applyFilters({
+ *                     ...currentFilters,
+ *                     priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *                   })}
+ *                 />
+ *               </div>
+ *               {isFiltered && (
+ *                 <button onClick={clearFilters}>Clear All Filters</button>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Filters>
+ *
+ *         <FilteredCollection.Grid>
+ *           {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *             <div>
+ *               {isLoading && <div>Loading filtered products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {isEmpty && <div>No products match your filters</div>}
+ *               {products.length > 0 && (
+ *                 <div>
+ *                   <p>Showing {products.length} of {totalProducts} products</p>
+ *                   <div className="filtered-grid">
+ *                     {products.map(product => (
+ *                       <FilteredCollection.Item key={product.id} product={product}>
+ *                         {({ title, image, price, available, slug }) => (
+ *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *                             {image && <img src={image} alt={title} />}
+ *                             <h3>{title}</h3>
+ *                             <div className="price">{price}</div>
+ *                             <a href={`/product/${slug}`}>View Details</a>
+ *                           </div>
+ *                         )}
+ *                       </FilteredCollection.Item>
+ *                     ))}
+ *                   </div>
+ *                   {hasMoreProducts && (
+ *                     <FilteredCollection.LoadMore>
+ *                       {({ loadMore, isLoading }) => (
+ *                         <button onClick={loadMore} disabled={isLoading}>
+ *                           {isLoading ? 'Loading...' : 'Load More'}
+ *                         </button>
+ *                       )}
+ *                     </FilteredCollection.LoadMore>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Grid>
+ *       </div>
+ *     </FilteredCollection.Root>
+ *   );
+ * }
+ * ```
+ */
+export declare function Root(props: PropsWithChildren<{}>): import("react/jsx-runtime").JSX.Element;
 export interface FiltersLoadingProps {
     children: (data: {
         isFullyLoaded: boolean;

package/dist/react/FilteredCollection.js

@@ -1,8 +1,104 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useService } from "@wix/services-manager-react";
-import { CollectionServiceDefinition } from "../services/collection-service.js";
-import { FilterServiceDefinition, } from "../services/filter-service.js";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useService, WixServices } from "@wix/services-manager-react";
+import { CollectionServiceDefinition, CollectionService, } from "../services/collection-service.js";
+import { FilterServiceDefinition, FilterService, } from "../services/filter-service.js";
+import { CategoryServiceDefinition, CategoryService, } from "../services/category-service.js";
+import { SortServiceDefinition, SortService, } from "../services/sort-service.js";
+import { CatalogServiceDefinition, CatalogService, } from "../services/catalog-service.js";
 import { InventoryAvailabilityStatus, } from "@wix/auto_sdk_stores_products-v-3";
+import { createServicesMap } from "@wix/services-manager";
+/**
+ * Root component that provides the FilteredCollection service context to its children.
+ * This component sets up the necessary services for managing filtered collection functionality.
+ *
+ * @order 1
+ * @component
+ * @example
+ * ```tsx
+ * import { FilteredCollection } from '@wix/stores/components';
+ *
+ * function FilteredProductsPage() {
+ *   return (
+ *     <FilteredCollection.Root>
+ *       <div>
+ *         <FilteredCollection.Filters>
+ *           {({ applyFilters, clearFilters, currentFilters, availableOptions, isFiltered }) => (
+ *             <div className="filters">
+ *               <h3>Filters</h3>
+ *               <div className="price-filter">
+ *                 <label>Price Range</label>
+ *                 <input
+ *                   type="range"
+ *                   min={availableOptions.priceRange.min}
+ *                   max={availableOptions.priceRange.max}
+ *                   value={currentFilters.priceRange.min}
+ *                   onChange={(e) => applyFilters({
+ *                     ...currentFilters,
+ *                     priceRange: { ...currentFilters.priceRange, min: Number(e.target.value) }
+ *                   })}
+ *                 />
+ *               </div>
+ *               {isFiltered && (
+ *                 <button onClick={clearFilters}>Clear All Filters</button>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Filters>
+ *
+ *         <FilteredCollection.Grid>
+ *           {({ products, isLoading, error, isEmpty, totalProducts, hasMoreProducts }) => (
+ *             <div>
+ *               {isLoading && <div>Loading filtered products...</div>}
+ *               {error && <div>Error: {error}</div>}
+ *               {isEmpty && <div>No products match your filters</div>}
+ *               {products.length > 0 && (
+ *                 <div>
+ *                   <p>Showing {products.length} of {totalProducts} products</p>
+ *                   <div className="filtered-grid">
+ *                     {products.map(product => (
+ *                       <FilteredCollection.Item key={product.id} product={product}>
+ *                         {({ title, image, price, available, slug }) => (
+ *                           <div className={`product-item ${!available ? 'unavailable' : ''}`}>
+ *                             {image && <img src={image} alt={title} />}
+ *                             <h3>{title}</h3>
+ *                             <div className="price">{price}</div>
+ *                             <a href={`/product/${slug}`}>View Details</a>
+ *                           </div>
+ *                         )}
+ *                       </FilteredCollection.Item>
+ *                     ))}
+ *                   </div>
+ *                   {hasMoreProducts && (
+ *                     <FilteredCollection.LoadMore>
+ *                       {({ loadMore, isLoading }) => (
+ *                         <button onClick={loadMore} disabled={isLoading}>
+ *                           {isLoading ? 'Loading...' : 'Load More'}
+ *                         </button>
+ *                       )}
+ *                     </FilteredCollection.LoadMore>
+ *                   )}
+ *                 </div>
+ *               )}
+ *             </div>
+ *           )}
+ *         </FilteredCollection.Grid>
+ *       </div>
+ *     </FilteredCollection.Root>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap()
+            .addService(CatalogServiceDefinition, CatalogService, {})
+            .addService(CategoryServiceDefinition, CategoryService, {
+            categories: [],
+            initialCategoryId: null,
+        })
+            .addService(SortServiceDefinition, SortService, {})
+            .addService(FilterServiceDefinition, FilterService, {})
+            .addService(CollectionServiceDefinition, CollectionService, {}), children: props.children }));
+}
 /**
  * Headless component for displaying a loading state for filters
  *

package/dist/services/collection-service.js

@@ -1,4 +1,4 @@
-import { defineService, implementService, } from "@wix/services-definitions";
+import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { productsV3, readOnlyVariantsV3 } from "@wix/stores";
 import { FilterServiceDefinition } from "./filter-service.js";

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

@@ -9,7 +9,6 @@ export const SelectedVariantService = implementService.withConfig()(SelectedVari
     const signalsService = getService(SignalsServiceDefinition);
     const cartService = getService(CurrentCartServiceDefinition);
     const productService = getService(ProductServiceDefinition);
-    // const mediaService = getService(MediaGalleryServiceDefinition);
     const selectedChoices = signalsService.signal({});
     const preOrderMessage = signalsService.signal(null);
     const initialProduct = productService.product.get();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-stores",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "type": "module",
   "scripts": {
     "prebuild": "cd ../media && yarn build && cd ../ecom && yarn build",