@scayle/storefront-product-listing 0.5.0 → 1.0.0

package/dist/index.d.mts

@@ -1,56 +1,11 @@
-import { CentAmount, BreadcrumbItem } from '@scayle/storefront-nuxt';
+import { BreadcrumbItem } from '@scayle/storefront-nuxt';
 import { Factory } from 'fishery';
+import { FilterItemWithValues } from '@scayle/storefront-api';
 
-interface AttributesFilterValue {
-    name: string;
-    id: number;
-    productCount: number;
-    value: string;
-}
-type BooleanFilterValue = [
-    {
-        name: true | false;
-        productCount: number;
-    },
-    {
-        name: true | false;
-        productCount: number;
-    }
-];
-type RangeFilterValue = [
-    {
-        min: CentAmount;
-        max: CentAmount;
-        productCount: number;
-    }
-];
-type FilterItemWithValues = BooleanFilterItemWithValues | AttributesFilterItemWithValues | RangeFilterItemWithValues;
-interface BooleanFilterItemWithValues {
-    id: null;
-    slug: string;
-    name: string;
-    values: BooleanFilterValue;
-    type: 'boolean';
-}
-interface AttributesFilterItemWithValues {
-    id: number | null;
-    slug: string;
-    name: string;
-    values: AttributesFilterValue[];
-    type: 'attributes';
-    attributeGroupType: string;
-}
-interface RangeFilterItemWithValues {
-    id: null;
-    slug: string;
-    name: string;
-    values: RangeFilterValue;
-    type: 'range';
-}
 type RangeTuple = [start: number, end: number];
 
 declare const breadcrumbsFactory: Factory<BreadcrumbItem[], any, BreadcrumbItem[]>;
 
 declare const filtersFactory: Factory<FilterItemWithValues[], any, FilterItemWithValues[]>;
 
-export { type AttributesFilterItemWithValues, type AttributesFilterValue, type BooleanFilterItemWithValues, type BooleanFilterValue, type FilterItemWithValues, type RangeFilterItemWithValues, type RangeFilterValue, type RangeTuple, breadcrumbsFactory, filtersFactory };
+export { type RangeTuple, breadcrumbsFactory, filtersFactory };

package/dist/index.d.ts

@@ -1,56 +1,11 @@
-import { CentAmount, BreadcrumbItem } from '@scayle/storefront-nuxt';
+import { BreadcrumbItem } from '@scayle/storefront-nuxt';
 import { Factory } from 'fishery';
+import { FilterItemWithValues } from '@scayle/storefront-api';
 
-interface AttributesFilterValue {
-    name: string;
-    id: number;
-    productCount: number;
-    value: string;
-}
-type BooleanFilterValue = [
-    {
-        name: true | false;
-        productCount: number;
-    },
-    {
-        name: true | false;
-        productCount: number;
-    }
-];
-type RangeFilterValue = [
-    {
-        min: CentAmount;
-        max: CentAmount;
-        productCount: number;
-    }
-];
-type FilterItemWithValues = BooleanFilterItemWithValues | AttributesFilterItemWithValues | RangeFilterItemWithValues;
-interface BooleanFilterItemWithValues {
-    id: null;
-    slug: string;
-    name: string;
-    values: BooleanFilterValue;
-    type: 'boolean';
-}
-interface AttributesFilterItemWithValues {
-    id: number | null;
-    slug: string;
-    name: string;
-    values: AttributesFilterValue[];
-    type: 'attributes';
-    attributeGroupType: string;
-}
-interface RangeFilterItemWithValues {
-    id: null;
-    slug: string;
-    name: string;
-    values: RangeFilterValue;
-    type: 'range';
-}
 type RangeTuple = [start: number, end: number];
 
 declare const breadcrumbsFactory: Factory<BreadcrumbItem[], any, BreadcrumbItem[]>;
 
 declare const filtersFactory: Factory<FilterItemWithValues[], any, FilterItemWithValues[]>;
 
-export { type AttributesFilterItemWithValues, type AttributesFilterValue, type BooleanFilterItemWithValues, type BooleanFilterValue, type FilterItemWithValues, type RangeFilterItemWithValues, type RangeFilterValue, type RangeTuple, breadcrumbsFactory, filtersFactory };
+export { type RangeTuple, breadcrumbsFactory, filtersFactory };

package/dist/index.mjs

@@ -1,4 +1,5 @@
 import { Factory } from 'fishery';
+import { FilterTypes } from '@scayle/storefront-api';
 
 const breadcrumbsFactory = Factory.define(() => [
   { to: "/de/c/women/clothing/shirts-2045", value: "shirts" },
@@ -18,7 +19,7 @@ const filtersFactory = Factory.define(
         value: "123"
       }
     ],
-    type: "attributes",
+    type: FilterTypes.ATTRIBUTES,
     attributeGroupType: "group-type"
   }, {
     id: null,
@@ -34,7 +35,7 @@ const filtersFactory = Factory.define(
         productCount: 2
       }
     ],
-    type: "boolean"
+    type: FilterTypes.BOOLEAN
   }, {
     id: null,
     slug: "prices",
@@ -46,7 +47,7 @@ const filtersFactory = Factory.define(
         productCount: 30
       }
     ],
-    type: "range"
+    type: FilterTypes.RANGE
   }]
 );
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-listing",
   "configKey": "product-listing",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"

package/dist/module.mjs

@@ -4,7 +4,7 @@ const module = defineNuxtModule({
   meta: {
     name: "@scayle/storefront-product-listing",
     configKey: "product-listing",
-    version: "0.0.1",
+    version: "1.0.0",
     compatibility: {
       bridge: false,
       nuxt: ">=3.13"

package/dist/runtime/composables/useAppliedFilters.d.ts

@@ -7,34 +7,24 @@ export interface AppliedFiltersOptions {
     filtersPrefix: string;
 }
 export interface UseAppliedFiltersReturn {
+    /** A computed property returning a `ProductSearchQuery` object based on the route's query parameters. */
     appliedFilter: ComputedRef<ProductSearchQuery>;
+    /** A computed property that returns the total count of applied filters. Counts minPrice/maxPrice as one and counts each attribute filter separately. */
     appliedFiltersCount: ComputedRef<number>;
+    /** A computed property that returns a record mapping attribute keys to their boolean values for boolean filters. */
     appliedBooleanValues: ComputedRef<AppliedBooleanValues>;
+    /** A computed property that returns a record mapping attribute keys to arrays of numbers representing selected values for each attribute. */
     appliedAttributeValues: ComputedRef<AppliedAttributeValues>;
+    /** A computed property that returns `true` if any filters are currently applied, otherwise `false`. */
     areFiltersApplied: ComputedRef<boolean>;
 }
 /**
  * Composable to manage applied filters based on route query parameters.
  *
- * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries.
- * @param {AppliedFiltersOptions} options - Configuration options for applied filters.
- * @param {string} options.filtersPrefix - The prefix used to identify filter-related query parameters.
+ * @param route Route object to handle the queries.
+ * @param options Configuration options for applied filters.
+ * @param options.filtersPrefix The prefix used to identify filter-related query parameters.
  *
- * @returns {UseAppliedFiltersReturn} - An object containing reactive data and computed properties for managing applied filters:
- *
- * - `appliedFilter` {ComputedRef<ProductSearchQuery>}: A computed property returning a `ProductSearchQuery` object based on the route's query parameters.
- *   - `attributes`: An array of attribute filters, where each filter has:
- *       - `type`: A string, either 'boolean' or 'attributes'.
- *       - `key`: The name of the attribute.
- *       - `value`: A boolean for boolean filters.
- *       - `values`: An array of numbers for attribute filters.
- *   - `minPrice`: (Optional) The minimum price filter as a number.
- *   - `maxPrice`: (Optional) The maximum price filter as a number.
- *   - `term`: (Optional) A search term filter as a string.
- *
- * - `appliedFiltersCount` {ComputedRef<number>}: A computed property that returns the total count of applied filters. Counts minPrice/maxPrice as one and counts each attribute filter separately.
- * - `appliedAttributeValues` {ComputedRef<AppliedAttributeValues>}: A computed property that returns a record mapping attribute keys to arrays of numbers representing selected values for each attribute.
- * - `appliedBooleanValues` {ComputedRef<appliedBooleanValues>}: A computed property that returns a record mapping attribute keys to their boolean values for boolean filters.
- * - `areFiltersApplied` {ComputedRef<boolean>}: A computed property that returns `true` if any filters are currently applied, otherwise `false`.
+ * @returns An object containing reactive data and computed properties for managing applied filters:
  */
 export declare function useAppliedFilters(route: RouteLocationNormalizedLoadedGeneric, { filtersPrefix }?: AppliedFiltersOptions): UseAppliedFiltersReturn;

package/dist/runtime/composables/useFiltersForListing.d.ts

@@ -0,0 +1,29 @@
+import { type FetchFiltersParams } from '@scayle/storefront-nuxt';
+import { useFilters } from '@scayle/storefront-nuxt/composables';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { FilterItemWithValues } from '@scayle/storefront-api';
+export type FiltersForListingOptions = Partial<{
+    params: MaybeRefOrGetter<Omit<FetchFiltersParams, 'category'>>;
+    fetchingOptions: Partial<{
+        lazy: boolean;
+        immediate: boolean;
+    }>;
+    fetchingKey: string;
+}>;
+export type UseFiltersForListingReturn = Pick<Awaited<ReturnType<typeof useFilters>>, 'error' | 'status' | 'refresh'> & {
+    /** Returns computed available filters. */
+    availableFilters: ComputedRef<FilterItemWithValues[]>;
+    /** Returns the count of the products which the applied filter returns. */
+    filteredProductCount: ComputedRef<number>;
+};
+/**
+ * Composable to manage filters based on current category ID and route query parameters.
+ *
+ * @param options Configuration options for fetching products.
+ * @param options.params Parameters to control product fetch behavior, excluding `category`.
+ * @param options.fetchingOptions Options for fetch timing, such as lazy loading or immediate fetching.
+ * @param options.fetchingKey Optional unique key to control the fetching cache.
+ *
+ * @returns {UseFiltersForListingReturn} - An object containing reactive data, computed properties and async RPC call for managing filters:
+ */
+export declare function useFiltersForListing({ params, fetchingKey, fetchingOptions, }?: FiltersForListingOptions): UseFiltersForListingReturn & Promise<UseFiltersForListingReturn>;

package/dist/runtime/composables/{useProductListFilter.js → useFiltersForListing.js}

@@ -1,23 +1,18 @@
 import { extendPromise } from "@scayle/storefront-nuxt";
 import { useFilters } from "@scayle/storefront-nuxt/composables";
 import { computed, toValue } from "vue";
-import { getClearedPriceQuery } from "../utils/filters.js";
-import { useAppliedFilters } from "./useAppliedFilters.js";
-export function useProductListFilter(route, currentCategoryId, options = {}) {
-  const { immediate = true, keyPrefix = "base" } = options;
-  const { appliedFilter } = useAppliedFilters(route);
+export function useFiltersForListing({
+  params = {
+    includeSellableForFree: false,
+    includeSoldOut: false
+  },
+  fetchingKey,
+  fetchingOptions
+} = {}) {
   const filterData = useFilters({
-    params: computed(() => ({
-      categoryId: toValue(currentCategoryId),
-      where: {
-        ...appliedFilter.value,
-        ...route.query.term && { term: String(route.query.term) }
-      },
-      includeSellableForFree: true,
-      includeSoldOut: false
-    })),
-    options: { immediate }
-  }, `${toValue(currentCategoryId) ?? keyPrefix}-filters`);
+    params,
+    options: fetchingOptions
+  }, fetchingKey ?? `${toValue(params).categoryId}-filters`);
   const {
     data,
     refresh,
@@ -38,18 +33,14 @@ export function useProductListFilter(route, currentCategoryId, options = {}) {
       return trueValue.productCount !== 0;
     });
   });
-  const unfilteredCount = computed(() => {
+  const filteredProductCount = computed(() => {
     return data.value?.unfilteredCount ?? 0;
   });
-  const clearedPriceQuery = computed(() => {
-    return getClearedPriceQuery(route);
-  });
   return extendPromise(filterData.then(() => ({})), {
     refresh,
     status,
     error,
     availableFilters,
-    unfilteredCount,
-    clearedPriceQuery
+    filteredProductCount
   });
 }

package/dist/runtime/composables/useProductListSort.d.ts

@@ -9,8 +9,11 @@ type SortLink = SelectedSort & {
     to: RouteLocationRaw;
 };
 export interface UseProductListSortReturn {
+    /** The currently selected sorting option. */
     selectedSort: ComputedRef<SelectedSort | undefined>;
+    /** Links with updated query parameters for each sorting option. */
     sortLinks: ComputedRef<SortLink[]>;
+    /** Indicating if the default sort is selected. */
     isDefaultSortSelected: ComputedRef<boolean>;
 }
 export interface ProductListSortOptions {
@@ -20,16 +23,12 @@ export interface ProductListSortOptions {
 /**
  * Custom composable to handle product list sorting.
  *
- * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries and path.
- * @param {ProductListSortOptions} [options] - Options for configuring the sorting behavior.
- * @param {SelectedSort[]} [options.sortingOptions] - Array of available sorting options.
- * @param {string} [options.defaultSortingKey] - Default sorting key to be applied if no specific sort is selected.
+ * @param route Route object to handle the queries and path.
+ * @param options Options for configuring the sorting behavior.
+ * @param options.sortingOptions Array of available sorting options.
+ * @param options.defaultSortingKey Default sorting key to be applied if no specific sort is selected.
  *
- * @returns - computed properties and methods related to sorting:
- *
- * - {ComputedRef<SelectedSort | undefined>} selectedSort - The currently selected sorting option.
- * - {ComputedRef<SortLink[]>} sortLinks - Links with updated query parameters for each sorting option.
- * - {ComputedRef<boolean>} isDefaultSortSelected - Boolean indicating if the default sort is selected.
+ * @returns Computed properties and methods related to sorting
  */
 export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey }?: ProductListSortOptions): UseProductListSortReturn;
 export {};

package/dist/runtime/composables/useProductListingSeoData.d.ts

@@ -1,31 +1,29 @@
-import { type ComputedRef, type Ref } from 'vue';
-import type { BreadcrumbItem, Category } from '@scayle/storefront-nuxt';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { BreadcrumbItem } from '@scayle/storefront-nuxt';
 import type { BreadcrumbList, WithContext } from 'schema-dts';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 type CanonicalLink = Record<'rel' | 'key' | 'href', string>;
 type UrlParams = Record<'baseUrl' | 'fullPath', string>;
 export interface UseProductListingSeoDataReturn {
+    /** A computed string that is constructed from breadcrumb values. */
     title: ComputedRef<string>;
-    activeCategoryName: ComputedRef<string | undefined>;
+    /** A computed robots. Value can be `index,follow` or `noindex,follow`. */
     robots: ComputedRef<string>;
+    /** A computed canonical link. */
     canonicalLink: ComputedRef<CanonicalLink[]>;
+    /** A computed breadcrumb schema. */
     categoryBreadcrumbSchema: ComputedRef<WithContext<BreadcrumbList> | []>;
 }
 /**
  * Composable for handling product listing SEO data.
  *
- * @param {Ref<Category>} category - Reactive category
- * @param {BreadcrumbItem[]} breadcrumbs - Breadcrumb items.
- * @param {RouteLocationNormalizedLoadedGeneric} [route] - route object to handle queries.
- * @param {UrlParams} URL params - URL data for constructing the canonical link.
+ * @param breadcrumbs Breadcrumb items.
+ * @param route The route object to handle queries.
+ * @param params - URL data for constructing the canonical link.
+ * @param params.baseUrl The base URL of the application.
+ * @param params.fullPath - The full path of the current route.
  *
- * @returns {UseProductListingSeoData} An object containing reactive data and computed properties for managing SEO data.
- *
- * @property {ComputedRef<string>} title - A computed string that is constructed from breadcrumb values.
- * @property {ComputedRef<string | undefined>} activeCategoryName - A computed active category name.
- * @property {ComputedRef<string>} robots - A computed robots. Value can be "index,follow" or "noindex,follow".
- * @property {ComputedRef<CanonicalLink[]>} canonicalLink - A computed canonical link.
- * @property {ComputedRef<WithContext<BreadcrumbList> | []>} categoryBreadcrumbSchema - A computed breadcrumb schema.
+ * @returns An object containing reactive data and computed properties for managing SEO data.
  */
-export declare function useProductListingSeoData(category: Ref<Category | undefined | null>, breadcrumbs: BreadcrumbItem[], route: RouteLocationNormalizedLoadedGeneric, { baseUrl, fullPath }: UrlParams): UseProductListingSeoDataReturn;
+export declare function useProductListingSeoData(breadcrumbs: MaybeRefOrGetter<BreadcrumbItem[]>, route: RouteLocationNormalizedLoadedGeneric, { baseUrl, fullPath }: UrlParams): UseProductListingSeoDataReturn;
 export {};

package/dist/runtime/composables/useProductListingSeoData.js

@@ -1,11 +1,11 @@
-import { computed } from "vue";
+import { computed, toValue } from "vue";
 import {
   generateCategoryBreadcrumbSchema,
   sanitizeCanonicalURL
 } from "@scayle/storefront-nuxt";
 import { useAppliedFilters } from "./useAppliedFilters.js";
 import { useProductListSort } from "./useProductListSort.js";
-export function useProductListingSeoData(category, breadcrumbs, route, { baseUrl, fullPath }) {
+export function useProductListingSeoData(breadcrumbs, route, { baseUrl, fullPath }) {
   const { areFiltersApplied } = useAppliedFilters(route);
   const { isDefaultSortSelected } = useProductListSort(route);
   const robots = computed(() => {
@@ -18,20 +18,14 @@ export function useProductListingSeoData(category, breadcrumbs, route, { baseUrl
       href: sanitizeCanonicalURL(`${baseUrl}${fullPath}`)
     }]
   );
-  const activeCategoryName = computed(
-    () => category.value?.name?.toLowerCase()
-  );
   const title = computed(() => {
-    return category.value ? breadcrumbs.map(({ value }) => value).join(" - ") : "";
+    return toValue(breadcrumbs).map(({ value }) => value).join(" - ");
   });
   const categoryBreadcrumbSchema = computed(
-    () => {
-      return category.value ? generateCategoryBreadcrumbSchema(breadcrumbs) : [];
-    }
+    () => generateCategoryBreadcrumbSchema(toValue(breadcrumbs))
   );
   return {
     title,
-    activeCategoryName,
     robots,
     canonicalLink,
     categoryBreadcrumbSchema

package/dist/runtime/composables/useProductsForListing.d.ts

@@ -0,0 +1,32 @@
+import { type FetchProductsByCategoryParams, type Product } from '@scayle/storefront-nuxt';
+import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
+import { useProducts } from '@scayle/storefront-nuxt/composables';
+import type { Pagination } from '@scayle/storefront-api';
+export type UseProductsForListingReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'status'> & {
+    /** A computed array of products in the specified category. */
+    products: ComputedRef<Product[]>;
+    /** A computed object containing pagination details for the product list. */
+    pagination: ComputedRef<Pagination | undefined>;
+    /** A computed offset for the current page based on the pagination data. */
+    totalProductsCount: ComputedRef<number>;
+    paginationOffset: ComputedRef<number>;
+};
+export interface ProductsForListingOptions {
+    params: MaybeRefOrGetter<Omit<FetchProductsByCategoryParams, 'category'>>;
+    fetchingOptions: Partial<{
+        lazy: boolean;
+        immediate: boolean;
+    }>;
+    fetchingKey: string;
+}
+/**
+ * Composable to fetch and manage products by category with configurable options.
+ *
+ * @param options Configuration options for fetching products.
+ * @param options.params Parameters to control product fetch behavior, excluding `category`.
+ * @param options.fetchingOptions Options for fetch timing, such as lazy loading or immediate fetching.
+ * @param options.fetchingKey Optional unique key to control the fetching cache.
+ *
+ * @returns An object containing reactive data and computed properties for managing products by category.
+ */
+export declare function useProductsForListing({ params, fetchingKey, fetchingOptions, }?: Partial<ProductsForListingOptions>): UseProductsForListingReturn & Promise<UseProductsForListingReturn>;

package/dist/runtime/composables/useProductsForListing.js

@@ -0,0 +1,52 @@
+import {
+  extendPromise
+} from "@scayle/storefront-nuxt";
+import { computed, toValue } from "vue";
+import { useProducts } from "@scayle/storefront-nuxt/composables";
+export function useProductsForListing({
+  params = {
+    includeSoldOut: false,
+    includeSellableForFree: false,
+    pricePromotionKey: "",
+    sort: {}
+  },
+  fetchingKey,
+  fetchingOptions
+} = {}) {
+  const productsData = useProducts({
+    params: () => ({
+      // NOTE: We don't want to include trackSearchAnalyticsEvent parameter when paginating,
+      // as this logs the search term on every page request.
+      // Instead, we log the term only once, when the search is first performed.
+      // See: https://scayle.dev/en/developer-guide/products/search#scayle-search-analytics
+      trackSearchAnalyticsEvent: !!(toValue(params).page === 1 && toValue(params)?.where?.term),
+      ...toValue(params)
+    }),
+    options: fetchingOptions
+  }, fetchingKey || `${toValue(params).categoryId ?? 0}-products`);
+  const products = computed(() => {
+    return productsData.data.value?.products ?? [];
+  });
+  const pagination = computed(() => {
+    return productsData.data.value?.pagination;
+  });
+  const totalProductsCount = computed(() => {
+    return productsData.data.value?.pagination?.total ?? 0;
+  });
+  const paginationOffset = computed(() => {
+    const page = pagination.value?.page ?? 1;
+    const perPage = pagination.value?.perPage ?? toValue(params).perPage ?? 0;
+    return (page - 1) * perPage;
+  });
+  return extendPromise(
+    productsData.then(() => ({})),
+    {
+      error: productsData.error,
+      status: productsData.status,
+      products,
+      pagination,
+      totalProductsCount,
+      paginationOffset
+    }
+  );
+}

package/dist/runtime/index.d.ts

@@ -1,6 +1,6 @@
 export * from './composables/useProductListSort.js';
 export * from './composables/useAppliedFilters.js';
-export * from './composables/useProductListFilter.js';
+export * from './composables/useFiltersForListing.js';
 export * from './composables/useProductListingSeoData.js';
-export * from './composables/useProductsByCategory.js';
+export * from './composables/useProductsForListing.js';
 export * from './utils/filters.js';

package/dist/runtime/index.js

@@ -1,6 +1,6 @@
 export * from "./composables/useProductListSort.js";
 export * from "./composables/useAppliedFilters.js";
-export * from "./composables/useProductListFilter.js";
+export * from "./composables/useFiltersForListing.js";
 export * from "./composables/useProductListingSeoData.js";
-export * from "./composables/useProductsByCategory.js";
+export * from "./composables/useProductsForListing.js";
 export * from "./utils/filters.js";

package/dist/runtime/utils/filters.d.ts

@@ -1,16 +1,61 @@
 import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 import type { ProductSearchQuery } from '@scayle/storefront-api';
 import type { RangeTuple } from '~/src';
+/**
+ * Parses filter data from a Vue Router route object.
+ *
+ * @param route The Vue Router route object.
+ * @param filtersPrefix The prefix used for filter query parameters.
+ *
+ * @returns An object representing the parsed product search query.
+ */
 export declare const parseFilterDataFromRoute: (route: RouteLocationNormalizedLoadedGeneric, filtersPrefix: string) => ProductSearchQuery;
-export declare const getClearedFilterQueryByKey: (route: RouteLocationNormalizedLoadedGeneric, key: string) => LocationQuery | undefined;
-export declare const getNewQueryFilters: (route: RouteLocationNormalizedLoadedGeneric, filter: LocationQuery) => LocationQuery;
+/**
+ * Creates a new attribute filter query object.
+ *
+ * @param route The Vue Router route object.
+ * @param appliedFilter The currently applied filter.
+ * @param param An object containing the slug and ID of the attribute.
+ * @param param.slug The slug of the attribute.
+ * @param param.id The ID of the attribute.
+ *
+ * @returns A new query object with the updated attribute filter.
+ */
 export declare const createNewAttributeQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, { slug, id }: {
     slug: string;
     id: number;
 }) => LocationQuery;
+/**
+ * Creates a new price filter query object.
+ *
+ * @param {RouteLocationNormalizedLoadedGeneric} route - The Vue Router route object.
+ * @param {ProductSearchQuery} appliedFilter - The currently applied filter.
+ * @param {RangeTuple} prices - The new price range.
+ *
+ * @returns {LocationQuery} A new query object with the updated price filter.
+ */
 export declare const createNewPriceQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, prices: RangeTuple) => LocationQuery;
+/**
+ * Creates a new boolean attribute filter query object.
+ *
+ * @param route - The Vue Router route object.
+ * @param appliedFilter - The currently applied filter.
+ * @param param - An object containing the slug and value of the boolean attribute.
+ * @param param.slug - The slug of the attribute.
+ * @param param.value - The value of the attribute.
+ *
+ * @returns A new query object with the updated boolean attribute filter.
+ */
 export declare const createNewBoolAttributeQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, { slug, value }: {
     slug: string;
     value: boolean;
 }) => LocationQuery;
-export declare const getClearedPriceQuery: (route: RouteLocationNormalizedLoadedGeneric) => LocationQuery | undefined;
+/**
+ * Returns a new query object with the filter for the specified key cleared.
+ *
+ * @param route - The Vue Router route object.
+ * @param key - The key of the filter to clear.
+ *
+ * @returns A new query object with the filter cleared.
+ */
+export declare const getClearedFilterQueryByKey: (route: RouteLocationNormalizedLoadedGeneric, key: string) => LocationQuery;

package/dist/runtime/utils/filters.js

@@ -45,22 +45,6 @@ export const parseFilterDataFromRoute = (route, filtersPrefix) => {
   });
   return productSearchQuery;
 };
-export const getClearedFilterQueryByKey = (route, key) => {
-  const query = { ...route.query };
-  const filterKey = `filters[${key}]`;
-  if (!query[filterKey]) {
-    return query;
-  }
-  delete query[filterKey];
-  return query;
-};
-export const getNewQueryFilters = (route, filter) => {
-  return {
-    sort: route.query.sort,
-    term: route.query.term,
-    ...filter
-  };
-};
 export const createNewAttributeQuery = (route, appliedFilter, { slug, id }) => {
   const attributeFilterQuery = {};
   const query = { ...route.query };
@@ -117,12 +101,24 @@ export const createNewBoolAttributeQuery = (route, appliedFilter, { slug, value
   booleanFilterQuery[key] = String(value);
   return { ...query, ...booleanFilterQuery };
 };
-export const getClearedPriceQuery = (route) => {
+const getClearedPriceQuery = (route) => {
   const query = { ...route.query };
-  if (!query["filters[minPrice]"] && !query["filters[maxPrice]"]) {
-    return;
+  if (query["filters[maxPrice]"]) {
+    delete query["filters[maxPrice]"];
+  }
+  if (query["filters[minPrice]"]) {
+    delete query["filters[minPrice]"];
+  }
+  return query;
+};
+export const getClearedFilterQueryByKey = (route, key) => {
+  if (key === "prices") {
+    return getClearedPriceQuery(route);
+  }
+  const query = { ...route.query };
+  const filterKey = `filters[${key}]`;
+  if (query[filterKey]) {
+    delete query[filterKey];
   }
-  delete query["filters[minPrice]"];
-  delete query["filters[maxPrice]"];
   return query;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -45,7 +45,7 @@
   },
   "peerDependencies": {
     "@nuxt/kit": "^3.13.0",
-    "@scayle/storefront-nuxt": "^7.93.0 || ^8.0.0",
+    "@scayle/storefront-nuxt": "^8.0.0",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "12.0.0",
     "fishery": "2.2.2",
@@ -55,10 +55,10 @@
     "@nuxt/kit": "3.13.2",
     "@nuxt/module-builder": "0.8.4",
     "@nuxt/schema": "3.13.2",
-    "@nuxt/test-utils": "3.14.4",
+    "@nuxt/test-utils": "3.15.1",
     "@scayle/eslint-config-storefront": "4.3.2",
-    "@scayle/storefront-nuxt": "8.0.0",
-    "@types/node": "22.10.1",
+    "@scayle/storefront-nuxt": "8.1.3",
+    "@types/node": "22.10.2",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "12.0.0",
     "dprint": "0.47.6",

package/dist/runtime/composables/useProductListFilter.d.ts

@@ -1,32 +0,0 @@
-import { useFilters } from '@scayle/storefront-nuxt/composables';
-import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
-import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-import type { FilterItemWithValues } from '../../types/filter.js';
-export type ProductListFilterOptions = Partial<{
-    immediate: boolean;
-    keyPrefix: string;
-}>;
-export type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, 'error' | 'status' | 'refresh'> & {
-    availableFilters: ComputedRef<FilterItemWithValues[]>;
-    clearedPriceQuery: ComputedRef<LocationQuery | undefined>;
-    unfilteredCount: ComputedRef<number>;
-};
-/**
- * Composable to manage filters based on current category ID and route query parameters.
- *
- * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries.
- * @param {number} [currentCategoryId] - current/active category ID
- * @param {ProductListFilterOptions} options - Configuration options for filters.
- * @param {string} options.immediate - Will enable "immediate" flag via "useFilters" composable in it.
- * @param {string} options.keyPrefix - The prefix used to construct "key" via "useFilters" payload. Default is "base".
- *
- * @returns {UseProductListFilterReturn} - An object containing reactive data, computed properties and async RPC call for managing filters:
- *   - `fetch`: call for fetching the filters.
- *   - `error`: returns "useFilters" error.
- *   - `status`: returns "useFilters" status.
- *   - `fetching`: returns "useFilters" fetching flag.
- *   - `availableFilters` {ComputedRef<FilterItemWithValues[]>}: returns computed available filters.
- *   - `unfilteredCount` {ComputedRef<number>}: returns unfiltered filters count.
- *   - `clearedPriceQuery` {ComputedRef<LocationQuery | undefined>}: constructs an empty query object.
- */
-export declare function useProductListFilter(route: RouteLocationNormalizedLoadedGeneric, currentCategoryId?: MaybeRefOrGetter<number | undefined>, options?: ProductListFilterOptions): UseProductListFilterReturn & Promise<UseProductListFilterReturn>;

package/dist/runtime/composables/useProductsByCategory.d.ts

@@ -1,46 +0,0 @@
-import { type FetchProductsByCategoryParams, type Product, type ProductWith } from '@scayle/storefront-nuxt';
-import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
-import { useProducts } from '@scayle/storefront-nuxt/composables';
-import type { Pagination } from '@scayle/storefront-api';
-import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-export type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'status'> & {
-    products: ComputedRef<Product[]>;
-    pagination: ComputedRef<Pagination | undefined>;
-    totalProductsCount: ComputedRef<number>;
-    paginationOffset: ComputedRef<number>;
-};
-export interface ProductsByCategoryOptions {
-    params?: Omit<Partial<FetchProductsByCategoryParams>, 'category' | 'categoryId'>;
-    fetchingOptions?: Partial<{
-        lazy: boolean;
-        immediate: boolean;
-    }>;
-    productsPerPage?: number;
-    fetchProductsCacheTtl?: number;
-    cacheKeyPrefix?: string;
-    fetchingKey?: string;
-    withParams?: ProductWith;
-}
-/**
- * Composable to fetch and manage products by category with configurable options.
- *
- * @param {MaybeRefOrGetter<number>} categoryId - The ID of the category to fetch products for. Accepts a ref, computed, or static number.
- * @param {RouteLocationNormalizedLoadedGeneric} [route] - Route object to handle the queries.
- * @param {ProductsByCategoryOptions} options - Configuration options for fetching products.
- * @param {Partial<FetchProductsByCategoryParams>} options.params - Parameters to control product fetch behavior, excluding `category` and `categoryId`.
- * @param {Partial<{ lazy: boolean; immediate: boolean }>} options.fetchingOptions - Options for fetch timing, such as lazy loading or immediate fetching.
- * @param {number} options.productsPerPage - Number of products to fetch per page.
- * @param {number} options.fetchProductsCacheTtl - Cache time-to-live for product data in milliseconds.
- * @param {string} options.cacheKeyPrefix - Prefix for cache keys to uniquely identify cached data for this fetch.
- * @param {string} [options.fetchingKey] - Optional unique key to control the fetching cache.
- * @param {ProductWith} [options.withParams] - Additional fields to include with each product.
- *
- * @returns {UseProductsByCategoryReturn} - An object containing reactive data and computed properties for managing products by category.
- * @property {ComputedRef<Product[]>} products - A computed array of products in the specified category.
- * @property {ComputedRef<Pagination>} pagination - A computed object containing pagination details for the product list.
- * @property {ComputedRef<number>} totalProductsCount - A computed total count of products in the category.
- * @property {ComputedRef<number>} paginationOffset - A computed offset for the current page based on the pagination data.
- * @property {Ref<boolean>} fetching - A reactive boolean indicating if products are currently being fetched.
- * @property {Ref<Error | null>} error - A reactive error object, null if no error occurred.
- */
-export declare function useProductsByCategory(categoryId: MaybeRefOrGetter<number>, route: RouteLocationNormalizedLoadedGeneric, { params, withParams, cacheKeyPrefix, fetchingKey, fetchingOptions, fetchProductsCacheTtl, productsPerPage, }?: Partial<ProductsByCategoryOptions>): UseProductsByCategoryReturn & Promise<UseProductsByCategoryReturn>;

package/dist/runtime/composables/useProductsByCategory.js

@@ -1,76 +0,0 @@
-import {
-  extendPromise
-} from "@scayle/storefront-nuxt";
-import { computed, toValue } from "vue";
-import { useProducts } from "@scayle/storefront-nuxt/composables";
-import { useProductListSort } from "./useProductListSort.js";
-import { useAppliedFilters } from "./useAppliedFilters.js";
-const PRODUCTS_PER_PAGE = 24;
-const DEFAULT_CACHE_TTL = 1e3;
-const DEFAULT_CACHE_KEY_PREFIX = "PLP";
-export function useProductsByCategory(categoryId, route, {
-  params = {
-    includeSoldOut: false,
-    includeSellableForFree: false,
-    pricePromotionKey: ""
-  },
-  withParams,
-  cacheKeyPrefix = DEFAULT_CACHE_KEY_PREFIX,
-  fetchingKey,
-  fetchingOptions = {},
-  fetchProductsCacheTtl = DEFAULT_CACHE_TTL,
-  productsPerPage = PRODUCTS_PER_PAGE
-} = {}) {
-  const { selectedSort } = useProductListSort(route);
-  const { appliedFilter } = useAppliedFilters(route);
-  const productsData = useProducts({
-    params: () => ({
-      ...route?.query.page && { page: +route?.query.page },
-      sort: selectedSort.value,
-      perPage: route?.query.products_per_page ? parseInt(route?.query.products_per_page, 10) : productsPerPage,
-      with: withParams,
-      categoryId: toValue(categoryId),
-      includeSoldOut: params?.includeSoldOut,
-      includeSellableForFree: params?.includeSellableForFree,
-      pricePromotionKey: params?.pricePromotionKey,
-      orFiltersOperator: params?.orFiltersOperator,
-      cache: {
-        ttl: fetchProductsCacheTtl,
-        cacheKeyPrefix: cacheKeyPrefix || `PLP:${toValue(categoryId)}`
-      },
-      where: appliedFilter.value,
-      // NOTE: We don't want to include trackSearchAnalyticsEvent parameter when paginating,
-      // as this logs the search term on every page request.
-      // Instead, we log the term only once, when the search is first performed.
-      // See: https://scayle.dev/en/developer-guide/products/search#scayle-search-analytics
-      trackSearchAnalyticsEvent: !!(params?.page === 1 && appliedFilter.value.term),
-      ...params
-    }),
-    options: fetchingOptions
-  }, fetchingKey || `${toValue(categoryId)}-products`);
-  const products = computed(() => {
-    return productsData.data.value?.products ?? [];
-  });
-  const pagination = computed(() => {
-    return productsData.data.value?.pagination;
-  });
-  const totalProductsCount = computed(() => {
-    return productsData.data.value?.pagination?.total ?? 0;
-  });
-  const paginationOffset = computed(() => {
-    const page = pagination.value?.page ?? 1;
-    const perPage = pagination.value?.perPage ?? productsPerPage ?? PRODUCTS_PER_PAGE;
-    return (page - 1) * perPage;
-  });
-  return extendPromise(
-    productsData.then(() => ({})),
-    {
-      error: productsData.error,
-      status: productsData.status,
-      products,
-      pagination,
-      totalProductsCount,
-      paginationOffset
-    }
-  );
-}