@shopware/cms-base-layer 1.5.0 → 2.0.0

package/app/components/public/cms/block/CmsBlockImageTwoColumn.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { CmsBlockImageTwoColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTwoColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+</script>
+<template>
+  <div class="cms-block-image-two-column flex flex-col md:flex-row justify-start items-start gap-6 w-full">
+    <div class="w-full md:flex-1 md:min-w-0">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="w-full md:flex-1 md:min-w-0">
+      <CmsGenericElement :content="rightContent" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-two-column :deep(.cms-element-image) {
+  @apply relative h-full w-full;
+}
+
+.cms-block-image-two-column :deep(.cms-element-image img) {
+  @apply w-full h-full object-cover;
+}
+
+.cms-block-image-two-column :deep(.cms-element-image-slider) {
+  @apply w-full;
+}
+</style>

package/{components → app/components}/public/cms/block/CmsBlockProductHeading.vue

@@ -13,7 +13,7 @@ const rightContent = getSlotContent("right");
 </script>
 
 <template>
-  <div class="cms-block-product-heading flex justify-between">
+  <div class="cms-block-product-heading flex justify-between pt-4">
     <CmsGenericElement :content="leftContent" />
     <CmsGenericElement :content="rightContent" />
   </div>

package/{components → app/components}/public/cms/block/CmsBlockProductThreeColumn.vue

@@ -14,9 +14,15 @@ const centerContent = getSlotContent("center");
 </script>
 
 <template>
-  <div class="grid md:grid-cols-3 gap-10 place-items-center">
-    <CmsGenericElement :content="leftContent" class="w-full" />
-    <CmsGenericElement :content="centerContent" class="w-full" />
-    <CmsGenericElement :content="rightContent" class="w-full" />
+  <div class="flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="leftContent" class="w-full" />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="centerContent" class="w-full" />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="rightContent" class="w-full" />
+    </div>
   </div>
 </template>

package/{components → app/components}/public/cms/block/CmsBlockSidebarFilter.vue

@@ -10,7 +10,9 @@ const props = defineProps<{
 }>();
 
 const { getSlotContent } = useCmsBlock(props.content);
-const slotContent = getSlotContent("content") as CmsElementSidebarFilter;
+const slotContent = getSlotContent(
+  "content",
+) as unknown as CmsElementSidebarFilter;
 </script>
 <template>
   <CmsElementSidebarFilter :content="slotContent" />

package/app/components/public/cms/block/CmsBlockTextOnImage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { CmsBlockTextOnImage } from "@shopware/composables";
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockTextOnImage;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+
+const slotContent = getSlotContent("content");
+</script>
+
+<template>
+  <div
+    class="cms-block-text-on-image min-h-[500px] flex items-center justify-center py-20 px-4 bg-cover bg-center bg-no-repeat relative"
+    :class="cssClasses"
+    :style="layoutStyles as any"
+  >
+    <div class="relative z-10 text-center max-w-6xl">
+      <CmsGenericElement
+        v-if="slotContent"
+        :content="slotContent"
+ 
+      />
+    </div>
+  </div>
+</template>

package/{components → app/components}/public/cms/block/CmsBlockTextTeaserSection.vue

@@ -6,15 +6,15 @@ defineProps<{
 }>();
 </script>
 <template>
-  <div class="container mx-auto flex pt-6 pb-6">
+  <div class="mx-auto grid md:grid-cols-3 gap-4 py-6">
     <CmsGenericElement
       v-for="(slot, i) in content.slots"
       :key="slot.id"
       :content="slot"
-      class="cms-block-text-teaser-section flex"
+      class="cms-block-text-teaser-section"
       :class="{
-        'flex-basis-1/3 flex-col ': i == 0,
-        'pl-4 flex-basis-2/3': i == 1,
+        'md:col-span-1': i === 0,
+        'md:col-span-2': i === 1,
       }"
     />
   </div>

package/{components → app/components}/public/cms/block/CmsBlockTextTwoColumn.vue

@@ -13,16 +13,14 @@ const rightContent = getSlotContent("right");
 </script>
 
 <template>
-  <article
-    class="cms-block-text-two-column flex justify-center gap-5 md:gap-20"
-  >
+  <article class="cms-block-text-two-column grid md:grid-cols-2 gap-5 md:gap-20">
     <CmsGenericElement
       :content="leftContent"
-      class="w-1/2 cms-block-text-two-column__text"
+      class="cms-block-text-two-column__text"
     />
     <CmsGenericElement
       :content="rightContent"
-      class="w-1/2 cms-block-text-two-column__text"
+      class="cms-block-text-two-column__text"
     />
   </article>
 </template>

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

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { CmsElementBuyBox } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { computed } from "vue";
+import {
+  useCmsElementConfig,
+  usePrice,
+  useProduct,
+  useProductPrice,
+  useSessionContext,
+} from "#imports";
+
+const props = defineProps<{
+  content: CmsElementBuyBox;
+}>();
+
+type Translations = {
+  product: {
+    previously: string;
+    amount: string;
+    price: {
+      [key: string]: string;
+    };
+    to: string;
+    from: string;
+    content: string;
+    pricesIncl: string;
+    pricesExcl: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    previously: "Previously",
+    amount: "Amount",
+    price: {
+      label: "Price",
+      to: "To",
+      from: "From",
+    },
+    to: "To",
+    from: "From",
+    content: "Content",
+    pricesIncl: "Prices incl. VAT plus shipping costs",
+    pricesExcl: "Prices excl. VAT plus shipping costs",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+const alignment = computed(() => getConfigValue("alignment"));
+const { taxState, currency } = useSessionContext();
+const { product, changeVariant } = useProduct(
+  props.content.data.product,
+  props.content.data.configuratorSettings || [],
+);
+const { unitPrice, price, tierPrices, isListPrice } = useProductPrice(product);
+const regulationPrice = computed(() => price.value?.regulationPrice?.price);
+const { getFormattedPrice } = usePrice();
+const referencePrice = computed(
+  () => product.value?.calculatedPrice?.referencePrice,
+);
+const purchaseUnit = computed(() => product.value?.purchaseUnit);
+const unitName = computed(() => product.value?.unit?.name);
+const productName = computed(() => product.value?.translated?.name || "");
+</script>
+<template>
+    <div v-if="product" :class="{
+        'h-full w-full flex flex-col': true,
+        'justify-start': alignment === 'flex-start',
+        'justify-end': alignment === 'flex-end',
+        'justify-center': alignment === 'center',
+    }">
+        <div class="self-stretch inline-flex flex-col justify-start items-start gap-8 mt-4 min-w-0">
+            <div
+                class="md:hidden self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]">
+                {{ productName }}</div>
+
+            <div v-if="tierPrices.length <= 1">
+                <SwSharedPrice v-if="isListPrice"
+                    class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
+                    :value="price?.listPrice?.price" />
+                <SwSharedPrice v-if="unitPrice"
+                    class="text-surface-on-surface text-base font-bold leading-normal"
+                    :class="{
+                        'text-red': isListPrice,
+                    }" :value="unitPrice" />
+                <div v-if="regulationPrice" class="text-xs flex text-secondary-500">
+                    {{ translations.product.previously }}
+                    <SwSharedPrice class="ml-1" :value="regulationPrice" />
+                </div>
+            </div>
+            <div v-else>
+                <table class="border-collapse table-auto w-full text-sm mb-8">
+                    <thead>
+                        <tr>
+                            <th
+                                class="border-b dark:border-secondary-600 font-medium p-4 pl-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left">
+                                {{ translations.product.amount }}
+                            </th>
+
+                            <th
+                                class="border-b dark:border-secondary-600 font-medium p-4 pr-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left">
+                                {{ translations.product.price.label }}
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody class="bg-white dark:bg-secondary-800">
+                        <tr v-for="(tierPrice, index) in tierPrices" :key="tierPrice.label">
+                            <td
+                                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pl-8 font-medium text-secondary-500 dark:text-secondary-400">
+                                <span v-if="index < tierPrices.length - 1">{{
+                                    translations.product.to
+                                    }}</span><span v-else>{{ translations.product.from }}</span>
+                                {{ tierPrice.quantity }}
+                            </td>
+                            <td
+                                class="border-b border-secondary-100 dark:border-secondary-700 p-4 pr-8 font-medium text-current-500 dark:text-secondary-400">
+                                {{ getFormattedPrice(tierPrice.unitPrice) }}
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div v-if="purchaseUnit && unitName" class="mt-1">
+                <span class="font-light"> {{ translations.product.content }}: </span>
+                <span class="font-light"> {{ purchaseUnit }} {{ unitName }} </span>
+                <span v-if="referencePrice" class="font-light">
+                    {{ currency?.symbol }} {{ referencePrice?.price }} / /
+                    {{ referencePrice?.referenceUnit }} {{ referencePrice?.unitName }}
+                </span>
+            </div>
+            <span class="text-brand-primary">
+                <template v-if="taxState === 'gross'">
+                    {{ translations.product.pricesIncl }}
+                </template>
+                <template v-else> {{ translations.product.pricesExcl }} </template>
+            </span>
+            <SwVariantConfigurator @change="changeVariant" />
+            <SwProductAddToCart :product="product" />
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { Ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useCategory, useNavigation } from "#imports";
+import type { Schemas } from "#shopware";
+
+const { category: activeCategory } = useCategory();
+const loading: Ref<boolean> = ref(true);
+const flagAllowSubcategories: boolean = true; // could be passed maybe as a prop in the future
+const categoryNavigation: Ref<Schemas["Category"][]> = ref([]);
+
+const currentCategoryId = activeCategory.value?.id ?? "main-navigation";
+const type = flagAllowSubcategories ? currentCategoryId : "main-navigation";
+const { loadNavigationElements } = useNavigation({
+  type: type,
+});
+const removeChildrenIfNotActiveCategory = () => {
+  const navigation: Schemas["Category"][] = JSON.parse(
+    JSON.stringify(categoryNavigation.value),
+  );
+  return navigation?.map((navigationElement) => {
+    navigationElement.children =
+      activeCategory.value?.id === navigationElement.id
+        ? navigationElement.children
+        : [];
+    return navigationElement;
+  });
+};
+
+onMounted(async () => {
+  // depth 0 means, we load only first level of categories, depth 1 means we load first and second level of categories ...
+  const depth = flagAllowSubcategories ? 2 : 1;
+  categoryNavigation.value = await loadNavigationElements({ depth });
+  if (!flagAllowSubcategories) {
+    categoryNavigation.value = removeChildrenIfNotActiveCategory();
+  }
+  loading.value = false;
+});
+</script>
+<template>
+  <ClientOnly>
+    <div v-if="!loading && categoryNavigation && categoryNavigation.length" class="self-stretch inline-flex flex-col justify-start items-start gap-3">
+      <SwCategoryNavigation
+        :level="0"
+        :elements="categoryNavigation"
+        :active-category="activeCategory"
+      />
+    </div>
+    <div v-else-if="loading" class="self-stretch flex flex-col justify-start items-start gap-4 animate-pulse">
+      <div v-for="i in 3" :key="i" class="w-full h-12 bg-surface-surface-container rounded"></div>
+    </div>
+  </ClientOnly>
+</template>

package/{components → app/components}/public/cms/element/CmsElementCrossSelling.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 
 const { getConfigValue } = useCmsElementConfig(props.content);
 const currentTabIndex = ref<number>(0);
-const crossSellContainer = useTemplateRef("crossSellContainer");
+const crossSellContainer = useTemplateRef<HTMLDivElement>("crossSellContainer");
 const config = computed<SliderElementConfig>(() => ({
   minHeight: {
     value: "300px",
@@ -63,9 +63,9 @@ const toggleTab = (index: number) => {
       <a
         v-for="(collection, index) of crossSellCollections"
         :key="index"
-        class="transition text-lg font-bold text-secondary-700 cursor-pointer"
+        class="transition text-lg font-semibold text-surface-on-surface-variant cursor-pointer"
         :class="{
-          'border-b-3 border-primary text-primary': currentTabIndex === index,
+          'border-b-3 border-brand-primary text-brand-primary': currentTabIndex === index,
         }"
         @click="toggleTab(index)"
       >

package/{components → app/components}/public/cms/element/CmsElementImage.vue

@@ -3,11 +3,10 @@ import type {
   CmsElementImage,
   CmsElementManufacturerLogo,
 } from "@shopware/composables";
-import { buildUrlPrefix } from "@shopware/helpers";
+import { buildUrlPrefix, encodeUrlPath } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
 import { computed, defineAsyncComponent, useTemplateRef } from "vue";
 import { useCmsElementImage, useUrlResolver } from "#imports";
-import { ClientOnly } from "../../../../helpers/clientOnly";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 const props = defineProps<{
@@ -27,7 +26,7 @@ const {
 } = useCmsElementImage(props.content);
 
 const DEFAULT_THUMBNAIL_SIZE = 10;
-const imageElement = useTemplateRef("imageElement");
+const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
 function roundUp(num: number) {
@@ -35,11 +34,34 @@ function roundUp(num: number) {
 }
 
 const srcPath = computed(() => {
-  const biggestParam =
-    width.value > height.value
-      ? `width=${roundUp(width.value)}`
-      : `height=${roundUp(height.value)}`;
-  return `${imageAttrs.value.src}?${biggestParam}&fit=crop,smart`;
+  if (!imageAttrs.value.src) return "";
+
+  try {
+    // Encode the URL first to handle special characters
+    const encodedUrl = encodeUrlPath(imageAttrs.value.src);
+    const url = new URL(encodedUrl);
+
+    // Only add size parameters if dimensions are available (after mount)
+    // This prevents hydration mismatch
+    const w = roundUp(width.value);
+    const h = roundUp(height.value);
+
+    if (w > DEFAULT_THUMBNAIL_SIZE || h > DEFAULT_THUMBNAIL_SIZE) {
+      if (width.value > height.value) {
+        url.searchParams.set("width", String(w));
+      } else {
+        url.searchParams.set("height", String(h));
+      }
+    }
+
+    // Add fit parameter
+    url.searchParams.set("fit", "crop,smart");
+
+    return url.toString();
+  } catch {
+    // Fallback if URL parsing fails
+    return imageAttrs.value.src;
+  }
 });
 const imageComputedContainerAttrs = computed(() => {
   const imageAttrsCopy = Object.assign({}, imageContainerAttrs.value);
@@ -64,7 +86,7 @@ const SwMedia3D = computed(() => {
   <component
     :is="imageLink.url ? 'a' : 'div'"
     v-if="imageAttrs.src"
-    class="cms-element-image relative h-full w-full"
+    class="cms-element-image self-stretch relative"
     :class="{
       'flex justify-center items-center': imageGallery,
     }"
@@ -75,9 +97,10 @@ const SwMedia3D = computed(() => {
       v-if="isVideoElement"
       controls
       :class="{
-        'h-full w-full': true,
+        'w-full h-full': true,
         'absolute inset-0': ['cover', 'stretch'].includes(displayMode),
         'object-cover': displayMode === 'cover',
+        'object-contain': displayMode !== 'cover',
       }"
     >
       <source :src="imageAttrs.src" :type="mimeType" />
@@ -86,16 +109,17 @@ const SwMedia3D = computed(() => {
     <ClientOnly v-else-if="isSpatial(props.content.data.media)">
       <component :is="SwMedia3D" :src="props.content.data.media.url" />
     </ClientOnly>
-    <img
+    <NuxtImg
       v-else
       ref="imageElement"
+      preset="productDetail"
       loading="lazy"
       :class="{
         'w-full h-full': !imageGallery,
         'w-4/5': imageGallery,
-        'absolute inset-0': ['cover', 'stretch'].includes(displayMode),
+        'absolute left-0 top-0': ['cover', 'stretch'].includes(displayMode),
         'object-cover': displayMode === 'cover',
-        'object-contain': imageGallery,
+        'object-contain': imageGallery || displayMode !== 'cover',
       }"
       :alt="imageAttrs.alt"
       :src="srcPath"
@@ -103,3 +127,18 @@ const SwMedia3D = computed(() => {
     />
   </component>
 </template>
+
+<style scoped>
+.cms-element-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Ensure anchor tags within the element fill the container */
+.cms-element-image a {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type { CmsElementImageGallery } from "@shopware/composables";
+import { computed, ref } from "vue";
+import { useCmsElementConfig } from "#imports";
+import { isSpatial } from "../../../../helpers/media/isSpatial";
+
+const props = withDefaults(
+  defineProps<{
+    content: CmsElementImageGallery;
+    slidesToShow?: number;
+    slidesToScroll?: number;
+  }>(),
+  {
+    slidesToShow: 5,
+    slidesToScroll: 4,
+  },
+);
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const currentIndex = ref(0);
+const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
+
+function goToSlide(index: number) {
+  if (index >= 0 && index < mediaGallery.value.length) {
+    currentIndex.value = index;
+  }
+}
+
+function previous() {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  }
+}
+
+function next() {
+  if (currentIndex.value < mediaGallery.value.length - 1) {
+    currentIndex.value++;
+  }
+}
+
+const currentImage = computed(() => {
+  return mediaGallery.value[currentIndex.value]?.media;
+});
+
+// Touch event handling for mobile swipe gestures - mobile
+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;
+
+  // Define a threshold for swipe detection
+  const threshold = 50; // pixels
+
+  if (Math.abs(deltaX) > threshold) {
+    if (deltaX < 0) {
+      // Swipe Left
+      next();
+    } else {
+      // Swipe Right
+      previous();
+    }
+  }
+
+  // Reset values
+  touchStartX.value = 0;
+  touchEndX.value = 0;
+}
+</script>
+
+<template>
+  <div class="w-full max-w-full relative inline-flex flex-col justify-center items-center gap-2 mx-auto">
+    <div class="w-full">
+      <!-- Main Image Display -->
+
+      <div class="w-full h-[400px] sm:h-[500px] lg:h-[600px] xl:h-[700px] relative overflow-hidden rounded-lg"
+        @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+        <Transition name="gallery-fade" mode="out-in">
+          <div v-if="currentImage && isSpatial(currentImage)" class="w-full h-full relative">
+            <CmsElementImageGallery3dPlaceholder class="w-full h-full absolute inset-0 object-cover" />
+            <span class="absolute bottom-4 right-4 text-sm bg-gray-800 rounded px-2 py-1 text-white">
+              3D
+            </span>
+          </div>
+          <NuxtImg v-else-if="currentImage" preset="hero" loading="lazy"
+            class="w-full h-full absolute inset-0 object-cover" :src="currentImage.url"
+            :key="currentImage.url" :alt="currentImage.alt || 'Product image'" />
+          <NuxtImg v-else preset="hero" class="w-full h-full absolute inset-0 object-cover"
+            src="https://placehold.co/600x500" alt="Placeholder image" />
+        </Transition>
+
+      </div>
+      <!-- Navigation Arrows -->
+      <div v-if="mediaGallery.length > 1"
+        class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none">
+        <!-- Previous Button -->
+        <button
+          class="w-10 h-10 bg-brand-tertiary rounded-full hover:bg-brand-tertiary-hover transition-colors disabled:opacity-50 pointer-events-auto shadow-lg"
+          :disabled="currentIndex === 0" @click="previous" aria-label="Previous image">
+          <div class="flex items-center justify-center w-full h-full">
+            <div class="i-carbon-chevron-left w-5 h-5 text-brand-on-tertiary"></div>
+          </div>
+        </button>
+
+        <!-- Next Button -->
+        <button
+          class="w-10 h-10 bg-brand-tertiary rounded-full hover:bg-brand-tertiary-hover transition-colors disabled:opacity-50 pointer-events-auto shadow-lg"
+          :disabled="currentIndex === mediaGallery.length - 1" @click="next" aria-label="Next image">
+          <div class="flex items-center justify-center w-full h-full">
+            <div class="i-carbon-chevron-right w-5 h-5 text-brand-on-tertiary"></div>
+          </div>
+        </button>
+      </div>
+
+      <!-- Dot Indicators -->
+      <div v-if="mediaGallery.length > 1" class="flex justify-center items-center gap-2 mt-2">
+        <button v-for="(image, index) in mediaGallery" :key="image.media.url"
+          class="relative rounded-full transition-all duration-200 hover:scale-110" :class="{
+            'w-6 h-2 bg-surface-on-surface-variant': index === currentIndex,
+            'w-2 h-2 bg-surface-surface-container-highest': index !== currentIndex
+          }" @click="goToSlide(index)" :aria-label="`Go to image ${index + 1}`" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Gallery fade transition */
+.gallery-fade-enter-active,
+.gallery-fade-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.gallery-fade-enter-from {
+  opacity: 0;
+  transform: scale(1.05) translateY(10px);
+}
+
+.gallery-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.gallery-fade-enter-to,
+.gallery-fade-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+</style>

package/{components → app/components}/public/cms/element/CmsElementImageSlider.vue

@@ -11,8 +11,8 @@ const props = defineProps<{
 const items = computed(() => props.content.data.sliderItems);
 </script>
 <template>
-  <!-- need some with here for small views that the slider can calculate the correct items with -->
-  <div class="cms-element-image-slider w-[92vw] sm:w-[94vw] md:w-auto">
+  <!-- need some width here for small views that the slider can calculate the correct items with -->
+  <div class="cms-element-image-slider w-[92vw] sm:w-[94vw] md:w-full">
     <SwSlider :config="props.content.config">
       <CmsElementImage
         v-for="image of items"

package/{components → app/components}/public/cms/element/CmsElementProductBox.vue

@@ -10,5 +10,6 @@ const product = computed(() => props.content.data?.product || {});
 </script>
 
 <template>
-  <SwProductCard :product="product" />
+  <SwProductCard v-if="product?.id" :product="product" />
+  <SwProductCardSkeleton v-else />
 </template>