@scayle/storefront-product-listing 0.5.0 → 0.6.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/runtime/composables/useFiltersForListing.d.ts

@@ -0,0 +1,33 @@
+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'> & {
+    availableFilters: ComputedRef<FilterItemWithValues[]>;
+    filteredProductCount: ComputedRef<number>;
+};
+/**
+ * Composable to manage filters based on current category ID and route query parameters.
+ *
+ * @param {FiltersForListingOptions} options - Configuration options for fetching products.
+ * @param {Partial<FetchFiltersParams>} options.params - Parameters to control product fetch behavior, excluding `category`.
+ * @param {Partial<{ lazy: boolean; immediate: boolean }>} options.fetchingOptions - Options for fetch timing, such as lazy loading or immediate fetching.
+ * @param {string} [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:
+ *   - `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.
+ *   - `filteredProductCount` {ComputedRef<number>}: returns the count of the products which the applied filter returns.
+ */
+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/useProductListingSeoData.d.ts

@@ -1,12 +1,11 @@
-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 {
     title: ComputedRef<string>;
-    activeCategoryName: ComputedRef<string | undefined>;
     robots: ComputedRef<string>;
     canonicalLink: ComputedRef<CanonicalLink[]>;
     categoryBreadcrumbSchema: ComputedRef<WithContext<BreadcrumbList> | []>;
@@ -14,18 +13,16 @@ export interface UseProductListingSeoDataReturn {
 /**
  * Composable for handling product listing SEO data.
  *
- * @param {Ref<Category>} category - Reactive category
- * @param {BreadcrumbItem[]} breadcrumbs - Breadcrumb items.
+ * @param {MaybeRefOrGetter<BreadcrumbItem[]>} breadcrumbs - Breadcrumb items.
  * @param {RouteLocationNormalizedLoadedGeneric} [route] - route object to handle queries.
  * @param {UrlParams} URL params - URL data for constructing the canonical link.
  *
- * @returns {UseProductListingSeoData} An object containing reactive data and computed properties for managing SEO data.
+ * @returns {UseProductListingSeoDataReturn} 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.
  */
-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/{useProductsByCategory.d.ts → useProductsForListing.d.ts}

@@ -1,39 +1,28 @@
-import { type FetchProductsByCategoryParams, type Product, type ProductWith } from '@scayle/storefront-nuxt';
+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';
-import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-export type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'status'> & {
+export type UseProductsForListingReturn = 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<{
+export interface ProductsForListingOptions {
+    params: MaybeRefOrGetter<Omit<FetchProductsByCategoryParams, 'category'>>;
+    fetchingOptions: Partial<{
         lazy: boolean;
         immediate: boolean;
     }>;
-    productsPerPage?: number;
-    fetchProductsCacheTtl?: number;
-    cacheKeyPrefix?: string;
-    fetchingKey?: string;
-    withParams?: ProductWith;
+    fetchingKey: string;
 }
 /**
  * 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 {ProductsForListingOptions} options - Configuration options for fetching products.
+ * @param {Partial<FetchProductsByCategoryParams>} options.params - Parameters to control product fetch behavior, excluding `category`.
  * @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.
@@ -43,4 +32,4 @@ export interface ProductsByCategoryOptions {
  * @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>;
+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

@@ -2,8 +2,6 @@ import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-ro
 import type { ProductSearchQuery } from '@scayle/storefront-api';
 import type { RangeTuple } from '~/src';
 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;
 export declare const createNewAttributeQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, { slug, id }: {
     slug: string;
     id: number;
@@ -13,4 +11,4 @@ export declare const createNewBoolAttributeQuery: (route: RouteLocationNormalize
     slug: string;
     value: boolean;
 }) => LocationQuery;
-export declare const getClearedPriceQuery: (route: RouteLocationNormalizedLoadedGeneric) => LocationQuery | undefined;
+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": "0.6.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -55,9 +55,9 @@
     "@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",
+    "@scayle/storefront-nuxt": "8.1.1",
     "@types/node": "22.10.1",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "12.0.0",

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.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
-    }
-  );
-}