@shopware/cms-base-layer 2.0.0 → 2.1.0

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

@@ -20,10 +20,10 @@ const mappedContent = computed<string>(() => {
 });
 
 const style = computed<CSSProperties>(() => ({
-  alignItems: getConfigValue("verticalAlign"),
+  alignContent: getConfigValue("verticalAlign"),
 }));
 
-const hasVerticalAlignment = computed(() => !!style.value.alignItems);
+const hasVerticalAlignment = computed(() => !!style.value.alignContent);
 
 const CmsTextRender = defineComponent({
   setup() {
@@ -37,7 +37,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              !node.attrs?.class?.match(/btn\s?/)
+              !node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -61,7 +61,7 @@ const CmsTextRender = defineComponent({
             return (
               node.type === "tag" &&
               node.name === "a" &&
-              node.attrs?.class?.match(/btn\s?/)
+              !!node.attrs?.class?.includes("btn")
             );
           },
           renderer(
@@ -75,6 +75,7 @@ const CmsTextRender = defineComponent({
                 "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
 
               _class = node.attrs.class
+                .replace(/\bbtn\s+/, "")
                 .replace(
                   "btn-secondary",
                   `${btnClass} bg-brand-secondary text-brand-on-secondary hover:bg-brand-secondary-hover`,
@@ -82,7 +83,8 @@ const CmsTextRender = defineComponent({
                 .replace(
                   "btn-primary",
                   `${btnClass} bg-brand-primary text-brand-on-primary hover:bg-brand-primary-hover`,
-                );
+                )
+                .trim();
             }
 
             return createElement(
@@ -146,18 +148,15 @@ const CmsTextRender = defineComponent({
         ? mappedContent.value
         : "<div class='cms-element-text missing-content-element'></div>";
 
-    return () =>
-      h("div", {}, renderHtml(rawHtml, config, h, context, resolveUrl));
+    return () => renderHtml(rawHtml, config, h, context, resolveUrl);
   },
 });
 </script>
 <template>
-  <div
-    :class="{ flex: hasVerticalAlignment, 'flex-row': hasVerticalAlignment }"
-    :style="style"
-  >
+  <div v-if="hasVerticalAlignment" class="grid h-full" :style="style">
     <CmsTextRender />
   </div>
+  <CmsTextRender v-else />
 </template>
 <style scoped>
 /** Global CSS styles for text elements */

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

@@ -15,8 +15,8 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-  changePage: [page: number];
-  changeLimit: [limit: number];
+  changePage: [number];
+  changeLimit: [number];
 }>();
 
 const limitModel = defineModel<number>("limit", { required: true });

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

@@ -7,14 +7,14 @@ const props = defineProps<{
 }>();
 
 const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+const { sizingMode: _, ...sectionStyles } = layoutStyles;
 </script>
 
 <template>
-  <div class="my-4" :class="cssClasses" :style="layoutStyles as any">
+  <div class="my-4" :class="cssClasses" :style="sectionStyles as any">
     <CmsGenericBlock
       v-for="cmsBlock in content.blocks"
       :key="cmsBlock.id"
-      class="overflow-auto"
       :content="cmsBlock"
     />
   </div>

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCmsSection } from "@shopware/composables";
 import type { CmsSectionSidebar } from "@shopware/composables";
-import { computed } from "vue";
+import { computed, provide } from "vue";
 
 const props = defineProps<{
   content: CmsSectionSidebar;
@@ -12,6 +12,9 @@ const sidebarBlocks = getPositionContent("sidebar");
 const mainBlocks = getPositionContent("main");
 const mobileBehavior = computed(() => props.content.mobileBehavior);
 const fullWidth = computed(() => section.sizingMode === "full_width");
+
+// Provide layout context for child components
+provide("cms-section-layout", "sidebar");
 </script>
 
 <template>
@@ -27,10 +30,10 @@ const fullWidth = computed(() => section.sizingMode === "full_width");
         <CmsGenericBlock :content="cmsBlock" />
       </div>
     </aside>
-    <main class="flex-1 flex flex-col justify-start items-stretch gap-20">
+    <div class="flex-1 flex flex-col justify-start items-stretch gap-20">
       <div v-for="cmsBlock in mainBlocks" :key="cmsBlock.id" class="w-full">
         <CmsGenericBlock :content="cmsBlock" />
       </div>
-    </main>
+    </div>
   </div>
 </template>

package/app/components/ui/BaseButton.vue

@@ -20,14 +20,14 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<SwBaseButtonProps>(), {
-  variant: "primary",
-  size: "medium",
-  disabled: false,
-  loading: false,
-  type: "button",
-  block: false,
-});
+const {
+  variant = "primary",
+  size = "medium",
+  disabled = false,
+  loading = false,
+  type = "button",
+  block = false,
+} = defineProps<SwBaseButtonProps>();
 
 const emit = defineEmits<{
   click: [event: MouseEvent];
@@ -43,7 +43,7 @@ const buttonClasses = computed(() => {
     medium: "px-4 py-3 text-base",
     large: "px-6 py-4 text-lg",
   };
-  classes.push(sizeClasses[props.size]);
+  classes.push(sizeClasses[size]);
 
   const variantClasses = {
     primary:
@@ -60,15 +60,15 @@ const buttonClasses = computed(() => {
       "bg-transparent text-surface-on-surface-variant hover:text-surface-on-surface focus:ring-surface-on-surface",
   };
 
-  if (props.disabled || props.loading) {
+  if (disabled || loading) {
     classes.push(
       "bg-surface-surface-disabled text-surface-on-surface cursor-not-allowed opacity-50",
     );
   } else {
-    classes.push(variantClasses[props.variant]);
+    classes.push(variantClasses[variant]);
   }
 
-  if (props.block) {
+  if (block) {
     classes.push("w-full");
   }
 
@@ -76,7 +76,7 @@ const buttonClasses = computed(() => {
 });
 
 const handleClick = (event: MouseEvent) => {
-  if (!props.disabled && !props.loading) {
+  if (!disabled && !loading) {
     emit("click", event);
   }
 };
@@ -90,10 +90,13 @@ const handleClick = (event: MouseEvent) => {
     @click="handleClick"
     v-bind="$attrs"
   >
-    <div v-if="loading" class="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"></div>
+    <div
+      v-if="loading"
+      class="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin"
+    ></div>
 
     <span :class="{ 'opacity-0': loading }">
       <slot />
     </span>
   </button>
-</template>
+</template>

package/app/components/ui/ChevronIcon.vue

@@ -2,18 +2,15 @@
 import ChevronSvg from "@cms-assets/icons/chevron.svg";
 import { computed } from "vue";
 
-const props = withDefaults(
-  defineProps<{
-    direction?: "up" | "down" | "left" | "right";
-    size?: number;
-    alt?: string;
-  }>(),
-  {
-    direction: "down",
-    size: 24,
-    alt: "",
-  },
-);
+const {
+  direction = "down",
+  size = 24,
+  alt = "",
+} = defineProps<{
+  direction?: "up" | "down" | "left" | "right";
+  size?: number;
+  alt?: string;
+}>();
 
 const rotationClass = computed(() => {
   const rotations = {
@@ -22,7 +19,7 @@ const rotationClass = computed(() => {
     left: "rotate-90",
     right: "-rotate-90",
   };
-  return rotations[props.direction];
+  return rotations[direction];
 });
 </script>
 

package/app/components/ui/WishlistIcon.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-withDefaults(
-  defineProps<{
-    filled?: boolean;
-  }>(),
-  {
-    filled: false,
-  },
-);
+const { filled = false } = defineProps<{
+  filled?: boolean;
+}>();
 </script>
 <template>
   <div class="relative">

package/app/composables/useImagePlaceholder.ts

@@ -15,7 +15,7 @@ export function useImagePlaceholder(color?: string) {
   const placeholderSvg = `data:image/svg+xml;base64,${btoa(
     `
 <svg width="96" height="96" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <rect width="96" height="96" rx="8" fill="${placeholderColor}" opacity="0.08"/>
+  <rect width="96" height="96" fill="${placeholderColor}" opacity="0.08"/>
   <g transform="translate(36, 36)">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M3 22H21C21.5523 22 22 21.5523 22 21V17L17.7071 12.7071C17.3166 12.3166 16.6834 12.3166 16.2929 12.7071L10.5 18.5C10.2239 18.7761 9.77614 18.7761 9.5 18.5C9.22386 18.2239 9.22386 17.7761 9.5 17.5L11 16L8.70711 13.7071C8.31658 13.3166 7.68342 13.3166 7.29289 13.7071L2 19V21C2 21.5523 2.44772 22 3 22ZM21 24H3C1.34315 24 0 22.6569 0 21V3C0 1.34315 1.34315 0 3 0H21C22.6569 0 24 1.34315 24 3V21C24 22.6569 22.6569 24 21 24ZM6.5 9C7.88071 9 9 7.88071 9 6.5C9 5.11929 7.88071 4 6.5 4C5.11929 4 4 5.11929 4 6.5C4 7.88071 5.11929 9 6.5 9Z" fill="${placeholderColor}" opacity="0.4"/>
   </g>

package/app/composables/useLcpImagePreload.test.ts

@@ -0,0 +1,229 @@
+import { describe, expect, it } from "vitest";
+import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
+
+type Sections = Parameters<typeof findFirstCmsImageUrl>[0];
+
+function makeSection(overrides: Record<string, unknown> = {}) {
+  return {
+    id: "s1",
+    position: 0,
+    type: "default",
+    sizingMode: "boxed",
+    mobileBehavior: "wrap",
+    visibility: {},
+    ...overrides,
+  } as Sections[number];
+}
+
+function makeBlock(overrides: Record<string, unknown> = {}) {
+  return {
+    id: "b1",
+    position: 0,
+    type: "image",
+    sectionPosition: "main",
+    marginTop: "0",
+    marginBottom: "0",
+    marginLeft: "0",
+    marginRight: "0",
+    visibility: {},
+    ...overrides,
+  };
+}
+
+describe("findFirstCmsImageUrl", () => {
+  it("should return undefined for empty sections", () => {
+    expect(findFirstCmsImageUrl([])).toBeUndefined();
+  });
+
+  it("should return undefined when no images exist", () => {
+    const sections = [
+      makeSection({ blocks: [makeBlock({ slots: [] })] }),
+    ] as Sections;
+    expect(findFirstCmsImageUrl(sections)).toBeUndefined();
+  });
+
+  it("should find a section background image", () => {
+    const sections = [
+      makeSection({
+        backgroundMedia: {
+          url: "https://cdn.example.com/section-bg.jpg",
+          metaData: { width: 1920, height: 1080 },
+        },
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toContain("cdn.example.com");
+    expect(result).toContain("section-bg.jpg");
+  });
+
+  it("should find a block background image", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            backgroundMedia: {
+              url: "https://cdn.example.com/block-bg.jpg",
+              metaData: { width: 800, height: 600 },
+            },
+            slots: [],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toContain("cdn.example.com");
+    expect(result).toContain("block-bg.jpg");
+  });
+
+  it("should find an image element media URL", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toBe("https://cdn.example.com/element.jpg");
+  });
+
+  it("should apply format option to element media URL", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections, { format: "webp" });
+    expect(result).toBe("https://cdn.example.com/element.jpg?format=webp");
+  });
+
+  it("should apply format and quality options to element media URL", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections, {
+      format: "webp",
+      quality: 85,
+    });
+    expect(result).toBe(
+      "https://cdn.example.com/element.jpg?format=webp&quality=85",
+    );
+  });
+
+  it("should prioritize section bg over block bg over element media", () => {
+    const sections = [
+      makeSection({
+        backgroundMedia: {
+          url: "https://cdn.example.com/section-bg.jpg",
+          metaData: { width: 1920, height: 1080 },
+        },
+        blocks: [
+          makeBlock({
+            backgroundMedia: {
+              url: "https://cdn.example.com/block-bg.jpg",
+              metaData: { width: 800, height: 600 },
+            },
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/element.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toContain("section-bg.jpg");
+  });
+
+  it("should skip sections without blocks and find next image", () => {
+    const sections = [
+      makeSection({}),
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "https://cdn.example.com/found.jpg" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toBe("https://cdn.example.com/found.jpg");
+  });
+
+  it("should handle invalid element media URLs gracefully", () => {
+    const sections = [
+      makeSection({
+        blocks: [
+          makeBlock({
+            slots: [
+              {
+                id: "slot1",
+                type: "image",
+                slot: "content",
+                data: {
+                  media: { url: "not a valid url" },
+                },
+              },
+            ],
+          }),
+        ],
+      }),
+    ] as Sections;
+    const result = findFirstCmsImageUrl(sections);
+    expect(result).toBe("not a valid url");
+  });
+});

package/app/composables/useLcpImagePreload.ts

@@ -0,0 +1,39 @@
+import { computed } from "vue";
+import { useAppConfig, useHead } from "#imports";
+import type { Schemas } from "#shopware";
+import { findFirstCmsImageUrl } from "../helpers/cms/findFirstCmsImageUrl";
+
+/**
+ * Preloads the first image found in CMS sections (background or element).
+ * This is typically the LCP (Largest Contentful Paint) candidate.
+ *
+ * Injects a `<link rel="preload" as="image">` in the `<head>` during SSR,
+ * allowing the browser to fetch the image before parsing CSS.
+ */
+export function useLcpImagePreload(sections: Schemas["CmsSection"][]) {
+  const appConfig = useAppConfig();
+
+  const lcpImageHref = computed(() =>
+    findFirstCmsImageUrl(sections, {
+      format: appConfig.backgroundImage?.format,
+      quality: appConfig.backgroundImage?.quality,
+    }),
+  );
+
+  useHead(
+    computed(() =>
+      lcpImageHref.value
+        ? {
+            link: [
+              {
+                rel: "preload",
+                as: "image",
+                fetchpriority: "high",
+                href: lcpImageHref.value,
+              },
+            ],
+          }
+        : {},
+    ),
+  );
+}

package/app/helpers/cms/findFirstCmsImageUrl.ts

@@ -0,0 +1,86 @@
+import { getBackgroundImageUrl } from "@shopware/helpers";
+
+interface MediaMeta {
+  width?: number;
+  height?: number;
+}
+
+interface BackgroundMediaHolder {
+  backgroundMedia?: {
+    url?: string;
+    metaData?: MediaMeta;
+  };
+}
+
+interface CmsSlot {
+  data?: { media?: { url?: string } } | unknown;
+}
+
+interface CmsBlock extends BackgroundMediaHolder {
+  slots?: CmsSlot[];
+}
+
+interface CmsSection extends BackgroundMediaHolder {
+  blocks?: CmsBlock[];
+}
+
+/**
+ * Finds the first visible image URL in CMS page sections by scanning:
+ * 1. Section background images
+ * 2. Block background images
+ * 3. Image element media (slot data)
+ *
+ * Returns the URL with optimized format/quality params applied,
+ * or undefined if no image is found.
+ */
+export function findFirstCmsImageUrl(
+  sections: CmsSection[],
+  options?: { format?: string; quality?: number },
+): string | undefined {
+  for (const section of sections) {
+    // 1. Section background
+    if (section.backgroundMedia?.url) {
+      return getBackgroundImageUrl(
+        `url("${section.backgroundMedia.url}")`,
+        section,
+        options,
+      ).replace(/^url\("([^"]+)"\)$/, "$1");
+    }
+
+    if (!section.blocks) continue;
+
+    for (const block of section.blocks) {
+      // 2. Block background
+      if (block.backgroundMedia?.url) {
+        return getBackgroundImageUrl(
+          `url("${block.backgroundMedia.url}")`,
+          block,
+          options,
+        ).replace(/^url\("([^"]+)"\)$/, "$1");
+      }
+
+      if (!block.slots) continue;
+
+      for (const slot of block.slots) {
+        // 3. Image element media
+        const media = (slot.data as { media?: { url?: string } })?.media;
+        if (media?.url) {
+          try {
+            const url = new URL(media.url);
+            if (options?.format) {
+              url.searchParams.set("format", options.format);
+            }
+            if (typeof options?.quality === "number") {
+              url.searchParams.set("quality", String(options.quality));
+            }
+            return url.toString();
+          } catch {
+            return media.url;
+          }
+        }
+      }
+    }
+  }
+
+  return undefined;
+}

package/app/helpers/cms/getImageSizes.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { getImageSizes } from "./getImageSizes";
+
+describe("getImageSizes", () => {
+  it("should return sizes for 1 slot", () => {
+    expect(getImageSizes(1)).toBe("(max-width: 768px) 100vw, 100vw");
+  });
+
+  it("should return sizes for 2 slots", () => {
+    expect(getImageSizes(2)).toBe("(max-width: 768px) 100vw, 50vw");
+  });
+
+  it("should return sizes for 3 slots", () => {
+    expect(getImageSizes(3)).toBe("(max-width: 768px) 100vw, 33vw");
+  });
+
+  it("should return default sizes for slot count > 3", () => {
+    expect(getImageSizes(4)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+
+  it("should return default sizes for slot count 0", () => {
+    expect(getImageSizes(0)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+
+  it("should use custom config overrides", () => {
+    const config = {
+      1: "100vw",
+      2: "50vw",
+    };
+    expect(getImageSizes(1, config)).toBe("100vw");
+    expect(getImageSizes(2, config)).toBe("50vw");
+  });
+
+  it("should fall back to custom default from config", () => {
+    const config = {
+      default: "80vw",
+    };
+    expect(getImageSizes(5, config)).toBe("80vw");
+  });
+
+  it("should fall back to 100vw when no default exists", () => {
+    const config = {
+      1: "100vw",
+    };
+    // Override default to empty by spreading — slot 5 not found, default not in config
+    // but DEFAULT_IMAGE_SIZES has a default, so config must explicitly remove it
+    // Actually, the spread keeps DEFAULT_IMAGE_SIZES.default unless overridden
+    expect(getImageSizes(5, config)).toBe("(max-width: 768px) 50vw, 25vw");
+  });
+});