@shopware/cms-base-layer 2.1.0 → 3.0.1

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

@@ -5,6 +5,7 @@ import type {
 } from "@shopware/composables";
 import { useElementSize } from "@vueuse/core";
 import { computed, inject, ref, useTemplateRef } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -80,7 +81,8 @@ const toggleTab = (index: number) => {
         :key="index"
         class="transition text-lg font-semibold text-surface-on-surface-variant cursor-pointer"
         :class="{
-          'border-b-3 border-brand-primary text-brand-primary': currentTabIndex === index,
+          'border-b-3 border-brand-primary text-brand-primary':
+            currentTabIndex === index,
         }"
         @click="toggleTab(index)"
       >

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementForm } from "@shopware/composables";
 import { computed, defineAsyncComponent } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementForm } from "@shopware/composables";
 import { computed, defineAsyncComponent } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { CmsElementHtml } from "@shopware/composables";
-
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
 import { h } from "vue";
 

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

@@ -3,14 +3,12 @@ import type {
   CmsElementImage,
   CmsElementManufacturerLogo,
 } from "@shopware/composables";
-import {
-  buildCdnImageUrl,
-  buildUrlPrefix,
-  generateCdnSrcSet,
-} from "@shopware/helpers";
+import { buildUrlPrefix } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
-import { computed, defineAsyncComponent, inject, useTemplateRef } from "vue";
-import { useAppConfig, useCmsElementImage, useUrlResolver } from "#imports";
+import { computed, defineAsyncComponent, useTemplateRef } from "vue";
+
+import { useCmsElementImage, useUrlResolver } from "#imports";
+
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 const props = defineProps<{
@@ -29,34 +27,17 @@ const {
   mimeType,
 } = useCmsElementImage(props.content);
 
-const imageSizes = inject<string>("cms-image-sizes", "100vw");
-const appConfig = useAppConfig();
-
 const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
-const cdnOptions = computed(() => ({
-  format: appConfig.backgroundImage?.format,
-  quality: appConfig.backgroundImage?.quality,
-}));
-
-const srcSet = computed(
-  () =>
-    imageAttrs.value.srcset ||
-    generateCdnSrcSet(imageAttrs.value.src, undefined, cdnOptions.value),
-);
+function roundUp(num: number) {
+  return Math.ceil(num / 100) * 100;
+}
 
-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 imageSize = computed(() => {
+  const containerSize = Math.max(width.value || 0, height.value || 0);
+  if (!containerSize) return undefined;
+  return roundUp(containerSize * 2);
 });
 
 const imageComputedContainerAttrs = computed(() => {
@@ -110,7 +91,8 @@ const SwMedia3D = computed(() => {
       ref="imageElement"
       preset="productDetail"
       loading="lazy"
-      :sizes="imageSizes"
+      :width="imageSize"
+      :height="imageSize"
       :class="{
         'w-full': !imageGallery,
         'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),
@@ -120,8 +102,7 @@ const SwMedia3D = computed(() => {
         'object-contain': imageGallery || displayMode !== 'cover',
       }"
       :alt="imageAttrs.alt"
-      :src="srcPath"
-      :srcset="srcSet"
+      :src="imageAttrs.src"
     />
   </component>
 </template>

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

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { CmsElementImageGallery } from "@shopware/composables";
 import { computed, defineAsyncComponent, ref } from "vue";
+
 import { useCmsElementConfig, useImagePlaceholder } from "#imports";
+
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 // Load SwMedia3D only on client-side to avoid SSR issues with three.js packages
@@ -102,7 +104,7 @@ function onTouchEnd() {
             v-if="currentImage && isSpatial(currentImage)"
             :key="currentImage.url + '-3d'"
             class="w-full h-full relative"
-             :style="{ minHeight }"
+            :style="{ minHeight }"
           >
             <client-only>
               <SwMedia3DAsync :src="currentImage.url" />
@@ -180,7 +182,9 @@ function onTouchEnd() {
         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',
+          navigationDots === 'outside'
+            ? 'mt-4'
+            : 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
         ]"
       >
         <button

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsElementManufacturerLogo } from "@shopware/composables";
+
 import CmsElementImage from "./CmsElementImage.vue";
 
 defineProps<{

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementProductBox } from "@shopware/composables";
 import { computed } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -5,6 +5,7 @@ import { getTranslatedProperty } from "@shopware/helpers";
 import { defu } from "defu";
 import { type Ref, computed, onMounted, ref } from "vue";
 import xss from "xss";
+
 import { useProduct, useShopwareContext, useUser } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -89,28 +90,39 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-full self-stretch inline-flex flex-col justify-start items-start gap-4">
+  <div
+    class="w-full self-stretch inline-flex flex-col justify-start items-start gap-4"
+  >
     <div class="self-stretch flex flex-col justify-center items-center">
       <div
         class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1 cursor-pointer hover:bg-surface-surface-variant transition-colors"
-        @click="toggleSection(1)">
+        @click="toggleSection(1)"
+      >
         <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+          <div
+            class="flex-1 text-surface-on-surface text-base font-bold leading-normal"
+          >
             {{ translations.product.description }}
           </div>
         </div>
         <div class="w-6 h-6 relative">
           <div class="w-2.5 h-1.5 left-[7px] top-[9.50px] absolute">
-            <div class="i-carbon-chevron-down transition-transform duration-200"
-              :class="{ 'rotate-180': isSectionOpen(1) }"></div>
+            <div
+              class="i-carbon-chevron-down transition-transform duration-200"
+              :class="{ 'rotate-180': isSectionOpen(1) }"
+            ></div>
           </div>
         </div>
       </div>
     </div>
     <Transition name="accordion">
-      <div v-if="isSectionOpen(1)" class="self-stretch flex flex-col justify-center items-center gap-2.5">
+      <div
+        v-if="isSectionOpen(1)"
+        class="self-stretch flex flex-col justify-center items-center gap-2.5"
+      >
         <div
-          class="self-stretch text-surface-on-surface text-base font-normal leading-normal">
+          class="self-stretch text-surface-on-surface text-base font-normal leading-normal"
+        >
           <!-- eslint-disable-next-line vue/no-v-html -->
           <div v-html="description"></div>
         </div>
@@ -119,43 +131,68 @@ onMounted(async () => {
     <div class="self-stretch flex flex-col justify-center items-center">
       <div
         class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1 cursor-pointer hover:bg-surface-surface-variant transition-colors"
-        @click="toggleSection(2)">
+        @click="toggleSection(2)"
+      >
         <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+          <div
+            class="flex-1 text-surface-on-surface text-base font-bold leading-normal"
+          >
             {{ translations.product.reviews }} ({{ reviews.length }})
           </div>
         </div>
         <div class="w-6 h-6 relative">
           <div class="w-2.5 h-1.5 left-[7px] top-[9.50px] absolute">
-            <div class="i-carbon-chevron-down transition-transform duration-200"
-              :class="{ 'rotate-180': isSectionOpen(2) }"></div>
+            <div
+              class="i-carbon-chevron-down transition-transform duration-200"
+              :class="{ 'rotate-180': isSectionOpen(2) }"
+            ></div>
           </div>
         </div>
       </div>
     </div>
     <Transition name="accordion">
-      <div v-if="isSectionOpen(2)" class="self-stretch flex flex-col justify-center items-center gap-2.5">
+      <div
+        v-if="isSectionOpen(2)"
+        class="self-stretch flex flex-col justify-center items-center gap-2.5"
+      >
         <div
-          class="self-stretch text-surface-on-surface text-base font-normal leading-normal">
-          <SwProductReviews v-if="product" :product="product" :reviews="reviews" />
+          class="self-stretch text-surface-on-surface text-base font-normal leading-normal"
+        >
+          <SwProductReviews
+            v-if="product"
+            :product="product"
+            :reviews="reviews"
+          />
           <ClientOnly>
             <SwProductReviewsForm
               v-if="isLoggedIn && !reviewAdded && product"
               :product-id="product.id"
               @success="handleReviewAdded"
             />
-            <div v-else-if="!isLoggedIn && product" class="mt-4 p-3 bg-surface-surface-container border border-surface-on-surface-variant rounded-md flex gap-2 md:gap-3 items-center">
-              <div class="w-5 h-5 text-surface-on-surface-variant flex-shrink-0">
+            <div
+              v-else-if="!isLoggedIn && product"
+              class="mt-4 p-3 bg-surface-surface-container border border-surface-on-surface-variant rounded-md flex gap-2 md:gap-3 items-center"
+            >
+              <div
+                class="w-5 h-5 text-surface-on-surface-variant flex-shrink-0"
+              >
                 <SwUserIcon :size="20" />
               </div>
-              <span class="text-sm text-surface-on-surface-variant">{{ translations.product.messages.loginToReview }}</span>
+              <span class="text-sm text-surface-on-surface-variant">{{
+                translations.product.messages.loginToReview
+              }}</span>
             </div>
           </ClientOnly>
-          <div v-if="reviewAdded" class="mt-4 p-3 bg-surface-surface-container border border-states-success rounded-md flex gap-2 md:gap-3 items-center">
+          <div
+            v-if="reviewAdded"
+            class="mt-4 p-3 bg-surface-surface-container border border-states-success rounded-md flex gap-2 md:gap-3 items-center"
+          >
             <div class="w-5 h-5 text-states-success flex-shrink-0">
               <SwCheckmarkIcon :size="20" :filled="true" alt="Success" />
             </div>
-            <span class="text-sm text-states-success">{{ translations.product.messages.reviewAdded }}</span>
+            <span class="text-sm text-states-success">{{
+              translations.product.messages.reviewAdded
+            }}</span>
           </div>
         </div>
       </div>
@@ -163,32 +200,43 @@ onMounted(async () => {
     <div class="self-stretch flex flex-col justify-center items-center">
       <div
         class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1 cursor-pointer hover:bg-surface-surface-variant transition-colors"
-        @click="toggleSection(3)">
+        @click="toggleSection(3)"
+      >
         <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+          <div
+            class="flex-1 text-surface-on-surface text-base font-bold leading-normal"
+          >
             Category
           </div>
         </div>
         <div class="w-6 h-6 relative">
           <div class="w-2.5 h-1.5 left-[7px] top-[9.50px] absolute">
-            <div class="i-carbon-chevron-down transition-transform duration-200"
-              :class="{ 'rotate-180': isSectionOpen(3) }"></div>
+            <div
+              class="i-carbon-chevron-down transition-transform duration-200"
+              :class="{ 'rotate-180': isSectionOpen(3) }"
+            ></div>
           </div>
         </div>
       </div>
     </div>
     <Transition name="accordion">
-      <div v-if="isSectionOpen(3)" class="self-stretch flex flex-col justify-center items-center gap-2.5">
+      <div
+        v-if="isSectionOpen(3)"
+        class="self-stretch flex flex-col justify-center items-center gap-2.5"
+      >
         <div
-          class="self-stretch text-surface-on-surface text-base font-normal leading-normal">
+          class="self-stretch text-surface-on-surface text-base font-normal leading-normal"
+        >
           <div v-if="product?.categories">
-            <div v-for="category in product.categories" :key="category.id" class="mb-2">
+            <div
+              v-for="category in product.categories"
+              :key="category.id"
+              class="mb-2"
+            >
               {{ category.name }}
             </div>
           </div>
-          <div v-else>
-            No categories available
-          </div>
+          <div v-else>No categories available</div>
         </div>
       </div>
     </Transition>

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

@@ -3,8 +3,13 @@ import type { CmsElementProductListing } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, ref, useTemplateRef, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useCategoryListing, useCmsElementConfig } from "#imports";
+
+import {
+  useCategoryListing,
+  useCmsElementConfig,
+  useRoute,
+  useRouter,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -151,10 +156,17 @@ compareRouteQueryWithInitialListing();
 
 <template>
   <div class="max-w-2xl mx-auto lg:max-w-full">
-    <div v-if="!loading && getElements.length < 1" class="text-center text-xl py-16 text-surface-on-surface-variant">
+    <div
+      v-if="!loading && getElements.length < 1"
+      class="text-center text-xl py-16 text-surface-on-surface-variant"
+    >
       {{ 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">
+    <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"
@@ -164,9 +176,12 @@ compareRouteQueryWithInitialListing();
         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"
-        class="w-full" />
+    <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" class="w-full" />
     </div>
     <SwProductListingPagination
       v-if="!loading"

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

@@ -6,6 +6,7 @@ import type {
 import { useElementSize } from "@vueuse/core";
 import { computed, inject, useTemplateRef } from "vue";
 import type { CSSProperties, ComputedRef } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -70,11 +71,12 @@ const hasVerticalAlignment = computed(
 );
 </script>
 <template>
-  <div
-    :style="hasVerticalAlignment ? verticalAlignStyle : undefined"
-  >
+  <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">
+      <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 }">

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

@@ -3,7 +3,9 @@ import type { CmsElementText } from "@shopware/composables";
 import { decodeHTML } from "entities";
 import { computed, defineComponent, getCurrentInstance, h } from "vue";
 import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+
 import { useCmsElementConfig, useUrlResolver } from "#imports";
+
 import { getOptionsFromNode } from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import type { NodeObject } from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import { renderHtml } from "../../../../helpers/html-to-vue/renderToHtml";

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

@@ -2,6 +2,7 @@
 import type { CmsElementVimeoVideo } from "@shopware/composables";
 import { ref } from "vue";
 import type { Ref } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementYoutubeVideo } from "@shopware/composables";
 import { computed } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -35,7 +35,11 @@ const handleLimitChange = (event: Event) => {
   <div v-if="total > 0" class="flex flex-col gap-6 sm:gap-8 mt-6 sm:mt-8">
     <!-- Pagination Controls -->
     <div class="flex justify-center w-full">
-      <SwPagination :total="total" :current="current" @change-page="handlePageChange" />
+      <SwPagination
+        :total="total"
+        :current="current"
+        @change-page="handlePageChange"
+      />
     </div>
 
     <!-- Items per page selector -->
@@ -61,7 +65,9 @@ const handleLimitChange = (event: Event) => {
           <option :value="30">30 {{ translations.listing.products }}</option>
           <option :value="45">45 {{ translations.listing.products }}</option>
         </select>
-        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+        <div
+          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3"
+        >
           <SwChevronIcon direction="down" :size="16" />
         </div>
       </div>

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

@@ -18,14 +18,19 @@ provide("cms-section-layout", "sidebar");
 </script>
 
 <template>
-  <div class="self-stretch flex flex-col lg:flex-row items-stretch gap-16" :class="{
-    'px-6': fullWidth,
-  }">
-    <aside :class="{
-      'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
-        mobileBehavior !== 'hidden',
-      'hidden lg:block': mobileBehavior === 'hidden',
-    }">
+  <div
+    class="self-stretch flex flex-col lg:flex-row items-stretch gap-16"
+    :class="{
+      'px-6': fullWidth,
+    }"
+  >
+    <aside
+      :class="{
+        'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
+          mobileBehavior !== 'hidden',
+        'hidden lg:block': mobileBehavior === 'hidden',
+      }"
+    >
       <div v-for="cmsBlock in sidebarBlocks" :key="cmsBlock.id" class="w-full">
         <CmsGenericBlock :content="cmsBlock" />
       </div>

package/app/components/public/cms/skeleton/ProductCardSkeleton.vue

@@ -5,9 +5,14 @@ const placeholderSvg = useImagePlaceholder();
 </script>
 
 <template>
-  <div role="status" class="p-px flex flex-col justify-start items-start overflow-hidden">
+  <div
+    role="status"
+    class="p-px flex flex-col justify-start items-start overflow-hidden"
+  >
     <!-- Image skeleton -->
-    <div class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse">
+    <div
+      class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse"
+    >
       <img
         :src="placeholderSvg"
         alt=""
@@ -18,9 +23,15 @@ const placeholderSvg = useImagePlaceholder();
 
     <!-- Details skeleton -->
     <div class="w-full pt-4 animate-pulse">
-      <div class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"></div>
-      <div class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
-      <div class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"></div>
+      <div
+        class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"
+      ></div>
+      <div
+        class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"
+      ></div>
+      <div
+        class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"
+      ></div>
       <div class="h-10 bg-gray-200 rounded dark:bg-gray-700 w-full"></div>
     </div>
     <span class="sr-only">Loading...</span>