@scayle/storefront-product-listing 1.8.1 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,83 @@
 # @scayle/storefront-product-listing
 
+## 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
@@ -143,7 +221,7 @@
     They can be used as follows:
 
     ```ts
-    import { filtersFactory } from '@scayle/storefront-product-listing'
+    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:

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+export * from '../dist/runtime/types/sort.js';
 import { BreadcrumbItem } from '@scayle/storefront-nuxt';
 import { Factory } from 'fishery';
 import { FilterItemWithValues } from '@scayle/storefront-api';

package/dist/index.mjs

@@ -1,3 +1,4 @@
+export * from '../dist/runtime/types/sort.js';
 import { Factory } from 'fishery';
 import { FilterTypes } from '@scayle/storefront-api';
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-listing",
   "configKey": "product-listing",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "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.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-listing",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "description": "Collection of essential composables and utilities to work with product listing",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -46,17 +46,17 @@
     "@nuxt/kit": "3.16.2",
     "@nuxt/module-builder": "1.0.1",
     "@nuxt/schema": "3.16.2",
-    "@nuxt/test-utils": "3.18.0",
-    "@scayle/eslint-config-storefront": "4.5.11",
+    "@nuxt/test-utils": "3.19.2",
+    "@scayle/eslint-config-storefront": "4.5.12",
     "@scayle/storefront-api": "18.9.0",
-    "@scayle/storefront-nuxt": "8.31.0",
-    "@types/node": "22.15.33",
+    "@scayle/storefront-nuxt": "8.32.1",
+    "@types/node": "22.15.34",
     "@vitest/coverage-v8": "3.2.4",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "13.4.0",
-    "dprint": "0.50.0",
+    "dprint": "0.50.1",
     "eslint-formatter-gitlab": "6.0.1",
-    "eslint": "9.29.0",
+    "eslint": "9.30.0",
     "fishery": "2.3.1",
     "happy-dom": "18.0.1",
     "nuxt": "3.16.2",