@shopware/cms-base-layer 1.5.0 → 2.0.0

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

@@ -0,0 +1,107 @@
+<script
+  setup
+  lang="ts"
+  generic="
+    ListingFilter extends {
+      id: string;
+      code: keyof Schemas['ProductListingResult']['currentFilters'];
+      label: string;
+      name: string;
+    }
+  "
+>
+import { useCmsTranslations } from "@shopware/composables";
+import { onClickOutside } from "@vueuse/core";
+import { defu } from "defu";
+import { computed, ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  description?: string; // Optional description for i18n
+}>();
+
+type Translations = {
+  listing: {
+    freeShipping: string;
+  };
+};
+let translations: Translations = {
+  listing: {
+    freeShipping: "Free shipping",
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const emits =
+  defineEmits<
+    (e: "select-value", value: { code: string; value: unknown }) => void
+  >();
+const currentFilterData = computed(
+  () => !!props.selectedFilters[props.filter?.code],
+);
+
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
+const dropdownElement = ref(null);
+onClickOutside(dropdownElement, () => {
+  isFilterVisible.value = false;
+});
+
+const handleRadioUpdate = (val: string | null | boolean | undefined) => {
+  emits("select-value", { code: props.filter.code, value: !!val });
+};
+</script>
+
+<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 }}
+          </div>
+        </div>
+        <SwIconButton 
+          type="ghost" 
+          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+          tabindex="-1"
+        >
+          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+        </SwIconButton>
+      </div>
+    </div>
+
+    <transition name="filter-collapse">
+      <div v-if="isFilterVisible" class="self-stretch">
+        <div class="pt-6 space-y-4">
+          <div class="self-stretch inline-flex justify-start items-start gap-2 w-full">
+            <div class="flex-1 pt-[3px]">
+              <SwSwitchButton
+                :model-value="currentFilterData"
+                @update:model-value="handleRadioUpdate"
+                :name="props.filter.code"
+                :aria-label="props.filter.label"
+                :label="props.filter.label"
+                :description="props.description || translations.listing.freeShipping"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>

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

@@ -2,9 +2,10 @@
 import {
   getBackgroundImageUrl,
   getCmsLayoutConfiguration,
+  getProductListingFromCmsPage,
 } from "@shopware/helpers";
 import { pascalCase } from "scule";
-import { computed, h, resolveComponent } from "vue";
+import { computed, h, resolveComponent, watchEffect } from "vue";
 import { createCategoryListingContext, useNavigationContext } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -13,10 +14,24 @@ const props = defineProps<{
 }>();
 
 const { routeName } = useNavigationContext();
-if (routeName.value === "frontend.navigation.page") {
-  createCategoryListingContext();
+
+// 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 || [];
 });
@@ -48,7 +63,7 @@ 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",
       },
       style: {
         backgroundColor: layoutStyles?.backgroundColor,

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-start gap-6 w-full">
+    <div class="w-full md:flex-1 p-4">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="w-full md:flex-1 p-4">
+      <CmsGenericElement :content="rightContent" />
+    </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>