@scayle/storefront-product-detail 0.3.0 → 0.4.0

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

@@ -8,6 +8,7 @@ interface ProductInfo {
     brand: string;
     productDescription: string;
     variants: Variant[];
+    images: string[];
 }
 export interface UseProductSeoDataReturn {
     title: ComputedRef<string>;
@@ -21,12 +22,12 @@ export interface UseProductSeoDataReturn {
  *
  * @param {MaybeRefOrGetter<BreadcrumbItem[]>} breadcrumbs - Array of breadcrumb items representing the navigation path to the product.
  * @param {MaybeRefOrGetter<UrlParams>} urlParams - Object containing baseUrl and fullPath to build and sanitize canonicalUrl.
- * @param {MaybeRefOrGetter<string[]>} images - Array of image URLs for the product.
  * @param {MaybeRefOrGetter<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.
+ * @property {string[]} images - Array of image URLs for the product.
  *
  * @returns {UseProductSeoDataReturn} An object containing SEO data for the product page with following properties:
  * @property {string} robots - Robots meta tag value, typically "index, follow".
@@ -35,5 +36,5 @@ export interface UseProductSeoDataReturn {
  * @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: MaybeRefOrGetter<BreadcrumbItem[]>, urlParams: MaybeRefOrGetter<UrlParams>, images: MaybeRefOrGetter<string[]>, productInfo: MaybeRefOrGetter<ProductInfo>): UseProductSeoDataReturn;
+export declare function useProductSeoData(breadcrumbs: MaybeRefOrGetter<BreadcrumbItem[]>, urlParams: MaybeRefOrGetter<UrlParams>, productInfo: MaybeRefOrGetter<ProductInfo>): UseProductSeoDataReturn;
 export {};

package/dist/runtime/composables/useProductSeoData.js

@@ -4,7 +4,7 @@ import {
   sanitizeCanonicalURL
 } from "@scayle/storefront-nuxt";
 import { generateProductSchema } from "../utils/seo.js";
-export function useProductSeoData(breadcrumbs, urlParams, images, productInfo) {
+export function useProductSeoData(breadcrumbs, urlParams, productInfo) {
   const canonicalUrl = computed(() => {
     const url = `${toValue(urlParams).baseUrl}${toValue(urlParams).fullPath}`;
     return sanitizeCanonicalURL(url, []);
@@ -15,11 +15,11 @@ export function useProductSeoData(breadcrumbs, urlParams, images, productInfo) {
   const robots = "index, follow";
   const productJsonLd = computed(() => {
     return generateProductSchema({
-      productName: toValue(productInfo).name || "",
-      brandName: toValue(productInfo).brand || "",
+      productName: toValue(productInfo).name,
+      brandName: toValue(productInfo).brand,
       url: canonicalUrl.value,
-      variants: toValue(productInfo).variants || [],
-      images: toValue(images),
+      variants: toValue(productInfo).variants,
+      images: toValue(productInfo).images,
       description: toValue(productInfo).productDescription
     });
   });

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

@@ -13,12 +13,12 @@ describe("useProductSeoData", () => {
     } = useProductSeoData(
       [{ value: "value", to: "/" }],
       { baseUrl: "baseUrl", fullPath: "fullPath" },
-      [],
       {
         name: "name",
         variants: [variantFactory.build({ id: 1 })],
         brand: "brand",
-        productDescription: "description"
+        productDescription: "description",
+        images: []
       }
     );
     expect(title.value).toBe("name");
@@ -73,7 +73,8 @@ describe("useProductSeoData", () => {
       name: "name",
       variants: [variantFactory.build({ id: 1 })],
       brand: "brand",
-      productDescription: "description"
+      productDescription: "description",
+      images: []
     });
     const {
       title,
@@ -83,7 +84,6 @@ describe("useProductSeoData", () => {
     } = useProductSeoData(
       breadcrubs,
       urlParams,
-      [],
       productInfo
     );
     expect(title.value).toBe("name");

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

@@ -1,2 +1,22 @@
 import type { Attributes } from '@scayle/storefront-nuxt';
-export declare const getFilteredAttributeGroups: (attributes: Attributes, filterTypes: string[]) => Map<string, string[]>;
+/**
+ * Filters and formats attribute groups based on specified types.
+ *
+ * @param {Attributes} attributes - The object containing attribute groups, where each key maps to an attribute group.
+ * @param {string[]} filterTypes - An array of attribute types to include in the filtered results.
+ * @param {string[]} [singleValueType] - An array of attribute types that should have simplified formatting for their values. Default includes 'extras'.
+ * @returns {Map<string, string[]>} A map where the keys are attribute types and the values are arrays of formatted labels.
+ *
+ * @example
+ * const attributes = {
+ *   color: { type: 'color', values: [{ label: 'Red' }, { label: 'Blue' }] },
+ *   size: { type: 'size', values: [{ label: 'S' }, { label: 'M' }] },
+ * };
+ * const filterTypes = ['color', 'size'];
+ * const result = getFilteredAttributeGroups(attributes, filterTypes);
+ * // Result: Map {
+ * //   'color' => ['Red', 'Blue'],
+ * //   'size' => ['S', 'M']
+ * // }
+ */
+export declare const getFilteredAttributeGroups: (attributes: Attributes, filterTypes: string[], singleValueType?: string[]) => Map<string, string[]>;

package/dist/runtime/utils/attribute.js

@@ -1,18 +1,18 @@
-const getFormattedLabel = (attributeGroup) => {
+const getFormattedLabel = (attributeGroup, singleValueType) => {
   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}`
+    (value) => attributeGroup.type && singleValueType.includes(attributeGroup.type) ? value.label : `${attributeGroup.label}: ${value.label}`
   );
 };
-export const getFilteredAttributeGroups = (attributes, filterTypes) => {
+export const getFilteredAttributeGroups = (attributes, filterTypes, singleValueType = ["extras"]) => {
   return Object.values(attributes).filter(
     (attribute) => attribute?.type && filterTypes.includes(attribute.type)
   ).reduce((map, attributeValue) => {
     const key = attributeValue?.type || "";
-    const value = getFormattedLabel(attributeValue);
+    const value = getFormattedLabel(attributeValue, singleValueType);
     map.set(key, (map.get(key) || []).concat(value));
     return map;
   }, /* @__PURE__ */ new Map());

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

@@ -1,2 +1,66 @@
 import { type AdvancedAttribute } from '@scayle/storefront-nuxt';
+/**
+ * Extracts and returns an array of product IDs from an advanced attribute.
+ *
+ * This function processes an `AdvancedAttribute` object, extracts its values,
+ * parses them as integers, and filters out any invalid values. It is
+ * commonly used to handle product recommendations.
+ *
+ * @param {AdvancedAttribute} [attribute] - The advanced attribute containing values to extract product IDs from. This attribute is sourced from a product's advanced attributes.
+ * @returns {number[]} An array of valid product IDs extracted from the attribute values. Returns an empty array if the input is undefined or invalid.
+ *
+ * @example
+ * // Example usage within a Vue.js/Nuxt computed property
+ * const recommendedProductIds = computed(() => {
+ *   return getCombineWithProductIds(
+ *     product.value?.advancedAttributes?.['combineWith'],
+ *   );
+ * });
+ *
+ * // Result: If 'combineWith' object built like:
+ *   {
+ *    "id": 7394,
+ *    "key": "combineWith",
+ *    "label": "Kombiniere mit",
+ *    "type": "",
+ *    "values": [
+ *      {
+ *        "fieldSet": [
+ *          [
+ *            {
+ *              "value": "206131"
+ *            }
+ *          ]
+ *        ],
+ *        "groupSet": []
+ *      },
+ *      {
+ *        "fieldSet": [
+ *          [
+ *            {
+ *              "value": "206017"
+ *            }
+ *          ]
+ *        ],
+ *        "groupSet": []
+ *      },
+ *      {
+ *        "fieldSet": [
+ *          [
+ *            {
+ *              "value": "206012"
+ *            }
+ *          ]
+ *        ],
+ *        "groupSet": []
+ *      }
+ *    ]
+ * }
+ *
+ * // Then: recommendedProductIds.value => [ 206131, 206017, 206012 ]
+ *
+ * More information about recommended products and attributes groups please visit our SCAYLE Resource Center:
+ * https://scayle.dev/en/storefront-guide/developer-guide/features/product-recommendation
+ * https://scayle.dev/en/user-guide/settings/product-structure/attribute-groups
+ */
 export declare const getCombineWithProductIds: (attribute?: AdvancedAttribute) => number[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scayle/storefront-product-detail",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Collection of essential composables and utilities to work with product detail",
   "author": "SCAYLE Commerce Engine",
   "license": "MIT",
@@ -50,9 +50,9 @@
     "@nuxt/kit": "3.13.2",
     "@nuxt/module-builder": "0.8.4",
     "@nuxt/schema": "3.13.2",
-    "@nuxt/test-utils": "3.14.4",
+    "@nuxt/test-utils": "3.15.1",
     "@scayle/eslint-config-storefront": "4.3.2",
-    "@scayle/storefront-nuxt": "8.0.0",
+    "@scayle/storefront-nuxt": "8.1.1",
     "@types/node": "22.10.1",
     "@vue/test-utils": "2.4.6",
     "@vueuse/core": "12.0.0",