@shopware/cms-base-layer 2.0.0 → 3.0.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, resolveComponent } from "vue";
 import type { Schemas } from "#shopware";
+import { useTypedAppConfig } from "../../../composables/useTypedAppConfig";
+import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 
 const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
+const appConfig = useTypedAppConfig();
+
+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",
       {
@@ -53,7 +67,12 @@ const DynamicRender = () => {
       }),
     );
   }
-  console.error(`Component not resolve: ${componentNameToResolve}`);
+  if (import.meta.dev) {
+    console.warn(
+      `[CMS] Block type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-blocks`,
+    );
+    return h(resolveComponent("CmsNoComponent"), { content: props.content });
+  }
   return h("div", {}, "");
 };
 </script>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { resolveCmsComponent } from "@shopware/composables";
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
-import { h } from "vue";
+import { h, resolveComponent } from "vue";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -28,7 +28,12 @@ const DynamicRender = () => {
       class: cssClasses,
     });
   }
-  console.error(`Component not resolved: ${componentNameToResolve}`);
+  if (import.meta.dev) {
+    console.warn(
+      `[CMS] Element type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-elements`,
+    );
+    return h(resolveComponent("CmsNoComponent"), { content: props.content });
+  }
   return h("div", {}, "");
 };
 </script>

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

@@ -1,9 +1,11 @@
 <script setup lang="ts">
+import { refAutoReset } from "@vueuse/core";
+import { pascalCase } from "scule";
 import { computed } from "vue";
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
-  content: Schemas["CmsBlock"];
+  content: Schemas["CmsSection"] | Schemas["CmsBlock"] | Schemas["CmsSlot"];
 }>();
 
 const elementType = computed(() =>
@@ -15,13 +17,90 @@ const elementType = computed(() =>
 );
 
 const componentName = computed(() => props.content.type);
+
+const expectedComponentName = computed(() =>
+  pascalCase(`Cms-${elementType.value}-${componentName.value ?? ""}`),
+);
+
+const docsUrl = computed(() => {
+  const params = new URLSearchParams({
+    component: expectedComponentName.value,
+    type: elementType.value.toLowerCase(),
+  });
+  return `https://frontends.shopware.com/getting-started/cms/missing-component?${params}`;
+});
+
+const aiPrompt = computed(() => {
+  const schemaType =
+    props.content.apiAlias === "cms_block"
+      ? 'Schemas["CmsBlock"]'
+      : props.content.apiAlias === "cms_section"
+        ? 'Schemas["CmsSection"]'
+        : 'Schemas["CmsSlot"]';
+
+  const contentJson = JSON.stringify(props.content, null, 2);
+  const type = elementType.value.toLowerCase();
+  const name = componentName.value;
+  const compName = expectedComponentName.value;
+
+  return [
+    `Create a Vue 3 component \`${compName}.vue\` for a Shopware Frontends headless storefront.`,
+    "",
+    `This component renders the CMS ${type} type: "${name}" (apiAlias: "${props.content.apiAlias}").`,
+    "",
+    "Requirements:",
+    `- Accept a \`content: ${schemaType}\` prop`,
+    `- Render the data for CMS ${type} type "${name}"`,
+    `- Follow patterns from existing Cms${elementType.value} components in packages/cms-base-layer/app/components/public/cms/${type}/`,
+    "- Use composables from @shopware/composables where applicable",
+    "",
+    `The full content prop for this ${type} is:`,
+    contentJson,
+    "",
+    `Reference: ${docsUrl.value}`,
+  ].join("\n");
+});
+
+const copied = refAutoReset(false, 2000);
+
+async function copyPrompt() {
+  try {
+    await navigator.clipboard.writeText(aiPrompt.value);
+    copied.value = true;
+  } catch {
+    // Fallback: clipboard API unavailable (non-secure origin, unfocused document)
+    console.warn("[CMS] Could not copy to clipboard. Prompt logged below:");
+    console.info(aiPrompt.value);
+  }
+}
 </script>
-Ū
+
 <template>
-  <span class="sw-text-error">
-    <b>
-      {{ elementType }}<i> {{ componentName }} </i>
-    </b>
-    is not implemented yet!
-  </span>
+  <div
+    class="sw-cms-no-component box-border min-h-[40px] rounded border-2 border-dashed border-brand-primary bg-brand-secondary font-mono text-[11px] text-brand-on-secondary"
+  >
+    <div class="flex flex-wrap items-center gap-1.5 px-2 py-1.5">
+      <span class="text-brand-primary">⚠ missing implementation:</span>
+      <span class="font-semibold">{{ expectedComponentName }}</span>
+
+      <a
+        :href="docsUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="View CMS documentation"
+        class="whitespace-nowrap rounded border border-outline-outline-primary bg-surface-surface px-[5px] py-px text-[10px] leading-none text-brand-primary no-underline hover:bg-brand-secondary-hover"
+      >
+        docs ↗
+      </a>
+
+      <button
+        type="button"
+        title="Copy AI prompt to clipboard"
+        class="cursor-pointer whitespace-nowrap rounded border border-outline-outline-primary bg-surface-surface px-[5px] py-px font-mono text-[10px] leading-none text-brand-primary hover:bg-brand-secondary-hover"
+        @click.stop="copyPrompt"
+      >
+        {{ copied ? "copied ✓" : "copy AI prompt" }}
+      </button>
+    </div>
+  </div>
 </template>

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">