@shopware/cms-base-layer 1.5.1 → 2.1.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/{components → app/components}/public/cms/block/CmsBlockTextOnImage.vue

@@ -12,9 +12,12 @@ const slotContent = getSlotContent("content");
 </script>
 
 <template>
-  <CmsGenericElement
-    v-if="slotContent"
-    :content="slotContent"
-    class="cms-block-text-on-image min-h-md"
-  />
+  <div
+    class="cms-block-text-on-image min-h-[500px] py-20 bg-cover bg-bottom bg-no-repeat relative"
+  >
+    <CmsGenericElement
+      v-if="slotContent"
+      :content="slotContent"
+    />
+  </div>
 </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, hasListPrice } = 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="hasListPrice"
+                    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': hasListPrice,
+                    }" :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

@@ -4,7 +4,7 @@ import type {
   SliderElementConfig,
 } from "@shopware/composables";
 import { useElementSize } from "@vueuse/core";
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, inject, ref, useTemplateRef } from "vue";
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -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",
@@ -46,9 +46,24 @@ const crossSellCollections = computed(() => {
 });
 
 const { width } = useElementSize(crossSellContainer);
+const slotCount = inject<number>("cms-block-slot-count", 1);
+const elMinWidth = computed(
+  () => +(config.value.minWidth?.value.replace(/\D+/g, "") || 300),
+);
 const slidesToShow = computed(() => {
-  const minWidth = +(config.value.minWidth?.value.replace(/\D+/g, "") || 0);
-  return Math.floor(width.value / (minWidth * 1.2));
+  // 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));
+});
+
+// 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 toggleTab = (index: number) => {
@@ -63,9 +78,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)"
       >
@@ -80,6 +95,7 @@ const toggleTab = (index: number) => {
         :slides-to-show="slidesToShow"
         :slides-to-scroll="1"
         :autoplay="false"
+        :ssr-breakpoints="ssrBreakpoints"
       >
         <SwProductCard
           v-for="product of crossSellCollections[currentTabIndex]?.products"

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

@@ -3,11 +3,14 @@ import type {
   CmsElementImage,
   CmsElementManufacturerLogo,
 } from "@shopware/composables";
-import { buildUrlPrefix } from "@shopware/helpers";
+import {
+  buildCdnImageUrl,
+  buildUrlPrefix,
+  generateCdnSrcSet,
+} 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 { computed, defineAsyncComponent, inject, useTemplateRef } from "vue";
+import { useAppConfig, useCmsElementImage, useUrlResolver } from "#imports";
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 const props = defineProps<{
@@ -26,21 +29,36 @@ const {
   mimeType,
 } = useCmsElementImage(props.content);
 
-const DEFAULT_THUMBNAIL_SIZE = 10;
-const imageElement = useTemplateRef("imageElement");
+const imageSizes = inject<string>("cms-image-sizes", "100vw");
+const appConfig = useAppConfig();
+
+const imageElement = useTemplateRef<HTMLImageElement>("imageElement");
 const { width, height } = useElementSize(imageElement);
 
-function roundUp(num: number) {
-  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
-}
+const cdnOptions = computed(() => ({
+  format: appConfig.backgroundImage?.format,
+  quality: appConfig.backgroundImage?.quality,
+}));
+
+const srcSet = computed(
+  () =>
+    imageAttrs.value.srcset ||
+    generateCdnSrcSet(imageAttrs.value.src, undefined, cdnOptions.value),
+);
 
 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`;
+  // Only add dimension params after mount to avoid hydration mismatch
+  // (useElementSize returns 0 during SSR). The srcset handles responsive loading.
+  if (width.value || height.value) {
+    return buildCdnImageUrl(
+      imageAttrs.value.src,
+      { width: width.value, height: height.value },
+      cdnOptions.value,
+    );
+  }
+  return imageAttrs.value.src || "";
 });
+
 const imageComputedContainerAttrs = computed(() => {
   const imageAttrsCopy = Object.assign({}, imageContainerAttrs.value);
   if (imageAttrsCopy?.href) {
@@ -64,7 +82,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 +93,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,20 +105,38 @@ 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"
+      :sizes="imageSizes"
       :class="{
-        'w-full h-full': !imageGallery,
+        'w-full': !imageGallery,
+        'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),
         '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"
-      :srcset="imageAttrs.srcset"
+      :srcset="srcSet"
     />
   </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>