@scayle/storefront-product-listing 1.8.1 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,92 @@
 # @scayle/storefront-product-listing
 
+## 2.0.1
+
+### Patch Changes
+
+- Resolved an issue where the `appliedFilter` in `useAppliedFilters` was updated on every route change even if the query didn't change.
+
+  This caused unnecessary updates in places where there is a reactive dependency on the `appliedFilter`.
+  The `appliedFilter` is now only updated when the query actually changes.
+
+## 2.0.0
+
+### Major Changes
+
+- **BREAKING**: Removed the `defaultSortingOptions` export. It is now expected to explicitly pass the `sortingOptions` to `useProductListSort`.
+
+  **Before**
+
+  ```ts
+  import { defaultSortingOptions } from '#storefront-product-listing'
+  const { sortLinks } = useProductListSort(useRoute(), {
+    sortingOptions: defaultSortingOptions,
+  })
+  ```
+
+  ```ts
+  const { sortLinks } = useProductListSort(useRoute())
+  ```
+
+  (Both before approaches are equivalent.)
+
+  **After**
+
+  ```ts
+  import { SORT_PRICE_ASC, SORT_PRICE_DESC } from '#storefront-product-listing'
+  const { sortLinks } = useProductListSort(useRoute(), {
+    sortingOptions: [
+      {
+        ...SORT_PRICE_ASC,
+        label: 'Price Ascending',
+      },
+      {
+        ...SORT_PRICE_DESC,
+        label: 'Price Descending',
+      },
+    ],
+  })
+  ```
+
+- **BREAKING**: `useProductListingSeoData` now expects `isDefaultSortSelected` to be passed as the final parameter. This removes the internal dependency on `useProductListSort`. It is typed as `MaybeRefOrGetter<Boolean>` to support reactive usage.
+
+  **Before**
+
+  ```ts
+  const route = useRoute()
+  const { title, robots, canonicalLink, categoryBreadcrumbSchema } =
+    useProductListingSeoData(breadcrumbs, route, {
+      baseUrl: baseUrl,
+      fullPath: fullPath,
+    })
+  ```
+
+  **After**
+
+  ```ts
+  const route = useRoute()
+  const { isDefaultSortSelected } = useProductListSort(...)
+  const { title, robots, canonicalLink, categoryBreadcrumbSchema } = useProductListingSeoData(
+    breadcrumbs,
+    route,
+    {
+      baseUrl: baseUrl,
+      fullPath: fullPath,
+    },
+    isDefaultSortSelected,
+  )
+  ```
+
+### Minor Changes
+
+- Added exports for individual sort configs. `SORT_TOP_SELLER`, `SORT_DATE_NEWEST`, `SORT_PRICE_DESC`, `SORT_PRICE_ASC`, and `SORT_REDUCTION_DESC`. These can be used to easily construct a list of sort configs to pass to `useProductListSort`.
+- Added new type exports `SelectedSort` and `SortLink`. This improves the experience of using `useProductListSort` by making the parameter and return types of this composable more accessible.
+- The `sortingKey` for the default Topseller sort has changed from `scayle:v1:recommended` to `scayle:v1:balanced-offerings`.
+
+### Patch Changes
+
+- In `useProductListSort`, the `sortingOptions` option now accepts `MaybeRefOrGetter<SelectedSort[]>`. This allows for reactive usage of the composable.
+
 ## 1.8.1
 
 ### Patch Changes

package/dist/index.d.mts

@@ -1,6 +1,6 @@
-import { BreadcrumbItem } from '@scayle/storefront-nuxt';
+export * from '../dist/runtime/types/sort.js';
+import { BreadcrumbItem, FilterItemWithValues } from '@scayle/storefront-nuxt';
 import { Factory } from 'fishery';
-import { FilterItemWithValues } from '@scayle/storefront-api';
 
 type RangeTuple = [start: number, end: number];
 

package/dist/index.mjs

@@ -1,5 +1,6 @@
+export * from '../dist/runtime/types/sort.js';
 import { Factory } from 'fishery';
-import { FilterTypes } from '@scayle/storefront-api';
+import { FilterTypes } from '@scayle/storefront-nuxt';
 
 const breadcrumbsFactory = Factory.define(() => [
   { to: "/de/c/women/clothing/shirts-2045", value: "shirts" },

package/dist/module.json

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

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.8.1";
+const PACKAGE_VERSION = "2.0.1";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

package/dist/runtime/composables/useAppliedFilters.js

@@ -1,9 +1,11 @@
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import { parseFilterDataFromRoute } from "../utils/filters.js";
 export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "filters" }) {
-  const appliedFilter = computed(() => {
-    return parseFilterDataFromRoute(route, filtersPrefix);
-  });
+  const appliedFilter = ref({ attributes: [] });
+  const routeQueryString = computed(() => JSON.stringify(route.query));
+  watch(routeQueryString, () => {
+    appliedFilter.value = parseFilterDataFromRoute(route.query, filtersPrefix);
+  }, { immediate: true });
   const appliedFiltersCount = computed(() => {
     let count = 0;
     count += appliedFilter.value.attributes?.length ?? 0;
@@ -39,7 +41,7 @@ export function useAppliedFilters(route, { filtersPrefix } = { filtersPrefix: "f
     return appliedFiltersCount.value > 0;
   });
   return {
-    appliedFilter,
+    appliedFilter: computed(() => appliedFilter.value),
     appliedFiltersCount,
     appliedAttributeValues,
     appliedBooleanValues,

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

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

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

@@ -1,13 +1,6 @@
-import type { ProductSortConfig } from '@scayle/storefront-nuxt';
-import type { ComputedRef } from 'vue';
-import type { RouteLocationNormalizedLoadedGeneric, RouteLocationRaw } from 'vue-router';
-type SelectedSort = ProductSortConfig & {
-    key: string;
-    label: string;
-};
-type SortLink = SelectedSort & {
-    to: RouteLocationRaw;
-};
+import type { ComputedRef, MaybeRefOrGetter } from 'vue';
+import type { RouteLocationNormalizedLoadedGeneric } from 'vue-router';
+import type { SelectedSort, SortLink } from '../types/sort.js';
 export interface UseProductListSortReturn {
     /** The currently selected sorting option. */
     selectedSort: ComputedRef<SelectedSort | undefined>;
@@ -17,40 +10,34 @@ export interface UseProductListSortReturn {
     isDefaultSortSelected: ComputedRef<boolean>;
 }
 export interface ProductListSortOptions {
-    sortingOptions?: SelectedSort[];
+    sortingOptions: MaybeRefOrGetter<SelectedSort[]>;
     defaultSortingKey?: string;
 }
-export declare const defaultSortingOptions: ({
+export declare const SORT_TOP_SELLER: {
     key: string;
     sortingKey: string;
     direction: "desc";
-    label: string;
-    by?: undefined;
-} | {
+};
+export declare const SORT_DATE_NEWEST: {
     key: string;
     by: "new";
     direction: "desc";
-    label: string;
-    sortingKey?: undefined;
-} | {
+};
+export declare const SORT_PRICE_DESC: {
     key: string;
     by: "price";
     direction: "desc";
-    label: string;
-    sortingKey?: undefined;
-} | {
+};
+export declare const SORT_PRICE_ASC: {
     key: string;
     by: "price";
     direction: "asc";
-    label: string;
-    sortingKey?: undefined;
-} | {
+};
+export declare const SORT_REDUCTION_DESC: {
     key: string;
     by: "reduction";
     direction: "desc";
-    label: string;
-    sortingKey?: undefined;
-})[];
+};
 export declare const DEFAULT_SORTING_KEY = "top_seller";
 /**
  * Custom composable to handle product list sorting.
@@ -62,5 +49,4 @@ export declare const DEFAULT_SORTING_KEY = "top_seller";
  *
  * @returns Computed properties and methods related to sorting
  */
-export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey, }?: ProductListSortOptions): UseProductListSortReturn;
-export {};
+export declare function useProductListSort(route: RouteLocationNormalizedLoadedGeneric, { sortingOptions, defaultSortingKey, }: ProductListSortOptions): UseProductListSortReturn;

package/dist/runtime/composables/useProductListSort.js

@@ -1,52 +1,47 @@
 import { APISortOption, APISortOrder } from "@scayle/storefront-nuxt";
-import { computed } from "vue";
-export const defaultSortingOptions = [
-  {
-    key: "top_seller",
-    sortingKey: "scayle:v1:recommended",
-    direction: APISortOrder.DESCENDING,
-    label: "sorting_select.top_seller"
-  },
-  {
-    key: "date_newest",
-    by: APISortOption.DATE_ADDED,
-    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"
-  }
-];
+import { computed, toValue } from "vue";
+export const SORT_TOP_SELLER = {
+  key: "top_seller",
+  sortingKey: "scayle:v1:balanced-offerings",
+  direction: APISortOrder.DESCENDING
+};
+export const SORT_DATE_NEWEST = {
+  key: "date_newest",
+  by: APISortOption.DATE_ADDED,
+  direction: APISortOrder.DESCENDING
+};
+export const SORT_PRICE_DESC = {
+  key: "price_desc",
+  by: APISortOption.PRICE,
+  direction: APISortOrder.DESCENDING
+};
+export const SORT_PRICE_ASC = {
+  key: "price_asc",
+  by: APISortOption.PRICE,
+  direction: APISortOrder.ASCENDING
+};
+export const SORT_REDUCTION_DESC = {
+  key: "reduction_desc",
+  by: APISortOption.REDUCTION,
+  direction: APISortOrder.DESCENDING
+};
 export const DEFAULT_SORTING_KEY = "top_seller";
 export function useProductListSort(route, {
-  sortingOptions = defaultSortingOptions,
+  sortingOptions,
   defaultSortingKey = DEFAULT_SORTING_KEY
-} = {}) {
+}) {
   const selectedSort = computed(() => {
-    const sort = sortingOptions.find(({ key }) => key === route.query.sort);
+    const options = toValue(sortingOptions);
+    const sort = options.find(({ key }) => key === route.query.sort);
     if (!sort) {
-      return sortingOptions?.find(({ key }) => key === defaultSortingKey);
+      return options?.find(({ key }) => key === defaultSortingKey);
     }
     return sort;
   });
   const sortLinks = computed(() => {
     const { page, ...query } = route.query;
-    return sortingOptions?.map((option) => ({
+    const options = toValue(sortingOptions);
+    return options?.map((option) => ({
       ...option,
       to: {
         path: route.path,

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

@@ -22,8 +22,9 @@ export interface UseProductListingSeoDataReturn {
  * @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.
+ * @param isDefaultSortSelected - If the default sort is applied on the listing.
  *
  * @returns An object containing reactive data and computed properties for managing SEO data.
  */
-export declare function useProductListingSeoData(breadcrumbs: MaybeRefOrGetter<BreadcrumbItem[]>, route: RouteLocationNormalizedLoadedGeneric, { baseUrl, fullPath }: UrlParams): UseProductListingSeoDataReturn;
+export declare function useProductListingSeoData(breadcrumbs: MaybeRefOrGetter<BreadcrumbItem[]>, route: RouteLocationNormalizedLoadedGeneric, { baseUrl, fullPath }: UrlParams, isDefaultSortSelected: MaybeRefOrGetter<boolean>): UseProductListingSeoDataReturn;
 export {};

package/dist/runtime/composables/useProductListingSeoData.js

@@ -4,12 +4,10 @@ import {
   sanitizeCanonicalURL
 } from "@scayle/storefront-nuxt";
 import { useAppliedFilters } from "./useAppliedFilters.js";
-import { useProductListSort } from "./useProductListSort.js";
-export function useProductListingSeoData(breadcrumbs, route, { baseUrl, fullPath }) {
+export function useProductListingSeoData(breadcrumbs, route, { baseUrl, fullPath }, isDefaultSortSelected) {
   const { areFiltersApplied } = useAppliedFilters(route);
-  const { isDefaultSortSelected } = useProductListSort(route);
   const robots = computed(() => {
-    return !areFiltersApplied.value && isDefaultSortSelected.value ? "index,follow" : "noindex,follow";
+    return !areFiltersApplied.value && toValue(isDefaultSortSelected) ? "index,follow" : "noindex,follow";
   });
   const canonicalLink = computed(
     () => robots.value.includes("noindex") ? [] : [{

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

@@ -1,7 +1,6 @@
-import type { FetchProductsByCategoryParams, Product } from '@scayle/storefront-nuxt';
+import type { FetchProductsByCategoryParams, Product, Pagination } 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'> & {
     /** A computed array of products in the specified category. */
     products: ComputedRef<Product[]>;

package/dist/runtime/rpc/methods/categories.js

@@ -1,9 +1,10 @@
 import {
   ErrorResponse,
   HttpStatusCode,
-  HttpStatusMessage
+  HttpStatusMessage,
+  defineRpcHandler
 } from "@scayle/storefront-nuxt";
-export const getAllShopCategoriesForId = async function getAllShopCategoriesForId2({ id, properties }, context) {
+export const getAllShopCategoriesForId = defineRpcHandler(async ({ id, properties }, context) => {
   if (typeof id !== "number" || isNaN(id)) {
     return new ErrorResponse(
       HttpStatusCode.BAD_REQUEST,
@@ -43,4 +44,4 @@ export const getAllShopCategoriesForId = async function getAllShopCategoriesForI
     // 12 hours
   })();
   return result;
-};
+});

package/dist/runtime/types/sort.d.ts

@@ -0,0 +1,9 @@
+import type { ProductSortConfig } from '@scayle/storefront-nuxt';
+import type { RouteLocationRaw } from 'vue-router';
+export type SelectedSort = ProductSortConfig & {
+    key: string;
+    label: string;
+};
+export type SortLink = SelectedSort & {
+    to: RouteLocationRaw;
+};

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

@@ -1,4 +1,5 @@
 import type { Category } from '@scayle/storefront-nuxt';
+import type { SelectedSort } from '../types/sort.js';
 /**
  * Get all ancestors of a category.
  * @param category - The category to get the ancestors of.
@@ -17,3 +18,9 @@ export declare const isSaleCategory: (category: Category) => boolean;
  * @returns A flattened array of all categories in the tree.
  */
 export declare const flattenCategoryTree: (categoryTree: Category[]) => Category[];
+/**
+ * Create a default sorting config based on the current category
+ * @param category - The category to use for smart and custom sorting keys
+ * @returns The correct default sort config for the category
+ */
+export declare function createDefaultSortingOption(category?: Category): Omit<SelectedSort, 'label'>;

package/dist/runtime/utils/category.js

@@ -1,3 +1,4 @@
+import { SORT_TOP_SELLER } from "../composables/useProductListSort.js";
 export const getCategoryAncestors = (category) => {
   if (!category?.parent) {
     return [];
@@ -21,3 +22,14 @@ export const flattenCategoryTree = (categoryTree) => {
     ).values()
   ];
 };
+export function createDefaultSortingOption(category) {
+  const smartSortingKey = category?.productSorting?.smartSortingKey;
+  const customSortingKey = category?.productSorting?.customSortingKey;
+  if (!smartSortingKey && !customSortingKey) {
+    return SORT_TOP_SELLER;
+  }
+  const sortingKey = [customSortingKey, smartSortingKey].filter(
+    (item) => !!item
+  );
+  return { ...SORT_TOP_SELLER, sortingKey };
+}

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

@@ -2,14 +2,14 @@ import type { LocationQuery, RouteLocationNormalizedLoadedGeneric } from 'vue-ro
 import type { CategoryFilter, ProductSearchQuery } from '@scayle/storefront-nuxt';
 import type { RangeTuple } from '../..//index.js';
 /**
- * Parses filter data from a Vue Router route object.
+ * Parses filter data from a Vue Router query object.
  *
- * @param route The Vue Router route object.
+ * @param query The query 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 parseFilterDataFromRoute: (query: LocationQuery, filtersPrefix: string) => ProductSearchQuery;
 /**
  * Creates a new attribute filter query object.
  *

package/dist/runtime/utils/filters.js

@@ -1,11 +1,11 @@
 const getAttributeValues = (value) => {
   return value.split(",").filter((v) => v !== "").map(Number).filter((v) => !isNaN(v));
 };
-export const parseFilterDataFromRoute = (route, filtersPrefix) => {
-  const queryKeys = Object.keys(route.query);
+export const parseFilterDataFromRoute = (query, filtersPrefix) => {
+  const queryKeys = Object.keys(query);
   const productSearchQuery = { attributes: [] };
   queryKeys.forEach((queryKey) => {
-    const value = route.query[queryKey];
+    const value = query[queryKey];
     if (!queryKey.includes(filtersPrefix)) {
       return;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "1.8.1",
+  "version": "2.0.1",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -33,9 +33,7 @@
   },
   "peerDependencies": {
     "@nuxt/kit": ">=3.13.0",
-    "@scayle/storefront-core": "^8.0.0",
     "@scayle/storefront-nuxt": "^8.0.0",
-    "@vue/test-utils": "^2.4.6",
     "@vueuse/core": "^12.8.2 || ^13.0.0",
     "fishery": "^2.2.3",
     "vue-router": "^4.5.0",
@@ -43,31 +41,29 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "0.18.2",
-    "@nuxt/kit": "3.16.2",
+    "@nuxt/kit": "3.17.7",
     "@nuxt/module-builder": "1.0.1",
-    "@nuxt/schema": "3.16.2",
-    "@nuxt/test-utils": "3.18.0",
-    "@scayle/eslint-config-storefront": "4.5.11",
-    "@scayle/storefront-api": "18.9.0",
-    "@scayle/storefront-nuxt": "8.31.0",
-    "@types/node": "22.15.33",
+    "@nuxt/schema": "3.17.7",
+    "@nuxt/test-utils": "3.19.2",
+    "@types/node": "22.16.4",
     "@vitest/coverage-v8": "3.2.4",
-    "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.4.0",
-    "dprint": "0.50.0",
+    "@vueuse/core": "13.5.0",
+    "dprint": "0.50.1",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.29.0",
+    "eslint": "9.31.0",
     "fishery": "2.3.1",
     "happy-dom": "18.0.1",
-    "nuxt": "3.16.2",
+    "nuxt": "3.17.7",
     "publint": "0.3.12",
     "schema-dts": "1.1.5",
     "typescript": "5.8.3",
     "unbuild": "3.5.0",
     "vitest": "3.2.4",
     "vue-router": "4.5.1",
-    "vue-tsc": "2.2.10",
-    "vue": "3.5.17"
+    "vue-tsc": "3.0.1",
+    "vue": "3.5.17",
+    "@scayle/eslint-config-storefront": "4.6.1",
+    "@scayle/storefront-nuxt": "8.34.1"
   },
   "scripts": {
     "build": "nuxt-module-build build",