@scayle/storefront-product-detail 1.4.2 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @scayle/storefront-product-detail
 
+## 1.5.1
+
+### Patch Changes
+
+- Added a runtime configuration option to control how many recently viewed products are kept.
+
+  To configure the maximum number of recently viewed products, add the following to the `public` section of your `runtimeConfig` in `nuxt.config.ts`:
+
+  ```ts
+  export default defineNuxtConfig({
+    modules: ['@scayle/storefront-product-detail'],
+    runtimeConfig: {
+      public: {
+        'product-detail': {
+          maxRecentlyViewedProducts: 15,
+        },
+      },
+    },
+  })
+  ```
+
+## 1.5.0
+
+### Minor Changes
+
+- Added `useRecentlyViewedProducts` composable. This composable tracks a short history of products a customer has previously viewed using local storage. It maintains up to 10 recently viewed products and provides methods to add new products and fetch their full details.
+
+  Example usage:
+
+  ```ts
+  import { useRecentlyViewedProducts } from '#storefront-product-detail/composables'
+
+  const { products, addProduct, loadMissingProducts } =
+    useRecentlyViewedProducts()
+
+  onBeforeMount(async () => {
+    addProductId(1234)
+    await loadMissingProducts()
+  })
+  ```
+
 ## 1.4.2
 
 ### Patch Changes
@@ -81,7 +122,7 @@
 
 ### Patch Changes
 
-- Use absolute URL's inproduct breadcrumbs JSONLD returned by `useProductSeoData`
+- Use absolute URL's in product breadcrumbs JSONLD returned by `useProductSeoData`
 
 ## 1.1.3
 

package/dist/module.d.mts

@@ -3,6 +3,13 @@ import * as _nuxt_schema from '@nuxt/schema';
 interface ModuleOptions {
     autoImports?: boolean;
 }
+declare module '@nuxt/schema' {
+    interface PublicRuntimeConfig {
+        'product-detail': {
+            maxRecentlyViewedProducts?: number;
+        };
+    }
+}
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };

package/dist/module.json

@@ -1,13 +1,13 @@
 {
   "name": "@scayle/storefront-product-detail",
   "configKey": "product-detail",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"
   },
   "builder": {
-    "@nuxt/module-builder": "1.0.1",
-    "unbuild": "3.5.0"
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.0"
   }
 }

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.4.2";
+const PACKAGE_VERSION = "1.5.1";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,
@@ -17,6 +17,8 @@ const module = defineNuxtModule({
     const { resolve, resolvePath } = createResolver(import.meta.url);
     nuxt.options.alias["#storefront-product-detail"] = resolve("./runtime");
     nuxt.options.build.transpile.push("#storefront-product-detail/runtime");
+    nuxt.options.runtimeConfig.public["product-detail"] ??= {};
+    nuxt.options.runtimeConfig.public["product-detail"].maxRecentlyViewedProducts ??= 10;
     nuxt.hook("storefront:custom-rpc:extend", async (customRpcs) => {
       customRpcs.push({
         source: await resolvePath("./runtime/rpc/methods/products"),

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

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

package/dist/runtime/composables/index.js

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

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

@@ -0,0 +1,50 @@
+import type { Product, ProductWith } from '@scayle/storefront-nuxt';
+import type { AsyncDataRequestStatus } from 'nuxt/app';
+import type { Ref } from 'vue';
+interface UseRecentlyViewedProductsReturn {
+    /** A reactive array of the fetched, full Product objects. */
+    products: Ref<Product[]>;
+    /** A reactive flag indicating if the product data is being fetched. */
+    loading: Ref<boolean>;
+    /** A reactive container for any errors that occur during fetching. */
+    error: Ref<Error | undefined>;
+    /** A string indicating the status of the data request */
+    status: Ref<AsyncDataRequestStatus>;
+    /**
+     * Adds a product id to the list of recently viewed products and persists it to local storage.
+     *
+     * Because this function uses local storage, it is not available on the server.
+     *
+     * @throws Error if the function is called on the server.
+     *
+     * @param productId - The id of the product to add to the list of recently viewed products.
+     */
+    addProductId: (productId: number) => void;
+    /**
+     * Loads products based on the product ids previously added.
+     * Initially all products within the persisted list are loaded. Subsequent calls only load products that are not already loaded.
+     *
+     * Because this function uses local storage, it is not available on the server.
+     *
+     * @throws Error if the function is called on the server.
+     *
+     * @returns A promise that resolves when the products have been loaded.
+     */
+    loadMissingProducts: () => Promise<void>;
+}
+/**
+ * This composable can be used to track a short history of products a customer has previously viewed using local storage.
+ * It maintains up to 10 recently viewed products and provides methods to add new products and fetch their full details.
+ *
+ * @param options An object containing parameters and options for the loading the products.
+ * @param options.with The fields to include in the response.
+ * @param options.pricePromotionKey The price promotion key.
+ *
+ * @returns An object containing the recently viewed products list, loading state, error and status information.
+ */
+interface UseRecentlyViewedProductsOptions {
+    pricePromotionKey?: string;
+    with?: ProductWith;
+}
+export declare function useRecentlyViewedProducts(options?: UseRecentlyViewedProductsOptions): UseRecentlyViewedProductsReturn;
+export {};

package/dist/runtime/composables/useRecentlyViewedProducts.js

@@ -0,0 +1,90 @@
+import { useCurrentShop, useRpcCall } from "@scayle/storefront-nuxt/composables";
+import { useLocalStorage } from "@vueuse/core";
+import { useState, useRuntimeConfig } from "nuxt/app";
+export function useRecentlyViewedProducts(options) {
+  const shop = useCurrentShop();
+  const maxRecentlyViewedProducts = useRuntimeConfig().public["product-detail"].maxRecentlyViewedProducts ?? 10;
+  const recentlyViewedProductsIds = useLocalStorage(
+    `${shop.value.shopId}-recently-viewed-products`,
+    []
+  );
+  const fetchProductsRpc = useRpcCall("getProductsByIds");
+  const loading = useState("recently-viewed-products-loading", () => false);
+  const error = useState("recently-viewed-products-error");
+  const status = useState(
+    "recently-viewed-products-status",
+    () => "idle"
+  );
+  const products = useState("recently-viewed-products", () => []);
+  const addProductId = (productId) => {
+    if (import.meta.server) {
+      throw new Error(
+        "useRecentlyViewedProducts uses local storage. addProductId is therefore not available on the server."
+      );
+    }
+    const productIds = [...recentlyViewedProductsIds.value];
+    if (productIds.includes(productId)) {
+      productIds.splice(productIds.indexOf(productId), 1);
+    }
+    productIds.unshift(productId);
+    if (productIds.length > maxRecentlyViewedProducts) {
+      productIds.pop();
+    }
+    recentlyViewedProductsIds.value = productIds;
+  };
+  const loadMissingProducts = async () => {
+    if (import.meta.server) {
+      throw new Error(
+        "useRecentlyViewedProducts uses local storage. fetchProducts is therefore not available on the server."
+      );
+    }
+    loading.value = true;
+    status.value = "pending";
+    try {
+      const loadedProductIds = new Set(
+        products.value.map((product) => product.id)
+      );
+      const missingProductIds = recentlyViewedProductsIds.value.filter(
+        (id) => !loadedProductIds.has(id)
+      );
+      if (missingProductIds.length > 0) {
+        const result = await fetchProductsRpc({
+          ids: missingProductIds,
+          with: options?.with,
+          pricePromotionKey: options?.pricePromotionKey
+        });
+        products.value.push(...result);
+      }
+      const sortOrderMap = new Map(
+        recentlyViewedProductsIds.value.map(
+          (id, index) => [id, index]
+        )
+      );
+      products.value = products.value.sort((a, b) => {
+        const aIndex = sortOrderMap.get(a.id);
+        const bIndex = sortOrderMap.get(b.id);
+        if (aIndex === void 0) {
+          return 1;
+        }
+        if (bIndex === void 0) {
+          return -1;
+        }
+        return aIndex - bIndex;
+      }).slice(0, maxRecentlyViewedProducts);
+      status.value = "success";
+    } catch (e) {
+      error.value = e;
+      status.value = "error";
+    } finally {
+      loading.value = false;
+    }
+  };
+  return {
+    addProductId,
+    loadMissingProducts,
+    products,
+    loading,
+    error,
+    status
+  };
+}

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

@@ -1,4 +1,5 @@
-export const getAllShopProductsForId = async function getAllShopProductsForId2(options, context) {
+import { defineRpcHandler } from "@scayle/storefront-nuxt";
+export const getAllShopProductsForId = defineRpcHandler(async (options, context) => {
   const { runtimeConfiguration, sapiClient, log, cached } = context;
   const fetchAllProducts = async () => {
     const products = [];
@@ -29,4 +30,4 @@ export const getAllShopProductsForId = async function getAllShopProductsForId2(o
     // 12 hours
   })();
   return result;
-};
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.4.2",
+  "version": "1.5.1",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -27,11 +27,44 @@
   "imports": {
     "#storefront-product-detail": "./dist/runtime/index.js"
   },
+  "peerDependencies": {
+    "@nuxt/kit": ">=3.13.0",
+    "@scayle/storefront-nuxt": "^8.0.0",
+    "@vueuse/core": "^12.8.2 || ^13.0.0",
+    "schema-dts": "^1.1.5",
+    "vue-router": "^4.5.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "0.18.2",
+    "@nuxt/kit": "3.17.7",
+    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/schema": "3.17.7",
+    "@nuxt/test-utils": "3.19.2",
+    "@types/node": "22.16.5",
+    "@vitest/coverage-v8": "3.2.4",
+    "@vueuse/core": "13.6.0",
+    "dprint": "0.50.1",
+    "eslint-formatter-gitlab": "6.0.1",
+    "eslint": "9.32.0",
+    "happy-dom": "18.0.1",
+    "nuxt": "3.17.7",
+    "publint": "0.3.12",
+    "schema-dts": "1.1.5",
+    "typescript": "5.8.3",
+    "unbuild": "3.6.0",
+    "vitest": "3.2.4",
+    "vue-router": "4.5.1",
+    "vue-tsc": "3.0.4",
+    "vue": "3.5.18",
+    "@scayle/eslint-config-storefront": "4.7.2",
+    "@scayle/storefront-nuxt": "8.38.4"
+  },
   "scripts": {
     "build": "nuxt-module-build build",
-    "dev": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "prep": "nuxt-module-build prepare && nuxi prepare playground",
+    "dev": "nuxt dev playground",
+    "dev:build": "nuxt build playground",
+    "prep": "nuxt-module-build prepare && nuxt prepare playground",
     "lint": "eslint .",
     "lint:ci": "eslint . --format gitlab",
     "lint:fix": "eslint . --fix",
@@ -43,39 +76,5 @@
     "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
     "package:lint": "publint",
     "verify-packaging": "attw --pack . --profile esm-only"
-  },
-  "peerDependencies": {
-    "@nuxt/kit": ">=3.13.0",
-    "@scayle/storefront-nuxt": "^8.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^12.8.2 || ^13.0.0",
-    "schema-dts": "^1.1.5",
-    "vue-router": "^4.5.0",
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@arethetypeswrong/cli": "0.18.1",
-    "@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.2",
-    "@scayle/storefront-nuxt": "8.27.0",
-    "@types/node": "22.15.21",
-    "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.2.0",
-    "dprint": "0.50.0",
-    "eslint-formatter-gitlab": "6.0.0",
-    "eslint": "9.27.0",
-    "happy-dom": "17.4.7",
-    "nuxt": "3.16.2",
-    "publint": "0.2.12",
-    "schema-dts": "1.1.5",
-    "typescript": "5.8.3",
-    "unbuild": "3.5.0",
-    "vitest": "3.1.4",
-    "vue-router": "4.5.1",
-    "vue-tsc": "2.2.10",
-    "vue": "3.5.14"
   }
-}
+}