@scayle/storefront-product-detail 1.6.3 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @scayle/storefront-product-detail
 
+## 1.8.0
+
+### Minor Changes
+
+- Added the `useSimilarProducts` composable and `getSimilarProducts` RPC method to enable fetching product recommendations based on a given product ID.
+
+  The `useSimilarProducts` composable provides a convenient way to retrieve similar products with support for filtering, limiting results, and configuring product data inclusion. The underlying `getSimilarProducts` RPC method accepts a `productId` and optional configuration parameters including `with` (product data to include), `limit` (maximum number of recommendations), `where` (product search filters), `pricePromotionKey`, `campaignKey`, and `ignoreSameMasterKey` (whether to exclude products with the same master key). Results are cached for 5 minutes to improve performance.
+
+  ```ts
+  const { data, status, error } = useSimilarProducts({
+    params: {
+      productId: 123,
+      limit: 10,
+      with: { attributes: 'all', images: { attributes: 'all' } },
+      where: {
+        attributes: [
+          {
+            type: 'attributes',
+            key: 'brand',
+            values: [456],
+          },
+        ],
+      },
+      ignoreSameMasterKey: true,
+    },
+  })
+  ```
+
+## 1.7.0
+
+### Minor Changes
+
+- Introduced support for Nuxt 4 while maintaining full backward compatibility with Nuxt 3.
+  This enables consumers to migrate to Nuxt 4 ahead of the Nuxt 3 end of support on 31 Jan 2026.
+
+  - **Version Requirements:**
+    - Nuxt 3: `v3.13.0+`
+    - Nuxt 4: `v4.2.0+`
+
+  **NOTE:** Please be aware that the SCAYLE Storefront Application itself does not yet support Nuxt 4. These package updates are a prerequisite. We recommend remaining on Nuxt 3 for your Storefront implementation until further notice.
+
+  See the [Nuxt 4 Migration Guide](https://nuxt.com/docs/4.x/getting-started/upgrade) for general upgrade details.
+
 ## 1.6.3
 
 ### Patch Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-detail",
   "configKey": "product-detail",
-  "version": "1.6.3",
+  "version": "1.8.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-detail";
-const PACKAGE_VERSION = "1.6.3";
+const PACKAGE_VERSION = "1.8.0";
 const module$1 = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,
@@ -24,6 +24,10 @@ const module$1 = defineNuxtModule({
         source: await resolvePath("./runtime/rpc/methods/products"),
         names: ["getAllShopProductsForId"]
       });
+      customRpcs.push({
+        source: await resolvePath("./runtime/rpc/methods/recommendations"),
+        names: ["getSimilarProducts"]
+      });
     });
     nuxt.options.optimization.keyedComposables.push({
       name: "useAllShopProductsForId",

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

@@ -2,3 +2,4 @@ export * from './useProductSeoData.js';
 export * from './useAllShopProductsForId.js';
 export * from './useRecentlyViewedProducts.js';
 export * from './useSellableTimeFrame.js';
+export * from './useSimilarProducts.js';

package/dist/runtime/composables/index.js

@@ -2,3 +2,4 @@ export * from "./useProductSeoData.js";
 export * from "./useAllShopProductsForId.js";
 export * from "./useRecentlyViewedProducts.js";
 export * from "./useSellableTimeFrame.js";
+export * from "./useSimilarProducts.js";

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

@@ -0,0 +1,26 @@
+import type { RpcMethodParameters } from '@scayle/storefront-nuxt';
+import type { NormalizedRpcResponse, UseRpcOptions, UseRpcCacheKey, KeysOf, UseRpcReturn } from '@scayle/storefront-nuxt/composables';
+import type { MaybeRefOrGetter } from 'vue';
+/**
+ * Retrieves similar products for a given product ID using the `getSimilarProducts` RPC method.
+ *
+ * This function acts as a wrapper around the `useRpc` composable,
+ * simplifying the process of fetching data. It internally calls `useRpc`
+ * with the provided parameters and options.
+ *
+ * @template DataT The type of the normalized RPC response data. Defaults to `NormalizedRpcResponse<'getSimilarProducts'>`.
+ * @template PickKeys The keys to pick from the data. Defaults to all keys of `DataT`.
+ * @template DefaultT The default value to use if data is not available. Defaults to `null`.
+ *
+ * @param params The parameters for the `getSimilarProducts` RPC method.
+ * @param params.params The parameters for the `getSimilarProducts` RPC method.
+ * @param params.options The options for the underlying `useRpc` call, controlling data handling and loading state.
+ * @param key A unique key for this RPC call. Used internally by `useRpc` for caching and state management.
+ *
+ * @returns The result of the `useRpc` call, which includes the fetched data,
+ *          loading state, and any error information.
+ */
+export declare function useSimilarProducts<DataT = NormalizedRpcResponse<'getSimilarProducts'>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = null>({ params, options, }?: Partial<{
+    params: MaybeRefOrGetter<RpcMethodParameters<'getSimilarProducts'>>;
+    options: UseRpcOptions<'getSimilarProducts', DataT, PickKeys, DefaultT>;
+}>, key?: UseRpcCacheKey): UseRpcReturn<'getSimilarProducts', DataT, PickKeys, DefaultT>;

package/dist/runtime/composables/useSimilarProducts.js

@@ -0,0 +1,7 @@
+import { useRpc } from "@scayle/storefront-nuxt/composables";
+export function useSimilarProducts({
+  params,
+  options
+} = {}, key = "useSimilarProducts") {
+  return useRpc("getSimilarProducts", key, params, options);
+}

package/dist/runtime/index.d.ts

@@ -1,6 +1,7 @@
 export * from './composables/useProductSeoData.js';
 export * from './composables/useAllShopProductsForId.js';
 export * from './composables/useSellableTimeFrame.js';
+export * from './composables/useSimilarProducts.js';
 export * from './utils/product.js';
 export * from './utils/attribute.js';
 export * from './utils/seo.js';

package/dist/runtime/index.js

@@ -1,6 +1,7 @@
 export * from "./composables/useProductSeoData.js";
 export * from "./composables/useAllShopProductsForId.js";
 export * from "./composables/useSellableTimeFrame.js";
+export * from "./composables/useSimilarProducts.js";
 export * from "./utils/product.js";
 export * from "./utils/attribute.js";
 export * from "./utils/seo.js";

package/dist/runtime/rpc/methods/recommendations.d.ts

@@ -0,0 +1,26 @@
+import type { ProductWith, ProductSearchQuery, RpcHandler, Product } from '@scayle/storefront-nuxt';
+interface FetchSimilarProductsParams {
+    productId: number;
+    with?: ProductWith;
+    pricePromotionKey?: string;
+    where?: ProductSearchQuery;
+    limit?: number;
+    ignoreSameMasterKey?: boolean;
+}
+/**
+ * Retrieves similar products for a given product ID.
+ *
+ * @param options The options for retrieving similar products.
+ * @param options.productId The ID of the product to retrieve similar products for.
+ * @param options.with The 'with' parameter for including additional data.
+ * @param options.pricePromotionKey The price promotion key.
+ * @param options.where The where clause to filter the products.
+ * @params options.where.attributes The attributes to filter the products by.
+ * @param options.limit The limit of products to retrieve.
+ * @param options.ignoreSameMasterKey Whether to ignore products with the same master key.
+ * @param context The RPC context.
+ *
+ * @returns A Promise that resolves with an array of products.
+ */
+export declare const getSimilarProducts: RpcHandler<FetchSimilarProductsParams, Product[]>;
+export {};

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

@@ -0,0 +1,37 @@
+import {
+  ErrorResponse,
+  FetchError,
+  MINUTE,
+  MIN_WITH_PARAMS_PRODUCT
+} from "@scayle/storefront-nuxt";
+export const getSimilarProducts = async function getProductsByReferenceKeys(options, context) {
+  const { sapiClient, cached, withParams } = context;
+  const campaignKey = await context.callRpc?.("getCampaignKey");
+  const { productId, with: withParameter, ...rest } = options;
+  const fetch = async (productId2, params) => {
+    try {
+      return sapiClient.recommendations.getSimilarProducts(productId2, params);
+    } catch (e) {
+      if (e instanceof FetchError) {
+        const response = e.response;
+        return new ErrorResponse(
+          response.status,
+          response.statusText,
+          "Failed to fetch similar products"
+        );
+      }
+      throw e;
+    }
+  };
+  return await cached(
+    fetch,
+    {
+      cacheKeyPrefix: "getSimilarProducts-products",
+      ttl: 5 * MINUTE
+    }
+  )(productId, {
+    with: withParameter ?? withParams?.product ?? MIN_WITH_PARAMS_PRODUCT,
+    campaignKey,
+    ...rest
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.6.3",
+  "version": "1.8.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -28,7 +28,7 @@
     "#storefront-product-detail": "./dist/runtime/index.js"
   },
   "peerDependencies": {
-    "@nuxt/kit": ">=3.13.0",
+    "@nuxt/kit": ">=3.13.0 || >=4.2.0",
     "@scayle/storefront-nuxt": "^8.0.0",
     "@vueuse/core": "^12.8.2 || ^13.0.0 || ^14.0.0",
     "schema-dts": "^1.1.5",
@@ -40,26 +40,26 @@
     "@nuxt/kit": "3.20.0",
     "@nuxt/module-builder": "1.0.2",
     "@nuxt/schema": "3.20.0",
-    "@nuxt/test-utils": "3.21.0",
-    "@types/node": "22.19.3",
-    "@vitest/coverage-v8": "4.0.16",
+    "@nuxt/test-utils": "3.23.0",
+    "@types/node": "22.19.7",
+    "@vitest/coverage-v8": "4.0.17",
     "@vueuse/core": "14.1.0",
-    "dprint": "0.50.2",
+    "dprint": "0.51.1",
     "eslint-formatter-gitlab": "7.0.1",
     "eslint": "9.39.2",
-    "happy-dom": "20.0.11",
+    "happy-dom": "20.3.4",
     "nuxt": "3.20.0",
     "publint": "0.3.16",
     "schema-dts": "1.1.5",
     "typescript": "5.9.3",
     "unbuild": "3.6.1",
-    "vitest": "4.0.16",
+    "vitest": "4.0.17",
     "vue-router": "4.6.4",
-    "vue-tsc": "3.1.8",
+    "vue-tsc": "3.2.2",
     "vue": "3.5.26",
-    "@scayle/eslint-config-storefront": "4.7.18",
-    "@scayle/storefront-nuxt": "8.57.2",
-    "@scayle/vitest-config-storefront": "1.0.0"
+    "@scayle/vitest-config-storefront": "1.0.0",
+    "@scayle/eslint-config-storefront": "4.7.21",
+    "@scayle/storefront-nuxt": "8.59.0"
   },
   "scripts": {
     "build": "nuxt-module-build build",