@shopware/cms-base-layer 0.0.0-canary-20250116171244

package/components/public/cms/CmsGenericElement.md

@@ -0,0 +1,31 @@
+Renders an Element type structure
+
+Example usage:
+
+```vue{19,22}
+<script setup lang="ts">
+import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockGalleryBuybox;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const rightContent = getSlotContent("right");
+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">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="basis-2/6">
+      <CmsGenericElement :content="rightContent" />
+    </div>
+  </div>
+</template>
+```

package/components/public/cms/CmsGenericElement.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { resolveCmsComponent } from "@shopware/composables";
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+import { h } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  content: Schemas["CmsSlot"];
+}>();
+
+const DynamicRender = () => {
+  const {
+    resolvedComponent,
+    componentName,
+    isResolved,
+    componentNameToResolve,
+  } = resolveCmsComponent(props.content);
+  if (resolvedComponent) {
+    if (!isResolved)
+      return h("div", {}, `Problem resolving component: ${componentName}`);
+
+    const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
+      props.content,
+    );
+    return h(resolvedComponent, {
+      content: props.content,
+      style: layoutStyles,
+      class: cssClasses,
+    });
+  }
+  console.error(`Component not resolved: ${componentNameToResolve}`);
+  return h("div", {}, "");
+};
+</script>
+
+<template>
+  <DynamicRender />
+</template>

package/components/public/cms/CmsNoComponent.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  content: Schemas["CmsBlock"];
+}>();
+
+const elementType = computed(() =>
+  props.content.apiAlias === "cms_block"
+    ? "Block"
+    : props.content.apiAlias === "cms_section"
+      ? "Section"
+      : "Element",
+);
+
+const componentName = computed(() => props.content.type);
+</script>
+Ū
+<template>
+  <span class="sw-text-error">
+    <b>
+      {{ elementType }}<i> {{ componentName }} </i>
+    </b>
+    is not implemented yet!
+  </span>
+</template>

package/components/public/cms/CmsPage.md

@@ -0,0 +1,36 @@
+An entrypoint to render the whole CMS object
+
+Example usage:
+
+```vue{29}
+<script setup lang="ts">
+import { useLandingSearch } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  navigationId: string;
+}>();
+
+const { search } = useLandingSearch();
+
+const { data: landingResponse } = await useAsyncData(
+  "cmsLanding" + props.navigationId,
+  async () => {
+    const landingPage = await search(props.navigationId, {
+      withCmsAssociations: true,
+    });
+    return landingPage;
+  },
+);
+
+if (typeof landingResponse?.value !== null) {
+  const landingPage = landingResponse as Ref<Schemas["LandingPage"]>;
+  useCmsHead(landingPage, { mainShopTitle: "Shopware Frontends Demo Store" });
+}
+</script>
+
+<template>
+  <LayoutBreadcrumbs />
+  <CmsPage v-if="landingResponse?.cmsPage" :content="landingResponse.cmsPage" />
+</template>
+```

package/components/public/cms/CmsPage.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import {
+  getBackgroundImageUrl,
+  getCmsLayoutConfiguration,
+} from "@shopware/helpers";
+import { pascalCase } from "scule";
+import { computed, h, resolveComponent } from "vue";
+import { createCategoryListingContext, useNavigationContext } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  content: Schemas["CmsPage"];
+}>();
+
+const { routeName } = useNavigationContext();
+if (routeName.value === "frontend.navigation.page") {
+  createCategoryListingContext();
+}
+
+const cmsSections = computed<Schemas["CmsSection"][]>(() => {
+  return props.content?.sections || [];
+});
+
+const DynamicRender = () => {
+  const componentsMap = cmsSections.value.map((section) => {
+    return {
+      name: `CmsSection${pascalCase(section.type)}`,
+      component: resolveComponent(`CmsSection${pascalCase(section.type)}`),
+      section: section,
+    };
+  });
+  return componentsMap.map((componentObject) => {
+    const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(
+      componentObject.section,
+    );
+    if (typeof componentObject.component === "string") {
+      return h("div", {}, `There is no ${componentObject.component}`);
+    }
+
+    if (layoutStyles?.backgroundImage) {
+      layoutStyles.backgroundImage = getBackgroundImageUrl(
+        layoutStyles.backgroundImage,
+        componentObject.section,
+      );
+    }
+
+    return h(componentObject.component, {
+      content: componentObject.section,
+      class: {
+        ...cssClasses,
+        "max-w-screen-2xl mx-auto": layoutStyles?.sizingMode === "boxed",
+      },
+      style: {
+        backgroundColor: layoutStyles?.backgroundColor,
+        backgroundImage: layoutStyles?.backgroundImage,
+        backgroundSize: layoutStyles?.backgroundSize,
+      },
+    });
+  });
+};
+</script>
+
+<template>
+  <DynamicRender />
+</template>

package/components/public/cms/block/CmsBlockCategoryNavigation.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CmsBlockCategoryNavigation } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockCategoryNavigation;
+}>();
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("content");
+</script>
+
+<template>
+  <div>
+    <CmsGenericElement v-if="slotContent" :content="slotContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockCenterText.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { CmsBlockCenterText } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockCenterText;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const slotLeftContent = getSlotContent("left");
+const slotRightContent = getSlotContent("right");
+const slotCenterContent = getSlotContent("center");
+</script>
+<template>
+  <div class="cms-block-center-text grid md:grid-cols-3 gap-10 content-center">
+    <CmsGenericElement :content="slotLeftContent" />
+    <CmsGenericElement :content="slotCenterContent" />
+    <CmsGenericElement :content="slotRightContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-center-text .cms-element-image {
+  @apply aspect-square object-cover;
+}
+</style>

package/components/public/cms/block/CmsBlockCrossSelling.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { CmsBlockCrossSelling } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockCrossSelling;
+}>();
+const { getSlotContent } = useCmsBlock(props.content);
+const slotContent = getSlotContent("content");
+</script>
+<template>
+  <div class="cms-block-cross-selling">
+    <CmsGenericElement :content="slotContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockCustomForm.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockForm } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockForm;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const cmsContent = getSlotContent("content");
+</script>
+<template>
+  <div class="cms-block-form">
+    <CmsGenericElement v-if="cmsContent" :content="cmsContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockDefault.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { Schemas } from "#shopware";
+
+defineProps<{
+  content: Schemas["CmsBlock"];
+}>();
+</script>
+<template>
+  <CmsGenericElement
+    v-for="slot in content.slots"
+    :key="slot.id"
+    :content="slot"
+  />
+</template>

package/components/public/cms/block/CmsBlockForm.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockForm } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockForm;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const cmsContent = getSlotContent("content");
+</script>
+<template>
+  <div class="cms-block-form">
+    <CmsGenericElement v-if="cmsContent" :content="cmsContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockGalleryBuybox.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { CmsBlockGalleryBuybox } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockGalleryBuybox;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const rightContent = getSlotContent("right");
+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">
+      <CmsGenericElement :content="leftContent" />
+    </div>
+    <div class="basis-2/6">
+      <CmsGenericElement :content="rightContent" />
+    </div>
+  </div>
+</template>

package/components/public/cms/block/CmsBlockImage.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CmsBlockImage } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImage;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const imageContent = getSlotContent("image");
+</script>
+<template>
+  <div>
+    <CmsGenericElement :content="imageContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockImageBubbleRow.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { CmsBlockImageBubbleRow } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageBubbleRow;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftContent = getSlotContent("left");
+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">
+      <CmsGenericElement :content="leftContent" class="w-full" />
+    </div>
+    <div class="flex items-center justify-center">
+      <CmsGenericElement :content="centerContent" class="w-full" />
+    </div>
+    <div class="flex items-center justify-center">
+      <CmsGenericElement :content="rightContent" class="w-full" />
+    </div>
+  </div>
+</template>
+<style scoped>
+.cms-block-image-bubble-row .cms-element-image {
+  @apply object-cover max-w-xs overflow-hidden rounded-full aspect-square;
+}
+</style>

package/components/public/cms/block/CmsBlockImageCover.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockImageCover } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageCover;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const cmsContent = getSlotContent("image");
+</script>
+<template>
+  <div class="cms-block-image-cover">
+    <CmsGenericElement v-if="cmsContent" :content="cmsContent" />
+  </div>
+</template>

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

@@ -0,0 +1,29 @@
+<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 grid md:grid-cols-4 gap-10">
+    <CmsGenericElement :content="leftContent" />
+    <CmsGenericElement :content="centerLeftContent" />
+    <CmsGenericElement :content="centerRightContent" />
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-four-column .cms-element-image {
+  @apply object-cover;
+}
+</style>

package/components/public/cms/block/CmsBlockImageGallery.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { CmsBlockImageGallery } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageGallery;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const cmsContent = getSlotContent("imageGallery");
+</script>
+
+<template>
+  <div class="cms-block-image-gallery">
+    <CmsGenericElement :content="cmsContent" />
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+<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 grid md:grid-cols-3 gap-10">
+    <CmsGenericElement :content="leftContent" />
+    <CmsGenericElement :content="centerContent" />
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>
+
+<style scoped>
+.cms-block-image-highlight-row .cms-element-image {
+  @apply border-[12px] border-white;
+}
+</style>

package/components/public/cms/block/CmsBlockImageSimpleGrid.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { CmsBlockImageSimpleGrid } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageSimpleGrid;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftTopContent = getSlotContent("left-top");
+const leftBottomContent = getSlotContent("left-bottom");
+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>
+    <CmsGenericElement :content="rightContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockImageSlider.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { CmsBlockImageSlider } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageSlider;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+const cmsContent = getSlotContent("imageSlider");
+</script>
+
+<template>
+  <div class="cms-block-image-slider">
+    <CmsGenericElement :content="cmsContent" />
+  </div>
+</template>

package/components/public/cms/block/CmsBlockImageText.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { CmsBlockImageText } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageText;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+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>
+</template>

package/components/public/cms/block/CmsBlockImageTextBubble.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { CmsBlockImageTextBubble } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTextBubble;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+const leftText = getSlotContent("left-text");
+const leftImage = getSlotContent("left-image");
+const centerText = getSlotContent("center-text");
+const centerImage = getSlotContent("center-image");
+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">
+        <CmsGenericElement
+          :content="leftImage"
+          class="object-center rounded-full"
+          style="height: calc(100vw / 3 - 64px); width: calc(100vw / 3 - 64px)"
+        />
+      </div>
+      <CmsGenericElement :content="leftText" />
+    </div>
+    <div class="cms-element-column p-4">
+      <div class="flex justify-center">
+        <CmsGenericElement
+          :content="centerImage"
+          class="object-center rounded-full"
+          style="height: calc(100vw / 3 - 64px); width: calc(100vw / 3 - 64px)"
+        />
+      </div>
+      <CmsGenericElement :content="centerText" />
+    </div>
+    <div class="cms-element-column p-4">
+      <div class="flex justify-center">
+        <CmsGenericElement
+          :content="rightImage"
+          class="object-center rounded-full"
+          style="height: calc(100vw / 3 - 64px); width: calc(100vw / 3 - 64px)"
+        />
+      </div>
+      <CmsGenericElement :content="rightText" />
+    </div>
+  </div>
+</template>

package/components/public/cms/block/CmsBlockImageTextCover.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { CmsBlockImageTextCover } from "@shopware/composables";
+import { useCmsBlock } from "#imports";
+
+const props = defineProps<{
+  content: CmsBlockImageTextCover;
+}>();
+
+const { getSlotContent } = useCmsBlock(props.content);
+
+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>
+</template>