@shopware/cms-base-layer 1.4.0 → 1.5.0

package/README.md

@@ -1,7 +1,7 @@
 # shopware/frontends - cms-base
 
 [![](https://img.shields.io/npm/v/@shopware/cms-base-layer?color=blue&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCA0ODggNTUzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNDM5LjA0MSAxMjkuNTkzTDI1OC43NjkgMzEuMzA3NkMyNDQuOTE1IDIzLjc1NDEgMjI4LjExNiAyNC4wMDkzIDIxNC40OTcgMzEuOTgwMkw0Ny4yNjkgMTI5Ljg1OEMzMy40NzYzIDEzNy45MzEgMjUgMTUyLjcxMyAyNSAxNjguNjk1VjM4OC40NjZDMjUgNDA0LjczMiAzMy43Nzg1IDQxOS43MzIgNDcuOTYwMiA0MjcuNjk5TDIxNS4xNzggNTIxLjYzNkMyMjguNDUxIDUyOS4wOTIgMjQ0LjU5MyA1MjkuMzMyIDI1OC4wODIgNTIyLjI3NEw0MzguMzY0IDQyNy45MzRDNDUzLjIwMSA0MjAuMTcgNDYyLjUgNDA0LjgwOSA0NjIuNSAzODguMDYzVjE2OS4xMDJDNDYyLjUgMTUyLjYzMiA0NTMuNTAyIDEzNy40NzcgNDM5LjA0MSAxMjkuNTkzWiIgc3Ryb2tlPSJ1cmwoI3BhaW50MF9saW5lYXJfMTUzXzY5MjY1KSIgc3Ryb2tlLXdpZHRoPSI1MCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzE1M182OTI2NSIgeDE9Ii0xNi4yOTg5IiB5MT0iMTY1LjM0OSIgeDI9IjI3Ni40MTIiIHkyPSItODkuMzIzNCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDA4NUZGIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0MwRTJGNSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==)](https://npmjs.com/package/@shopware/cms-base-layer)
-[![](https://img.shields.io/github/package-json/v/shopware/frontends?color=blue&filename=packages%2Fcms-base%2Fpackage.json&label=cms-base%40monorepo&logo=github)](https://github.com/shopware/frontends/tree/main/packages/cms-base)
+[![](https://img.shields.io/github/package-json/v/shopware/frontends?color=blue&filename=packages%2Fcms-base-layer%2Fpackage.json&label=cms-base%40monorepo&logo=github)](https://github.com/shopware/frontends/tree/main/packages/cms-base-layer)
 [![](https://img.shields.io/github/issues/shopware/frontends/cms-base?label=cms-base%20issues&logo=github)](https://github.com/shopware/frontends/issues?q=is%3Aopen+is%3Aissue+label%3Acms-base)
 [![](https://img.shields.io/github/license/shopware/frontends?color=blue)](#)
 
@@ -36,6 +36,9 @@ pnpm install -D @shopware/cms-base-layer
 
 # bun
 bun install -D @shopware/cms-base-layer
+
+# deno
+deno install --dev @shopware/cms-base-layer
 ```
 
 <!-- /automd -->
@@ -129,16 +132,21 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 1.4.0
+### Latest changes: 1.5.0
 
 ### Minor Changes
 
-- [#1602](https://github.com/shopware/frontends/pull/1602) [`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed) Thanks [@patzick](https://github.com/patzick)! - Switch from `@shopware-pwa/helpers-next` to `@shopware/helpers` package.
-
-- [#1602](https://github.com/shopware/frontends/pull/1602) [`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed) Thanks [@patzick](https://github.com/patzick)! - Switch from `@shopware-pwa/cms-base` to `@shopware/cms-base-layer` package.
+- [#1727](https://github.com/shopware/frontends/pull/1727) [`94872b7`](https://github.com/shopware/frontends/commit/94872b7c6f6337ff8ce0bcfd9320e4178a4927f0) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Added CmsBlockHtml to render html blocks.
+  Added CmsElementHtml to render html element.
 
 ### Patch Changes
 
-- Updated dependencies [[`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed), [`bb7d1cb`](https://github.com/shopware/frontends/commit/bb7d1cbc4204ff1d48f77416f94f550bc235e5ed)]:
-  - @shopware/composables@1.8.0
-  - @shopware/helpers@1.4.0
+- [#1843](https://github.com/shopware/frontends/pull/1843) [`1859893`](https://github.com/shopware/frontends/commit/1859893ec3fe1cdead4b1c39e34943d9a70deaa4) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Enhance form error handling and fix TS errors
+
+- [#1812](https://github.com/shopware/frontends/pull/1812) [`c28810d`](https://github.com/shopware/frontends/commit/c28810d0ca503b97c232438e200bbf5ba5dab403) Thanks [@patzick](https://github.com/patzick)! - Fix date formatting based on locale, previously always returned en-US format
+
+- [#1857](https://github.com/shopware/frontends/pull/1857) [`e78d51e`](https://github.com/shopware/frontends/commit/e78d51e6af0726b12620d9f7e8f2c3150aa80cfa) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Fix wrong `SharedPrice` component in `SwListingProductPrice.vue` file
+
+- Updated dependencies [[`d016d6b`](https://github.com/shopware/frontends/commit/d016d6b845bff9a148405a74dae88d7fc81ec99c), [`c28810d`](https://github.com/shopware/frontends/commit/c28810d0ca503b97c232438e200bbf5ba5dab403), [`a7ff606`](https://github.com/shopware/frontends/commit/a7ff60681d1a164d5c9f2020c506262e96fad5dc), [`d016d6b`](https://github.com/shopware/frontends/commit/d016d6b845bff9a148405a74dae88d7fc81ec99c), [`bd70905`](https://github.com/shopware/frontends/commit/bd70905b8443fd57d8d8cb3cfc6501a9117dea49)]:
+  - @shopware/api-client@1.3.0
+  - @shopware/composables@1.9.0

package/components/SwContactForm.vue

@@ -115,9 +115,6 @@ const rules = computed(() => ({
     required,
     minLength: minLength(3),
   },
-  salutationId: {
-    required,
-  },
   phone: {
     required,
     minLength: minLength(3),
@@ -176,18 +173,12 @@ const invokeSubmit = async () => {
     <template v-if="!formSent">
       <div class="grid grid-cols-12 gap-5">
         <div class="col-span-4">
-          <label for="salutation">{{ translations.form.salutation }} *</label>
+          <label for="salutation">{{ translations.form.salutation }}</label>
           <select
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
-            :class="[
-              $v.salutationId.$error
-                ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
-            ]"
-            @blur="$v.salutationId.$touch()"
+            class="border-gray-300 focus:border-indigo-500 appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -200,12 +191,6 @@ const invokeSubmit = async () => {
               {{ salutation.displayName }}
             </option>
           </select>
-          <span
-            v-if="$v.salutationId.$error"
-            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
-          >
-            {{ $v.salutationId.$errors[0].$message }}
-          </span>
         </div>
         <div class="col-span-4">
           <label for="first-name">{{ translations.form.firstName }} *</label>
@@ -228,7 +213,7 @@ const invokeSubmit = async () => {
             v-if="$v.firstName.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName.$errors[0].$message }}
+            {{ $v.firstName.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-4">
@@ -252,7 +237,7 @@ const invokeSubmit = async () => {
             v-if="$v.lastName.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName.$errors[0].$message }}
+            {{ $v.lastName.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-6">
@@ -276,7 +261,7 @@ const invokeSubmit = async () => {
             v-if="$v.email.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email.$errors[0].$message }}
+            {{ $v.email.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-6">
@@ -300,7 +285,7 @@ const invokeSubmit = async () => {
             v-if="$v.phone.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.phone.$errors[0].$message }}
+            {{ $v.phone.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-12">
@@ -324,7 +309,7 @@ const invokeSubmit = async () => {
             v-if="$v.subject.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.subject.$errors[0].$message }}
+            {{ $v.subject.$errors[0]?.$message ?? '' }}
           </span>
         </div>
         <div class="col-span-12">
@@ -349,7 +334,7 @@ const invokeSubmit = async () => {
             v-if="$v.comment.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.comment.$errors[0].$message }}
+            {{ $v.comment.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div class="col-span-12">

package/components/SwListingProductPrice.vue

@@ -12,6 +12,7 @@ type Translations = {
   listing: {
     variantsFrom: string;
     previously: string;
+    from: string;
     to: string;
   };
 };
@@ -78,7 +79,7 @@ const {
     <template v-if="regulationPrice">
       <div class="flex gap-2 justify-end text-gray-500 text-3.5 mb-2">
         {{ translations.listing.previously }}
-        <SharedPrice :value="regulationPrice" />
+        <SwSharedPrice :value="regulationPrice" />
       </div>
     </template>
     <template v-if="!regulationPrice">

package/components/SwNewsletterForm.vue

@@ -79,7 +79,7 @@ const { newsletterSubscribe, newsletterUnsubscribe } = useNewsletter();
 
 const getFormTitle = computed(() => getConfigValue("title"));
 const state = reactive({
-  option: subscriptionOptions[0].value,
+  option: subscriptionOptions[0]?.value ?? "",
   salutationId: "",
   firstName: "",
   lastName: "",
@@ -104,9 +104,6 @@ type Rules = {
     required: ValidationRuleWithoutParams;
     minLength: number;
   };
-  salutationId: {
-    required: ValidationRuleWithoutParams;
-  };
 };
 const rules = computed(() => {
   let temp: Partial<Rules> = {
@@ -130,9 +127,6 @@ const rules = computed(() => {
         required,
         minLength: 3,
       },
-      salutationId: {
-        required,
-      },
     };
   }
   return temp;
@@ -222,7 +216,7 @@ const invokeSubmit = async () => {
             v-if="$v.email?.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.email?.$errors[0].$message }}
+            {{ $v.email?.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -231,13 +225,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class="appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
-            :class="[
-              $v.salutationId?.$error
-                ? 'border-red-600 focus:border-red-600'
-                : 'border-gray-300 focus:border-indigo-500',
-            ]"
-            @blur="$v.salutationId?.$touch()"
+            class=" border-gray-300 focus:border-indigo-500appearance-none relative block w-full px-3 py-2 border placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -250,12 +238,6 @@ const invokeSubmit = async () => {
               {{ salutation.displayName }}
             </option>
           </select>
-          <span
-            v-if="$v.salutationId?.$error"
-            class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
-          >
-            {{ $v.salutationId?.$errors[0].$message }}
-          </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
           <label for="first-name">{{ translations.form.firstName }} *</label>
@@ -278,7 +260,7 @@ const invokeSubmit = async () => {
             v-if="$v.firstName?.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.firstName?.$errors[0].$message }}
+            {{ $v.firstName?.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div v-if="state.option === 'subscribe'" class="col-span-4">
@@ -302,7 +284,7 @@ const invokeSubmit = async () => {
             v-if="$v.lastName?.$error"
             class="pt-1 text-sm text-red-600 focus:ring-brand-primary border-gray-300"
           >
-            {{ $v.lastName?.$errors[0].$message }}
+            {{ $v.lastName?.$errors[0]?.$message || '' }}
           </span>
         </div>
         <div class="col-span-12">

package/components/SwProductAddToCart.vue

@@ -51,7 +51,8 @@ const addToCartProxy = async () => {
   const errors = getErrorsCodes();
   for (const element of errors) {
     const { messageKey, params } = resolveCartError(element);
-    pushError(getCmsTranslate(translations.errors[messageKey], params));
+    if (translations.errors[messageKey])
+      pushError(getCmsTranslate(translations.errors[messageKey], params));
   }
 
   if (!errors.length)

package/components/SwProductCard.vue

@@ -127,7 +127,8 @@ const addToCartProxy = async () => {
   const errors = getErrorsCodes();
   for (const element of errors) {
     const { messageKey, params } = resolveCartError(element);
-    pushError(getCmsTranslate(translations.errors[messageKey], params));
+    if (translations.errors[messageKey])
+      pushError(getCmsTranslate(translations.errors[messageKey], params));
   }
 
   if (!errors.length)
@@ -235,11 +236,11 @@ const srcPath = computed(() => {
         :to="buildUrlPrefix(getProductRoute(product), getUrlPrefix())"
         data-testid="product-box-product-name-link"
       >
-        <h5
+        <div
           class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white min-h-60px"
         >
           {{ getProductName({ product }) }}
-        </h5>
+        </div>
       </RouterLink>
 
       <SwListingProductPrice

package/components/SwProductReviews.vue

@@ -1,7 +1,11 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, onMounted, ref, toRefs } from "vue";
-import { useCmsTranslations, useProductReviews } from "#imports";
+import {
+  useCmsTranslations,
+  useProductReviews,
+  useShopwareContext,
+} from "#imports";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -12,12 +16,14 @@ const props = defineProps<{
 type Translations = {
   product: {
     noReviews: string;
+    reviewNotAccepted: string;
   };
 };
 
 let translations: Translations = {
   product: {
     noReviews: "No reviews yet.",
+    reviewNotAccepted: "Your review has not been approved yet",
   },
 };
 
@@ -42,15 +48,17 @@ const reviewsList = computed<Schemas["ProductReview"][]>(
 
 const format: Intl.DateTimeFormatOptions = {
   year: "numeric",
-  month: "short",
+  month: "numeric",
   day: "numeric",
   hour: "numeric",
   minute: "numeric",
-  hour12: true,
 };
 
-const formatDate = (date: string) =>
-  new Date(date).toLocaleDateString("en-us", format);
+const { browserLocale } = useShopwareContext();
+
+const formatDate = (date: string) => {
+  return new Intl.DateTimeFormat(browserLocale, format).format(new Date(date));
+};
 </script>
 
 <template>
@@ -70,6 +78,13 @@ const formatDate = (date: string) =>
       >
         <span>{{ formatDate(review.createdAt) }}</span>
       </div>
+      <div
+          v-if="!review.status"
+          class="mt-2 text-3 p-2 bg-[#d4f0f5] flex gap-2 items-center"
+        >
+        <div class="w-6 h-6 i-carbon-warning" />
+        {{ translations.product.reviewNotAccepted }}
+      </div>
       <div
         class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
       >

package/components/SwSlider.vue

@@ -38,9 +38,11 @@ const { getConfigValue } = useCmsElementConfig({
   config: SliderElementConfig;
 });
 
-const slots = useSlots();
+const slots = useSlots() as {
+  default?: () => { children: VNodeArrayChildren }[];
+};
 const childrenRaw = computed(
-  () => (slots?.default?.()[0].children as VNodeArrayChildren) ?? [],
+  () => (slots?.default?.()[0]?.children as VNodeArrayChildren) ?? [],
 );
 const slidesToScroll = computed(() =>
   props.slidesToScroll >= props.slidesToShow
@@ -184,7 +186,7 @@ function buildImageSliderTrackStyle(
       const childComponent =
         imageSliderTrack.value?.children[transformIndex + 1];
       // If image exist
-      height = childComponent?.children[0].children[0].clientHeight
+      height = childComponent?.children[0]?.children[0]?.clientHeight
         ? `${childComponent.clientHeight}px`
         : "auto";
     }

package/components/SwVariantConfigurator.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { useCmsTranslations } from "@shopware/composables";
-import { getProductRoute } from "@shopware/helpers";
+import { buildUrlPrefix, getProductRoute } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, unref } from "vue";
 import type { ComputedRef } from "vue";
 import { useRouter } from "vue-router";
-import { useProductConfigurator } from "#imports";
+import { useProductConfigurator, useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
+const { getUrlPrefix } = useUrlResolver();
+
+const prefix = getUrlPrefix();
+
 const props = withDefaults(
   defineProps<{
     allowRedirect?: boolean;
@@ -52,11 +56,11 @@ const isOptionSelected = (optionId: string) =>
 
 const onHandleChange = async () => {
   isLoading.value = true;
-  const variantFound = await findVariantForSelectedOptions(
-    unref(selectedOptions),
+  const variantFound = await findVariantForSelectedOptions();
+  const selectedOptionsVariantPath = buildUrlPrefix(
+    getProductRoute(variantFound),
+    prefix,
   );
-
-  const selectedOptionsVariantPath = getProductRoute(variantFound);
   if (props.allowRedirect && selectedOptionsVariantPath) {
     try {
       router.push(selectedOptionsVariantPath);
@@ -100,13 +104,13 @@ const onHandleChange = async () => {
             :class="{
               'border-3 border-indigo-600': isOptionSelected(option.id),
             }"
-            @click="handleChange(optionGroup.name, option.id, onHandleChange)"
+            @click="handleChange(optionGroup.translated.name, option.id, onHandleChange)"
           >
             <p
               :id="`${option.id}-choice-label`"
               data-testid="product-variant-text"
             >
-              {{ option.name }}
+              {{ option.translated.name }}
             </p>
           </label>
         </div>

package/components/public/cms/element/CmsBlockHtml.md

@@ -0,0 +1 @@
+Render a HTML section

package/components/public/cms/element/CmsBlockHtml.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockHtml } from "@shopware/composables";
+
+defineProps<{
+  content: CmsBlockHtml;
+}>();
+</script>
+
+<template>
+  <div>
+    <CmsGenericElement
+      v-for="slot in content.slots"
+      :key="slot.versionId"
+      :content="slot"
+    />
+  </div>
+</template>

package/components/public/cms/element/CmsElementCrossSelling.vue

@@ -82,7 +82,7 @@ const toggleTab = (index: number) => {
         :autoplay="false"
       >
         <SwProductCard
-          v-for="product of crossSellCollections[currentTabIndex].products"
+          v-for="product of crossSellCollections[currentTabIndex]?.products"
           :key="product.id"
           class="w-[300px]"
           :product="product"

package/components/public/cms/element/CmsElementHtml.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { CmsElementHtml } from "@shopware/composables";
+
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+import { h } from "vue";
+
+const props = defineProps<{
+  content: CmsElementHtml;
+}>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+
+const HtmlComponent = () => {
+  return h("div", {
+    class: cssClasses,
+    style: layoutStyles,
+    innerHTML: props.content.data.content || "",
+  });
+};
+</script>
+
+<template>
+  <HtmlComponent />
+</template>

package/components/public/cms/element/CmsElementProductDescriptionReviews.vue

@@ -3,25 +3,32 @@ import type { CmsElementProductDescriptionReviews } from "@shopware/composables"
 import { useCmsTranslations } from "@shopware/composables";
 import { getProductName, getTranslatedProperty } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed, ref } from "vue";
+import { type Ref, computed, onMounted, ref } from "vue";
 import xss from "xss";
 import { useProduct } from "#imports";
+import type { Schemas } from "#shopware";
 
 const props = defineProps<{
   content: CmsElementProductDescriptionReviews;
 }>();
 
 type Translations = {
-  products: {
+  product: {
     description: string;
     reviews: string;
+    messages: {
+      reviewAdded: string;
+    };
   };
 };
 
 let translations: Translations = {
-  products: {
+  product: {
     description: "Description",
     reviews: "Reviews",
+    messages: {
+      reviewAdded: "Thank you for submitting your review",
+    },
   },
 };
 translations = defu(useCmsTranslations(), translations) as Translations;
@@ -37,7 +44,13 @@ const toggleTabs = (tabNumber: number) => {
   currentTab.value = tabNumber;
 };
 
-const reviews = computed(() => props.content.data.reviews.elements);
+const reviews: Ref<Schemas["ProductReview"][]> = ref([]);
+
+onMounted(async () => {
+  if (props.content.data?.reviews?.elements) {
+    reviews.value = props.content.data.reviews.elements;
+  }
+});
 </script>
 
 <template>
@@ -60,7 +73,7 @@ const reviews = computed(() => props.content.data.reviews.elements);
             @click="() => toggleTabs(1)"
           >
             <i class="fas fa-space-shuttle text-base mr-1" />
-            {{ translations.products.description }}
+            {{ translations.product.description }}
           </a>
         </li>
         <li class="mr-2 text-center">
@@ -71,10 +84,11 @@ const reviews = computed(() => props.content.data.reviews.elements);
                 ? 'text-secondary-500 bg-white'
                 : 'text-white bg-secondary-500',
             ]"
+            data-testid="product-reviews-tab"
             @click="() => toggleTabs(2)"
           >
             <i class="fas fa-cog text-base mr-1" />
-            {{ translations.products.reviews }}
+            {{ translations.product.reviews }} ({{ reviews.length }})
           </a>
         </li>
       </ul>

package/nuxt.config.ts

@@ -17,5 +17,7 @@ export default defineNuxtConfig({
   build: {
     transpile: ["@shopware/cms-base-layer"],
   },
-  telemetry: false,
+  telemetry: {
+    enabled: false,
+  },
 }) as NuxtConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -29,32 +29,32 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.14.1592",
-    "@tresjs/cientos": "4.0.2",
-    "@tresjs/core": "4.3.1",
+    "@nuxt/kit": "3.16.2",
+    "@tresjs/cientos": "4.3.0",
+    "@tresjs/core": "4.3.3",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "11.2.0",
-    "entities": "5.0.0",
+    "@vueuse/core": "13.1.0",
+    "entities": "6.0.0",
     "html-to-ast": "0.0.6",
-    "three": "0.166.1",
+    "three": "0.173.0",
     "vue": "3.5.13",
     "xss": "1.0.15",
-    "@shopware/composables": "1.8.0",
+    "@shopware/composables": "1.9.0",
     "@shopware/helpers": "1.4.0",
-    "@shopware/api-client": "1.2.0"
+    "@shopware/api-client": "1.3.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "3.14.1592",
-    "@types/three": "0.166.0",
-    "@vitest/coverage-v8": "2.1.8",
-    "nuxt": "3.14.1592",
-    "typescript": "5.6.3",
+    "@nuxt/schema": "3.16.2",
+    "@types/three": "0.173.0",
+    "@vitest/coverage-v8": "3.1.1",
+    "nuxt": "3.16.2",
+    "typescript": "5.8.3",
     "unbuild": "2.0.0",
-    "vitest": "2.1.8",
+    "vitest": "3.1.1",
     "vue-router": "4.5.0",
-    "vue-tsc": "2.1.10",
+    "vue-tsc": "2.2.8",
     "tsconfig": "0.0.0"
   },
   "scripts": {