feat: product variants' names, show cms hydrated content

packages/composables/src/hooks/useProductListing.ts

@@ -122,7 +122,18 @@ export const useProductListing = (
     const searchCriteria: SearchCriteria = {
       pagination: selectedCriteria.pagination,
       filters: getFilterSearchCriteria(selectedCriteria.filters),
-      sort: getSortingSearchCriteria(selectedCriteria.sorting)
+      sort: getSortingSearchCriteria(selectedCriteria.sorting),
+      configuration: {
+        // get product variant options
+        associations: [
+          {
+            name: "options"
+          },
+          {
+            name: "productReviews"
+          }
+        ]
+      }
     };
 
     const search = exportUrlQuery(searchCriteria);

packages/default-theme/components/SwProductCard.vue

@@ -1,11 +1,13 @@
 <template>
   <SfProductCard
-    :title="product.name || ''"
+    :title="getName"
     :image="getImageUrl"
     :special-price="getSpecialPrice"
+    :regular-price="getRegularPrice"
+    :max-rating="5"
+    :score-rating="getProductRating"
     :image-width="216"
     :image-height="326"
-    :regular-price="getRegularPrice"
     :isOnWishlist="false"
     :link="getRouterLink"
     @click:wishlist="toggleWishlist"
@@ -31,7 +33,8 @@ import {
   getProductMainImageUrl,
   getProductRegularPrice,
   getProductUrl,
-  getProductSpecialPrice
+  getProductSpecialPrice,
+  getProductName
 } from '@shopware-pwa/helpers'
 
 export default {
@@ -41,7 +44,6 @@ export default {
   },
   setup({ product }) {
     const { addToCart, quantity, getStock, isInCart } = useAddToCart(product)
-
     return {
       quantity,
       addToCart,
@@ -59,6 +61,12 @@ export default {
     }
   },
   computed: {
+    getName() {
+      return getProductName({product: this.product});
+    },
+    getProductRating() {
+      return this.product && this.product.ratingAverage
+    },
     // should be replaced with prettyUrl attribute when pretty urls are included in product entity
     getRouterLink() {
       return getProductUrl(this.product)

packages/default-theme/components/cms/elements/SwTextSlot.vue

@@ -17,9 +17,8 @@ export default {
     rawHtml() {
       return (
         this.content &&
-        this.content.config &&
-        this.content.config.content &&
-        this.content.config.content.value
+        this.content.data &&
+        this.content.data.content
       );
     },
     verticalAlign() {

packages/helpers/__tests__/product/getProductName.spec.ts

@@ -0,0 +1,44 @@
+import { getProductName } from "@shopware-pwa/helpers";
+
+describe("Shopware helpers - getProductName", () => {
+  it("should return empty string if argument wasn't provided", () => {
+    const label = getProductName();
+    expect(label).toBeNull();
+  });
+
+  it("should return default value if product was null", () => {
+    const argument: any = { product: null };
+    const label = getProductName(argument);
+    expect(label).toBeNull();
+  });
+
+  it("should return translated name if the base one does not exist", () => {
+    const argument: any = {
+      product: {
+        name: null,
+        translated: {
+          name: "Existing"
+        }
+      }
+    };
+    const productName = getProductName(argument);
+    expect(productName).toBe("Existing");
+  });
+  it("should return name enriched with variant label if options are included", () => {
+    const argument: any = {
+      product: {
+        name: "T-Shirt",
+        options: [
+          {
+            name: "XL"
+          },
+          {
+            name: "yellow"
+          }
+        ]
+      }
+    };
+    const productName = getProductName(argument);
+    expect(productName).toBe("T-Shirt - XL yellow");
+  });
+});

packages/helpers/__tests__/product/getVariantOptionsLabel.spec.ts

@@ -0,0 +1,55 @@
+import { getVariantOptionsLabel } from "@shopware-pwa/helpers";
+
+describe("Shopware helpers - getVariantOptionsLabel", () => {
+  it("should return empty string if argument wasn't provided", () => {
+    const label = getVariantOptionsLabel();
+    expect(label).toBeNull();
+  });
+
+  it("should return default value if product was null", () => {
+    const argument: any = { product: null };
+    const label = getVariantOptionsLabel(argument);
+    expect(label).toBeNull();
+  });
+
+  it("should return empty string if empty options array is provided", () => {
+    const argument: any = {
+      product: {
+        options: []
+      }
+    };
+    const label = getVariantOptionsLabel(argument);
+    expect(label).toBeNull();
+  });
+
+  it("should return label made of one option name", () => {
+    const argument: any = {
+      product: {
+        options: [
+          {
+            name: "XL"
+          }
+        ]
+      }
+    };
+    const label = getVariantOptionsLabel(argument);
+    expect(label).toBe("XL");
+  });
+
+  it("should return label made of two option names", () => {
+    const argument: any = {
+      product: {
+        options: [
+          {
+            name: "L"
+          },
+          {
+            name: "black"
+          }
+        ]
+      }
+    };
+    const label = getVariantOptionsLabel(argument);
+    expect(label).toBe("L black");
+  });
+});

packages/helpers/src/product/getProductName.ts

@@ -0,0 +1,14 @@
+import { Product } from "@shopware-pwa/shopware-6-client/src/interfaces/models/content/product/Product";
+import { getVariantOptionsLabel } from "./getVariantOptionsLabel";
+
+export function getProductName({ product }: { product?: Product } = {}):
+  | string
+  | null {
+  if (!product) {
+    return null;
+  }
+  const variantLabel = getVariantOptionsLabel({ product: product });
+  return `${product.name || product.translated.name}${
+    variantLabel ? " - " + variantLabel : ""
+  }`;
+}

packages/helpers/src/product/getVariantOptionsLabel.ts

@@ -0,0 +1,19 @@
+import { Product } from "@shopware-pwa/shopware-6-client/src/interfaces/models/content/product/Product";
+
+export function getVariantOptionsLabel({
+  product
+}: { product?: Product } = {}): string | null {
+  if (
+    !product ||
+    !product.options ||
+    (product.options && !product.options.length)
+  ) {
+    return null;
+  }
+  let variantLabel = "";
+  for (let { name } of product.options) {
+    variantLabel += `${name} `;
+  }
+
+  return variantLabel.trim();
+}

packages/helpers/src/product/index.ts

@@ -9,3 +9,5 @@ export * from "./getProductSpecialPrice";
 export * from "./isProductSimple";
 export * from "./getProductOptionsUrl";
 export * from "./getProductUrl";
+export * from "./getVariantOptionsLabel";
+export * from "./getProductName";

packages/shopware-6-client/src/interfaces/models/content/product/Product.ts

@@ -31,7 +31,6 @@ export interface SeoUrl {
   routeName: string;
   salesChannelId: string | null;
   seoPathInfo: string;
-  translated: [];
   updatedAt: Date | null;
   url: string | null;
   versionId: string | null;
@@ -109,5 +108,8 @@ export interface Product {
   parentVersionId: string;
   productManufacturerVersionId: string;
   seoUrls: SeoUrl[] | null;
+  translated: {
+    name: string | null;
+  };
   productMediaVersiond?: null;
 }