@scayle/storefront-product-detail 0.1.0 → 0.1.1

package/dist/module.mjs

@@ -16,6 +16,7 @@ const module = defineNuxtModule({
     nuxt.options.alias["#storefront-product-detail"] = resolve("./runtime");
     nuxt.options.build.transpile.push("#storefront-product-detail/runtime");
     if (options.autoImports) {
+      addImportsDir(resolve("./runtime/composables"));
       addImportsDir(resolve("./runtime/utils"));
     }
   }

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

@@ -0,0 +1,42 @@
+import { type ComputedRef } from 'vue';
+import type { BreadcrumbItem, Variant } from '@scayle/storefront-nuxt';
+import type { WithContext, Product, BreadcrumbList } from 'schema-dts';
+type CanonicalLink = Record<'rel' | 'key' | 'href', string>;
+interface UrlParams {
+    baseUrl: string;
+    fullPath: string;
+}
+interface ProductInfo {
+    name: string;
+    brand: string;
+    productDescription: string;
+    variants: Variant[];
+}
+interface UseProductSeoDataReturn {
+    robots: string;
+    canonicalLink: ComputedRef<CanonicalLink[]>;
+    title: string;
+    productJsonLd: ComputedRef<WithContext<Product>>;
+    productBreadcrumbJsonLd: ComputedRef<WithContext<BreadcrumbList>>;
+}
+/**
+ * Composable function to generate SEO-related data for a product page.
+ *
+ * @param {BreadcrumbItem[]} breadcrumbs - Array of breadcrumb items representing the navigation path to the product.
+ * @param {UrlParams} urlParams - Object containing baseUrl and fullPath to build and sanitize canonicalUrl.
+ * @param {string[]} images - Array of image URLs for the product.
+ * @param {ProductInfo} productInfo - Object containing product information including name, brand, description, and variants.
+ * @property {string} name - The name of the product.
+ * @property {string} brand - The brand of the product.
+ * @property {string} productDescription - A description of the product.
+ * @property {Variant[]} variants - Array of product variants.
+ *
+ * @returns {UseProductSeoDataReturn} An object containing SEO data for the product page with following properties:
+ * @property {string} robots - Robots meta tag value, typically "index, follow".
+ * @property {ComputedRef<CanonicalLink[]>} canonicalLink - Computed ref for canonical link tag metadata.
+ * @property {string} title - The title of the product.
+ * @property {ComputedRef<WithContext<Product>>} productJsonLd - Computed ref containing JSON-LD structured data for the product.
+ * @property {ComputedRef<WithContext<BreadcrumbList>>} productBreadcrumbJsonLd - Computed ref containing JSON-LD structured data for product breadcrumbs.
+ */
+export declare function useProductSeoData(breadcrumbs: BreadcrumbItem[], urlParams: UrlParams, images: string[], productInfo: ProductInfo): UseProductSeoDataReturn;
+export {};

package/dist/runtime/composables/useProductSeoData.js

@@ -0,0 +1,36 @@
+import { computed } from "vue";
+import {
+  generateCategoryBreadcrumbSchema,
+  sanitizeCanonicalURL
+} from "@scayle/storefront-nuxt";
+import { generateProductSchema } from "~/src/runtime/utils/seo";
+export function useProductSeoData(breadcrumbs, urlParams, images, productInfo) {
+  const canonicalUrl = computed(() => {
+    const url = `${urlParams.baseUrl}${urlParams.fullPath}`;
+    return sanitizeCanonicalURL(url, []);
+  });
+  const canonicalLink = computed(() => {
+    return [{ rel: "canonical", key: "canonical", href: canonicalUrl.value }];
+  });
+  const robots = "index, follow";
+  const productJsonLd = computed(() => {
+    return generateProductSchema({
+      productName: productInfo.name || "",
+      brandName: productInfo.brand || "",
+      url: canonicalUrl.value,
+      variants: productInfo.variants || [],
+      images,
+      description: productInfo.productDescription
+    });
+  });
+  const productBreadcrumbJsonLd = computed(() => {
+    return generateCategoryBreadcrumbSchema(breadcrumbs);
+  });
+  return {
+    robots,
+    canonicalLink,
+    title: productInfo.name,
+    productJsonLd,
+    productBreadcrumbJsonLd
+  };
+}

package/dist/runtime/composables/useProductSeoData.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/composables/useProductSeoData.test.js

@@ -0,0 +1,68 @@
+import { describe, it, expect } from "vitest";
+import { useProductSeoData } from "~/src/runtime";
+import { variantFactory } from "@scayle/storefront-nuxt/dist/test/factories";
+describe("useProductSeoData", () => {
+  it("should return product seo data from product", () => {
+    const {
+      title,
+      productBreadcrumbJsonLd,
+      productJsonLd,
+      robots,
+      canonicalLink
+    } = useProductSeoData(
+      [{ value: "value", to: "/" }],
+      { baseUrl: "baseUrl", fullPath: "fullPath" },
+      [],
+      {
+        name: "name",
+        variants: [variantFactory.build({ id: 1 })],
+        brand: "brand",
+        productDescription: "description"
+      }
+    );
+    expect(title).toBe("name");
+    expect(productBreadcrumbJsonLd.value).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "item": "/",
+          "name": "value",
+          "position": 1
+        }
+      ]
+    });
+    expect(productJsonLd.value).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "Product",
+      "brand": {
+        "@type": "Brand",
+        "name": "brand"
+      },
+      "description": "description",
+      "image": [],
+      "name": "name",
+      "offers": [
+        {
+          "@type": "Offer",
+          "availability": "https://schema.org/InStock",
+          "itemCondition": "https://schema.org/NewCondition",
+          "mpn": void 0,
+          "price": 1,
+          "priceCurrency": "USD",
+          "sku": "1"
+        }
+      ],
+      "url": "baseUrlfullPath"
+    });
+    expect(robots).toBe("index, follow");
+    expect(canonicalLink.value).toStrictEqual([
+      {
+        "href": "baseUrlfullPath",
+        "key": "canonical",
+        "rel": "canonical"
+      }
+    ]);
+  });
+});

package/dist/runtime/index.d.ts

@@ -1 +1,3 @@
+export * from './composables/useProductSeoData.js';
 export * from './utils/product.js';
+export * from './utils/attribute.js';

package/dist/runtime/index.js

@@ -1 +1,3 @@
+export * from "./composables/useProductSeoData.js";
 export * from "./utils/product.js";
+export * from "./utils/attribute.js";

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

@@ -0,0 +1,2 @@
+import type { Attributes } from '@scayle/storefront-nuxt';
+export declare const getFilteredAttributeGroups: (attributes: Attributes, filterTypes: string[]) => Map<string, string[]>;

package/dist/runtime/utils/attribute.js

@@ -0,0 +1,19 @@
+const getFormattedLabel = (attributeGroup) => {
+  if (!attributeGroup) {
+    return [];
+  }
+  const attributeGroupValues = Array.isArray(attributeGroup.values) ? attributeGroup.values : [attributeGroup.values];
+  return attributeGroupValues.map(
+    (value) => attributeGroup.type === "extras" ? value.label : `${attributeGroup.label}: ${value.label}`
+  );
+};
+export const getFilteredAttributeGroups = (attributes, filterTypes) => {
+  return Object.values(attributes).filter(
+    (attribute) => attribute?.type && filterTypes.includes(attribute.type)
+  ).reduce((map, attributeValue) => {
+    const key = attributeValue?.type || "";
+    const value = getFormattedLabel(attributeValue);
+    map.set(key, (map.get(key) || []).concat(value));
+    return map;
+  }, /* @__PURE__ */ new Map());
+};

package/dist/runtime/utils/attribute.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/attribute.test.js

@@ -0,0 +1,39 @@
+import { it, describe, expect } from "vitest";
+import { attributeGroupFactory } from "@scayle/storefront-nuxt/dist/test/factories";
+import { getFilteredAttributeGroups } from "./attribute.js";
+describe("attribute", () => {
+  describe("getFilteredAttributeGroups", () => {
+    it("should return correct filtered and formatted attributes", () => {
+      const attributes = {
+        design: attributeGroupFactory.build({
+          type: "design",
+          label: "Jackenart",
+          values: { id: 2534, label: "Bomberjacke", value: "bomberjacke" }
+        }),
+        extras: attributeGroupFactory.build({
+          label: "Extras",
+          type: "extras",
+          multiSelect: true,
+          values: [
+            { id: 2427, label: "Weicher Griff", value: "weicher_griff" },
+            { id: 2435, label: "Ton-in-Ton-N\xE4hte", value: "tonintonnhte" },
+            { id: 2438, label: "Label-Stickerei", value: "labelstickerei" }
+          ]
+        })
+      };
+      const formattedAttributes = getFilteredAttributeGroups(
+        attributes,
+        ["design", "extras"]
+      );
+      expect(formattedAttributes).toHaveLength(2);
+      expect(formattedAttributes.get("design")).toStrictEqual([
+        "Jackenart: Bomberjacke"
+      ]);
+      expect(formattedAttributes.get("extras")).toStrictEqual([
+        "Weicher Griff",
+        "Ton-in-Ton-N\xE4hte",
+        "Label-Stickerei"
+      ]);
+    });
+  });
+});

package/dist/runtime/utils/product.test.js

@@ -1,6 +1,6 @@
 import { it, describe } from "vitest";
 import { getCombineWithProductIds } from "~/src/runtime/utils/product";
-import { advancedAttributeFactory } from "@scayle/storefront-nuxt";
+import { advancedAttributeFactory } from "@scayle/storefront-nuxt/dist/test/factories";
 describe("getCombineWithProductIds", () => {
   it("should return productIds from data", ({ expect }) => {
     const combineWithAttribute = advancedAttributeFactory.build({

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

@@ -0,0 +1,10 @@
+import type { Variant } from '@scayle/storefront-nuxt';
+import type { Product, WithContext } from 'schema-dts';
+export declare const generateProductSchema: ({ productName, brandName, variants, url, images, description, }: {
+    productName: string;
+    brandName: string;
+    variants: Variant[];
+    url: string;
+    description: string;
+    images?: string[];
+}) => WithContext<Product>;

package/dist/runtime/utils/seo.js

@@ -0,0 +1,38 @@
+import { isInStock } from "@scayle/storefront-nuxt";
+const generateSchemaProductOffers = ({
+  variants
+}) => {
+  return variants.map((variant) => ({
+    "@type": "Offer",
+    mpn: variant.referenceKey,
+    sku: variant.id.toString(),
+    price: variant.price.withTax / 100,
+    priceCurrency: variant.price.currencyCode,
+    availability: isInStock(variant) ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
+    itemCondition: "https://schema.org/NewCondition"
+  }));
+};
+export const generateProductSchema = ({
+  productName,
+  brandName,
+  variants,
+  url,
+  images = [],
+  description
+}) => {
+  const offers = generateSchemaProductOffers({ variants });
+  const brand = {
+    "@type": "Brand",
+    name: brandName
+  };
+  return {
+    "@context": "https://schema.org",
+    "@type": "Product",
+    url,
+    name: productName,
+    image: images,
+    description,
+    brand,
+    offers
+  };
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/runtime/utils/seo.test.js

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import { generateProductSchema } from "~/src/runtime/utils/seo";
+import { variantFactory } from "@scayle/storefront-nuxt/dist/test/factories";
+describe("generateProductSchema", () => {
+  it("should return productSchema from product", () => {
+    const productSchema = generateProductSchema({
+      productName: "productName",
+      brandName: "brandName",
+      variants: [variantFactory.build({ id: 1 })],
+      url: "url",
+      images: [],
+      description: "description"
+    });
+    expect(productSchema).toStrictEqual({
+      "@context": "https://schema.org",
+      "@type": "Product",
+      "brand": {
+        "@type": "Brand",
+        "name": "brandName"
+      },
+      "description": "description",
+      "image": [],
+      "name": "productName",
+      "offers": [
+        {
+          "@type": "Offer",
+          "availability": "https://schema.org/InStock",
+          "itemCondition": "https://schema.org/NewCondition",
+          "mpn": void 0,
+          "price": 1,
+          "priceCurrency": "USD",
+          "sku": "1"
+        }
+      ],
+      "url": "url"
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -52,13 +52,13 @@
     "@nuxt/schema": "3.13.2",
     "@nuxt/test-utils": "3.14.4",
     "@scayle/eslint-config-storefront": "4.3.2",
-    "@scayle/storefront-nuxt": "7.94.0",
+    "@scayle/storefront-nuxt": "7.95.0",
     "@types/node": "22.9.0",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "11.2.0",
     "dprint": "0.47.5",
     "eslint": "9.14.0",
-    "happy-dom": "15.11.0",
+    "happy-dom": "15.11.4",
     "eslint-formatter-gitlab": "5.1.0",
     "nuxt": "3.13.2",
     "publint": "0.2.12",