@shopware/cms-base-layer 2.0.0 → 2.1.0

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

@@ -4,7 +4,7 @@ import type {
   SliderElementConfig,
 } from "@shopware/composables";
 import { useElementSize } from "@vueuse/core";
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, inject, ref, useTemplateRef } from "vue";
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -46,9 +46,24 @@ const crossSellCollections = computed(() => {
 });
 
 const { width } = useElementSize(crossSellContainer);
+const slotCount = inject<number>("cms-block-slot-count", 1);
+const elMinWidth = computed(
+  () => +(config.value.minWidth?.value.replace(/\D+/g, "") || 300),
+);
 const slidesToShow = computed(() => {
-  const minWidth = +(config.value.minWidth?.value.replace(/\D+/g, "") || 0);
-  return Math.floor(width.value / (minWidth * 1.2));
+  // SSR: useElementSize returns 0, fallback to 1200px estimate divided by slot count
+  const containerWidth = width.value || 1200 / slotCount;
+  return Math.max(1, Math.floor(containerWidth / elMinWidth.value));
+});
+
+// Responsive SSR breakpoints: scale by slotCount since container is ~1/slotCount of viewport
+const ssrBreakpoints = computed(() => {
+  const max = slidesToShow.value;
+  const bp: Record<string, number> = {};
+  for (let n = 2; n <= max; n++) {
+    bp[`(min-width: ${elMinWidth.value * n * slotCount}px)`] = n;
+  }
+  return bp;
 });
 
 const toggleTab = (index: number) => {
@@ -80,6 +95,7 @@ const toggleTab = (index: number) => {
         :slides-to-show="slidesToShow"
         :slides-to-scroll="1"
         :autoplay="false"
+        :ssr-breakpoints="ssrBreakpoints"
       >
         <SwProductCard
           v-for="product of crossSellCollections[currentTabIndex]?.products"

package/app/components/public/cms/element/CmsElementImage.vue

@@ -3,10 +3,14 @@ import type {
   CmsElementImage,
   CmsElementManufacturerLogo,
 } from "@shopware/composables";
-import { buildUrlPrefix, encodeUrlPath } from "@shopware/helpers";
+import {
+  buildCdnImageUrl,
+  buildUrlPrefix,
+  generateCdnSrcSet,
+} from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
-import { computed, defineAsyncComponent, useTemplateRef } from "vue";
-import { useCmsElementImage, useUrlResolver } from "#imports";
+import { computed, defineAsyncComponent, inject, useTemplateRef } from "vue";
+import { useAppConfig, useCmsElementImage, useUrlResolver } from "#imports";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 const props = defineProps<{
@@ -25,44 +29,36 @@ const {
   mimeType,
 } = useCmsElementImage(props.content);
 
-const DEFAULT_THUMBNAIL_SIZE = 10;
+const imageSizes = inject<string>("cms-image-sizes", "100vw");
+const appConfig = useAppConfig();
+
 const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
-function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
-}
-
-const srcPath = computed(() => {
-  if (!imageAttrs.value.src) return "";
-
-  try {
-    // Encode the URL first to handle special characters
-    const encodedUrl = encodeUrlPath(imageAttrs.value.src);
-    const url = new URL(encodedUrl);
+const cdnOptions = computed(() => ({
+  format: appConfig.backgroundImage?.format,
+  quality: appConfig.backgroundImage?.quality,
+}));
 
-    // Only add size parameters if dimensions are available (after mount)
-    // This prevents hydration mismatch
-    const w = roundUp(width.value);
-    const h = roundUp(height.value);
+const srcSet = computed(
+  () =>
+    imageAttrs.value.srcset ||
+    generateCdnSrcSet(imageAttrs.value.src, undefined, cdnOptions.value),
+);
 
-    if (w > DEFAULT_THUMBNAIL_SIZE || h > DEFAULT_THUMBNAIL_SIZE) {
-      if (width.value > height.value) {
-        url.searchParams.set("width", String(w));
-      } else {
-        url.searchParams.set("height", String(h));
-      }
-    }
-
-    // Add fit parameter
-    url.searchParams.set("fit", "crop,smart");
-
-    return url.toString();
-  } catch {
-    // Fallback if URL parsing fails
-    return imageAttrs.value.src;
+const srcPath = computed(() => {
+  // Only add dimension params after mount to avoid hydration mismatch
+  // (useElementSize returns 0 during SSR). The srcset handles responsive loading.
+  if (width.value || height.value) {
+    return buildCdnImageUrl(
+      imageAttrs.value.src,
+      { width: width.value, height: height.value },
+      cdnOptions.value,
+    );
   }
+  return imageAttrs.value.src || "";
 });
+
 const imageComputedContainerAttrs = computed(() => {
   const imageAttrsCopy = Object.assign({}, imageContainerAttrs.value);
   if (imageAttrsCopy?.href) {
@@ -114,8 +110,10 @@ const SwMedia3D = computed(() => {
       ref="imageElement"
       preset="productDetail"
       loading="lazy"
+      :sizes="imageSizes"
       :class="{
-        'w-full h-full': !imageGallery,
+        'w-full': !imageGallery,
+        'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),
         'w-4/5': imageGallery,
         'absolute left-0 top-0': ['cover', 'stretch'].includes(displayMode),
         'object-cover': displayMode === 'cover',
@@ -123,7 +121,7 @@ const SwMedia3D = computed(() => {
       }"
       :alt="imageAttrs.alt"
       :src="srcPath"
-      :srcset="imageAttrs.srcset"
+      :srcset="srcSet"
     />
   </component>
 </template>

package/app/components/public/cms/element/CmsElementImageGallery.vue

@@ -1,25 +1,36 @@
 <script setup lang="ts">
 import type { CmsElementImageGallery } from "@shopware/composables";
-import { computed, ref } from "vue";
-import { useCmsElementConfig } from "#imports";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useCmsElementConfig, useImagePlaceholder } from "#imports";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
-const props = withDefaults(
-  defineProps<{
-    content: CmsElementImageGallery;
-    slidesToShow?: number;
-    slidesToScroll?: number;
-  }>(),
-  {
-    slidesToShow: 5,
-    slidesToScroll: 4,
-  },
+// Load SwMedia3D only on client-side to avoid SSR issues with three.js packages
+const SwMedia3DAsync = defineAsyncComponent(
+  () => import("../../../SwMedia3D.vue"),
 );
 
+const props = defineProps<{
+  content: CmsElementImageGallery;
+}>();
+
 const { getConfigValue } = useCmsElementConfig(props.content);
 
+const DEFAULT_MIN_HEIGHT = "500px";
+const DEFAULT_NAVIGATION = "inside";
+
+const minHeight = computed(
+  () => getConfigValue("minHeight") || DEFAULT_MIN_HEIGHT,
+);
+const navigationArrows = computed(
+  () => getConfigValue("navigationArrows") || DEFAULT_NAVIGATION,
+);
+const navigationDots = computed(
+  () => getConfigValue("navigationDots") || DEFAULT_NAVIGATION,
+);
+
 const currentIndex = ref(0);
 const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
+const placeholderSvg = useImagePlaceholder();
 
 function goToSlide(index: number) {
   if (index >= 0 && index < mediaGallery.value.length) {
@@ -43,7 +54,7 @@ const currentImage = computed(() => {
   return mediaGallery.value[currentIndex.value]?.media;
 });
 
-// Touch event handling for mobile swipe gestures - mobile
+// Touch event handling for mobile swipe gestures
 const touchStartX = ref(0);
 const touchEndX = ref(0);
 
@@ -57,77 +68,133 @@ function onTouchMove(event: TouchEvent) {
 
 function onTouchEnd() {
   const deltaX = touchEndX.value - touchStartX.value;
-
-  // Define a threshold for swipe detection
   const threshold = 50; // pixels
 
   if (Math.abs(deltaX) > threshold) {
     if (deltaX < 0) {
-      // Swipe Left
       next();
     } else {
-      // Swipe Right
       previous();
     }
   }
 
-  // Reset values
   touchStartX.value = 0;
   touchEndX.value = 0;
 }
 </script>
 
 <template>
-  <div class="w-full max-w-full relative inline-flex flex-col justify-center items-center gap-2 mx-auto">
+  <div
+    class="w-full max-w-full relative inline-flex flex-col justify-center items-center gap-2 mx-auto"
+  >
     <div class="w-full">
       <!-- Main Image Display -->
-
-      <div class="w-full h-[400px] sm:h-[500px] lg:h-[600px] xl:h-[700px] relative overflow-hidden rounded-lg"
-        @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+      <div
+        class="w-full relative overflow-hidden"
+        :style="{ minHeight }"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+      >
         <Transition name="gallery-fade" mode="out-in">
-          <div v-if="currentImage && isSpatial(currentImage)" class="w-full h-full relative">
-            <CmsElementImageGallery3dPlaceholder class="w-full h-full absolute inset-0 object-cover" />
-            <span class="absolute bottom-4 right-4 text-sm bg-gray-800 rounded px-2 py-1 text-white">
-              3D
-            </span>
+          <!-- 3D media -->
+          <div
+            v-if="currentImage && isSpatial(currentImage)"
+            :key="currentImage.url + '-3d'"
+            class="w-full h-full relative"
+             :style="{ minHeight }"
+          >
+            <client-only>
+              <SwMedia3DAsync :src="currentImage.url" />
+              <template #fallback>
+                <CmsElementImageGallery3dPlaceholder
+                  class="w-full h-full absolute inset-0 object-cover"
+                />
+                <span
+                  class="absolute bottom-4 right-4 text-sm bg-gray-800 rounded px-2 py-1 text-white"
+                >
+                  3D
+                </span>
+              </template>
+            </client-only>
           </div>
-          <NuxtImg v-else-if="currentImage" preset="hero" loading="lazy"
-            class="w-full h-full absolute inset-0 object-cover" :src="currentImage.url"
-            :key="currentImage.url" :alt="currentImage.alt || 'Product image'" />
-          <NuxtImg v-else preset="hero" class="w-full h-full absolute inset-0 object-cover"
-            src="https://placehold.co/600x500" alt="Placeholder image" />
+          <!-- Regular image -->
+          <NuxtImg
+            v-else-if="currentImage"
+            :key="currentImage.url"
+            preset="hero"
+            loading="lazy"
+            class="w-full h-full absolute inset-0 object-cover"
+            :placeholder="placeholderSvg"
+            :src="currentImage.url"
+            :alt="currentImage.alt || 'Product image'"
+          />
+          <!-- Placeholder -->
+          <img
+            v-else
+            class="w-full h-full absolute inset-0 object-cover"
+            :src="placeholderSvg"
+            alt="Placeholder image"
+          />
         </Transition>
-
       </div>
+
       <!-- Navigation Arrows -->
-      <div v-if="mediaGallery.length > 1"
-        class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none">
+      <div
+        v-if="mediaGallery.length > 1 && navigationArrows !== 'none'"
+        class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none"
+      >
         <!-- Previous Button -->
         <button
-          class="w-10 h-10 bg-brand-tertiary rounded-full hover:bg-brand-tertiary-hover transition-colors disabled:opacity-50 pointer-events-auto shadow-lg"
-          :disabled="currentIndex === 0" @click="previous" aria-label="Previous image">
-          <div class="flex items-center justify-center w-full h-full">
-            <div class="i-carbon-chevron-left w-5 h-5 text-brand-on-tertiary"></div>
-          </div>
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
+          :disabled="currentIndex === 0"
+          aria-label="Previous image"
+          @click="previous"
+        >
+          <SwChevronIcon direction="left" />
         </button>
 
         <!-- Next Button -->
         <button
-          class="w-10 h-10 bg-brand-tertiary rounded-full hover:bg-brand-tertiary-hover transition-colors disabled:opacity-50 pointer-events-auto shadow-lg"
-          :disabled="currentIndex === mediaGallery.length - 1" @click="next" aria-label="Next image">
-          <div class="flex items-center justify-center w-full h-full">
-            <div class="i-carbon-chevron-right w-5 h-5 text-brand-on-tertiary"></div>
-          </div>
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
+          :disabled="currentIndex === mediaGallery.length - 1"
+          aria-label="Next image"
+          @click="next"
+        >
+          <SwChevronIcon direction="right" />
         </button>
       </div>
 
       <!-- Dot Indicators -->
-      <div v-if="mediaGallery.length > 1" class="flex justify-center items-center gap-2 mt-2">
-        <button v-for="(image, index) in mediaGallery" :key="image.media.url"
-          class="relative rounded-full transition-all duration-200 hover:scale-110" :class="{
+      <div
+        v-if="mediaGallery.length > 1 && navigationDots !== 'none'"
+        :class="[
+          'flex justify-center items-center gap-2',
+          navigationDots === 'outside' ? 'mt-4' : 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
+        ]"
+      >
+        <button
+          v-for="(image, index) in mediaGallery"
+          :key="image.media?.url"
+          class="relative rounded-full transition-all duration-200 hover:scale-110"
+          :class="{
             'w-6 h-2 bg-surface-on-surface-variant': index === currentIndex,
-            'w-2 h-2 bg-surface-surface-container-highest': index !== currentIndex
-          }" @click="goToSlide(index)" :aria-label="`Go to image ${index + 1}`" />
+            'w-2 h-2 bg-surface-surface-container-highest':
+              index !== currentIndex,
+          }"
+          :aria-label="`Go to image ${index + 1}`"
+          @click="goToSlide(index)"
+        />
       </div>
     </div>
   </div>

package/app/components/public/cms/element/CmsElementProductBox.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import type { CmsElementProductBox } from "@shopware/composables";
 import { computed } from "vue";
+import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
   content: CmsElementProductBox;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
 const product = computed(() => props.content.data?.product || {});
 </script>
 
 <template>
-  <SwProductCard v-if="product?.id" :product="product" />
+  <SwProductCard
+    v-if="product?.id"
+    :product="product"
+    :layout-type="getConfigValue('boxLayout')"
+  />
   <SwProductCardSkeleton v-else />
 </template>

package/app/components/public/cms/element/CmsElementProductListing.vue

@@ -4,13 +4,14 @@ import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, ref, useTemplateRef, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { useCategoryListing } from "#imports";
+import { useCategoryListing, useCmsElementConfig } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
   content: CmsElementProductListing;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
 const defaultLimit = 15;
 const defaultPage = 1;
 const defaultOrder = "name-asc";
@@ -154,8 +155,14 @@ compareRouteQueryWithInitialListing();
       {{ translations.listing.noProducts }}
     </div>
     <div v-if="!loading" ref="productListElement" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-8 sm:gap-y-12 lg:gap-y-16">
-      <SwProductCard v-for="product in getElements" :key="product.id" :product="product"
-        :is-product-listing="isProductListing" class="w-full" />
+      <SwProductCard
+        v-for="product in getElements"
+        :key="product.id"
+        :product="product"
+        :is-product-listing="isProductListing"
+        :layout-type="getConfigValue('boxLayout')"
+        class="w-full"
+      />
     </div>
     <div v-if="loading" data-testid="loading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-8 sm:gap-y-12 lg:gap-y-16">
       <ProductCardSkeleton v-for="index in limit" :key="index"

package/app/components/public/cms/element/CmsElementProductName.vue

@@ -7,5 +7,10 @@ defineProps<{
 </script>
 <template>
   <!-- there is no css config coming from API for this element so we don't need to merge -->
-  <CmsElementText :content="content as any" class="self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]" />
+  <div role="heading" aria-level="1">
+    <CmsElementText
+      :content="content as any"
+      class="self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]"
+    />
+  </div>
 </template>

package/app/components/public/cms/element/CmsElementProductSlider.vue

@@ -3,8 +3,9 @@ import type {
   CmsElementProductSlider,
   SliderElementConfig,
 } from "@shopware/composables";
-import { computed, onMounted, ref, useTemplateRef } from "vue";
-import type { ComputedRef } from "vue";
+import { useElementSize } from "@vueuse/core";
+import { computed, inject, useTemplateRef } from "vue";
+import type { CSSProperties, ComputedRef } from "vue";
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -13,7 +14,16 @@ const props = defineProps<{
 const { getConfigValue } = useCmsElementConfig(props.content);
 
 const productSlider = useTemplateRef<HTMLDivElement>("productSlider");
-const slidesToShow = ref<number>();
+const slotCount = inject<number>("cms-block-slot-count", 1);
+const elMinWidth = computed(
+  () => +getConfigValue("elMinWidth").replace(/\D+/g, "") || 300,
+);
+const { width } = useElementSize(productSlider);
+const slidesToShow = computed(() => {
+  // SSR: useElementSize returns 0, fallback to 1200px estimate divided by slot count
+  const containerWidth = width.value || 1200 / slotCount;
+  return Math.max(1, Math.floor(containerWidth / elMinWidth.value));
+});
 const products = computed(() => props.content?.data?.products ?? []);
 const config: ComputedRef<SliderElementConfig> = computed(() => ({
   minHeight: {
@@ -29,52 +39,63 @@ const config: ComputedRef<SliderElementConfig> = computed(() => ({
     source: "static",
   },
   navigationDots: {
-    value: "",
+    value: getConfigValue("navigation") === true ? "outside" : "",
     source: "static",
   },
   navigationArrows: {
-    value: getConfigValue("navigation") ? "outside" : "",
+    value: getConfigValue("navigation") === true ? "outside" : "",
     source: "static",
   },
 }));
 
-onMounted(() => {
-  setTimeout(() => {
-    let temp = 1;
-    const minWidth = +getConfigValue("elMinWidth").replace(/\D+/g, "");
-    if (productSlider.value?.clientWidth) {
-      temp = Math.ceil(productSlider.value?.clientWidth / (minWidth * 1.2));
-    }
-    slidesToShow.value = temp;
-  }, 100);
+// Responsive SSR breakpoints: scale by slotCount since container is ~1/slotCount of viewport
+const ssrBreakpoints = computed(() => {
+  const max = slidesToShow.value;
+  const bp: Record<string, number> = {};
+  for (let n = 2; n <= max; n++) {
+    bp[`(min-width: ${elMinWidth.value * n * slotCount}px)`] = n;
+  }
+  return bp;
 });
 
 const autoplay = computed(() => getConfigValue("rotate"));
 const title = computed(() => getConfigValue("title"));
 const border = computed(() => getConfigValue("border"));
+
+const verticalAlignStyle = computed<CSSProperties>(() => ({
+  alignContent: getConfigValue("verticalAlign"),
+}));
+const hasVerticalAlignment = computed(
+  () => !!verticalAlignStyle.value.alignContent,
+);
 </script>
 <template>
-  <div ref="productSlider" class="cms-element-product-slider">
-    <h3 v-if="title" class="pl-6 pb-6 text-center md:text-left text-surface-on-surface">
-      {{ title }}
-    </h3>
-    <div :class="{ 'py-5 border border-outline-outline-variant': border }">
-      <SwSlider
-        :config="config"
-        gap="1.25rem"
-        :slides-to-show="slidesToShow"
-        :slides-to-scroll="1"
-        :autoplay="autoplay"
-      >
-        <SwProductCard
-          v-for="product of products"
-          :key="product.id"
-          class="h-full"
-          :product="product"
-          :layout-type="getConfigValue('boxLayout')"
-          :display-mode="getConfigValue('displayMode')"
-        />
-      </SwSlider>
+  <div
+    :style="hasVerticalAlignment ? verticalAlignStyle : undefined"
+  >
+    <div ref="productSlider" class="cms-element-product-slider">
+      <h3 v-if="title" class="pl-6 pb-6 text-center md:text-left text-surface-on-surface">
+        {{ title }}
+      </h3>
+      <div :class="{ 'py-5 border border-outline-outline-variant': border }">
+        <SwSlider
+          :config="config"
+          gap="1.25rem"
+          :slides-to-show="slidesToShow"
+          :slides-to-scroll="1"
+          :autoplay="autoplay"
+          :ssr-breakpoints="ssrBreakpoints"
+        >
+          <SwProductCard
+            v-for="product of products"
+            :key="product.id"
+            class="h-full"
+            :product="product"
+            :layout-type="getConfigValue('boxLayout')"
+            :display-mode="getConfigValue('displayMode')"
+          />
+        </SwSlider>
+      </div>
     </div>
   </div>
 </template>

package/app/components/public/cms/element/CmsElementSidebarFilter.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import type { CmsElementSidebarFilter } from "@shopware/composables";
+import { inject } from "vue";
 
 defineProps<{
   content: CmsElementSidebarFilter;
 }>();
+
+// Inject layout context from parent section
+// If in sidebar section -> use vertical accordion filters
+// Otherwise -> use horizontal dropdown filters
+const sectionLayout = inject<string>("cms-section-layout", "default");
+const isInSidebar = sectionLayout === "sidebar";
 </script>
 <template>
-  <div class="max-w-screen-xl mx-auto">
-    <SwProductListingFilters :content="content" />
+  <div>
+    <SwProductListingFilters v-if="isInSidebar" :content="content" />
+    <SwProductListingFiltersHorizontal v-else :content="content" />
   </div>
 </template>