@shopware/cms-base-layer 2.0.0 → 2.1.0

package/app/components/listing-filters/SwFilterProperties.vue

@@ -15,13 +15,18 @@ import { getTranslatedProperty } from "@shopware/helpers";
 import { computed, ref } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: {
     manufacturer?: string[];
     properties?: string[];
     [key: string]: unknown;
   };
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 const emits =
@@ -35,17 +40,17 @@ const toggle = () => {
 };
 
 const selectedIds = computed(() => {
-  if (props.filter.code === "manufacturer") {
-    return props.selectedFilters?.manufacturer || [];
+  if (filter.code === "manufacturer") {
+    return selectedFilters?.manufacturer || [];
   }
-  return props.selectedFilters?.properties || [];
+  return selectedFilters?.properties || [];
 });
 
 const isChecked = (id: string) => selectedIds.value.includes(id);
 
 const selectValue = (id: string) => {
   const emitCode =
-    props.filter.code === "manufacturer" ? "manufacturer" : "properties";
+    filter.code === "manufacturer" ? "manufacturer" : "properties";
   emits("select-value", {
     code: emitCode,
     value: id,
@@ -55,47 +60,49 @@ const selectValue = (id: string) => {
 
 <template>
   <div class="self-stretch 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="props.filter.code"
-        :aria-label="props.filter.label"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="filter.code"
+          :aria-label="filter.label"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <span
+            class="flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </span>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
+
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" :id="props.filter.code" class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" :id="filter.code" class="self-stretch flex flex-col justify-start items-start gap-4">
         <fieldset class="self-stretch flex flex-col justify-start items-start gap-4">
-        <legend class="sr-only">{{ props.filter.name }}</legend>
+        <legend class="sr-only">{{ filter.name }}</legend>
         <label
-          v-for="option in props.filter.options || props.filter.entities"
+          v-for="option in filter.options || filter.entities"
           :key="`${option.id}-${isChecked(option.id)}`"
           class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
-          @click="selectValue(option.id)"
         >
           <div class="w-4 self-stretch pt-[3px] flex justify-start items-start gap-2.5">
             <SwCheckbox
               :model-value="isChecked(option.id)"
               @update:model-value="() => selectValue(option.id)"
-              @click.stop
             />
           </div>
           <div class="flex-1 inline-flex flex-col justify-start items-start gap-0.5">

package/app/components/listing-filters/SwFilterRating.vue

@@ -16,14 +16,19 @@ const emits =
     (e: "select-value", value: { code: string; value: unknown }) => void
   >();
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  displayMode?: "accordion" | "dropdown";
 }>();
 const isHoverActive = ref(false);
 const hoveredIndex = ref(0);
 const displayedScore = computed(() =>
-  isHoverActive.value ? hoveredIndex.value : props.selectedFilters?.rating || 0,
+  isHoverActive.value ? hoveredIndex.value : selectedFilters?.rating || 0,
 );
 
 const hoverRating = (key: number) => {
@@ -32,10 +37,10 @@ const hoverRating = (key: number) => {
 };
 const onChangeRating = () => {
   const newValue =
-    props.selectedFilters?.rating !== hoveredIndex.value
+    selectedFilters?.rating !== hoveredIndex.value
       ? hoveredIndex.value
       : undefined;
-  emits("select-value", { code: props.filter?.code, value: newValue });
+  emits("select-value", { code: filter?.code, value: newValue });
 };
 
 const isFilterVisible = ref<boolean>(false);
@@ -46,33 +51,37 @@ const toggle = () => {
 
 <template>
   <div class="self-stretch 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="`filter-rating`"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="`filter-rating`"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <span
+            class="flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </span>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
+
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch flex flex-col justify-start items-start gap-4">
         <div class="flex flex-row items-center gap-2 mt-2">
           <div
             v-for="i in 5"

package/app/components/listing-filters/SwFilterShippingFree.vue

@@ -16,10 +16,16 @@ import { defu } from "defu";
 import { computed, ref } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  description,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
   description?: string; // Optional description for i18n
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 type Translations = {
@@ -38,9 +44,7 @@ const emits =
   defineEmits<
     (e: "select-value", value: { code: string; value: unknown }) => void
   >();
-const currentFilterData = computed(
-  () => !!props.selectedFilters[props.filter?.code],
-);
+const currentFilterData = computed(() => !!selectedFilters[filter?.code]);
 
 const isFilterVisible = ref<boolean>(false);
 const toggle = () => {
@@ -53,50 +57,53 @@ onClickOutside(dropdownElement, () => {
 });
 
 const handleRadioUpdate = (val: string | null | boolean | undefined) => {
-  emits("select-value", { code: props.filter.code, value: !!val });
+  emits("select-value", { code: filter.code, value: !!val });
 };
 </script>
 
 <template>
   <div class="self-stretch 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="`filter-${props.filter.code}`"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="`filter-${filter.code}`"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <span
+            class="flex items-center justify-center"
+            aria-hidden="true"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </span>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
 
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" class="self-stretch">
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch">
         <div class="pt-6 space-y-4">
           <div class="self-stretch inline-flex justify-start items-start gap-2 w-full">
             <div class="flex-1 pt-[3px]">
               <SwSwitchButton
                 :model-value="currentFilterData"
                 @update:model-value="handleRadioUpdate"
-                :name="props.filter.code"
-                :aria-label="props.filter.label"
-                :label="props.filter.label"
-                :description="props.description || translations.listing.freeShipping"
+                :name="filter.code"
+                :aria-label="filter.label"
+                :label="filter.label"
+                :description="description || translations.listing.freeShipping"
               />
             </div>
           </div>

package/app/components/public/cms/CmsBlockSpatialViewer.vue

@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { computed, defineAsyncComponent } from "vue";
+import { useCmsBlock } from "#imports";
+import type { Schemas } from "#shopware";
+
+const SwMedia3DAsync = defineAsyncComponent(
+  () => import("../../SwMedia3D.vue"),
+);
+
+const props = defineProps<{
+  content: Schemas["CmsBlock"];
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("default");
+
+function getConfigValue(key: string): unknown {
+  if (!slotContent?.config) return null;
+  const configEntry =
+    slotContent.config[key as keyof typeof slotContent.config];
+  if (
+    configEntry &&
+    typeof configEntry === "object" &&
+    "value" in configEntry &&
+    configEntry !== null
+  ) {
+    return (configEntry as { value: unknown }).value;
+  }
+  return null;
+}
+
+const modelUrl = computed(() => {
+  if (slotContent?.data) {
+    const data = slotContent.data as unknown as Schemas["Media"];
+    if (data?.url && typeof data.url === "string") {
+      return data.url;
+    }
+  }
+
+  const configUrl = getConfigValue("url");
+  if (typeof configUrl === "string" && configUrl) {
+    return configUrl;
+  }
+  return null;
+});
+
+const maxHeight = computed(() => {
+  const height = getConfigValue("maxHeight");
+  return typeof height === "string" ? height : "600px";
+});
+
+const formFactor = computed(() => {
+  const factor = getConfigValue("formFactor");
+  return typeof factor === "string" ? factor : "square";
+});
+
+const aspectRatio = computed(() => {
+  switch (formFactor.value) {
+    case "square":
+      return 1;
+    case "landscape":
+      return 16 / 9;
+    case "portrait":
+      return 9 / 16;
+    default:
+      return 1;
+  }
+});
+
+const containerStyle = computed(() => ({
+  width: "100%",
+  height: "100%",
+  minHeight: "400px",
+  maxHeight: maxHeight.value,
+  aspectRatio: `${aspectRatio.value}`,
+  position: "relative" as const,
+}));
+</script>
+
+<template>
+  <div class="cms-block-spatial-viewer" :style="containerStyle">
+    <client-only>
+      <div v-if="modelUrl" class="w-full h-full">
+        <SwMedia3DAsync :src="modelUrl" />
+      </div>
+
+      <template #fallback>
+        <div class="w-full h-full flex items-center justify-center bg-gray-100">
+          <span class="text-gray-500">3D Viewer</span>
+        </div>
+      </template>
+    </client-only>
+  </div>
+</template>

package/app/components/public/cms/CmsGenericBlock.md

@@ -1,6 +1,21 @@
-Renders a Block type structure
+Renders a Block type structure.
 
-Example usage:
+Resolves the correct CMS block component dynamically and applies layout configuration (CSS classes, background color, background image). When a block has a `backgroundMedia` set, the component automatically optimizes the background image URL using the `getBackgroundImageUrl` helper from `@shopware/helpers`, appending `format` and `quality` parameters from the `backgroundImage` app config.
+
+### Background Image Optimization
+
+Background image settings are read from `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  backgroundImage: {
+    format: "webp",
+    quality: 85,
+  },
+});
+```
+
+### Example usage
 
 ```vue{14-19}
 <script setup lang="ts">

package/app/components/public/cms/CmsGenericBlock.vue

@@ -4,13 +4,21 @@ import {
   getBackgroundImageUrl,
   getCmsLayoutConfiguration,
 } from "@shopware/helpers";
-import { h } from "vue";
+import { h, provide } from "vue";
+import { useAppConfig } from "#imports";
 import type { Schemas } from "#shopware";
+import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 
 const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
+const appConfig = useAppConfig();
+
+const slotCount = props.content.slots?.length || 1;
+provide("cms-block-slot-count", slotCount);
+provide("cms-image-sizes", getImageSizes(slotCount, appConfig.imageSizes));
+
 const DynamicRender = () => {
   const {
     resolvedComponent,
@@ -31,16 +39,22 @@ const DynamicRender = () => {
       layoutStyles.backgroundImage = getBackgroundImageUrl(
         layoutStyles.backgroundImage,
         props.content,
+        {
+          format: appConfig.backgroundImage?.format,
+          quality: appConfig.backgroundImage?.quality,
+        },
       );
     }
 
     const containerStyles = {
       backgroundColor: layoutStyles.backgroundColor,
       backgroundImage: layoutStyles.backgroundImage,
+      backgroundSize: layoutStyles.backgroundSize,
     };
 
     layoutStyles.backgroundColor = null;
     layoutStyles.backgroundImage = null;
+    layoutStyles.backgroundSize = null;
     return h(
       "div",
       {

package/app/components/public/cms/CmsPage.md

@@ -1,6 +1,23 @@
-An entrypoint to render the whole CMS object
+An entrypoint to render the whole CMS object.
 
-Example usage:
+Resolves all CMS sections dynamically and applies their layout configuration. When a section has a `backgroundMedia` set, the component automatically optimizes the background image URL using the `getBackgroundImageUrl` helper from `@shopware/helpers`, appending `format` and `quality` parameters from the `backgroundImage` app config.
+
+### Background Image Optimization
+
+Background image settings are read from `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  backgroundImage: {
+    format: "webp", // output format
+    quality: 85, // image quality (0-100)
+  },
+});
+```
+
+See the [cms-base-layer README](../../../../../../README.md#%EF%B8%8F-background-image-optimization) for full details.
+
+### Example usage
 
 ```vue{29}
 <script setup lang="ts">

package/app/components/public/cms/CmsPage.vue

@@ -6,14 +6,20 @@ import {
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
 import { computed, h, resolveComponent, watchEffect } from "vue";
-import { createCategoryListingContext, useNavigationContext } from "#imports";
+import {
+  createCategoryListingContext,
+  useAppConfig,
+  useNavigationContext,
+} from "#imports";
 import type { Schemas } from "#shopware";
+import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
 
 const props = defineProps<{
   content: Schemas["CmsPage"];
 }>();
 
 const { routeName } = useNavigationContext();
+const appConfig = useAppConfig();
 
 // Function to initialize or update listing context
 function updateListingContext(content: Schemas["CmsPage"]) {
@@ -36,6 +42,8 @@ const cmsSections = computed<Schemas["CmsSection"][]>(() => {
   return props.content?.sections || [];
 });
 
+useLcpImagePreload(props.content?.sections || []);
+
 const DynamicRender = () => {
   const componentsMap = cmsSections.value.map((section) => {
     return {
@@ -56,6 +64,7 @@ const DynamicRender = () => {
       layoutStyles.backgroundImage = getBackgroundImageUrl(
         layoutStyles.backgroundImage,
         componentObject.section,
+        appConfig.backgroundImage,
       );
     }
 
@@ -64,6 +73,7 @@ const DynamicRender = () => {
       class: {
         ...cssClasses,
         "max-w-screen-2xl w-full mx-auto": layoutStyles?.sizingMode === "boxed",
+        "w-full": layoutStyles?.sizingMode === "full_width",
       },
       style: {
         backgroundColor: layoutStyles?.backgroundColor,

package/app/components/public/cms/block/CmsBlockCenterText.vue

@@ -21,6 +21,6 @@ const slotCenterContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-center-text .cms-element-image {
-  @apply aspect-square object-cover;
+  @apply self-stretch min-h-12;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageText.vue

@@ -12,12 +12,12 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <div class="flex flex-col md:flex-row justify-start items-start gap-6 w-full">
-    <div class="w-full md:flex-1 p-4">
-      <CmsGenericElement :content="leftContent" />
+  <div class="flex flex-col md:flex-row justify-start items-stretch gap-6 w-full">
+    <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
+      <CmsGenericElement :content="leftContent" class="flex-1" />
     </div>
-    <div class="w-full md:flex-1 p-4">
-      <CmsGenericElement :content="rightContent" />
+    <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
+      <CmsGenericElement :content="rightContent" class="flex-1" />
     </div>
   </div>
 </template>

package/app/components/public/cms/block/CmsBlockTextOnImage.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { CmsBlockTextOnImage } from "@shopware/composables";
-import { getCmsLayoutConfiguration } from "@shopware/helpers";
 import { useCmsBlock } from "#imports";
 
 const props = defineProps<{
@@ -8,23 +7,17 @@ const props = defineProps<{
 }>();
 
 const { getSlotContent } = useCmsBlock(props.content);
-const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
 
 const slotContent = getSlotContent("content");
 </script>
 
 <template>
   <div
-    class="cms-block-text-on-image min-h-[500px] flex items-center justify-center py-20 px-4 bg-cover bg-center bg-no-repeat relative"
-    :class="cssClasses"
-    :style="layoutStyles as any"
+    class="cms-block-text-on-image min-h-[500px] py-20 bg-cover bg-bottom bg-no-repeat relative"
   >
-    <div class="relative z-10 text-center max-w-6xl">
-      <CmsGenericElement
-        v-if="slotContent"
-        :content="slotContent"
- 
-      />
-    </div>
+    <CmsGenericElement
+      v-if="slotContent"
+      :content="slotContent"
+    />
   </div>
 </template>

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

@@ -56,7 +56,7 @@ const { product, changeVariant } = useProduct(
   props.content.data.product,
   props.content.data.configuratorSettings || [],
 );
-const { unitPrice, price, tierPrices, isListPrice } = useProductPrice(product);
+const { unitPrice, price, tierPrices, hasListPrice } = useProductPrice(product);
 const regulationPrice = computed(() => price.value?.regulationPrice?.price);
 const { getFormattedPrice } = usePrice();
 const referencePrice = computed(
@@ -79,13 +79,13 @@ const productName = computed(() => product.value?.translated?.name || "");
                 {{ productName }}</div>
 
             <div v-if="tierPrices.length <= 1">
-                <SwSharedPrice v-if="isListPrice"
+                <SwSharedPrice v-if="hasListPrice"
                     class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
                     :value="price?.listPrice?.price" />
                 <SwSharedPrice v-if="unitPrice"
                     class="text-surface-on-surface text-base font-bold leading-normal"
                     :class="{
-                        'text-red': isListPrice,
+                        'text-red': hasListPrice,
                     }" :value="unitPrice" />
                 <div v-if="regulationPrice" class="text-xs flex text-secondary-500">
                     {{ translations.product.previously }}