@shopware/cms-base-layer 1.5.1 → 2.1.0

package/{components → app/components}/public/cms/CmsGenericBlock.vue

@@ -4,13 +4,21 @@ import {
   getBackgroundImageUrl,
   getCmsLayoutConfiguration,
 } from "@shopware/helpers";
-import { h } from "vue";
+import { h, provide } from "vue";
+import { useAppConfig } from "#imports";
 import type { Schemas } from "#shopware";
+import { getImageSizes } from "../../../helpers/cms/getImageSizes";
 
 const props = defineProps<{
   content: Schemas["CmsBlock"];
 }>();
 
+const appConfig = useAppConfig();
+
+const slotCount = props.content.slots?.length || 1;
+provide("cms-block-slot-count", slotCount);
+provide("cms-image-sizes", getImageSizes(slotCount, appConfig.imageSizes));
+
 const DynamicRender = () => {
   const {
     resolvedComponent,
@@ -31,16 +39,22 @@ const DynamicRender = () => {
       layoutStyles.backgroundImage = getBackgroundImageUrl(
         layoutStyles.backgroundImage,
         props.content,
+        {
+          format: appConfig.backgroundImage?.format,
+          quality: appConfig.backgroundImage?.quality,
+        },
       );
     }
 
     const containerStyles = {
       backgroundColor: layoutStyles.backgroundColor,
       backgroundImage: layoutStyles.backgroundImage,
+      backgroundSize: layoutStyles.backgroundSize,
     };
 
     layoutStyles.backgroundColor = null;
     layoutStyles.backgroundImage = null;
+    layoutStyles.backgroundSize = null;
     return h(
       "div",
       {

package/{components → app/components}/public/cms/CmsPage.md

@@ -1,6 +1,23 @@
-An entrypoint to render the whole CMS object
+An entrypoint to render the whole CMS object.
 
-Example usage:
+Resolves all CMS sections dynamically and applies their layout configuration. When a section has a `backgroundMedia` set, the component automatically optimizes the background image URL using the `getBackgroundImageUrl` helper from `@shopware/helpers`, appending `format` and `quality` parameters from the `backgroundImage` app config.
+
+### Background Image Optimization
+
+Background image settings are read from `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  backgroundImage: {
+    format: "webp", // output format
+    quality: 85, // image quality (0-100)
+  },
+});
+```
+
+See the [cms-base-layer README](../../../../../../README.md#%EF%B8%8F-background-image-optimization) for full details.
+
+### Example usage
 
 ```vue{29}
 <script setup lang="ts">

package/{components → app/components}/public/cms/CmsPage.vue

@@ -2,25 +2,48 @@
 import {
   getBackgroundImageUrl,
   getCmsLayoutConfiguration,
+  getProductListingFromCmsPage,
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
-import { computed, h, resolveComponent } from "vue";
-import { createCategoryListingContext, useNavigationContext } from "#imports";
+import { computed, h, resolveComponent, watchEffect } from "vue";
+import {
+  createCategoryListingContext,
+  useAppConfig,
+  useNavigationContext,
+} from "#imports";
 import type { Schemas } from "#shopware";
+import { useLcpImagePreload } from "../../../composables/useLcpImagePreload";
 
 const props = defineProps<{
   content: Schemas["CmsPage"];
 }>();
 
 const { routeName } = useNavigationContext();
-if (routeName.value === "frontend.navigation.page") {
-  createCategoryListingContext();
+const appConfig = useAppConfig();
+
+// Function to initialize or update listing context
+function updateListingContext(content: Schemas["CmsPage"]) {
+  if (routeName.value === "frontend.navigation.page") {
+    const initialListing =
+      getProductListingFromCmsPage<Schemas["ProductListingResult"]>(content);
+
+    if (initialListing) {
+      createCategoryListingContext(initialListing);
+    }
+  }
 }
 
+// Watch for content changes and update context
+watchEffect(() => {
+  updateListingContext(props.content);
+});
+
 const cmsSections = computed<Schemas["CmsSection"][]>(() => {
   return props.content?.sections || [];
 });
 
+useLcpImagePreload(props.content?.sections || []);
+
 const DynamicRender = () => {
   const componentsMap = cmsSections.value.map((section) => {
     return {
@@ -41,6 +64,7 @@ const DynamicRender = () => {
       layoutStyles.backgroundImage = getBackgroundImageUrl(
         layoutStyles.backgroundImage,
         componentObject.section,
+        appConfig.backgroundImage,
       );
     }
 
@@ -48,7 +72,8 @@ const DynamicRender = () => {
       content: componentObject.section,
       class: {
         ...cssClasses,
-        "max-w-screen-2xl mx-auto": layoutStyles?.sizingMode === "boxed",
+        "max-w-screen-2xl w-full mx-auto": layoutStyles?.sizingMode === "boxed",
+        "w-full": layoutStyles?.sizingMode === "full_width",
       },
       style: {
         backgroundColor: layoutStyles?.backgroundColor,

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

@@ -21,6 +21,6 @@ const slotCenterContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-center-text .cms-element-image {
-  @apply aspect-square object-cover;
+  @apply self-stretch min-h-12;
 }
 </style>

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

@@ -12,13 +12,13 @@ const leftContent = getSlotContent("left");
 </script>
 
 <template>
-  <div
-    class="lg:container mx-auto flex flex-col lg:flex-row gap-10 justify-center"
-  >
-    <div class="overflow-hidden basis-4/6">
+  <div class="w-full flex flex-col lg:flex-row justify-center items-stretch gap-4 lg:gap-10 lg:px-0 overflow-hidden">
+    <!-- Gallery Section -->
+    <div class="w-full lg:w-3/5">
       <CmsGenericElement :content="leftContent" />
     </div>
-    <div class="basis-2/6">
+    <!-- Buybox Section -->
+    <div class="w-full lg:w-2/5">
       <CmsGenericElement :content="rightContent" />
     </div>
   </div>

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

@@ -13,20 +13,20 @@ const rightContent = getSlotContent("right");
 const centerContent = getSlotContent("center");
 </script>
 <template>
-  <div class="cms-block-image-bubble-row grid md:grid-cols-3 gap-10">
-    <div class="flex items-center justify-center">
+  <div class="cms-block-image-bubble-row flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+    <div class="w-full sm:flex-1 flex items-center justify-center">
       <CmsGenericElement :content="leftContent" class="w-full" />
     </div>
-    <div class="flex items-center justify-center">
+    <div class="w-full sm:flex-1 flex items-center justify-center">
       <CmsGenericElement :content="centerContent" class="w-full" />
     </div>
-    <div class="flex items-center justify-center">
+    <div class="w-full sm:flex-1 flex items-center justify-center">
       <CmsGenericElement :content="rightContent" class="w-full" />
     </div>
   </div>
 </template>
 <style scoped>
-.cms-block-image-bubble-row .cms-element-image {
+.cms-block-image-bubble-row :deep(.cms-element-image) {
   @apply object-cover max-w-xs overflow-hidden rounded-full aspect-square;
 }
 </style>

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

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { CmsBlockImageFourColumn } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageFourColumn;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+const centerLeftContent = getSlotContent("center-left");
+const centerRightContent = getSlotContent("center-right");
+</script>
+<template>
+  <div class="cms-block-image-four-column flex flex-col sm:flex-row sm:flex-wrap lg:flex-nowrap justify-start items-start gap-6 w-full">
+    <div class="w-full sm:w-[calc(50%-12px)] lg:flex-1">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="w-full sm:w-[calc(50%-12px)] lg:flex-1">
+      <CmsGenericElement :content="centerLeftContent" />
+    </div>
+    <div class="w-full sm:w-[calc(50%-12px)] lg:flex-1">
+      <CmsGenericElement :content="centerRightContent" />
+    </div>
+    <div class="w-full sm:w-[calc(50%-12px)] lg:flex-1">
+      <CmsGenericElement :content="rightContent" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-four-column :deep(.cms-element-image) {
+  @apply relative h-full w-full;
+}
+
+.cms-block-image-four-column :deep(.cms-element-image img) {
+  @apply w-full h-full object-cover;
+}
+</style>

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

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { CmsBlockImageGalleryBig } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageGalleryBig;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const cmsContent = getSlotContent("imageGallery");
+</script>
+
+<template>
+  <div class="cms-block-image-gallery-big">
+    <CmsGenericElement :content="cmsContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-gallery-big {
+  @apply w-full;
+}
+
+.cms-block-image-gallery-big :deep(.cms-element-image-gallery) {
+  @apply max-w-screen-xl mx-auto;
+}
+
+/* Enhanced styling for the big gallery version */
+.cms-block-image-gallery-big :deep(.gallery-slider) {
+  @apply max-h-[800px];
+}
+
+.cms-block-image-gallery-big :deep(img) {
+  @apply object-contain mx-auto;
+}
+
+/* Larger navigation controls */
+.cms-block-image-gallery-big :deep(.gallery-slider-controls) {
+  @apply scale-125;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { CmsBlockImageHighlightRow } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageHighlightRow;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+const rightContent = getSlotContent("right");
+const centerContent = getSlotContent("center");
+</script>
+<template>
+  <div class="cms-block-image-highlight-row flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="centerContent" />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="rightContent" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-highlight-row :deep(.cms-element-image) {
+  @apply relative h-full w-full border-[12px] border-surface-surface;
+}
+
+.cms-block-image-highlight-row :deep(.cms-element-image img) {
+  @apply w-full h-full object-cover;
+}
+</style>

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

@@ -14,11 +14,17 @@ const rightContent = getSlotContent("right");
 </script>
 
 <template>
-  <div class="grid md:grid-cols-2 gap-10">
-    <div class="grid gap-10">
-      <CmsGenericElement :content="leftTopContent" />
-      <CmsGenericElement :content="leftBottomContent" />
+  <div class="flex flex-col md:flex-row justify-start items-start gap-6 w-full">
+    <div class="w-full md:flex-1 flex flex-col justify-start items-start gap-6">
+      <div class="w-full">
+        <CmsGenericElement :content="leftTopContent" />
+      </div>
+      <div class="w-full">
+        <CmsGenericElement :content="leftBottomContent" />
+      </div>
+    </div>
+    <div class="w-full md:flex-1">
+      <CmsGenericElement :content="rightContent" />
     </div>
-    <CmsGenericElement :content="rightContent" />
   </div>
 </template>

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

@@ -12,8 +12,12 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <div class="grid md:grid-cols-2 gap-10">
-    <CmsGenericElement :content="leftContent" />
-    <CmsGenericElement :content="rightContent" />
+  <div class="flex flex-col md:flex-row justify-start items-stretch gap-6 w-full">
+    <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
+      <CmsGenericElement :content="leftContent" class="flex-1" />
+    </div>
+    <div class="w-full md:flex-1 min-w-0 p-4 flex flex-col">
+      <CmsGenericElement :content="rightContent" class="flex-1" />
+    </div>
   </div>
 </template>

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

@@ -16,36 +16,33 @@ const rightText = getSlotContent("right-text");
 const rightImage = getSlotContent("right-image");
 </script>
 <template>
-  <div class="cms-block-image-text-bubble grid grid-cols-3 auto-cols-max">
-    <div class="cms-element-column p-4">
-      <div class="flex justify-center">
+  <div class="cms-block-image-text-bubble flex flex-col sm:flex-row justify-start items-start gap-6 w-full">
+    <div class="w-full sm:flex-1">
+      <div class="self-stretch flex justify-center">
         <CmsGenericElement
           :content="leftImage"
-          class="object-center rounded-full"
-          style="height: calc(100vw / 3 - 64px); width: calc(100vw / 3 - 64px)"
+          class="object-center rounded-full w-48 h-48 sm:w-56 sm:h-56 lg:w-64 lg:h-64"
         />
       </div>
-      <CmsGenericElement :content="leftText" />
+      <CmsGenericElement :content="leftText" class="self-stretch" />
     </div>
-    <div class="cms-element-column p-4">
-      <div class="flex justify-center">
+    <div class="w-full sm:flex-1">
+      <div class="self-stretch flex justify-center">
         <CmsGenericElement
           :content="centerImage"
-          class="object-center rounded-full"
-          style="height: calc(100vw / 3 - 64px); width: calc(100vw / 3 - 64px)"
+          class="object-center rounded-full w-48 h-48 sm:w-56 sm:h-56 lg:w-64 lg:h-64"
         />
       </div>
-      <CmsGenericElement :content="centerText" />
+      <CmsGenericElement :content="centerText" class="self-stretch" />
     </div>
-    <div class="cms-element-column p-4">
-      <div class="flex justify-center">
+    <div class="w-full sm:flex-1">
+      <div class="self-stretch flex justify-center">
         <CmsGenericElement
           :content="rightImage"
-          class="object-center rounded-full"
-          style="height: calc(100vw / 3 - 64px); width: calc(100vw / 3 - 64px)"
+          class="object-center rounded-full w-48 h-48 sm:w-56 sm:h-56 lg:w-64 lg:h-64"
         />
       </div>
-      <CmsGenericElement :content="rightText" />
+      <CmsGenericElement :content="rightText" class="self-stretch" />
     </div>
   </div>
 </template>

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

@@ -12,14 +12,12 @@ const leftContent = getSlotContent("left");
 const rightContent = getSlotContent("right");
 </script>
 <template>
-  <article class="md:grid md:grid-cols-2 gap-10">
-    <CmsGenericElement
-      :content="leftContent"
-      class="cms-block-image-text-cover__image"
-    />
-    <CmsGenericElement
-      :content="rightContent"
-      class="cms-block-image-text-cover__text"
-    />
+  <article class="flex flex-col md:flex-row justify-start items-start gap-6 w-full pb-6">
+    <div class="w-full md:flex-1 px-6 pt-6 md:px-0 md:pt-6 md:pl-6">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="w-full md:flex-1 px-6 pt-0 md:pt-6 pb-6 md:px-0 md:pr-6">
+      <CmsGenericElement :content="rightContent" />
+    </div>
   </article>
 </template>

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

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type {
+  CmsBlockImageTextGallery,
+  CmsElementImage,
+  CmsElementText,
+} from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTextGallery;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftTextContent = getSlotContent("left-text") as CmsElementText;
+const rightTextContent = getSlotContent("right-text") as CmsElementText;
+const centerTextContent = getSlotContent("center-text") as CmsElementText;
+
+const leftImageContent = getSlotContent(
+  "left-image",
+) as unknown as CmsElementImage;
+const rightImageContent = getSlotContent(
+  "right-image",
+) as unknown as CmsElementImage;
+const centerImageContent = getSlotContent(
+  "center-image",
+) as unknown as CmsElementImage;
+
+// TODO: useRouter
+function onImageClick(
+  slotContent: CmsElementImage & {
+    data: {
+      url?: string;
+      newTab?: boolean;
+    };
+  },
+) {
+  if (slotContent.data?.url) {
+    if (slotContent.data?.newTab) {
+      window.open(slotContent.data.url);
+    } else {
+      window.location.href = slotContent.data.url;
+    }
+  }
+}
+</script>
+<template>
+  <article
+    class="cms-block-image-text-gallery flex flex-col sm:flex-row justify-start items-start gap-6 w-full"
+    :style="{ backgroundColor: content.backgroundColor || '' }"
+  >
+    <div class="w-full sm:flex-1">
+      <CmsElementImage
+        :content="leftImageContent"
+        :style="{ cursor: leftImageContent.data?.url && 'pointer' }"
+        @click="onImageClick(leftImageContent)"
+      />
+      <CmsElementText
+        :content="leftTextContent"
+        class="self-stretch"
+      />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsElementImage
+        :content="centerImageContent"
+        :style="{
+          cursor: centerImageContent.data?.url && 'pointer',
+        }"
+        @click="onImageClick(centerImageContent)"
+      />
+      <CmsElementText
+        :content="centerTextContent"
+        class="self-stretch"
+      />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsElementImage
+        :content="rightImageContent"
+        :style="{ cursor: rightImageContent.data?.url && 'pointer' }"
+        @click="onImageClick(rightImageContent)"
+      />
+      <CmsElementText
+        :content="rightTextContent"
+        class="self-stretch"
+      />
+    </div>
+  </article>
+</template>

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CmsBlockImageTextRow } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTextRow;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftImageContent = getSlotContent("left-image");
+const leftTextContent = getSlotContent("left-text");
+const centerImageContent = getSlotContent("center-image");
+const centerTextContent = getSlotContent("center-text");
+const rightImageContent = getSlotContent("right-image");
+const rightTextContent = getSlotContent("right-text");
+</script>
+<template>
+  <div class="cms-block-image-text-row flex flex-col md:flex-row justify-center items-stretch gap-6 w-full">
+    <div class="w-full md:flex-1 flex flex-col">
+      <div class="flex-1 mb-4 overflow-hidden rounded-lg min-h-64">
+        <CmsGenericElement :content="leftImageContent" />
+      </div>
+      <CmsGenericElement :content="leftTextContent" class="text-center" />
+    </div>
+    <div class="w-full md:flex-1 flex flex-col">
+      <div class="flex-1 mb-4 overflow-hidden rounded-lg min-h-64">
+        <CmsGenericElement :content="centerImageContent" />
+      </div>
+      <CmsGenericElement :content="centerTextContent" class="text-center" />
+    </div>
+    <div class="w-full md:flex-1 flex flex-col">
+      <div class="flex-1 mb-4 overflow-hidden rounded-lg min-h-64">
+        <CmsGenericElement :content="rightImageContent" />
+      </div>
+      <CmsGenericElement :content="rightTextContent" class="text-center" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-text-row :deep(.cms-element-image) {
+  @apply relative h-full w-full;
+}
+
+.cms-block-image-text-row :deep(.cms-element-image img) {
+  @apply w-full h-full object-cover rounded-lg;
+}
+
+.cms-block-image-text-row :deep(.cms-element-text) {
+  @apply self-stretch min-h-12;
+}
+</style>

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

@@ -13,9 +13,15 @@ const rightContent = getSlotContent("right");
 const centerContent = getSlotContent("center");
 </script>
 <template>
-  <div class="grid md:grid-cols-3 gap-10">
-    <CmsGenericElement :content="leftContent" />
-    <CmsGenericElement :content="centerContent" />
-    <CmsGenericElement :content="rightContent" />
+  <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" />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="centerContent" />
+    </div>
+    <div class="w-full sm:flex-1">
+      <CmsGenericElement :content="rightContent" />
+    </div>
   </div>
 </template>

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

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