@scayle/storefront-product-detail 1.2.0 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # @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
+
+- **\[SEO\]** Moved the product image from the `ProductGroup` JSONLD to the `Product` JSONLD to better align with [Google's recommendation](https://developers.google.com/search/docs/appearance/structured-data/merchant-listing).
+
+  Instead of passing all product images to `useProductSeoData`, the primary product image is expected to be included in the passed `variants`.
+
+  ```ts
+  useProductSeoData({
+    name: 'Name',
+    brand: 'Brand',
+    productDescription: 'Description',
+    variants: variants.value.map((variant) => {
+      return generateProductSchema({
+        productName: 'Name',
+        variant,
+        url: `${$config.public.baseUrl}${route.fullPath}`,
+        size,
+      })
+    }),
+    images: images.value,
+    productId: product.value?.id || 0,
+    color: formatColors(colors.value),
+    variesBy: variants.value.length > 1
+      ? ['https://schema.org/size']
+      : undefined,
+  })
+
+  // Will become
+
+  useProductSeoData({
+    name: 'Name',
+    brand: 'Brand',
+    productDescription: 'Description',
+    variants: variants.value.map((variant) => {
+      return generateProductSchema({
+        productName: 'Name',
+        variant,
+        url: `${$config.public.baseUrl}${route.fullPath}`,
+        size,
+        images: images.value[0],
+      })
+    }),
+    productId: product.value?.id || 0,
+    color: formatColors(colors.value),
+    variesBy: variants.value.length > 1
+      ? ['https://schema.org/size']
+      : undefined,
+  })
+  ```
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/module.json

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

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.2.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/composables/useProductSeoData.d.ts

@@ -16,8 +16,6 @@ interface ProductInfo {
     color: string;
     /** Array of product variants. */
     variants: WithContext<Product>[];
-    /** Array of image URLs for the product. */
-    images: string[];
     variesBy?: ProductGroup['variesBy'];
 }
 export interface UseProductSeoDataReturn {

package/dist/runtime/composables/useProductSeoData.js

@@ -19,7 +19,6 @@ export function useProductSeoData(breadcrumbs, urlParams, productInfo) {
       productId: info.productId.toString(),
       name: info.name,
       description: info.productDescription,
-      images: info.images,
       brandName: info.brand,
       color: info.color,
       variants: info.variants,

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,26 +1,65 @@
-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.
  *
+ * @param params - Options for generating the schema product.
+ * @param params.productName - Name of the product.
+ * @param params.variant - Variant of the product.
+ * @param params.url - URL of the product.
+ * @param params.image - URL of the product image.
+ * @param params.size - Size of the product.
+ *
  * @see https://schema.org/Product Used to specify `@type` of the returned schema.
  * @see https://schema.org/Brand Used to define schema of `brand`.
  *
  * @returns An object following the schema.org `Product` type with context.
  */
-export declare const generateProductSchema: ({ productName, variant, url, size, }: {
+export declare const generateProductSchema: ({ productName, variant, url, image, size, }: {
     productName: string;
     variant: Variant;
     url: string;
+    image: string;
     size?: string;
 }) => WithContext<Product>;
-export declare const generateProductGroupSchema: ({ productId, name, description, images, brandName, color, variants, variesBy, }: {
+/**
+ * Generates an object following the schema.org `ProductGroup` type with context.
+ *
+ * @param params - Options for generating the schema product group.
+ * @param params.productId - ID of the product group.
+ * @param params.name - Name of the product group.
+ * @param params.description - Description of the product group.
+ * @param params.brandName - Name of the brand.
+ * @param params.color - Color of the product group.
+ * @param params.variants - Variants of the product group.
+ * @param params.variesBy - Varies by of the product group.
+ *
+ * @returns An object following the schema.org `ProductGroup` type with context.
+ */
+export declare const generateProductGroupSchema: ({ productId, name, description, brandName, color, variants, variesBy, }: {
     productId: string;
     name: string;
     description: string;
-    images: string[];
     brandName: string;
     color: string;
     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
@@ -20,6 +21,7 @@ export const generateProductSchema = ({
   productName,
   variant,
   url,
+  image,
   size
 }) => {
   return {
@@ -27,14 +29,14 @@ export const generateProductSchema = ({
     "@type": "Product",
     name: `${productName} (${size})`,
     size,
-    offers: generateSchemaProductOffer({ variant, baseUrl: url })
+    offers: generateSchemaProductOffer({ variant, baseUrl: url }),
+    image
   };
 };
 export const generateProductGroupSchema = ({
   productId,
   name,
   description,
-  images,
   brandName,
   color,
   variants,
@@ -46,7 +48,6 @@ export const generateProductGroupSchema = ({
     productGroupID: productId,
     name: `${name}, ${color}`,
     description,
-    image: images,
     brand: {
       "@type": "Brand",
       name: brandName
@@ -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.2.0",
+  "version": "1.4.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -31,15 +31,15 @@
     "build": "nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "prep": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "prep": "nuxt-module-build prepare && nuxi prepare playground",
     "lint": "eslint .",
     "lint:ci": "eslint . --format gitlab",
     "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.17.4",
-    "@nuxt/kit": "3.15.4",
+    "@arethetypeswrong/cli": "0.18.1",
+    "@nuxt/kit": "3.16.2",
     "@nuxt/module-builder": "1.0.1",
-    "@nuxt/schema": "3.15.4",
-    "@nuxt/test-utils": "3.17.2",
-    "@scayle/eslint-config-storefront": "4.5.0",
-    "@scayle/storefront-nuxt": "8.24.0",
-    "@types/node": "22.14.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.1.0",
-    "dprint": "0.49.1",
-    "eslint-formatter-gitlab": "5.1.0",
-    "eslint": "9.24.0",
-    "happy-dom": "17.4.4",
-    "nuxt": "3.15.4",
+    "@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": "2.0.0",
-    "vitest": "3.1.1",
-    "vue-router": "4.5.0",
-    "vue-tsc": "2.2.8",
-    "vue": "3.5.13"
+    "unbuild": "3.5.0",
+    "vitest": "3.1.4",
+    "vue-router": "4.5.1",
+    "vue-tsc": "2.2.10",
+    "vue": "3.5.14"
   }
 }