@scayle/storefront-product-detail 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @scayle/storefront-product-detail
 
+## 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.3.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';
 
 const PACKAGE_NAME = "@scayle/storefront-product-detail";
-const PACKAGE_VERSION = "1.2.0";
+const PACKAGE_VERSION = "1.3.0";
 const module = defineNuxtModule({
   meta: {
     name: PACKAGE_NAME,

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/utils/seo.d.ts

@@ -3,22 +3,43 @@ import type { Product, WithContext, ProductGroup } from 'schema-dts';
 /**
  * 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[];

package/dist/runtime/utils/seo.js

@@ -20,6 +20,7 @@ export const generateProductSchema = ({
   productName,
   variant,
   url,
+  image,
   size
 }) => {
   return {
@@ -27,14 +28,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 +47,6 @@ export const generateProductGroupSchema = ({
     productGroupID: productId,
     name: `${name}, ${color}`,
     description,
-    image: images,
     brand: {
       "@type": "Brand",
       name: brandName

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "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",
@@ -54,28 +54,28 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@arethetypeswrong/cli": "0.17.4",
-    "@nuxt/kit": "3.15.4",
+    "@arethetypeswrong/cli": "0.18.0",
+    "@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.1",
+    "@scayle/storefront-nuxt": "8.25.3",
+    "@types/node": "22.15.17",
     "@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",
+    "eslint-formatter-gitlab": "6.0.0",
+    "eslint": "9.26.0",
+    "happy-dom": "17.4.6",
+    "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",
+    "unbuild": "3.5.0",
+    "vitest": "3.1.3",
+    "vue-router": "4.5.1",
+    "vue-tsc": "2.2.10",
     "vue": "3.5.13"
   }
 }