@wix/headless-stores 0.0.42 → 0.0.44

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

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { type ProductOption, InventoryStatusType } from "../services/products-list-search-service.js";
+import { Category } from "@wix/auto_sdk_categories_categories";
 /**
  * Props for InventoryStatus headless component
  */
@@ -168,6 +169,15 @@ export interface PriceRangeRenderProps {
  * ```
  */
 export declare function PriceRange(props: PriceRangeProps): ReactNode;
+export interface CategoryFilterRenderProps {
+    selectedCategory: Category | null;
+    setSelectedCategory: (category: Category | null) => void;
+}
+export interface CategoryFilterProps {
+    /** Content to display (can be a render function receiving category data or ReactNode) */
+    children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
+}
+export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
 /**
  * Props for ProductOptions headless component
  */

package/cjs/dist/react/ProductListFilters.js

@@ -148,6 +148,14 @@ export function PriceRange(props) {
         })
         : props.children;
 }
+export function CategoryFilter(props) {
+    const service = useService(ProductsListSearchServiceDefinition);
+    const selectedCategory = service.selectedCategory.get();
+    const setSelectedCategory = service.setSelectedCategory;
+    return typeof props.children === "function"
+        ? props.children({ selectedCategory, setSelectedCategory })
+        : props.children;
+}
 /**
  * Headless component that renders content for each product option in the list.
  * Maps over all available product options and provides each option through a render prop.

package/cjs/dist/services/products-list-search-service.d.ts

@@ -1,5 +1,6 @@
 import type { Signal } from "@wix/services-definitions/core-services/signals";
 import { productsV3, customizationsV3 } from "@wix/stores";
+import { type Category } from "./category-service.js";
 import { SortType } from "./../enums/sort-enums.js";
 export { SortType } from "./../enums/sort-enums.js";
 /**
@@ -42,7 +43,7 @@ type InitialSearchState = {
     };
     inventoryStatuses?: InventoryStatusType[];
     productOptions?: Record<string, string[]>;
-    category?: string;
+    category?: Category;
     visible?: boolean;
     productType?: string;
 };
@@ -83,13 +84,15 @@ export declare const ProductsListSearchServiceDefinition: string & {
         selectedInventoryStatuses: Signal<InventoryStatusType[]>;
         availableProductOptions: Signal<ProductOption[]>;
         selectedProductOptions: Signal<Record<string, string[]>>;
-        selectedCategory: Signal<string | null>;
+        selectedCategory: Signal<Category | null>;
         setSelectedMinPrice: (minPrice: number) => void;
         setSelectedMaxPrice: (maxPrice: number) => void;
         toggleInventoryStatus: (status: InventoryStatusType) => void;
         toggleProductOption: (optionId: string, choiceId: string) => void;
-        setSelectedCategory: (category: string | null) => void;
-        isFiltered: Signal<boolean>;
+        setSelectedCategory: (category: Category | null) => void;
+        isFiltered: {
+            get: () => boolean;
+        };
         reset: () => void;
     };
     __config: {};
@@ -119,13 +122,15 @@ export declare const ProductsListSearchServiceDefinition: string & {
     selectedInventoryStatuses: Signal<InventoryStatusType[]>;
     availableProductOptions: Signal<ProductOption[]>;
     selectedProductOptions: Signal<Record<string, string[]>>;
-    selectedCategory: Signal<string | null>;
+    selectedCategory: Signal<Category | null>;
     setSelectedMinPrice: (minPrice: number) => void;
     setSelectedMaxPrice: (maxPrice: number) => void;
     toggleInventoryStatus: (status: InventoryStatusType) => void;
     toggleProductOption: (optionId: string, choiceId: string) => void;
-    setSelectedCategory: (category: string | null) => void;
-    isFiltered: Signal<boolean>;
+    setSelectedCategory: (category: Category | null) => void;
+    isFiltered: {
+        get: () => boolean;
+    };
     reset: () => void;
 };
 /**
@@ -135,7 +140,7 @@ export declare function convertUrlSortToSortType(urlSort: string): SortType | nu
 /**
  * Parse URL and build complete search options with all filters, sort, and pagination
  */
-export declare function parseUrlForProductsListSearch(url: string, defaultSearchOptions?: productsV3.V3ProductSearch): Promise<{
+export declare function parseUrlForProductsListSearch(url: string, categoriesList: Category[], defaultSearchOptions?: productsV3.V3ProductSearch): Promise<{
     searchOptions: productsV3.V3ProductSearch;
     initialSearchState: InitialSearchState;
 }>;
@@ -172,13 +177,15 @@ export declare const ProductsListSearchService: import("@wix/services-definition
         selectedInventoryStatuses: Signal<InventoryStatusType[]>;
         availableProductOptions: Signal<ProductOption[]>;
         selectedProductOptions: Signal<Record<string, string[]>>;
-        selectedCategory: Signal<string | null>;
+        selectedCategory: Signal<Category | null>;
         setSelectedMinPrice: (minPrice: number) => void;
         setSelectedMaxPrice: (maxPrice: number) => void;
         toggleInventoryStatus: (status: InventoryStatusType) => void;
         toggleProductOption: (optionId: string, choiceId: string) => void;
-        setSelectedCategory: (category: string | null) => void;
-        isFiltered: Signal<boolean>;
+        setSelectedCategory: (category: Category | null) => void;
+        isFiltered: {
+            get: () => boolean;
+        };
         reset: () => void;
     };
     __config: {};
@@ -208,12 +215,14 @@ export declare const ProductsListSearchService: import("@wix/services-definition
     selectedInventoryStatuses: Signal<InventoryStatusType[]>;
     availableProductOptions: Signal<ProductOption[]>;
     selectedProductOptions: Signal<Record<string, string[]>>;
-    selectedCategory: Signal<string | null>;
+    selectedCategory: Signal<Category | null>;
     setSelectedMinPrice: (minPrice: number) => void;
     setSelectedMaxPrice: (maxPrice: number) => void;
     toggleInventoryStatus: (status: InventoryStatusType) => void;
     toggleProductOption: (optionId: string, choiceId: string) => void;
-    setSelectedCategory: (category: string | null) => void;
-    isFiltered: Signal<boolean>;
+    setSelectedCategory: (category: Category | null) => void;
+    isFiltered: {
+        get: () => boolean;
+    };
     reset: () => void;
 }, ProductsListSearchServiceConfig>;

package/cjs/dist/services/products-list-search-service.js

@@ -2,6 +2,7 @@ import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { DEFAULT_QUERY_LIMIT, ProductsListServiceDefinition, } from "./products-list-service.js";
 import { productsV3, customizationsV3 } from "@wix/stores";
+import { loadCategoriesListServiceConfig } from "./categories-list-service.js";
 const PRICE_FILTER_DEBOUNCE_TIME = 300;
 import { SortType } from "./../enums/sort-enums.js";
 export { SortType } from "./../enums/sort-enums.js";
@@ -63,7 +64,7 @@ export function convertUrlSortToSortType(urlSort) {
 function updateUrlWithSearchState(searchState) {
     if (typeof window === "undefined")
         return;
-    const { sort, filters, customizations, catalogBounds } = searchState;
+    const { sort, filters, customizations, catalogBounds, categorySlug } = searchState;
     // Convert filter IDs back to human-readable names for URL
     const humanReadableOptions = {};
     for (const [optionId, choiceIds] of Object.entries(filters?.productOptions ?? {})) {
@@ -91,10 +92,10 @@ function updateUrlWithSearchState(searchState) {
         "minPrice",
         "maxPrice",
         "inventoryStatus",
-        "category",
         "visible",
         "productType",
         // Product option names will be dynamically added below
+        // Note: category is NOT included here as it's handled in the URL path
     ];
     // Remove existing search parameters first
     searchParams.forEach((param) => params.delete(param));
@@ -124,10 +125,6 @@ function updateUrlWithSearchState(searchState) {
     if (filters.inventoryStatuses && filters.inventoryStatuses.length > 0) {
         params.set("inventoryStatus", filters.inventoryStatuses.join(","));
     }
-    // Add category filter
-    if (filters.category) {
-        params.set("category", filters.category);
-    }
     // Add visibility filter (only if explicitly false, since true is default)
     if (filters.visible === false) {
         params.set("visible", "false");
@@ -142,8 +139,15 @@ function updateUrlWithSearchState(searchState) {
             params.set(optionName, values.join(","));
         }
     }
+    // Handle URL path construction with category
+    let baseUrl = window.location.pathname;
+    // If categorySlug is provided, update the path
+    if (categorySlug) {
+        if (categorySlug) {
+            baseUrl = `/category/${categorySlug}`;
+        }
+    }
     // Build the new URL
-    const baseUrl = window.location.pathname;
     const newUrl = params.toString()
         ? `${baseUrl}?${params.toString()}`
         : baseUrl;
@@ -155,7 +159,7 @@ function updateUrlWithSearchState(searchState) {
 /**
  * Parse URL and build complete search options with all filters, sort, and pagination
  */
-export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
+export async function parseUrlForProductsListSearch(url, categoriesList, defaultSearchOptions) {
     const urlObj = new URL(url);
     const searchParams = urlObj.searchParams;
     // Get customizations for product option parsing
@@ -171,6 +175,21 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
     };
     // Initialize search state for service
     const initialSearchState = {};
+    // Extract category slug from URL path (e.g., /category/category-slug)
+    const pathSegments = urlObj.pathname.split("/");
+    const categoryIndex = pathSegments.findIndex((segment) => segment === "category");
+    let categorySlug = null;
+    let category = undefined;
+    if (categoryIndex !== -1 && categoryIndex + 1 < pathSegments.length) {
+        categorySlug = pathSegments[categoryIndex + 1] || null;
+        // Find the category by slug from the provided categories list
+        if (categorySlug) {
+            category = categoriesList.find((cat) => cat.slug === categorySlug);
+            if (category) {
+                initialSearchState.category = category;
+            }
+        }
+    }
     // Handle text search (q parameter)
     const query = searchParams.get("q");
     if (query) {
@@ -252,12 +271,11 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
         filter["productType"] = productType;
         initialSearchState.productType = productType;
     }
-    const category = searchParams.get("category");
+    // Add category filter if found
     if (category) {
         filter["allCategoriesInfo.categories"] = {
-            $matchItems: [{ _id: { $in: [category] } }],
+            $matchItems: [{ _id: { $in: [category._id] } }],
         };
-        initialSearchState.category = category;
     }
     // Price range filtering
     const minPrice = searchParams.get("minPrice");
@@ -285,7 +303,6 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
         "maxPrice",
         "inventory_status",
         "inventoryStatus",
-        "category",
         "visible",
         "productType",
         "q",
@@ -378,7 +395,9 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
  * Load search service configuration from URL
  */
 export async function loadProductsListSearchServiceConfig(url) {
-    const { initialSearchState } = await parseUrlForProductsListSearch(url);
+    // Load categories using the categories service
+    const categoriesListConfig = await loadCategoriesListServiceConfig();
+    const { initialSearchState } = await parseUrlForProductsListSearch(url, categoriesListConfig.categories);
     const { items: customizations = [] } = await customizationsV3
         .queryCustomizations()
         .find();
@@ -419,7 +438,31 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
     const selectedCategorySignal = signalsService.signal(initialSearchState?.category || null);
     const selectedVisibleSignal = signalsService.signal(initialSearchState?.visible ?? null);
     const selectedProductTypeSignal = signalsService.signal(initialSearchState?.productType || null);
-    const isFilteredSignal = signalsService.signal(false);
+    // Computed signal to check if any filters are applied
+    const isFilteredSignal = signalsService.computed(() => {
+        const catalogPriceRange = getCatalogPriceRange(productsListService.aggregations.get()?.results || []);
+        const minPrice = userFilterMinPriceSignal.get();
+        const maxPrice = userFilterMaxPriceSignal.get();
+        const selectedInventoryStatuses = selectedInventoryStatusesSignal.get();
+        const selectedProductOptions = selectedProductOptionsSignal.get();
+        const selectedCategory = selectedCategorySignal.get();
+        const selectedVisible = selectedVisibleSignal.get();
+        const selectedProductType = selectedProductTypeSignal.get();
+        // Check if any filters are different from default values
+        const hasPriceFilter = minPrice > catalogPriceRange.minPrice ||
+            maxPrice < catalogPriceRange.maxPrice;
+        const hasInventoryFilter = selectedInventoryStatuses.length > 0;
+        const hasProductOptionsFilter = Object.keys(selectedProductOptions).length > 0;
+        const hasCategoryFilter = selectedCategory !== null;
+        const hasVisibilityFilter = selectedVisible !== null;
+        const hasProductTypeFilter = selectedProductType !== null;
+        return (hasPriceFilter ||
+            hasInventoryFilter ||
+            hasProductOptionsFilter ||
+            hasCategoryFilter ||
+            hasVisibilityFilter ||
+            hasProductTypeFilter);
+    });
     // Computed signals for pagination
     const hasNextPageSignal = signalsService.computed(() => {
         const pagingMetadata = productsListService.pagingMetadata.get();
@@ -550,7 +593,7 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
             }
             if (selectedCategory) {
                 newSearchOptions.filter["allCategoriesInfo.categories"] = {
-                    $matchItems: [{ _id: { $in: [selectedCategory] } }],
+                    $matchItems: [{ _id: { $in: [selectedCategory._id] } }],
                 };
             }
             if (selectedVisible !== null) {
@@ -571,7 +614,6 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
                 priceRange: { min: minPrice, max: maxPrice },
                 inventoryStatuses: selectedInventoryStatuses,
                 productOptions: selectedProductOptions,
-                ...(selectedCategory && { category: selectedCategory }),
                 ...(selectedVisible !== null && { visible: selectedVisible }),
                 ...(selectedProductType && { productType: selectedProductType }),
             };
@@ -580,6 +622,7 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
                 filters: currentFilters,
                 customizations,
                 catalogBounds,
+                categorySlug: selectedCategory?.slug || undefined,
             });
         });
     }
@@ -702,7 +745,6 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
             selectedCategorySignal.set(null);
             selectedVisibleSignal.set(null);
             selectedProductTypeSignal.set(null);
-            isFilteredSignal.set(false);
         },
     };
 });

package/dist/react/ProductListFilters.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { type ProductOption, InventoryStatusType } from "../services/products-list-search-service.js";
+import { Category } from "@wix/auto_sdk_categories_categories";
 /**
  * Props for InventoryStatus headless component
  */
@@ -168,6 +169,15 @@ export interface PriceRangeRenderProps {
  * ```
  */
 export declare function PriceRange(props: PriceRangeProps): ReactNode;
+export interface CategoryFilterRenderProps {
+    selectedCategory: Category | null;
+    setSelectedCategory: (category: Category | null) => void;
+}
+export interface CategoryFilterProps {
+    /** Content to display (can be a render function receiving category data or ReactNode) */
+    children: ((props: CategoryFilterRenderProps) => ReactNode) | ReactNode;
+}
+export declare function CategoryFilter(props: CategoryFilterProps): ReactNode;
 /**
  * Props for ProductOptions headless component
  */

package/dist/react/ProductListFilters.js

@@ -148,6 +148,14 @@ export function PriceRange(props) {
         })
         : props.children;
 }
+export function CategoryFilter(props) {
+    const service = useService(ProductsListSearchServiceDefinition);
+    const selectedCategory = service.selectedCategory.get();
+    const setSelectedCategory = service.setSelectedCategory;
+    return typeof props.children === "function"
+        ? props.children({ selectedCategory, setSelectedCategory })
+        : props.children;
+}
 /**
  * Headless component that renders content for each product option in the list.
  * Maps over all available product options and provides each option through a render prop.

package/dist/services/products-list-search-service.d.ts

@@ -1,5 +1,6 @@
 import type { Signal } from "@wix/services-definitions/core-services/signals";
 import { productsV3, customizationsV3 } from "@wix/stores";
+import { type Category } from "./category-service.js";
 import { SortType } from "./../enums/sort-enums.js";
 export { SortType } from "./../enums/sort-enums.js";
 /**
@@ -42,7 +43,7 @@ type InitialSearchState = {
     };
     inventoryStatuses?: InventoryStatusType[];
     productOptions?: Record<string, string[]>;
-    category?: string;
+    category?: Category;
     visible?: boolean;
     productType?: string;
 };
@@ -83,13 +84,15 @@ export declare const ProductsListSearchServiceDefinition: string & {
         selectedInventoryStatuses: Signal<InventoryStatusType[]>;
         availableProductOptions: Signal<ProductOption[]>;
         selectedProductOptions: Signal<Record<string, string[]>>;
-        selectedCategory: Signal<string | null>;
+        selectedCategory: Signal<Category | null>;
         setSelectedMinPrice: (minPrice: number) => void;
         setSelectedMaxPrice: (maxPrice: number) => void;
         toggleInventoryStatus: (status: InventoryStatusType) => void;
         toggleProductOption: (optionId: string, choiceId: string) => void;
-        setSelectedCategory: (category: string | null) => void;
-        isFiltered: Signal<boolean>;
+        setSelectedCategory: (category: Category | null) => void;
+        isFiltered: {
+            get: () => boolean;
+        };
         reset: () => void;
     };
     __config: {};
@@ -119,13 +122,15 @@ export declare const ProductsListSearchServiceDefinition: string & {
     selectedInventoryStatuses: Signal<InventoryStatusType[]>;
     availableProductOptions: Signal<ProductOption[]>;
     selectedProductOptions: Signal<Record<string, string[]>>;
-    selectedCategory: Signal<string | null>;
+    selectedCategory: Signal<Category | null>;
     setSelectedMinPrice: (minPrice: number) => void;
     setSelectedMaxPrice: (maxPrice: number) => void;
     toggleInventoryStatus: (status: InventoryStatusType) => void;
     toggleProductOption: (optionId: string, choiceId: string) => void;
-    setSelectedCategory: (category: string | null) => void;
-    isFiltered: Signal<boolean>;
+    setSelectedCategory: (category: Category | null) => void;
+    isFiltered: {
+        get: () => boolean;
+    };
     reset: () => void;
 };
 /**
@@ -135,7 +140,7 @@ export declare function convertUrlSortToSortType(urlSort: string): SortType | nu
 /**
  * Parse URL and build complete search options with all filters, sort, and pagination
  */
-export declare function parseUrlForProductsListSearch(url: string, defaultSearchOptions?: productsV3.V3ProductSearch): Promise<{
+export declare function parseUrlForProductsListSearch(url: string, categoriesList: Category[], defaultSearchOptions?: productsV3.V3ProductSearch): Promise<{
     searchOptions: productsV3.V3ProductSearch;
     initialSearchState: InitialSearchState;
 }>;
@@ -172,13 +177,15 @@ export declare const ProductsListSearchService: import("@wix/services-definition
         selectedInventoryStatuses: Signal<InventoryStatusType[]>;
         availableProductOptions: Signal<ProductOption[]>;
         selectedProductOptions: Signal<Record<string, string[]>>;
-        selectedCategory: Signal<string | null>;
+        selectedCategory: Signal<Category | null>;
         setSelectedMinPrice: (minPrice: number) => void;
         setSelectedMaxPrice: (maxPrice: number) => void;
         toggleInventoryStatus: (status: InventoryStatusType) => void;
         toggleProductOption: (optionId: string, choiceId: string) => void;
-        setSelectedCategory: (category: string | null) => void;
-        isFiltered: Signal<boolean>;
+        setSelectedCategory: (category: Category | null) => void;
+        isFiltered: {
+            get: () => boolean;
+        };
         reset: () => void;
     };
     __config: {};
@@ -208,12 +215,14 @@ export declare const ProductsListSearchService: import("@wix/services-definition
     selectedInventoryStatuses: Signal<InventoryStatusType[]>;
     availableProductOptions: Signal<ProductOption[]>;
     selectedProductOptions: Signal<Record<string, string[]>>;
-    selectedCategory: Signal<string | null>;
+    selectedCategory: Signal<Category | null>;
     setSelectedMinPrice: (minPrice: number) => void;
     setSelectedMaxPrice: (maxPrice: number) => void;
     toggleInventoryStatus: (status: InventoryStatusType) => void;
     toggleProductOption: (optionId: string, choiceId: string) => void;
-    setSelectedCategory: (category: string | null) => void;
-    isFiltered: Signal<boolean>;
+    setSelectedCategory: (category: Category | null) => void;
+    isFiltered: {
+        get: () => boolean;
+    };
     reset: () => void;
 }, ProductsListSearchServiceConfig>;

package/dist/services/products-list-search-service.js

@@ -2,6 +2,7 @@ import { defineService, implementService } from "@wix/services-definitions";
 import { SignalsServiceDefinition } from "@wix/services-definitions/core-services/signals";
 import { DEFAULT_QUERY_LIMIT, ProductsListServiceDefinition, } from "./products-list-service.js";
 import { productsV3, customizationsV3 } from "@wix/stores";
+import { loadCategoriesListServiceConfig } from "./categories-list-service.js";
 const PRICE_FILTER_DEBOUNCE_TIME = 300;
 import { SortType } from "./../enums/sort-enums.js";
 export { SortType } from "./../enums/sort-enums.js";
@@ -63,7 +64,7 @@ export function convertUrlSortToSortType(urlSort) {
 function updateUrlWithSearchState(searchState) {
     if (typeof window === "undefined")
         return;
-    const { sort, filters, customizations, catalogBounds } = searchState;
+    const { sort, filters, customizations, catalogBounds, categorySlug } = searchState;
     // Convert filter IDs back to human-readable names for URL
     const humanReadableOptions = {};
     for (const [optionId, choiceIds] of Object.entries(filters?.productOptions ?? {})) {
@@ -91,10 +92,10 @@ function updateUrlWithSearchState(searchState) {
         "minPrice",
         "maxPrice",
         "inventoryStatus",
-        "category",
         "visible",
         "productType",
         // Product option names will be dynamically added below
+        // Note: category is NOT included here as it's handled in the URL path
     ];
     // Remove existing search parameters first
     searchParams.forEach((param) => params.delete(param));
@@ -124,10 +125,6 @@ function updateUrlWithSearchState(searchState) {
     if (filters.inventoryStatuses && filters.inventoryStatuses.length > 0) {
         params.set("inventoryStatus", filters.inventoryStatuses.join(","));
     }
-    // Add category filter
-    if (filters.category) {
-        params.set("category", filters.category);
-    }
     // Add visibility filter (only if explicitly false, since true is default)
     if (filters.visible === false) {
         params.set("visible", "false");
@@ -142,8 +139,15 @@ function updateUrlWithSearchState(searchState) {
             params.set(optionName, values.join(","));
         }
     }
+    // Handle URL path construction with category
+    let baseUrl = window.location.pathname;
+    // If categorySlug is provided, update the path
+    if (categorySlug) {
+        if (categorySlug) {
+            baseUrl = `/category/${categorySlug}`;
+        }
+    }
     // Build the new URL
-    const baseUrl = window.location.pathname;
     const newUrl = params.toString()
         ? `${baseUrl}?${params.toString()}`
         : baseUrl;
@@ -155,7 +159,7 @@ function updateUrlWithSearchState(searchState) {
 /**
  * Parse URL and build complete search options with all filters, sort, and pagination
  */
-export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
+export async function parseUrlForProductsListSearch(url, categoriesList, defaultSearchOptions) {
     const urlObj = new URL(url);
     const searchParams = urlObj.searchParams;
     // Get customizations for product option parsing
@@ -171,6 +175,21 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
     };
     // Initialize search state for service
     const initialSearchState = {};
+    // Extract category slug from URL path (e.g., /category/category-slug)
+    const pathSegments = urlObj.pathname.split("/");
+    const categoryIndex = pathSegments.findIndex((segment) => segment === "category");
+    let categorySlug = null;
+    let category = undefined;
+    if (categoryIndex !== -1 && categoryIndex + 1 < pathSegments.length) {
+        categorySlug = pathSegments[categoryIndex + 1] || null;
+        // Find the category by slug from the provided categories list
+        if (categorySlug) {
+            category = categoriesList.find((cat) => cat.slug === categorySlug);
+            if (category) {
+                initialSearchState.category = category;
+            }
+        }
+    }
     // Handle text search (q parameter)
     const query = searchParams.get("q");
     if (query) {
@@ -252,12 +271,11 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
         filter["productType"] = productType;
         initialSearchState.productType = productType;
     }
-    const category = searchParams.get("category");
+    // Add category filter if found
     if (category) {
         filter["allCategoriesInfo.categories"] = {
-            $matchItems: [{ _id: { $in: [category] } }],
+            $matchItems: [{ _id: { $in: [category._id] } }],
         };
-        initialSearchState.category = category;
     }
     // Price range filtering
     const minPrice = searchParams.get("minPrice");
@@ -285,7 +303,6 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
         "maxPrice",
         "inventory_status",
         "inventoryStatus",
-        "category",
         "visible",
         "productType",
         "q",
@@ -378,7 +395,9 @@ export async function parseUrlForProductsListSearch(url, defaultSearchOptions) {
  * Load search service configuration from URL
  */
 export async function loadProductsListSearchServiceConfig(url) {
-    const { initialSearchState } = await parseUrlForProductsListSearch(url);
+    // Load categories using the categories service
+    const categoriesListConfig = await loadCategoriesListServiceConfig();
+    const { initialSearchState } = await parseUrlForProductsListSearch(url, categoriesListConfig.categories);
     const { items: customizations = [] } = await customizationsV3
         .queryCustomizations()
         .find();
@@ -419,7 +438,31 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
     const selectedCategorySignal = signalsService.signal(initialSearchState?.category || null);
     const selectedVisibleSignal = signalsService.signal(initialSearchState?.visible ?? null);
     const selectedProductTypeSignal = signalsService.signal(initialSearchState?.productType || null);
-    const isFilteredSignal = signalsService.signal(false);
+    // Computed signal to check if any filters are applied
+    const isFilteredSignal = signalsService.computed(() => {
+        const catalogPriceRange = getCatalogPriceRange(productsListService.aggregations.get()?.results || []);
+        const minPrice = userFilterMinPriceSignal.get();
+        const maxPrice = userFilterMaxPriceSignal.get();
+        const selectedInventoryStatuses = selectedInventoryStatusesSignal.get();
+        const selectedProductOptions = selectedProductOptionsSignal.get();
+        const selectedCategory = selectedCategorySignal.get();
+        const selectedVisible = selectedVisibleSignal.get();
+        const selectedProductType = selectedProductTypeSignal.get();
+        // Check if any filters are different from default values
+        const hasPriceFilter = minPrice > catalogPriceRange.minPrice ||
+            maxPrice < catalogPriceRange.maxPrice;
+        const hasInventoryFilter = selectedInventoryStatuses.length > 0;
+        const hasProductOptionsFilter = Object.keys(selectedProductOptions).length > 0;
+        const hasCategoryFilter = selectedCategory !== null;
+        const hasVisibilityFilter = selectedVisible !== null;
+        const hasProductTypeFilter = selectedProductType !== null;
+        return (hasPriceFilter ||
+            hasInventoryFilter ||
+            hasProductOptionsFilter ||
+            hasCategoryFilter ||
+            hasVisibilityFilter ||
+            hasProductTypeFilter);
+    });
     // Computed signals for pagination
     const hasNextPageSignal = signalsService.computed(() => {
         const pagingMetadata = productsListService.pagingMetadata.get();
@@ -550,7 +593,7 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
             }
             if (selectedCategory) {
                 newSearchOptions.filter["allCategoriesInfo.categories"] = {
-                    $matchItems: [{ _id: { $in: [selectedCategory] } }],
+                    $matchItems: [{ _id: { $in: [selectedCategory._id] } }],
                 };
             }
             if (selectedVisible !== null) {
@@ -571,7 +614,6 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
                 priceRange: { min: minPrice, max: maxPrice },
                 inventoryStatuses: selectedInventoryStatuses,
                 productOptions: selectedProductOptions,
-                ...(selectedCategory && { category: selectedCategory }),
                 ...(selectedVisible !== null && { visible: selectedVisible }),
                 ...(selectedProductType && { productType: selectedProductType }),
             };
@@ -580,6 +622,7 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
                 filters: currentFilters,
                 customizations,
                 catalogBounds,
+                categorySlug: selectedCategory?.slug || undefined,
             });
         });
     }
@@ -702,7 +745,6 @@ export const ProductsListSearchService = implementService.withConfig()(ProductsL
             selectedCategorySignal.set(null);
             selectedVisibleSignal.set(null);
             selectedProductTypeSignal.set(null);
-            isFilteredSignal.set(false);
         },
     };
 });

package/package.json

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