@scayle/storefront-product-listing 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,56 @@
+import { CentAmount, BreadcrumbItem } from '@scayle/storefront-nuxt';
+import { Factory } from 'fishery';
+
+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 };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import { CentAmount, BreadcrumbItem } from '@scayle/storefront-nuxt';
+import { Factory } from 'fishery';
+
+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 };

package/dist/index.mjs

@@ -0,0 +1,53 @@
+import { Factory } from 'fishery';
+
+const breadcrumbsFactory = Factory.define(() => [
+  { to: "/de/c/women/clothing/shirts-2045", value: "shirts" },
+  { to: "/de/c/women/clothing-2048", value: "clothing" }
+]);
+
+const filtersFactory = Factory.define(
+  () => [{
+    id: 1,
+    slug: "brand",
+    name: "Brand",
+    values: [
+      {
+        name: "value",
+        id: 2,
+        productCount: 10,
+        value: "123"
+      }
+    ],
+    type: "attributes",
+    attributeGroupType: "group-type"
+  }, {
+    id: null,
+    slug: "sale",
+    name: "Sale",
+    values: [
+      {
+        name: true,
+        productCount: 12
+      },
+      {
+        name: false,
+        productCount: 2
+      }
+    ],
+    type: "boolean"
+  }, {
+    id: null,
+    slug: "prices",
+    name: "Prices",
+    values: [
+      {
+        min: 10,
+        max: 300,
+        productCount: 30
+      }
+    ],
+    type: "range"
+  }]
+);
+
+export { breadcrumbsFactory, filtersFactory };

package/dist/module.mjs

@@ -13,14 +13,11 @@ const module = defineNuxtModule({
   defaults: {},
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.alias["#storefront-product-listing/composables"] = resolve(
-      "./runtime/composables"
-    );
-    nuxt.options.build.transpile.push(
-      "#storefront-product-listing/composables"
-    );
+    nuxt.options.alias["#storefront-product-listing"] = resolve("./runtime");
+    nuxt.options.build.transpile.push("#storefront-product-listing/runtime");
     if (options.autoImports) {
       addImportsDir(resolve("./runtime/composables"));
+      addImportsDir(resolve("./runtime/utils"));
     }
   }
 });

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

@@ -0,0 +1,37 @@
+import type { ProductSearchQuery } from '@scayle/storefront-nuxt';
+export interface AppliedFiltersOptions {
+    filtersPrefix: string;
+}
+/**
+ * Composable to manage applied filters based on route query parameters.
+ *
+ * @param {object} options - Configuration options for applied filters.
+ * @param {string} options.filtersPrefix - The prefix used to identify filter-related query parameters.
+ *
+ * @returns {object} - An object containing the following properties:
+ *
+ * - `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<Record<string, Array<number>>>}: A computed property that returns a record mapping attribute keys to arrays of numbers representing selected values for each attribute.
+ *
+ * - `appliedBooleanValues` {ComputedRef<Record<string, boolean>>}: 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`.
+ */
+export declare function useAppliedFilters({ filtersPrefix }?: AppliedFiltersOptions): {
+    appliedFilter: import("vue").ComputedRef<ProductSearchQuery>;
+    appliedFiltersCount: import("vue").ComputedRef<number>;
+    appliedAttributeValues: import("vue").ComputedRef<Record<string, (string | number)[]>>;
+    appliedBooleanValues: import("vue").ComputedRef<Record<string, boolean>>;
+    areFiltersApplied: import("vue").ComputedRef<boolean>;
+};

package/dist/runtime/composables/useAppliedFilters.js

@@ -0,0 +1,46 @@
+import { computed } from "vue";
+import { useRoute } from "#app/composables/router";
+import { parseFilterDataFromRoute } from "../utils/filters.js";
+export function useAppliedFilters({ filtersPrefix } = { filtersPrefix: "filters" }) {
+  const route = useRoute();
+  const appliedFilter = computed(() => {
+    return parseFilterDataFromRoute(route, filtersPrefix);
+  });
+  const appliedFiltersCount = computed(() => {
+    let count = 0;
+    count += appliedFilter.value.attributes?.length ?? 0;
+    if (appliedFilter.value.minPrice !== void 0 || appliedFilter.value.maxPrice !== void 0) {
+      count += 1;
+    }
+    return count;
+  });
+  const appliedAttributeValues = computed(() => {
+    const values = {};
+    appliedFilter.value?.attributes?.forEach((attribute) => {
+      if (attribute.type !== "attributes" || !attribute.key) {
+        return;
+      }
+      values[attribute.key] = attribute.values;
+    });
+    return values;
+  });
+  const appliedBooleanValues = computed(() => {
+    const values = {};
+    appliedFilter.value?.attributes?.forEach((attribute) => {
+      if (attribute.type === "boolean") {
+        values[attribute.key] = attribute.value;
+      }
+    });
+    return values;
+  });
+  const areFiltersApplied = computed(() => {
+    return appliedFiltersCount.value > 0;
+  });
+  return {
+    appliedFilter,
+    appliedFiltersCount,
+    appliedAttributeValues,
+    appliedBooleanValues,
+    areFiltersApplied
+  };
+}

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

@@ -0,0 +1,32 @@
+import { useFilters } from '@scayle/storefront-nuxt/composables';
+import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { LocationQuery } from 'vue-router';
+import type { FilterItemWithValues } from '../../types/filter.js';
+export type ProductListFilterOptions = Partial<{
+    immediate: boolean;
+    keyPrefix: string;
+}>;
+type UseProductListFilterReturn = Pick<Awaited<ReturnType<typeof useFilters>>, 'error' | 'status' | 'fetch' | 'fetching'> & {
+    availableFilters: ComputedRef<FilterItemWithValues[]>;
+    clearedPriceQuery: ComputedRef<LocationQuery | undefined>;
+    unfilteredCount: ComputedRef<number>;
+};
+/**
+ * Composable to manage filters based on current category ID and route query parameters.
+ *
+ * @param {number} [currentCategoryId] - current/active category ID
+ * @param {ProductListingFilterOptions} 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 the following properties:
+ *   - `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(currentCategoryId?: MaybeRefOrGetter<number | undefined>, options?: ProductListFilterOptions): UseProductListFilterReturn & Promise<UseProductListFilterReturn>;
+export {};

package/dist/runtime/composables/useProductListFilter.js

@@ -0,0 +1,60 @@
+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 { useRoute } from "#app/composables/router";
+import { useAppliedFilters } from "./useAppliedFilters.js";
+export function useProductListFilter(currentCategoryId, options = {}) {
+  const route = useRoute();
+  const { immediate = true, keyPrefix = "base" } = options;
+  const { appliedFilter } = useAppliedFilters();
+  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 },
+    key: `${toValue(currentCategoryId) ?? keyPrefix}-filters`
+  });
+  const {
+    data,
+    fetch,
+    fetching,
+    status,
+    error
+  } = filterData;
+  const availableFilters = computed(() => {
+    return data.value?.filters.filter((filter) => {
+      if (filter.type !== "boolean") {
+        return true;
+      }
+      const trueValue = filter.values.find(
+        (value) => "name" in value && typeof value.name === "boolean" && value.name
+      );
+      if (!trueValue) {
+        return false;
+      }
+      return trueValue.productCount !== 0;
+    });
+  });
+  const unfilteredCount = computed(() => {
+    return data.value?.unfilteredCount ?? 0;
+  });
+  const clearedPriceQuery = computed(() => {
+    return getClearedPriceQuery(route);
+  });
+  return extendPromise(filterData.then(() => ({})), {
+    fetch,
+    status,
+    fetching,
+    error,
+    availableFilters,
+    unfilteredCount,
+    clearedPriceQuery
+  });
+}

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

@@ -0,0 +1,39 @@
+import { APISortOption, APISortOrder, type ProductSortConfig } from '@scayle/storefront-nuxt';
+type SelectedSort = ProductSortConfig & {
+    key: string;
+    label: string;
+};
+export interface ProductListSortOptions {
+    sortingOptions?: SelectedSort[];
+    defaultSortingKey?: string;
+}
+/**
+ * Custom composable to handle product list sorting.
+ *
+ * @param {ProductListOptions} [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.
+ * @returns - computed properties and methods related to sorting:
+ * - {ComputedRef<SelectedSort | undefined>} selectedSort - The currently selected sorting option.
+ * - {ComputedRef<SelectedSort[]>} sortLinks - Links with updated query parameters for each sorting option.
+ * - {ComputedRef<boolean>} isDefaultSortSelected - Boolean indicating if the default sort is selected.
+ */
+export declare function useProductListSort({ sortingOptions, defaultSortingKey }?: ProductListSortOptions): {
+    selectedSort: import("vue").ComputedRef<SelectedSort | undefined>;
+    sortLinks: import("vue").ComputedRef<{
+        to: {
+            query: {
+                sort: string;
+            };
+        };
+        by?: APISortOption;
+        direction?: APISortOrder;
+        score?: "category_scores" | "brand_scores";
+        channel?: string;
+        sortingKey?: string | string[];
+        key: string;
+        label: string;
+    }[]>;
+    isDefaultSortSelected: import("vue").ComputedRef<boolean>;
+};
+export {};

package/dist/runtime/composables/useProductListSort.js

@@ -0,0 +1,67 @@
+import {
+  APISortOption,
+  APISortOrder
+} from "@scayle/storefront-nuxt";
+import { computed } from "vue";
+import { useRoute } from "#app/composables/router";
+export function useProductListSort({ sortingOptions, defaultSortingKey } = {
+  sortingOptions: [
+    {
+      key: "top_seller",
+      sortingKey: "scayle:v1:recommended",
+      direction: APISortOrder.Descending,
+      label: "sorting_select.top_seller"
+    },
+    {
+      key: "date_newest",
+      by: APISortOption.DateAdded,
+      direction: APISortOrder.Descending,
+      label: "sorting_select.date_newest"
+    },
+    {
+      key: "price_desc",
+      by: APISortOption.Price,
+      direction: APISortOrder.Descending,
+      label: "sorting_select.price_desc"
+    },
+    {
+      key: "price_asc",
+      by: APISortOption.Price,
+      direction: APISortOrder.Ascending,
+      label: "sorting_select.price_asc"
+    },
+    {
+      key: "reduction_desc",
+      by: APISortOption.Reduction,
+      direction: APISortOrder.Descending,
+      label: "sorting_select.reduction_desc"
+    }
+  ],
+  defaultSortingKey: "top_seller"
+}) {
+  const route = useRoute();
+  const selectedSort = computed(() => {
+    const sort = route.query.sort && sortingOptions?.find((option) => option.key === route.query.sort);
+    if (!sort) {
+      return sortingOptions?.find((option) => option.key === defaultSortingKey);
+    }
+    return sort;
+  });
+  const sortLinks = computed(() => {
+    const { page, ...query } = route.query;
+    return sortingOptions?.map((option) => ({
+      ...option,
+      to: {
+        query: { ...query, sort: option.key }
+      }
+    })) || [];
+  });
+  const isDefaultSortSelected = computed(() => {
+    return selectedSort.value?.key === defaultSortingKey;
+  });
+  return {
+    selectedSort,
+    sortLinks,
+    isDefaultSortSelected
+  };
+}

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

@@ -0,0 +1,29 @@
+import { type ComputedRef, type Ref } from 'vue';
+import type { BreadcrumbItem, Category } from '@scayle/storefront-nuxt';
+import type { BreadcrumbList, WithContext } from 'schema-dts';
+type CanonicalLink = Record<'rel' | 'key' | 'href', string>;
+type UrlParams = Record<'baseUrl' | 'fullPath', string>;
+interface UseProductListingSeoData {
+    title: ComputedRef<string>;
+    activeCategoryName: ComputedRef<string | undefined>;
+    robots: ComputedRef<string>;
+    canonicalLink: ComputedRef<CanonicalLink[]>;
+    categoryBreadcrumbSchema: ComputedRef<WithContext<BreadcrumbList> | []>;
+}
+/**
+ * Composable for handling product listing SEO data.
+ *
+ * @param {Ref<Category>} category - Reactive category
+ * @param {BreadcrumbItem[]} breadcrumbs - Breadcrumb items.
+ * @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.
+ *
+ * @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[], { baseUrl, fullPath }: UrlParams): UseProductListingSeoData;
+export {};

package/dist/runtime/composables/useProductListingSeoData.js

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import {
+  generateCategoryBreadcrumbSchema,
+  sanitizeCanonicalURL
+} from "@scayle/storefront-nuxt";
+import { useAppliedFilters } from "./useAppliedFilters.js";
+import { useProductListSort } from "./useProductListSort.js";
+export function useProductListingSeoData(category, breadcrumbs, { baseUrl, fullPath }) {
+  const { areFiltersApplied } = useAppliedFilters();
+  const { isDefaultSortSelected } = useProductListSort();
+  const robots = computed(() => {
+    return !areFiltersApplied.value && isDefaultSortSelected.value ? "index,follow" : "noindex,follow";
+  });
+  const canonicalLink = computed(
+    () => robots.value.includes("noindex") ? [] : [{
+      rel: "canonical",
+      key: "canonical",
+      href: sanitizeCanonicalURL(`${baseUrl}${fullPath}`)
+    }]
+  );
+  const activeCategoryName = computed(
+    () => category.value?.name?.toLowerCase()
+  );
+  const title = computed(() => {
+    return category.value ? breadcrumbs.map(({ value }) => value).join(" - ") : "";
+  });
+  const categoryBreadcrumbSchema = computed(
+    () => {
+      return category.value ? generateCategoryBreadcrumbSchema(breadcrumbs) : [];
+    }
+  );
+  return {
+    title,
+    activeCategoryName,
+    robots,
+    canonicalLink,
+    categoryBreadcrumbSchema
+  };
+}

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

@@ -0,0 +1,47 @@
+import { type FetchProductsByCategoryParams, type Product, type ProductWith } from '@scayle/storefront-nuxt';
+import type { LocationQuery } from 'vue-router';
+import { type MaybeRefOrGetter, type ComputedRef } from 'vue';
+import { useProducts } from '@scayle/storefront-nuxt/composables';
+import type { Pagination } from '@scayle/storefront-api';
+type UseProductsByCategoryReturn = Pick<Awaited<ReturnType<typeof useProducts>>, 'error' | 'fetching'> & {
+    products: ComputedRef<Product[]>;
+    pagination: ComputedRef<Pagination | undefined>;
+    totalProductsCount: ComputedRef<number>;
+    paginationOffset: ComputedRef<number>;
+};
+/**
+ * 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 {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 interface ProductsByCategoryOptions {
+    params: Omit<Partial<FetchProductsByCategoryParams>, 'category' | 'categoryId'>;
+    fetchingOptions: Partial<{
+        lazy: boolean;
+        immediate: boolean;
+    }>;
+    productsPerPage: number;
+    fetchProductsCacheTtl: number;
+    cacheKeyPrefix: string;
+    fetchingKey?: string;
+    withParams?: ProductWith;
+    query: LocationQuery;
+}
+export declare function useProductsByCategory(categoryId: MaybeRefOrGetter<number>, { params, withParams, cacheKeyPrefix, fetchingKey, fetchingOptions, fetchProductsCacheTtl, productsPerPage, query, }?: Partial<ProductsByCategoryOptions>): UseProductsByCategoryReturn & Promise<UseProductsByCategoryReturn>;
+export {};

package/dist/runtime/composables/useProductsByCategory.js

@@ -0,0 +1,75 @@
+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, {
+  params,
+  withParams,
+  cacheKeyPrefix,
+  fetchingKey,
+  fetchingOptions,
+  fetchProductsCacheTtl,
+  productsPerPage,
+  query
+} = {
+  params: {
+    includeSoldOut: false,
+    includeSellableForFree: false,
+    pricePromotionKey: ""
+  },
+  fetchingOptions: {},
+  productsPerPage: PRODUCTS_PER_PAGE,
+  fetchProductsCacheTtl: DEFAULT_CACHE_TTL,
+  cacheKeyPrefix: DEFAULT_CACHE_KEY_PREFIX
+}) {
+  const { selectedSort } = useProductListSort();
+  const { appliedFilter } = useAppliedFilters();
+  const productsData = useProducts({
+    params: () => ({
+      ...query?.page && { page: +query.page },
+      sort: selectedSort.value,
+      perPage: query?.products_per_page ? parseInt(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,
+      ...params
+    }),
+    key: fetchingKey || `${toValue(categoryId)}-products`,
+    options: fetchingOptions
+  });
+  const products = computed(() => productsData.data.value?.products ?? []);
+  const pagination = computed(() => productsData.data.value?.pagination);
+  const totalProductsCount = computed(
+    () => 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,
+      fetching: productsData.fetching,
+      products,
+      pagination,
+      totalProductsCount,
+      paginationOffset
+    }
+  );
+}

package/dist/runtime/index.d.ts

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

package/dist/runtime/index.js

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

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

@@ -0,0 +1,16 @@
+import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+import type { ProductSearchQuery } from '@scayle/storefront-api';
+import type { RangeTuple } from '../../types/filter.js';
+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;
+}) => LocationQuery;
+export declare const createNewPriceQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, prices: RangeTuple) => LocationQuery;
+export declare const createNewBoolAttributeQuery: (route: RouteLocationNormalizedLoadedGeneric, appliedFilter: ProductSearchQuery, { slug, value }: {
+    slug: string;
+    value: boolean;
+}) => LocationQuery;
+export declare const getClearedPriceQuery: (route: RouteLocationNormalizedLoadedGeneric) => LocationQuery | undefined;

package/dist/runtime/utils/filters.js

@@ -0,0 +1,138 @@
+const getAttributeValues = (value) => {
+  return value.split(",").map((v) => Number(v)).filter((v) => !isNaN(v));
+};
+export const parseFilterDataFromRoute = (route, filtersPrefix) => {
+  const queryKeys = Object.keys(route.query);
+  const productSearchQuery = { attributes: [] };
+  queryKeys.forEach((queryKey) => {
+    const value = route.query[queryKey];
+    if (!value) {
+      return;
+    }
+    if (!queryKey.includes(filtersPrefix)) {
+      return;
+    }
+    const filterName = queryKey.replace(filtersPrefix, "").replace("]", "").replace("[", "");
+    switch (filterName) {
+      case "minPrice":
+      case "maxPrice":
+        if (isNaN(Number(value))) {
+          return;
+        }
+        productSearchQuery[filterName] = Number(value);
+        break;
+      case "term":
+        productSearchQuery.term = value;
+        break;
+      default:
+        if (value === "true" || value === "false") {
+          const booleanFilter = {
+            type: "boolean",
+            key: filterName,
+            value: value === "true"
+          };
+          return productSearchQuery.attributes?.push(booleanFilter);
+        } else {
+          const values = getAttributeValues(value);
+          if (values.length === 0) {
+            return;
+          }
+          const attributeFilter = {
+            type: "attributes",
+            key: filterName,
+            values
+          };
+          return productSearchQuery.attributes?.push(attributeFilter);
+        }
+    }
+  });
+  return productSearchQuery;
+};
+export const getClearedFilterQueryByKey = (route, key) => {
+  const query = { ...route.query };
+  const filterKey = `filters[${key}]`;
+  if (!query[filterKey]) {
+    return;
+  }
+  delete query[filterKey];
+  return query;
+};
+export const getNewQueryFilters = (route, filter) => {
+  const newQuery = {
+    sort: route.query.sort,
+    term: route.query.term,
+    ...filter
+  };
+  if ("page" in newQuery) {
+    delete newQuery.page;
+  }
+  return newQuery;
+};
+export const createNewAttributeQuery = (route, appliedFilter, { slug, id }) => {
+  const attributeFilterQuery = {};
+  const query = { ...route.query };
+  const attribute = appliedFilter.attributes?.find(({ key: key2 }) => key2 === slug);
+  const key = `filters[${slug}]`;
+  if (!attribute) {
+    attributeFilterQuery[key] = `${id}`;
+    return { ...query, ...attributeFilterQuery };
+  }
+  if (attribute?.type !== "attributes") {
+    return query;
+  }
+  const values = attribute.values;
+  const index = values.indexOf(id);
+  if (index === -1) {
+    values.push(id);
+  } else {
+    values.splice(index, 1);
+  }
+  if (values.length === 0) {
+    delete query[key];
+    return query;
+  }
+  attributeFilterQuery[key] = values.join(",");
+  return { ...query, ...attributeFilterQuery };
+};
+export const createNewPriceQuery = (route, appliedFilter, prices) => {
+  const priceFilterQuery = {};
+  const query = { ...route.query };
+  if (appliedFilter.minPrice !== prices[0]) {
+    priceFilterQuery["filters[minPrice]"] = prices[0].toString();
+  }
+  if (appliedFilter.maxPrice !== prices[1]) {
+    priceFilterQuery["filters[maxPrice]"] = prices[1].toString();
+  }
+  return { ...query, ...priceFilterQuery };
+};
+export const createNewBoolAttributeQuery = (route, appliedFilter, { slug, value }) => {
+  const booleanFilterQuery = {};
+  const query = { ...route.query };
+  const attribute = appliedFilter.attributes?.find(({ key: key2 }) => key2 === slug);
+  const key = `filters[${slug}]`;
+  if (!attribute) {
+    if (!value) {
+      return query;
+    }
+    booleanFilterQuery[key] = String(value);
+    return { ...query, ...booleanFilterQuery };
+  }
+  if (attribute.type !== "boolean") {
+    return query;
+  }
+  if (!value) {
+    delete query[key];
+    return query;
+  }
+  booleanFilterQuery[key] = String(value);
+  return { ...query, ...booleanFilterQuery };
+};
+export const getClearedPriceQuery = (route) => {
+  const query = { ...route.query };
+  if (!query["filters[minPrice]"] && !query["filters[maxPrice]"]) {
+    return;
+  }
+  delete query["filters[minPrice]"];
+  delete query["filters[maxPrice]"];
+  return query;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -11,18 +11,22 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./module": {
+      "types": "./dist/module.d.ts",
+      "require": "./dist/module.cjs",
+      "import": "./dist/module.mjs"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
   "imports": {
-    "#storefront-product-listing/composables": "./dist/runtime/composables/index.js"
+    "#storefront-product-listing": "./dist/runtime/index.js"
   },
   "scripts": {
     "build": "nuxt-module-build build",
@@ -41,9 +45,11 @@
   },
   "peerDependencies": {
     "@nuxt/kit": "^3.13.0",
-    "@scayle/storefront-nuxt": "^7.85.16",
+    "@scayle/storefront-nuxt": "^7.93.0",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "11.1.0"
+    "@vueuse/core": "11.2.0",
+    "fishery": "2.2.2",
+    "vue-router": "4.4.5"
   },
   "devDependencies": {
     "@nuxt/kit": "3.13.2",
@@ -51,17 +57,21 @@
     "@nuxt/schema": "3.13.2",
     "@nuxt/test-utils": "3.14.4",
     "@scayle/eslint-config-storefront": "4.3.2",
-    "@scayle/storefront-nuxt": "7.87.0",
-    "@types/node": "20.17.0",
+    "@scayle/storefront-nuxt": "7.94.2",
+    "@types/node": "22.9.0",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "11.1.0",
-    "dprint": "0.47.4",
-    "eslint": "9.13.0",
+    "@vueuse/core": "11.2.0",
+    "dprint": "0.47.5",
+    "eslint": "9.14.0",
+    "happy-dom": "15.11.0",
     "eslint-formatter-gitlab": "5.1.0",
     "nuxt": "3.13.2",
     "publint": "0.2.12",
     "typescript": "5.6.3",
-    "vitest": "2.1.3",
-    "vue-tsc": "2.1.6"
+    "vitest": "2.1.4",
+    "schema-dts": "1.1.2",
+    "vue-router": "4.4.5",
+    "fishery": "2.2.2",
+    "vue-tsc": "2.1.10"
   }
 }