@scayle/storefront-product-detail 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @scayle/storefront-product-detail
 
+## 1.4.0
+
+### Minor Changes
+
+- **\[PDP\]** Added `generateProductHreflangLinks` utils to generate hreflang links for a product for all shops.
+- **\[PDP\]** Added RPC method `getAllShopProductsForId` and the composable `useAllShopProductsForId` for product detail page to fetch product for all shops. This is used to generate hreflang links for the product for all shops.
+
 ## 1.3.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@scayle/storefront-product-detail",
   "configKey": "product-detail",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "compatibility": {
     "bridge": false,
     "nuxt": ">=3.13"

package/dist/module.mjs

@@ -1,7 +1,7 @@
-import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, resolvePath, addImportsDir } from '@nuxt/kit';
 
 const PACKAGE_NAME = "@scayle/storefront-product-detail";
-const PACKAGE_VERSION = "1.3.0";
+const PACKAGE_VERSION = "1.4.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,
@@ -17,6 +17,12 @@ const module = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     nuxt.options.alias["#storefront-product-detail"] = resolve("./runtime");
     nuxt.options.build.transpile.push("#storefront-product-detail/runtime");
+    nuxt.hook("storefront:custom-rpc:extend", async (customRpcs) => {
+      customRpcs.push({
+        source: await resolvePath("./runtime/rpc/methods/products"),
+        names: ["getAllShopProductsForId"]
+      });
+    });
     if (options.autoImports) {
       addImportsDir(resolve("./runtime/composables"));
       addImportsDir(resolve("./runtime/utils"));

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

@@ -0,0 +1,4 @@
+import type { KeysOf, NormalizedRpcResponse, UseRpcReturn } from '@scayle/storefront-nuxt/composables';
+import type { MaybeRefOrGetter } from 'vue';
+import type { RpcMethodParameters } from '@scayle/storefront-nuxt';
+export declare function useAllShopProductsById<DataT = NormalizedRpcResponse<'getAllShopProductsForId'>, PickKeys extends KeysOf<DataT> = KeysOf<DataT>, DefaultT = null>(params: MaybeRefOrGetter<RpcMethodParameters<'getAllShopProductsForId'>>, key?: string): UseRpcReturn<'getAllShopProductsForId', DataT, PickKeys, DefaultT>;

package/dist/runtime/composables/useAllShopProductsForId.js

@@ -0,0 +1,8 @@
+import { useRpc } from "@scayle/storefront-nuxt/composables";
+export function useAllShopProductsById(params, key = "useAllShopProductsById") {
+  return useRpc(
+    "getAllShopProductsForId",
+    key,
+    params
+  );
+}

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

@@ -0,0 +1,16 @@
+import type { FetchProductParams, Product, RpcHandler, ShopConfig } from '@scayle/storefront-nuxt';
+type ShopProduct = Pick<ShopConfig, 'locale' | 'path'> & {
+    product: Product;
+};
+/**
+ * Fetches all shop products for a given product ID.
+ *
+ * This function retrieves all products from all shops in the runtime configuration.
+ * It uses the SAPI client to fetch the product details for each shop.
+ *
+ * @param options - The parameters for fetching the product.
+ *
+ * @returns An array of objects containing the products for each shop.
+ */
+export declare const getAllShopProductsForId: RpcHandler<Pick<FetchProductParams, 'id' | 'with'>, ShopProduct[]>;
+export {};

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

@@ -0,0 +1,32 @@
+export const getAllShopProductsForId = async function getAllShopProductsForId2(options, context) {
+  const { runtimeConfiguration, sapiClient, log, cached } = context;
+  const fetchAllProducts = async () => {
+    const products = [];
+    const shops = Object.values(
+      runtimeConfiguration.storefront.shops
+    );
+    await Promise.all(
+      shops.map(async (shop) => {
+        try {
+          const product = await sapiClient.clone({ shopId: shop.shopId }).products.getById(options.id, {
+            with: options.with
+          });
+          products.push({
+            locale: shop.locale,
+            path: Array.isArray(shop.path) ? shop.path[0] : shop.path,
+            product
+          });
+        } catch (error) {
+          log.error(error instanceof Error ? error : String(error));
+        }
+      })
+    );
+    return products;
+  };
+  const result = await cached(fetchAllProducts, {
+    cacheKeyPrefix: `getAllShopProductsForId-${options.id}`,
+    ttl: 12 * 60 * 60
+    // 12 hours
+  })();
+  return result;
+};

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

@@ -1,5 +1,9 @@
-import type { Variant } from '@scayle/storefront-nuxt';
+import type { ShopConfig, Variant } from '@scayle/storefront-nuxt';
 import type { Product, WithContext, ProductGroup } from 'schema-dts';
+import type { MaybeRefOrGetter } from 'vue';
+type ShopProductHref = Pick<ShopConfig, 'locale' | 'path'> & {
+    productHref: string;
+};
 /**
  * Generates an object following the schema.org `Product` type with context.
  *
@@ -45,3 +49,17 @@ export declare const generateProductGroupSchema: ({ productId, name, description
     variants: Product[];
     variesBy?: ProductGroup["variesBy"];
 }) => WithContext<ProductGroup>;
+/**
+ * Generates hreflang links for a product.
+ *
+ * @param _productsForAllShops - A list of product links for all shops.
+ * @param defaultLocale - The default locale of the store.
+ *
+ * @returns An array of hreflang links.
+ */
+export declare const generateProductHreflangLinks: (_productsForAllShops: MaybeRefOrGetter<ShopProductHref[]>, defaultLocale: string) => {
+    rel: string;
+    hreflang: string;
+    href: string;
+}[];
+export {};

package/dist/runtime/utils/seo.js

@@ -1,4 +1,5 @@
 import { isInStock } from "@scayle/storefront-nuxt";
+import { toValue } from "vue";
 const generateSchemaProductOffer = ({
   variant,
   baseUrl
@@ -56,3 +57,26 @@ export const generateProductGroupSchema = ({
     ...variesBy ? { variesBy } : {}
   };
 };
+export const generateProductHreflangLinks = (_productsForAllShops, defaultLocale) => {
+  const productsForAllShops = toValue(_productsForAllShops);
+  if (!productsForAllShops) {
+    return [];
+  }
+  return productsForAllShops.flatMap(({ productHref, path, locale }) => {
+    const links = [
+      {
+        rel: "alternate",
+        hreflang: locale,
+        href: productHref
+      }
+    ];
+    if (path === defaultLocale) {
+      links.push({
+        rel: "alternate",
+        hreflang: "x-default",
+        href: productHref
+      });
+    }
+    return links;
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -37,9 +37,9 @@
     "lint:fix": "eslint . --fix",
     "format": "dprint check",
     "format:fix": "dprint fmt",
-    "test": "vitest --run --passWithNoTests",
-    "test:watch": "vitest --passWithNoTests",
-    "test:ci": "vitest --run --passWithNoTests --coverage --reporter=default --reporter=junit --outputFile=./coverage/junit.xml",
+    "test": "vitest --run",
+    "test:watch": "vitest",
+    "test:ci": "vitest --run --coverage --reporter=default --reporter=junit --outputFile=./coverage/junit.xml",
     "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
     "package:lint": "publint",
     "verify-packaging": "attw --pack . --profile esm-only"
@@ -54,28 +54,28 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "0.18.0",
+    "@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.1",
-    "@scayle/storefront-nuxt": "8.25.3",
-    "@types/node": "22.15.17",
+    "@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.1.0",
-    "dprint": "0.49.1",
+    "@vueuse/core": "13.2.0",
+    "dprint": "0.50.0",
     "eslint-formatter-gitlab": "6.0.0",
-    "eslint": "9.26.0",
-    "happy-dom": "17.4.6",
+    "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.3",
+    "vitest": "3.1.4",
     "vue-router": "4.5.1",
     "vue-tsc": "2.2.10",
-    "vue": "3.5.13"
+    "vue": "3.5.14"
   }
 }