@scayle/storefront-product-listing 1.1.3 → 1.3.0

package/CHANGELOG.md

@@ -0,0 +1,165 @@
+# @scayle/storefront-product-listing
+
+## 1.3.0
+
+### Minor Changes
+
+- Add `buildQueryFromCategoryFilters` utility.
+
+## 1.2.0
+
+### Minor Changes
+
+- Update `APISortOrder` and `APISortOption` names due to update to newest `@scayle/storefront-nuxt` version.
+
+## 1.1.3
+
+### Patch Changes
+
+- Ensure the module meta has the correct package version
+
+## 1.1.2
+
+### Patch Changes
+
+- Update `useFiltersForListing` to automatically refresh filter data whenever the its parameter change. This will ensure `filteredProductCount` is up to date.
+
+## 1.1.1
+
+### Patch Changes
+
+- We've updated to `nuxt@3.14`
+
+## 1.1.0
+
+### Minor Changes
+
+- Updates the parameter type of `useFiltersForListing` from `MaybeRefOrGetter` to `Ref` to enforce that the parameter is a mandatory reactive reference.
+  Non-reactive parameter will not work as expected in the Boilerplate.
+- Updates the parameter type of `useProductsForListing` from `MaybeRefOrGetter` to `Ref` to enforce that the parameter is a mandatory reactive reference.
+  Non-reactive parameter will not work as expected in the Boilerplate.
+
+## 1.0.0
+
+### Major Changes
+
+- This release introduces the `@scayle/storefront-product-listing` package, decoupling composables and utilities of the Product Listing Page (PLP) functionality from the SCAYLE Storefront Boilerplate for enhanced modularity and integration.
+  This separation empowers developers with greater control over PLP updates and simplifies its integration into existing Storefront-based projects.
+
+  - [Discover more about the Product Listing Page for SCAYLE Storefront in our SCAYLE Resource Center.](https://scayle.dev/en/storefront-guide/developer-guide/features/pages/product-listing-page)
+
+- This release requires `@scayle/storefront-nuxt@8.x` or higher. Support for `@scayle/storefront-nuxt@7.x` has been discontinued. Please update your dependencies accordingly. The `peerDependency` range has been updated to `^8.0.0`.
+
+### Minor Changes
+
+- Compared to the original implementation within the SCAYLE Storefront Boilerplate, the `@scayle/storefront-product-detail` package has received some improvements and refactoring:
+
+  - The `useAppliedFilters` composable has been added to the `storefront-product-listing` package.
+    It now accepts a `filtersPrefix` parameter, allowing you to specify a custom prefix for filter-related query parameters.
+  - The `useProductListSort` composable has been added to the `storefront-product-listing` package.
+    It now accepts a `sortingOptions` and `defaultSortingKey` parameter, to config the sorting options and set the initial sorting value.
+  - The `useProductListFilter` composable has been added to the `storefront-product-listing` package.
+    It accepts `currentCategoryId`, which represents the active category, and `ProductListFilterOptions` for specifying options for the underlying `useFilters` composable.
+  - The `filters` utility has been added to the `storefront-product-listing` package.
+    It provides utilities for filter query manipulation.
+  - All exports are now defined in a single file, and everything is exposed via the `#storefront-product-listing` import.
+  - The `useProductsByCategory` composable has been added to the `storefront-product-listing` package.
+    It now accepts a `categoryId` and `ProductsByCategoryOptions` object that has
+    certain fetching products by category params(`category` & `categoryId`), `fetchingOptions`, `productsPerPage`,
+    `fetchProductsCacheTtl`, `cacheKeyPrefix`, `fetchingKey`, `withParams` (for product)
+    and `query` (current route query state).
+  - The `useProductListingSeoData` composable has been added to the `storefront-product-listing` package.
+    It accepts reactive `category`, `breadcrumbs`, an object of type `UrlParams` (containing a `baseUrl` and `fullPath`) which are used for building SEO data.
+  - Product Listing-related test factories are now exposed externally.
+    They can be used as follows:
+
+    ```ts
+    import { filtersFactory } from '@scayle/storefront-product-listing'
+    ```
+
+  - Upgrade the `storefront-core` and `storefront-nuxt` packages to version 8 and update your implementation to reflect the changes in RPC composables:
+    - The composables `useProductListFilter` and `useProductsByCategory` now return a `status` property instead of `fetching`. The `status` can have one of the following values: `idle`, `pending`, `error`, or `success`.
+    - The `fetch` method has been replaced by `refresh`. Update your logic accordingly to use the new method.
+
+## 0.6.0
+
+### Minor Changes
+
+- Renamed the composables `useProductListFilter` to `useFiltersForListing`.
+- Composable `useProductListFilter` now allows configuration of the parameters `includeSellableForFree`, `includeSoldOut`, `orFiltersOperator`.
+- Removes the internal call to `useAppliedFilters` and `useProductListSort` which need to be explicitly passed to `useProductsForListing` and `useFiltersForListing`
+- Renamed the composables `useProductsByCategory` to `useProductsForListing`.
+- The configurable caching options `cacheKeyPrefix` and `fetchProductsCacheTtl` have been removed from the `useProductsByCategory` composable.
+- Removed unnecessary parameter `category` and return value `activeCategoryName` from `useProductListingSeoData`.
+- The `productsPerPage` parameter in the `useProductsByCategory` composable is now required and no longer provides a default value.
+- Removed the `getClearedPriceQuery` utility function. Price filter resetting can now be achieved via the `getClearedFilterQueryByKey` function.
+
+## 0.5.0
+
+### Minor Changes
+
+- Allow Storefront Nuxt v8 as a peer dependency
+
+## 0.4.2
+
+### Patch Changes
+
+- The `useProductsByCategory` composable now sets the trackSearchAnalyticsEvent parameter by default if the current page evaluates to `1` and the `appliedFilter.term` is not empty.
+  The default behavior can be overriden by passing `trackSearchAnalyticsEvent: false` as part of `ProductsByCategoryOptions.params`.
+  For more details, check the [SCAYLE Search Analytics section](https://scayle.dev/en/developer-guide/products/search#scayle-search-analytics) in the SCAYLE Resource Center.
+
+## 0.4.1
+
+### Patch Changes
+
+- Resolved an issue where the default parameter values for `useProductsByCategory` like `productsPerPage` or `cacheKeyPrefix` were not being set correctly.
+
+## 0.4.0
+
+### Minor Changes
+
+- Fix computed `sortLinks` return type mismatch in `UseProductListSortReturn` interface.
+
+## 0.3.0
+
+### Minor Changes
+
+- Fix `sortLinks` type by extending the `SelectedSort` type with `to` property which represents the `RouteLocationRaw` type from `vue-router`.
+
+## 0.2.0
+
+### Minor Changes
+
+- Add and expose externally explicit return types/interfaces for all product listing composables.
+
+## 0.1.4
+
+### Patch Changes
+
+- Resolved reactivity issues in composables by ensuring they receive the full `route` object instead of just the `query` object.
+  This allows for more reliable updates when the route changes.
+
+## 0.1.3
+
+### Patch Changes
+
+- Resolve an issue where `sortLinks` in `useProductListSort` caused broken URLs on the PLP.
+  The `sortLinks` now include a `path` attribute reflecting the current route path.
+
+## 0.1.2
+
+### Patch Changes
+
+- Update import of test factories to use new entry point
+
+## 0.1.1
+
+### Patch Changes
+
+- Resolved issue where sorting did not correctly route to the first page.
+
+## 0.1.0
+
+### Minor Changes
+
+- Introduce `@scayle/storefront-product-listing` package

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 SCAYLE GmbH
+Copyright (c) 2025 SCAYLE GmbH
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@scayle/storefront-product-listing",
   "configKey": "product-listing",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"
   },
   "builder": {
     "@nuxt/module-builder": "0.8.4",
-    "unbuild": "3.2.0"
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-listing";
-const PACKAGE_VERSION = "1.1.3";
+const PACKAGE_VERSION = "1.3.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

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

@@ -0,0 +1,5 @@
+export * from './useAppliedFilters.js';
+export * from './useFiltersForListing.js';
+export * from './useProductListSort.js';
+export * from './useProductListingSeoData.js';
+export * from './useProductsForListing.js';

package/dist/runtime/composables/index.js

@@ -0,0 +1,5 @@
+export * from "./useAppliedFilters.js";
+export * from "./useFiltersForListing.js";
+export * from "./useProductListSort.js";
+export * from "./useProductListingSeoData.js";
+export * from "./useProductsForListing.js";

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

@@ -1,4 +1,4 @@
-import { type ComputedRef } from 'vue';
+import type { ComputedRef } from 'vue';
 import type { ProductSearchQuery } from '@scayle/storefront-nuxt';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
 export type AppliedAttributeValues = Record<string, (string | number)[]>;

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

@@ -1,6 +1,6 @@
-import { type FetchFiltersParams } from '@scayle/storefront-nuxt';
+import type { FetchFiltersParams } from '@scayle/storefront-nuxt';
 import { useFilters } from '@scayle/storefront-nuxt/composables';
-import { type ComputedRef, type Ref } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
 import type { FilterItemWithValues } from '@scayle/storefront-api';
 export type FiltersForListingOptions = Partial<{
     params: Ref<Omit<FetchFiltersParams, 'category'>>;

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

@@ -1,5 +1,5 @@
-import { type ProductSortConfig } from '@scayle/storefront-nuxt';
-import { type ComputedRef } from 'vue';
+import type { ProductSortConfig } from '@scayle/storefront-nuxt';
+import type { ComputedRef } from 'vue';
 import type { RouteLocationNormalizedLoadedGeneric, RouteLocationRaw } from 'vue-router';
 type SelectedSort = ProductSortConfig & {
     key: string;

package/dist/runtime/composables/useProductListSort.js

@@ -1,38 +1,35 @@
-import {
-  APISortOption,
-  APISortOrder
-} from "@scayle/storefront-nuxt";
+import { APISortOption, APISortOrder } from "@scayle/storefront-nuxt";
 import { computed } from "vue";
 export function useProductListSort(route, { sortingOptions, defaultSortingKey } = {
   sortingOptions: [
     {
       key: "top_seller",
       sortingKey: "scayle:v1:recommended",
-      direction: APISortOrder.Descending,
+      direction: APISortOrder.DESCENDING,
       label: "sorting_select.top_seller"
     },
     {
       key: "date_newest",
-      by: APISortOption.DateAdded,
-      direction: APISortOrder.Descending,
+      by: APISortOption.DATE_ADDED,
+      direction: APISortOrder.DESCENDING,
       label: "sorting_select.date_newest"
     },
     {
       key: "price_desc",
-      by: APISortOption.Price,
-      direction: APISortOrder.Descending,
+      by: APISortOption.PRICE,
+      direction: APISortOrder.DESCENDING,
       label: "sorting_select.price_desc"
     },
     {
       key: "price_asc",
-      by: APISortOption.Price,
-      direction: APISortOrder.Ascending,
+      by: APISortOption.PRICE,
+      direction: APISortOrder.ASCENDING,
       label: "sorting_select.price_asc"
     },
     {
       key: "reduction_desc",
-      by: APISortOption.Reduction,
-      direction: APISortOrder.Descending,
+      by: APISortOption.REDUCTION,
+      direction: APISortOrder.DESCENDING,
       label: "sorting_select.reduction_desc"
     }
   ],

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

@@ -1,4 +1,4 @@
-import { type ComputedRef, type MaybeRefOrGetter } from 'vue';
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 import type { BreadcrumbItem } from '@scayle/storefront-nuxt';
 import type { BreadcrumbList, WithContext } from 'schema-dts';
 import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';

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

@@ -1,5 +1,5 @@
-import { type FetchProductsByCategoryParams, type Product } from '@scayle/storefront-nuxt';
-import { type Ref, type ComputedRef } from 'vue';
+import type { FetchProductsByCategoryParams, Product } from '@scayle/storefront-nuxt';
+import type { Ref, 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'> & {

package/dist/runtime/composables/useProductsForListing.js

@@ -1,6 +1,4 @@
-import {
-  extendPromise
-} from "@scayle/storefront-nuxt";
+import { extendPromise } from "@scayle/storefront-nuxt";
 import { computed, ref } from "vue";
 import { useProducts } from "@scayle/storefront-nuxt/composables";
 export function useProductsForListing({

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

@@ -1,5 +1,5 @@
 import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-router';
-import type { ProductSearchQuery } from '@scayle/storefront-api';
+import type { CategoryFilter, ProductSearchQuery } from '@scayle/storefront-nuxt';
 import type { RangeTuple } from '~/src';
 /**
  * Parses filter data from a Vue Router route object.
@@ -59,3 +59,11 @@ export declare const createNewBoolAttributeQuery: (route: RouteLocationNormalize
  * @returns A new query object with the filter cleared.
  */
 export declare const getClearedFilterQueryByKey: (route: RouteLocationNormalizedLoadedGeneric, key: string) => LocationQuery;
+/**
+ * Builds a new query object from category filters.
+ *
+ * @param filters - Category filters.
+ *
+ * @returns A new query object from Category filters.
+ */
+export declare const buildQueryFromCategoryFilters: (filters: CategoryFilter[]) => LocationQuery;

package/dist/runtime/utils/filters.js

@@ -1,5 +1,5 @@
 const getAttributeValues = (value) => {
-  return value.split(",").filter((v) => v !== "").map((v) => Number(v)).filter((v) => !isNaN(v));
+  return value.split(",").filter((v) => v !== "").map(Number).filter((v) => !isNaN(v));
 };
 export const parseFilterDataFromRoute = (route, filtersPrefix) => {
   const queryKeys = Object.keys(route.query);
@@ -9,7 +9,10 @@ export const parseFilterDataFromRoute = (route, filtersPrefix) => {
     if (!queryKey.includes(filtersPrefix)) {
       return;
     }
-    const filterName = queryKey.replace(filtersPrefix, "").replace("]", "").replace("[", "");
+    const filterName = queryKey.replace(filtersPrefix, "").replace(
+      /[\[\]]/g,
+      ""
+    );
     switch (filterName) {
       case "minPrice":
       case "maxPrice":
@@ -122,3 +125,20 @@ export const getClearedFilterQueryByKey = (route, key) => {
   }
   return query;
 };
+export const buildQueryFromCategoryFilters = (filters) => {
+  return filters.reduce((query, filter) => {
+    switch (filter.type) {
+      case "attribute":
+        return {
+          ...query,
+          [`filters[${filter.attributeFilter.group.key}]`]: filter.attributeFilter.values.map(({ id }) => id).join(",")
+        };
+      case "boolean":
+        return {
+          ...query,
+          [`filters[${filter.booleanFilter.slug}]`]: "true"
+        };
+    }
+    return query;
+  }, {});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -18,11 +18,16 @@
       "types": "./dist/module.d.ts",
       "require": "./dist/module.cjs",
       "import": "./dist/module.mjs"
+    },
+    "./composables": {
+      "types": "./dist/runtime/composables/index.d.ts",
+      "import": "./dist/runtime/composables/index.js"
     }
   },
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
+    "CHANGELOG.md",
     "dist"
   ],
   "imports": {
@@ -39,7 +44,7 @@
     "format:fix": "dprint fmt",
     "test": "vitest --run --passWithNoTests",
     "test:watch": "vitest --passWithNoTests",
-    "test:ci": "vitest --run --passWithNoTests --coverage --reporter=default --reporter=junit --outputFile=./junit.xml",
+    "test:ci": "vitest --run --passWithNoTests --coverage --reporter=default --reporter=junit --outputFile=./coverage/junit.xml",
     "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
     "package:lint": "publint"
   },
@@ -47,31 +52,31 @@
     "@nuxt/kit": "^3.13.0",
     "@scayle/storefront-nuxt": "^8.0.0",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "12.3.0",
-    "fishery": "2.2.2",
+    "@vueuse/core": "12.7.0",
+    "fishery": "2.2.3",
     "vue-router": "4.5.0"
   },
   "devDependencies": {
-    "@nuxt/kit": "3.14.1592",
+    "@nuxt/kit": "3.15.4",
     "@nuxt/module-builder": "0.8.4",
-    "@nuxt/schema": "3.14.1592",
-    "@nuxt/test-utils": "3.15.1",
-    "@scayle/eslint-config-storefront": "4.4.0",
-    "@scayle/storefront-nuxt": "8.3.2",
-    "@types/node": "22.10.5",
+    "@nuxt/schema": "3.15.4",
+    "@nuxt/test-utils": "3.17.1",
+    "@scayle/eslint-config-storefront": "4.4.1",
+    "@scayle/storefront-nuxt": "8.11.6",
+    "@types/node": "22.13.9",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "12.3.0",
-    "dprint": "0.48.0",
-    "eslint": "9.17.0",
-    "happy-dom": "16.5.3",
+    "@vueuse/core": "12.7.0",
+    "dprint": "0.49.0",
+    "eslint": "9.21.0",
+    "happy-dom": "17.1.9",
     "eslint-formatter-gitlab": "5.1.0",
-    "nuxt": "3.14.1592",
+    "nuxt": "3.15.4",
     "publint": "0.2.12",
-    "typescript": "5.7.3",
-    "vitest": "2.1.8",
-    "schema-dts": "1.1.2",
+    "typescript": "5.8.2",
+    "vitest": "2.1.9",
+    "schema-dts": "1.1.5",
     "vue-router": "4.5.0",
-    "fishery": "2.2.2",
-    "vue-tsc": "2.2.0"
+    "fishery": "2.2.3",
+    "vue-tsc": "2.2.8"
   }
 }