@shopware/cms-base-layer 2.0.0 → 2.1.0

package/app/components/SwQuantitySelect.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { defu } from "defu";
-import { computed, getCurrentInstance } from "vue";
+import { computed, useId } from "vue";
 import { useCmsTranslations } from "#imports";
 
 type Translations = {
@@ -43,12 +43,9 @@ const {
   id?: string;
 }>();
 
-// generate an id that prefers a provided prop and otherwise uses the component uid
-const inputId = computed(() => {
-  if (propId) return propId;
-  const uid = Math.random().toString(36).substr(2, 9);
-  return `sw-quantity-${uid}`;
-});
+// generate an id that prefers a provided prop and otherwise uses Vue's useId for SSR/CSR consistency
+const generatedId = useId();
+const inputId = computed(() => propId || generatedId);
 
 function increaseQty() {
   quantity.value++;

package/app/components/SwSlider.vue

@@ -10,30 +10,36 @@ import {
   useTemplateRef,
   watch,
 } from "vue";
-import type { CSSProperties, VNodeArrayChildren } from "vue";
-import { useCmsElementConfig } from "#imports";
+import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+import { useCmsElementConfig, useHead, useId } from "#imports";
 import type { Schemas } from "#shopware";
 
-const props = withDefaults(
-  defineProps<{
-    config: SliderElementConfig;
-    slidesToShow?: number;
-    slidesToScroll?: number;
-    gap?: string;
-    autoplay?: boolean;
-    autoplaySpeed?: number;
-  }>(),
-  {
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    gap: "0px",
-    autoplay: false,
-    autoplaySpeed: 3000,
-  },
-);
+const {
+  config,
+  slidesToShow: slidesToShowProp = 1,
+  slidesToScroll: slidesToScrollProp = 1,
+  gap = "0px",
+  autoplay = false,
+  autoplaySpeed = 3000,
+  ssrBreakpoints,
+} = defineProps<{
+  config: SliderElementConfig;
+  slidesToShow?: number;
+  slidesToScroll?: number;
+  gap?: string;
+  autoplay?: boolean;
+  autoplaySpeed?: number;
+  /** CSS media query breakpoints for responsive SSR layout.
+   *  Keys are media queries, values are number of visible slides.
+   *  e.g. { '(min-width: 768px)': 2, '(min-width: 1280px)': 4 }
+   *  Base case (mobile) defaults to 1 visible slide. */
+  ssrBreakpoints?: Record<string, number>;
+}>();
+
+const sliderId = useId();
 
 const { getConfigValue } = useCmsElementConfig({
-  config: props.config,
+  config: config,
 } as Omit<Schemas["CmsSlot"], "config"> & {
   config: SliderElementConfig;
 });
@@ -41,27 +47,39 @@ const { getConfigValue } = useCmsElementConfig({
 const slots = useSlots() as {
   default?: () => { children: VNodeArrayChildren }[];
 };
-const childrenRaw = computed(
-  () => (slots?.default?.()[0]?.children as VNodeArrayChildren) ?? [],
-);
+
+// get fresh children from slot - call this each time to get new VNode instances
+function getSlotChildren(): VNode[] {
+  return (slots?.default?.()[0]?.children as VNode[]) ?? [];
+}
+
+const childrenRaw = computed(() => getSlotChildren());
+
 const slidesToScroll = computed(() =>
-  props.slidesToScroll >= props.slidesToShow
-    ? props.slidesToShow
-    : props.slidesToScroll,
+  slidesToScrollProp >= slidesToShowProp
+    ? slidesToShowProp
+    : slidesToScrollProp,
 );
 const slidesToShow = computed(() =>
-  props.slidesToShow >= childrenRaw.value.length
+  slidesToShowProp >= childrenRaw.value.length
     ? childrenRaw.value.length
-    : props.slidesToShow,
+    : slidesToShowProp,
 );
-const children = computed<string[]>(() => {
-  if (childrenRaw.value.length === 0) return [];
+
+// build children array with fresh VNodes for infinite scroll
+// we must call getSlotChildren() separately for each section because Vue can only render each VNode once
+const children = computed<VNode[]>(() => {
+  const count = childrenRaw.value.length;
+  if (count === 0) return [];
+
+  const n = slidesToShow.value;
   return [
-    ...childrenRaw.value.slice(-slidesToShow.value),
-    ...childrenRaw.value,
-    ...childrenRaw.value.slice(0, slidesToShow.value),
-  ] as string[];
+    ...getSlotChildren().slice(-n), // prepend: last N slides
+    ...getSlotChildren(), // main slides
+    ...getSlotChildren().slice(0, n), // append: first N slides
+  ];
 });
+
 const emit = defineEmits<(e: "changeSlide", index: number) => void>();
 const slider = useTemplateRef<HTMLDivElement>("slider");
 const imageSlider = useTemplateRef<HTMLDivElement>("imageSlider");
@@ -76,6 +94,79 @@ const isSliding = ref<boolean>();
 const { width: imageSliderWidth } = useElementSize(imageSlider);
 let timeoutGuard: ReturnType<typeof setTimeout> | undefined;
 
+// SSR-safe fallback so the first slide is visible before JS hydrates
+const ssrTrackStyle = computed<CSSProperties>(() => {
+  const total = children.value.length;
+  const n = slidesToShow.value;
+  if (total === 0 || n === 0) return {};
+
+  // Transform is constant: always skip N prepended clones
+  const transform = `translateX(-${(n / total) * 100}%)`;
+
+  if (ssrBreakpoints) {
+    // Both width and transform handled by CSS media queries via useHead
+    return {};
+  }
+
+  return {
+    width: `${(total / n) * 100}%`,
+    transform,
+  };
+});
+
+// Inject responsive CSS into <head> for SSR breakpoints.
+// Transform is constant: always skip N prepended clones (`n / total`),
+// because translateX(%) is relative to the element's own width which scales
+// proportionally with the number of visible slides. Only width varies per breakpoint.
+// Removed entirely once client-side JS sets imageSliderTrackStyle.
+useHead(
+  computed(() => {
+    if (!ssrBreakpoints || imageSliderTrackStyle.value) return {};
+    const total = children.value.length;
+    const n = slidesToShow.value;
+    if (total === 0 || n === 0) return {};
+
+    const sel = `[data-ssr-slider="${sliderId}"]`;
+    const tx = `translateX(-${(n / total) * 100}%)`;
+
+    // Mobile base: 1 slide visible
+    let css = `${sel}{width:${total * 100}%;transform:${tx}}`;
+    // Breakpoint overrides — only width changes
+    for (const [query, slides] of Object.entries(ssrBreakpoints)) {
+      css += `@media ${query}{${sel}{width:${(total / slides) * 100}%}}`;
+    }
+    return { style: [{ innerHTML: css }] };
+  }),
+);
+
+// Touch event handling for mobile swipe gestures
+const touchStartX = ref(0);
+const touchEndX = ref(0);
+
+function onTouchStart(event: TouchEvent) {
+  touchStartX.value = event.touches?.[0]?.clientX || 0;
+}
+
+function onTouchMove(event: TouchEvent) {
+  touchEndX.value = event.touches?.[0]?.clientX || 0;
+}
+
+function onTouchEnd() {
+  const deltaX = touchEndX.value - touchStartX.value;
+  const threshold = 50; // pixels
+
+  if (Math.abs(deltaX) > threshold) {
+    if (deltaX < 0) {
+      next();
+    } else {
+      previous();
+    }
+  }
+
+  touchStartX.value = 0;
+  touchEndX.value = 0;
+}
+
 onMounted(() => {
   initSlider();
 
@@ -92,12 +183,12 @@ onBeforeUnmount(() => {
 });
 
 watch(
-  () => props.autoplay && isReady.value,
+  () => autoplay && isReady.value,
   (value) => {
     if (value) {
       autoPlayInterval.value = setInterval(() => {
         next();
-      }, props.autoplaySpeed);
+      }, autoplaySpeed);
     } else {
       if (autoPlayInterval.value) {
         clearInterval(autoPlayInterval.value);
@@ -112,8 +203,8 @@ watch(
 const imageSliderStyle = computed(() => {
   if (getConfigValue("displayMode") === "cover") {
     return {
-      height: getConfigValue("minHeight"),
-      margin: `0 -${props.gap}`,
+      minHeight: getConfigValue("minHeight"),
+      margin: `0 -${gap}`,
     };
   }
   return {
@@ -129,10 +220,10 @@ const displayModeValue = computed(
 );
 
 const navigationArrowsValue = computed(
-  () => props.config?.navigationArrows?.value || "none",
+  () => getConfigValue("navigationArrows") || "none",
 );
 const navigationDotsValue = computed(
-  () => props.config?.navigationDots?.value || "none",
+  () => getConfigValue("navigationDots") || "none",
 );
 
 function initSlider() {
@@ -246,16 +337,19 @@ defineExpose({
       'relative overflow-hidden h-full': true,
       'px-10': navigationArrowsValue === 'outside',
       'pb-15': navigationDotsValue === 'outside',
-      'opacity-0': !isReady,
     }"
   >
     <div
       ref="imageSlider"
       class="overflow-hidden h-full"
       :style="imageSliderStyle"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
     >
       <div
         ref="imageSliderTrack"
+        :data-ssr-slider="ssrBreakpoints ? sliderId : undefined"
         :class="{
           flex: true,
           'items-center':
@@ -266,7 +360,7 @@ defineExpose({
           'items-end':
             displayModeValue === 'contain' && verticalAlignValue === 'flex-end',
         }"
-        :style="imageSliderTrackStyle"
+        :style="imageSliderTrackStyle || ssrTrackStyle"
       >
         <div
           v-for="(child, index) of children"
@@ -275,7 +369,7 @@ defineExpose({
           :style="{
             width: imageSliderWidth
               ? `${imageSliderWidth / slidesToShow}px`
-              : 'auto',
+              : `${100 / children.length}%`,
             padding: `0 ${gap}`,
             height: displayModeValue === 'standard' ? 'min-content' : '100%',
           }"
@@ -288,29 +382,33 @@ defineExpose({
       <button
         aria-label="Previous slide"
         :class="{
-          'absolute bg-transparent top-1/2 left-0 transform -translate-y-1/2 py-4': true,
+          'absolute top-1/2 left-4 transform -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center': true,
+          'bg-brand-tertiary text-surface-on-surface':
+            navigationArrowsValue === 'outside',
           'transition bg-white/20 hover:bg-white/50':
             navigationArrowsValue === 'inside',
         }"
         @click="previous"
       >
-        <div class="w-15 h-15 i-carbon-chevron-left"></div>
+        <SwChevronIcon direction="left" />
       </button>
       <button
         aria-label="Next slide"
         :class="{
-          'absolute bg-transparent top-1/2 right-0 transform -translate-y-1/2 py-4': true,
+          'absolute top-1/2 right-4 transform -translate-y-1/2 w-10 h-10 rounded-full flex items-center justify-center': true,
+          'bg-brand-tertiary text-surface-on-surface':
+            navigationArrowsValue === 'outside',
           'transition bg-white/20 hover:bg-white/50':
             navigationArrowsValue === 'inside',
         }"
         @click="next"
       >
-        <div class="w-15 h-15 i-carbon-chevron-right"></div>
+        <SwChevronIcon direction="right" />
       </button>
     </div>
     <div
       :class="{
-        'absolute bottom-5 left-1/2 transform -translate-x-1/2 gap-5': true,
+        'absolute bottom-5 left-1/2 transform -translate-x-1/2 gap-2 items-center': true,
         flex: navigationDotsValue !== 'none',
         hidden: navigationDotsValue === 'none',
       }"
@@ -319,9 +417,10 @@ defineExpose({
         v-for="(_, i) of childrenRaw"
         :key="`dot-${i}`"
         :class="{
-          'w-5 h-5 rounded-full cursor-pointer': true,
-          'bg-gray-100': i === activeSlideIndex,
-          'bg-gray-500/50': i !== activeSlideIndex,
+          'rounded-full cursor-pointer transition-all duration-300': true,
+          'w-6 h-2 bg-surface-on-surface-variant': i === activeSlideIndex,
+          'w-2 h-2 bg-surface-surface-container-highest':
+            i !== activeSlideIndex,
         }"
         @click="() => goToSlide(i)"
       ></div>

package/app/components/SwSortDropdown.vue

@@ -4,7 +4,10 @@ import { ref, useTemplateRef } from "vue";
 
 type SortOption = {
   key: string;
-  label: string;
+  label: string | null;
+  translated?: {
+    label: string;
+  };
 };
 
 defineProps<{
@@ -39,7 +42,7 @@ const handleSortingClick = (key: string) => {
         type="button"
         @click="isSortMenuOpen = !isSortMenuOpen"
         id="menu-button"
-        aria-expanded="false"
+        :aria-expanded="isSortMenuOpen"
         aria-haspopup="true"
         class="group pr-0"
       >
@@ -48,13 +51,14 @@ const handleSortingClick = (key: string) => {
           <SwChevronIcon
             :direction="isSortMenuOpen ? 'up' : 'down'"
             :size="24"
-            :aria-label="isSortMenuOpen ? 'Close sort menu' : 'Open sort menu'"
+            aria-hidden="true"
+            focusable="false"
           />
         </span>
       </SwBaseButton>
       <div
         :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
-        class="origin-top-right right-0 mt-2 w-40 rounded-md shadow-2xl bg-surface-surface ring-1 ring-opacity-dark-low focus:outline-none z-1000"
+        class="origin-top-right right-0 mt-2 w-40 rounded-md shadow-2xl bg-surface-surface ring-1 ring-outline-outline-variant focus:outline-none z-50"
         role="menu"
         aria-orientation="vertical"
         aria-labelledby="menu-button"
@@ -70,11 +74,11 @@ const handleSortingClick = (key: string) => {
                 ? 'font-medium text-surface-on-surface'
                 : 'text-surface-on-surface-variant',
             ]"
-            class="block px-4 py-2 text-sm bg-transparent hover:bg-surface-surface-container"
+            class="block w-full text-left px-4 py-2 text-sm bg-transparent hover:bg-surface-surface-container"
             role="menuitem"
             tabindex="-1"
           >
-            {{ sorting.label }}
+            {{ sorting.translated?.label }}
           </button>
         </div>
       </div>

package/app/components/SwVariantConfigurator.vue

@@ -12,14 +12,9 @@ const { getUrlPrefix } = useUrlResolver();
 
 const prefix = getUrlPrefix();
 
-const props = withDefaults(
-  defineProps<{
-    allowRedirect?: boolean;
-  }>(),
-  {
-    allowRedirect: true,
-  },
-);
+const { allowRedirect = true } = defineProps<{
+  allowRedirect?: boolean;
+}>();
 
 type Translations = {
   product: {
@@ -61,7 +56,7 @@ const onHandleChange = async () => {
     getProductRoute(variantFound),
     prefix,
   );
-  if (props.allowRedirect && selectedOptionsVariantPath) {
+  if (allowRedirect && selectedOptionsVariantPath) {
     try {
       router.push(selectedOptionsVariantPath);
     } catch {
@@ -90,7 +85,7 @@ const onHandleChange = async () => {
       :key="optionGroup.id"
       class="mt-6"
     >
-      <h3 class="text-sm text-gray-900 font-medium">{{ optionGroup.name }}</h3>
+      <div class="text-sm text-gray-900 font-medium">{{ optionGroup.name }}</div>
       <fieldset class="mt-4 flex-1">
         <legend class="sr-only">
           {{ translations.product.chooseA }} {{ optionGroup.name }}
@@ -104,7 +99,13 @@ const onHandleChange = async () => {
             :class="{
               'border-3 border-brand-primary': isOptionSelected(option.id),
             }"
-            @click="handleChange(optionGroup.translated.name, option.id, onHandleChange)"
+            @click="
+              handleChange(
+                optionGroup.translated.name,
+                option.id,
+                onHandleChange,
+              )
+            "
           >
             <p
               :id="`${option.id}-choice-label`"

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

@@ -17,9 +17,14 @@ 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";
 }>();
 
 type Translations = {
@@ -42,12 +47,8 @@ const prices = reactive<{ min: number; max: number }>({
 });
 
 onMounted(() => {
-  prices.min = Math.floor(
-    props.selectedFilters.price?.min ?? props.filter.min ?? 0,
-  );
-  prices.max = Math.floor(
-    props.selectedFilters.price?.max ?? props.filter.max ?? 0,
-  );
+  prices.min = Math.floor(selectedFilters.price?.min ?? filter.min ?? 0);
+  prices.max = Math.floor(selectedFilters.price?.max ?? filter.max ?? 0);
 });
 
 const isFilterVisible = ref<boolean>(false);
@@ -91,8 +92,8 @@ const getClientX = (event: MouseEvent | TouchEvent): number =>
 const updateSliderValue = (clientX: number) => {
   if (!dragging.value || !sliderRect.value) return;
 
-  const min = props.filter.min ?? 0;
-  const max = props.filter.max ?? 100;
+  const min = filter.min ?? 0;
+  const max = filter.max ?? 100;
   const percent = Math.min(
     Math.max((clientX - sliderRect.value.left) / sliderRect.value.width, 0),
     1,
@@ -134,33 +135,37 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
 
 <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" :id="props.filter.code"
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" :id="filter.code"
         class="self-stretch flex flex-col justify-start items-start gap-2.5">
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
           <div class="self-stretch inline-flex justify-between items-center gap-2">
@@ -168,15 +173,15 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
               class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
               <input type="number" :placeholder="translations.listing.min" v-model.number="prices.min"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: props.filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="props.filter.min" :max="prices.max" />
+                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
+                :min="filter.min" :max="prices.max" />
             </div>
             <div
               class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
               <input type="number" :placeholder="translations.listing.max" v-model.number="prices.max"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: props.filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="prices.min" :max="props.filter.max" />
+                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
+                :min="prices.min" :max="filter.max" />
             </div>
           </div>
           <!-- Custom slider UI -->
@@ -187,14 +192,14 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
             </div>
             <!-- Active range -->
             <div class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full" :style="{
-              left: ((prices.min - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100 + '%',
-              width: ((prices.max - prices.min) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100 + '%',
+              left: ((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
+              width: ((prices.max - prices.min) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
             }"></div>
             <!-- Min thumb -->
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.min - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
               }"
               @mousedown.prevent="startDrag('min', $event)"
               @touchstart.prevent="startDrag('min', $event)"></div>
@@ -202,7 +207,7 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.max - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.max - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
               }"
               @mousedown.prevent="startDrag('max', $event)"
               @touchstart.prevent="startDrag('max', $event)"></div>