@shopware/cms-base-layer 1.5.1 → 2.1.0

package/{components → app/components}/SwSlider.vue

@@ -10,65 +10,83 @@ 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,
-} as Schemas["CmsSlot"] & {
+  config: config,
+} as Omit<Schemas["CmsSlot"], "config"> & {
   config: SliderElementConfig;
 });
 
 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("slider");
-const imageSlider = useTemplateRef("imageSlider");
+const slider = useTemplateRef<HTMLDivElement>("slider");
+const imageSlider = useTemplateRef<HTMLDivElement>("imageSlider");
 const imageSliderTrackStyle = ref<CSSProperties>();
 const activeSlideIndex = ref<number>(0);
 const speed = ref<number>(300);
-const imageSliderTrack = useTemplateRef("imageSliderTrack");
+const imageSliderTrack = useTemplateRef<HTMLDivElement>("imageSliderTrack");
 const autoPlayInterval = ref();
 const isReady = ref<boolean>();
 const isSliding = ref<boolean>();
@@ -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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import { ref, useTemplateRef } from "vue";
+
+type SortOption = {
+  key: string;
+  label: string | null;
+  translated?: {
+    label: string;
+  };
+};
+
+defineProps<{
+  sortOptions: SortOption[];
+  currentSort: string;
+  label: string;
+}>();
+
+const emit = defineEmits<{
+  "sort-change": [string];
+}>();
+
+const isSortMenuOpen = ref(false);
+const dropdownElement = useTemplateRef<HTMLDivElement>("dropdownElement");
+
+onClickOutside(dropdownElement, () => {
+  isSortMenuOpen.value = false;
+});
+
+const handleSortingClick = (key: string) => {
+  emit("sort-change", key);
+  isSortMenuOpen.value = false;
+};
+</script>
+
+<template>
+  <div ref="dropdownElement" class="flex items-center">
+    <div class="relative inline-block text-left">
+      <SwBaseButton
+        variant="ghost"
+        size="medium"
+        type="button"
+        @click="isSortMenuOpen = !isSortMenuOpen"
+        id="menu-button"
+        :aria-expanded="isSortMenuOpen"
+        aria-haspopup="true"
+        class="group pr-0"
+      >
+        <span class="inline-flex items-center gap-1">
+          {{ label }}
+          <SwChevronIcon
+            :direction="isSortMenuOpen ? 'up' : 'down'"
+            :size="24"
+            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-outline-outline-variant focus:outline-none z-50"
+        role="menu"
+        aria-orientation="vertical"
+        aria-labelledby="menu-button"
+        tabindex="-1"
+      >
+        <div class="py-1" role="none">
+          <button
+            v-for="sorting in sortOptions"
+            :key="sorting.key"
+            @click="handleSortingClick(sorting.key)"
+            :class="[
+              sorting.key === currentSort
+                ? 'font-medium text-surface-on-surface'
+                : 'text-surface-on-surface-variant',
+            ]"
+            class="block w-full text-left px-4 py-2 text-sm bg-transparent hover:bg-surface-surface-container"
+            role="menuitem"
+            tabindex="-1"
+          >
+            {{ sorting.translated?.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/SwStockInfo.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { defu } from "defu";
+
+import { useCmsTranslations } from "#imports";
+import type { Schemas } from "#shopware";
+
+defineProps<{
+  availableStock: number;
+  minPurchase: number;
+  deliveryTime?: Schemas["DeliveryTime"];
+  restockTime?: number;
+}>();
+
+type Translations = {
+  product: {
+    deliveryTime: string;
+    days: string;
+    noAvailable: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    deliveryTime: "Available, delivery time",
+    days: "days",
+    noAvailable: "No longer available",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+</script>
+<template>
+  <div class="inline-flex justify-start items-center gap-2">
+    <div class="w-2 h-2 bg-states-success rounded-full" v-if="availableStock > 0"></div>
+    <div class="w-2 h-2 bg-states-error rounded-full" v-else></div>
+    <span v-if="availableStock >= minPurchase && deliveryTime">{{ translations.product.deliveryTime }} {{
+      deliveryTime?.name }}
+    </span>
+    <span v-else-if="availableStock < minPurchase && deliveryTime && restockTime">
+      {{ translations.product.deliveryTime }} {{ restockTime }}
+      {{ translations.product.days }} {{ deliveryTime?.name }}</span>
+    <span v-else>{{ translations.product.noAvailable }}</span>
+  </div>
+</template>

package/{components → 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 }}
@@ -102,9 +97,15 @@ const onHandleChange = async () => {
             data-testid="product-variant"
             class="group relative border rounded-md py-3 px-4 flex items-center justify-center text-sm font-medium uppercase hover:bg-gray-50 focus:outline-none sm:flex-1 bg-white shadow-sm text-gray-900 cursor-pointer"
             :class="{
-              'border-3 border-indigo-600': isOptionSelected(option.id),
+              '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`"