@shopware/cms-base-layer 1.4.1 → 1.5.1

package/README.md

@@ -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,21 +132,18 @@ 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.1
+### Latest changes: 1.5.1
 
 ### Patch Changes
 
-- [#1685](https://github.com/shopware/frontends/pull/1685) [`7324620`](https://github.com/shopware/frontends/commit/7324620a3f39c1b62f7cc294192a3e8b8b336d09) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove `salutationId` as a required field from the forms:
-
-  - SwNewsletterForm
-  - SwContactForm
+- [#1879](https://github.com/shopware/frontends/pull/1879) [`eaf170b`](https://github.com/shopware/frontends/commit/eaf170bd037a278b3d2e155c4d69de8e5fd9516d) Thanks [@acuriouspotion](https://github.com/acuriouspotion)! - Fix youtube player control display and usage of advanced privacy mode setting.
 
-- [#1659](https://github.com/shopware/frontends/pull/1659) [`7c10417`](https://github.com/shopware/frontends/commit/7c10417e9c0bb9fe049a0e36abf115be6c63c945) Thanks [@patzick](https://github.com/patzick)! - SwVariantConfigurator - URL prefix on Variant Change
+- [#1862](https://github.com/shopware/frontends/pull/1862) [`20fd2c6`](https://github.com/shopware/frontends/commit/20fd2c615738f93a3947c69f351fc5d37ea89ebf) Thanks [@aheartforspinach](https://github.com/aheartforspinach)! - Fix CmsSectionSidebar.vue when used on a landing page by removing useCategory and related code
 
-- [#1677](https://github.com/shopware/frontends/pull/1677) [`d663627`](https://github.com/shopware/frontends/commit/d663627aaa00abc797f5c2413c4e978f95bd6f89) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Fix displaying product variants on the product page
+- [#1884](https://github.com/shopware/frontends/pull/1884) [`3004b97`](https://github.com/shopware/frontends/commit/3004b973913b90cdf4b255ffb3f9cee265241666) Thanks [@MorennMcFly](https://github.com/MorennMcFly)! - Fix cms blocks TextTeaserSection and TextTwoColumn responsivity so the elements stack from md breakpoint and under.
 
-- [#1692](https://github.com/shopware/frontends/pull/1692) [`2440a55`](https://github.com/shopware/frontends/commit/2440a55066d31edf2942dbab19a7b5043cdff532) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Change `h5` HTML tag to `div` for better accessibility structure - for ProductCard component
+- [#1863](https://github.com/shopware/frontends/pull/1863) [`f8c5cd5`](https://github.com/shopware/frontends/commit/f8c5cd5c9aa8b65d394c831e3ac548b4743c53a6) Thanks [@aheartforspinach](https://github.com/aheartforspinach)! - move `CmsBlockHtml.vue` to block folder (instead of element), remove `CmsBlockHtml.md`
 
-- Updated dependencies [[`7324620`](https://github.com/shopware/frontends/commit/7324620a3f39c1b62f7cc294192a3e8b8b336d09)]:
-  - @shopware/api-client@1.2.1
-  - @shopware/composables@1.8.1
+- Updated dependencies [[`ab040bb`](https://github.com/shopware/frontends/commit/ab040bb6cc05541001a983c26d5cb6dbf3192394), [`c8fa438`](https://github.com/shopware/frontends/commit/c8fa438b38de6dbc43a2895f2d1906907447c384)]:
+  - @shopware/composables@1.9.1
+  - @shopware/helpers@1.5.0

package/components/SwContactForm.vue

@@ -213,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">
@@ -237,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">
@@ -261,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">
@@ -285,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">
@@ -309,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">
@@ -334,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: "",
@@ -216,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">
@@ -260,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">
@@ -284,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)

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/public/cms/block/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/block/CmsBlockTextTeaserSection.vue

@@ -6,15 +6,15 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="container mx-auto flex pt-6 pb-6">
+  <div class="mx-auto grid md:grid-cols-3 gap-4 py-6">
     <CmsGenericElement
       v-for="(slot, i) in content.slots"
       :key="slot.id"
       :content="slot"
-      class="cms-block-text-teaser-section flex"
+      class="cms-block-text-teaser-section"
       :class="{
-        'flex-basis-1/3 flex-col ': i == 0,
-        'pl-4 flex-basis-2/3': i == 1,
+        'md:col-span-1': i === 0,
+        'md:col-span-2': i === 1,
       }"
     />
   </div>

package/components/public/cms/block/CmsBlockTextTwoColumn.vue

@@ -13,16 +13,14 @@ const rightContent = getSlotContent("right");
 </script>
 
 <template>
-  <article
-    class="cms-block-text-two-column flex justify-center gap-5 md:gap-20"
-  >
+  <article class="cms-block-text-two-column grid md:grid-cols-2 gap-5 md:gap-20">
     <CmsGenericElement
       :content="leftContent"
-      class="w-1/2 cms-block-text-two-column__text"
+      class="cms-block-text-two-column__text"
     />
     <CmsGenericElement
       :content="rightContent"
-      class="w-1/2 cms-block-text-two-column__text"
+      class="cms-block-text-two-column__text"
     />
   </article>
 </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/components/public/cms/element/CmsElementYoutubeVideo.vue

@@ -15,7 +15,7 @@ const config = computed(() => ({
   loop: getConfigValue("loop")
     ? `loop=1&playlist=${getConfigValue("videoID")}&`
     : "",
-  showControls: getConfigValue("showControls") ? "controls=0&" : "",
+  showControls: getConfigValue("showControls") ? "controls=1&" : "controls=0&",
   start:
     Number.parseInt(getConfigValue("start")) !== 0
       ? `start=${getConfigValue("start")}&`
@@ -27,7 +27,13 @@ const config = computed(() => ({
   disableKeyboard: "disablekb=1",
 }));
 
-const videoUrl = `https://www.youtube-nocookie.com/embed/\
+const YOUTUBE_URL = "https://www.youtube.com/embed/";
+const YOUTUBE_NOCOOKIE_URL = "https://www.youtube-nocookie.com/embed/";
+const videoDomain = getConfigValue("advancedPrivacyMode")
+  ? YOUTUBE_NOCOOKIE_URL
+  : YOUTUBE_URL;
+
+const videoUrl = `${videoDomain}\
             ${config.value.videoID}?\
             ${config.value.relatedVideos}\
             ${config.value.loop}\

package/components/public/cms/section/CmsSectionSidebar.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { useCmsSection } from "@shopware/composables";
 import type { CmsSectionSidebar } from "@shopware/composables";
-import { getTranslatedProperty } from "@shopware/helpers";
 import { computed } from "vue";
-import { useCategory } from "#imports";
 
 const props = defineProps<{
   content: CmsSectionSidebar;
@@ -13,16 +11,10 @@ const { getPositionContent } = useCmsSection(props.content);
 const sidebarBlocks = getPositionContent("sidebar");
 const mainBlocks = getPositionContent("main");
 const mobileBehavior = computed(() => props.content.mobileBehavior);
-const { category } = useCategory();
 </script>
 
 <template>
   <div class="cms-section-sidebar grid grid-cols-12 md:grid">
-    <div class="col-span-12 mx-8 md:mx-5 mt-8">
-      <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
-        {{ getTranslatedProperty(category, "name") }}
-      </h1>
-    </div>
     <div class="col-span-12 md:col-span-7 lg:col-span-9 order-1 md:order-2">
       <CmsGenericBlock
         v-for="cmsBlock in mainBlocks"

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.1",
+  "version": "1.5.1",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
@@ -29,32 +29,32 @@
     "nuxt.config.ts"
   ],
   "dependencies": {
-    "@nuxt/kit": "3.15.4",
-    "@tresjs/cientos": "4.0.2",
-    "@tresjs/core": "4.3.1",
+    "@nuxt/kit": "3.17.5",
+    "@tresjs/cientos": "4.3.0",
+    "@tresjs/core": "4.3.3",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "12.5.0",
+    "@vueuse/core": "13.3.0",
     "entities": "6.0.0",
     "html-to-ast": "0.0.6",
     "three": "0.173.0",
-    "vue": "3.5.13",
+    "vue": "3.5.16",
     "xss": "1.0.15",
-    "@shopware/composables": "1.8.1",
-    "@shopware/api-client": "1.2.1",
-    "@shopware/helpers": "1.4.0"
+    "@shopware/composables": "1.9.1",
+    "@shopware/api-client": "1.3.0",
+    "@shopware/helpers": "1.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
-    "@nuxt/schema": "3.15.4",
+    "@nuxt/schema": "3.17.5",
     "@types/three": "0.173.0",
-    "@vitest/coverage-v8": "3.0.5",
-    "nuxt": "3.15.4",
-    "typescript": "5.6.3",
+    "@vitest/coverage-v8": "3.2.3",
+    "nuxt": "3.17.5",
+    "typescript": "5.8.3",
     "unbuild": "2.0.0",
-    "vitest": "3.0.5",
-    "vue-router": "4.5.0",
-    "vue-tsc": "2.2.0",
+    "vitest": "3.2.3",
+    "vue-router": "4.5.1",
+    "vue-tsc": "2.2.10",
     "tsconfig": "0.0.0"
   },
   "scripts": {