@shopware/cms-base-layer 2.0.0 → 3.0.0

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { useAppConfig } from "nuxt/app";
+import { useTypedAppConfig } from "./useTypedAppConfig";
 
 /**
  * Composable that provides an SVG placeholder image as a data URI
@@ -8,14 +8,14 @@ import { useAppConfig } from "nuxt/app";
  * @returns Base64-encoded SVG data URI
  */
 export function useImagePlaceholder(color?: string) {
-  const appConfig = useAppConfig();
+  const appConfig = useTypedAppConfig();
   const placeholderColor =
     color || appConfig.imagePlaceholder?.color || "#543B95";
 
   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");
+  });
+});