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

package/components/public/cms/element/CmsElementProductListing.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts">
+import type { CmsElementProductListing } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { computed, ref, useTemplateRef, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useCategoryListing } from "#imports";
+import type { Schemas, operations } from "#shopware";
+
+const props = defineProps<{
+  content: CmsElementProductListing;
+}>();
+
+const defaultLimit = 15;
+const defaultPage = 1;
+const defaultOrder = "name-asc";
+const productListElement = useTemplateRef("productListElement");
+
+type Translations = {
+  listing: {
+    noProducts: string;
+    perPage: string;
+    product: string;
+    products: string;
+  };
+};
+let translations: Translations = {
+  listing: {
+    noProducts: "No products found 😔",
+    perPage: "Per Page:",
+    product: "Product",
+    products: "Products",
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const {
+  changeCurrentPage,
+  getCurrentPage,
+  getElements,
+  getTotalPagesCount,
+  loading,
+  setInitialListing,
+} = useCategoryListing();
+const route = useRoute();
+const router = useRouter();
+const limit = ref(
+  route.query.limit
+    ? Number(route.query.limit)
+    : props.content?.data?.listing?.limit
+      ? Number(props.content?.data?.listing?.limit)
+      : defaultLimit,
+);
+
+const initalRoute = defu(route);
+watch(
+  () => route,
+  (newRoute) => {
+    if (initalRoute.path !== newRoute.path) {
+      return;
+    }
+    if (Object.keys(newRoute.query).length > 0) {
+      return;
+    }
+    // this fires to reset the page when query are removed/empty on client side navigation for the same page (without hard reload)
+    changeCurrentPage(defaultPage, {
+      limit: defaultLimit,
+      p: defaultPage,
+      order: defaultOrder,
+    } as unknown as operations["searchPage post /search"]["body"]);
+  },
+  { deep: true },
+);
+
+const changePage = async (page: number) => {
+  await router.push({
+    query: {
+      ...route.query,
+      p: page,
+      limit: limit.value,
+    },
+  });
+  await changeCurrentPage(
+    page,
+    route.query as unknown as operations["searchPage post /search"]["body"],
+  );
+  productListElement.value?.scrollIntoView({ behavior: "smooth" });
+};
+
+const changeLimit = async (limit: Event) => {
+  const select = limit.target as HTMLSelectElement;
+
+  await router.push({
+    query: {
+      ...route.query,
+      limit: select.value,
+      p: defaultPage,
+    },
+  });
+  await changeCurrentPage(
+    defaultPage,
+    route.query as unknown as operations["searchPage post /search"]["body"],
+  );
+  productListElement.value?.scrollIntoView({ behavior: "smooth" });
+};
+
+const isProductListing = computed(
+  () => props.content?.type === "product-listing",
+);
+// This is a workaround because vercel caching with the nuxt preset does not support query params at the moment
+// @see https://github.com/shopware/frontends/issues/687#issuecomment-1988392091
+const compareRouteQueryWithInitialListing = async () => {
+  const limitListing = props?.content?.data?.listing.limit ?? defaultLimit;
+  const pageListing = props?.content?.data?.listing.page ?? defaultPage;
+  const orderListing = props?.content?.data?.listing.sorting ?? defaultOrder;
+
+  const isChangePageNeeded =
+    (route.query.limit && limit.value !== limitListing) ||
+    (route.query.p && Number(route.query.p) !== pageListing) ||
+    (route.query.order && route.query.order !== orderListing);
+
+  if (isChangePageNeeded) {
+    const limitQuery = route.query.limit
+      ? Number(route.query.limit)
+      : defaultLimit;
+    const pageQuery = route.query.p ? Number(route.query.p) : defaultPage;
+    const orderQuery = route.query.order
+      ? (route.query.order as string)
+      : defaultOrder;
+    const newQuery = {
+      limit: limitQuery,
+      p: pageQuery,
+      order: orderQuery,
+    };
+    console.warn(
+      "The current route does not match the initial listing. Changing the route to match the initial listing.",
+    );
+    limit.value = limitQuery;
+    await changeCurrentPage(
+      pageQuery,
+      newQuery as unknown as operations["searchPage post /search"]["body"],
+    );
+  }
+};
+
+setInitialListing(
+  props?.content?.data?.listing as Schemas["ProductListingResult"],
+);
+
+compareRouteQueryWithInitialListing();
+</script>
+
+<template>
+  <div class="bg-white">
+    <div class="max-w-2xl mx-auto lg:max-w-full">
+      <div class="mt-6">
+        <div
+          v-if="!loading"
+          ref="productListElement"
+          class="flex justify-center flex-wrap p-4 md:p-6 lg:p-8 productListElement"
+        >
+          <SwProductCard
+            v-for="product in getElements"
+            :key="product.id"
+            :product="product"
+            :is-product-listing="isProductListing"
+            class="p-4 border rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 ease-in-out w-full lg:w-3/7 2xl:w-7/24 mr-0 sm:mr-8 mb-8"
+          />
+        </div>
+        <div
+          v-if="loading"
+          data-testid="loading"
+          class="flex justify-center flex-wrap p-4 md:p-6 lg:p-8"
+        >
+          <ProductCardSkeleton
+            v-for="index in limit"
+            :key="index"
+            class="w-full mb-8 sm:w-3/7 lg:w-2/7 2xl:w-7/24 mr-0 sm:mr-8 mb-8"
+          />
+        </div>
+        <div
+          class="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6 lg:gap-8 p-4 md:p-6 lg:p-8"
+        >
+          <div class="text-center place-self-center">
+            <SwPagination
+              :total="getTotalPagesCount"
+              :current="Number(getCurrentPage)"
+              @change-page="changePage"
+            />
+          </div>
+          <div class="text-center place-self-center mt-2 lg:mt-0">
+            <div
+              class="inline-block align-top text-center md:text-left"
+              data-testid="listing-pagination-limit-box"
+            >
+              <label
+                for="limit"
+                class="inline mr-4"
+                data-testid="listing-pagination-limit-label"
+                >{{ translations.listing.perPage }}</label
+              >
+              <select
+                id="limit"
+                v-model="limit"
+                name="limitchoices"
+                class="inline appearance-none bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
+                data-testid="listing-pagination-limit-select"
+                @change="changeLimit"
+              >
+                <option :value="1">1 {{ translations.listing.product }}</option>
+                <option :value="15">
+                  15 {{ translations.listing.products }}
+                </option>
+                <option :value="30">
+                  30 {{ translations.listing.products }}
+                </option>
+                <option :value="45">
+                  45 {{ translations.listing.products }}
+                </option>
+              </select>
+              <div
+                class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700"
+              >
+                <svg
+                  class="fill-current h-4 w-4"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- <div v-else>
+        <h2 class="mx-auto text-center">
+          {{ translations.listing.noProducts }}
+        </h2>
+      </div> -->
+    </div>
+  </div>
+</template>

package/components/public/cms/element/CmsElementProductName.md

@@ -0,0 +1 @@
+Display a name for a product

package/components/public/cms/element/CmsElementProductName.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { CmsElementProductName } from "@shopware/composables";
+
+defineProps<{
+  content: CmsElementProductName;
+}>();
+</script>
+<template>
+  <CmsElementText :content="content as any" />
+</template>

package/components/public/cms/element/CmsElementProductSlider.md

@@ -0,0 +1 @@
+Display a slider of provided products

package/components/public/cms/element/CmsElementProductSlider.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type {
+  CmsElementProductSlider,
+  SliderElementConfig,
+} from "@shopware/composables";
+import { computed, onMounted, ref, useTemplateRef } from "vue";
+import type { ComputedRef } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementProductSlider;
+}>();
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const productSlider = useTemplateRef("productSlider");
+const slidesToShow = ref<number>();
+const products = computed(() => props.content?.data?.products ?? []);
+const config: ComputedRef<SliderElementConfig> = computed(() => ({
+  minHeight: {
+    value: "300px",
+    source: "static",
+  },
+  verticalAlign: {
+    source: "static",
+    value: getConfigValue("verticalAlign") || "",
+  },
+  displayMode: {
+    value: "contain",
+    source: "static",
+  },
+  navigationDots: {
+    value: "",
+    source: "static",
+  },
+  navigationArrows: {
+    value: getConfigValue("navigation") ? "outside" : "",
+    source: "static",
+  },
+}));
+
+onMounted(() => {
+  setTimeout(() => {
+    let temp = 1;
+    const minWidth = +getConfigValue("elMinWidth").replace(/\D+/g, "");
+    if (productSlider.value?.clientWidth) {
+      temp = Math.ceil(productSlider.value?.clientWidth / (minWidth * 1.2));
+    }
+    slidesToShow.value = temp;
+  }, 100);
+});
+
+const autoplay = computed(() => getConfigValue("rotate"));
+const title = computed(() => getConfigValue("title"));
+const border = computed(() => getConfigValue("border"));
+</script>
+<template>
+  <div ref="productSlider" class="cms-element-product-slider">
+    <h3 v-if="title" class="mb-5 text-lg font-bold text-secondary-700">
+      {{ title }}
+    </h3>
+    <div :class="{ 'py-5 border border-secondary-300': border }">
+      <SwSlider
+        :config="config"
+        gap="1.25rem"
+        :slides-to-show="slidesToShow"
+        :slides-to-scroll="1"
+        :autoplay="autoplay"
+      >
+        <SwProductCard
+          v-for="product of products"
+          :key="product.id"
+          class="h-full"
+          :product="product"
+          :layout-type="getConfigValue('boxLayout')"
+          :display-mode="getConfigValue('displayMode')"
+        />
+      </SwSlider>
+    </div>
+  </div>
+</template>

package/components/public/cms/element/CmsElementSidebarFilter.md

@@ -0,0 +1 @@
+Display a sidebar containing filters for an active product listing

package/components/public/cms/element/CmsElementSidebarFilter.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { CmsElementSidebarFilter } from "@shopware/composables";
+
+defineProps<{
+  content: CmsElementSidebarFilter;
+}>();
+</script>
+<template>
+  <div class="max-w-screen-xl mx-auto">
+    <SwProductListingFilters :content="content" />
+  </div>
+</template>

package/components/public/cms/element/CmsElementText.md

@@ -0,0 +1 @@
+Display a text. Html to Vue mechanism is used to render buttons, links, images accordingly as Vue elements

package/components/public/cms/element/CmsElementText.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { CmsElementText } from "@shopware/composables";
+import { decodeHTML } from "entities";
+import { computed, defineComponent, getCurrentInstance, h } from "vue";
+import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+import { useCmsElementConfig, useUrlResolver } from "#imports";
+import { getOptionsFromNode } from "../../../../helpers/html-to-vue/getOptionsFromNode";
+import type { NodeObject } from "../../../../helpers/html-to-vue/getOptionsFromNode";
+import { renderHtml } from "../../../../helpers/html-to-vue/renderToHtml";
+type RawChildren = string | number | boolean | VNode | VNodeArrayChildren;
+
+const props = defineProps<{
+  content: CmsElementText;
+}>();
+const context = getCurrentInstance();
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const mappedContent = computed<string>(() => {
+  return props.content?.data?.content || getConfigValue("content");
+});
+
+const style = computed<CSSProperties>(() => ({
+  alignItems: getConfigValue("verticalAlign"),
+}));
+
+const hasVerticalAlignment = computed(() => !!style.value.alignItems);
+
+const CmsTextRender = defineComponent({
+  setup() {
+    const { resolveUrl } = useUrlResolver();
+
+    const config = {
+      textTransformer: (text: string) => decodeHTML(text),
+      extraComponentsMap: {
+        link: {
+          conditions(node: NodeObject) {
+            return (
+              node.type === "tag" &&
+              node.name === "a" &&
+              !node.attrs?.class?.match(/btn\s?/)
+            );
+          },
+          renderer(
+            node: NodeObject,
+            children: RawChildren[],
+            createElement: typeof h,
+          ) {
+            return createElement(
+              "a",
+              {
+                class:
+                  "underline text-base font-normal text-primary hover:text-secondary-900",
+                ...getOptionsFromNode(node, resolveUrl).attrs,
+              },
+              [...children],
+            );
+          },
+        },
+        button: {
+          conditions(node: NodeObject) {
+            return (
+              node.type === "tag" &&
+              node.name === "a" &&
+              node.attrs?.class?.match(/btn\s?/)
+            );
+          },
+          renderer(
+            node: NodeObject,
+            children: RawChildren[],
+            createElement: typeof h,
+          ) {
+            let _class = "";
+            if (node?.attrs?.class) {
+              const btnClass =
+                "rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
+
+              _class = node.attrs.class
+                .replace("btn-secondary", `${btnClass} bg-dark text-white`)
+                .replace("btn-primary", `${btnClass} bg-primary text-white`);
+            }
+
+            return createElement(
+              "a",
+              {
+                class: _class,
+                ...getOptionsFromNode(node, resolveUrl).attrs,
+              },
+              [...children],
+            );
+          },
+        },
+        font: {
+          conditions(node: NodeObject) {
+            return node.type === "tag" && node.name === "font";
+          },
+          renderer(
+            node: NodeObject,
+            children: RawChildren[],
+            createElement: typeof h,
+          ) {
+            // convert from <font color="#ce0000">Headline 1</font> to <span style="color:#ce0000">Headline 1</span>
+            let newStyle = null;
+            const styleColor = node?.attrs?.color;
+            if (styleColor && node.attrs) {
+              const currentStyle = node.attrs?.style ?? "";
+              newStyle = `color:${styleColor};${currentStyle}`;
+              const { color: _, ...attrsWithoutColor } = node.attrs;
+              node.attrs = attrsWithoutColor;
+            }
+
+            return createElement(
+              "span",
+              {
+                style: newStyle,
+                ...getOptionsFromNode(node, resolveUrl).attrs,
+              },
+              [...children],
+            );
+          },
+        },
+        img: {
+          conditions(node: NodeObject) {
+            return node.type === "tag" && node.name === "img";
+          },
+          renderer(
+            node: NodeObject,
+            children: RawChildren[],
+            createElement: typeof h,
+          ) {
+            return createElement(
+              "img",
+              getOptionsFromNode(node, resolveUrl)?.attrs,
+            );
+          },
+        },
+      },
+    };
+    const rawHtml =
+      mappedContent.value?.length > 0
+        ? mappedContent.value
+        : "<div class='cms-element-text missing-content-element'></div>";
+
+    return () =>
+      h("div", {}, renderHtml(rawHtml, config, h, context, resolveUrl));
+  },
+});
+</script>
+<template>
+  <div
+    :class="{ flex: hasVerticalAlignment, 'flex-row': hasVerticalAlignment }"
+    :style="style"
+  >
+    <CmsTextRender />
+  </div>
+</template>
+<style scoped>
+/** Global CSS styles for text elements */
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+h1 {
+  line-height: 2.5rem;
+  font-size: 2.25rem;
+}
+h2 {
+  line-height: 2rem;
+  font-size: 1.75rem;
+}
+h3 {
+  line-height: 1.5rem;
+  font-size: 1.25rem;
+}
+ol,
+ul,
+dl {
+  list-style-type: disc;
+  padding-left: 40px;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+</style>

package/components/public/cms/element/CmsElementVimeoVideo.md

@@ -0,0 +1 @@
+Display a player for Vimeo media

package/components/public/cms/element/CmsElementVimeoVideo.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { CmsElementVimeoVideo } from "@shopware/composables";
+import { ref } from "vue";
+import type { Ref } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementVimeoVideo;
+}>();
+const { getConfigValue } = useCmsElementConfig(props.content);
+// TODO CMS add proper mapping or config type. This Component needs rework.
+type CmsElementVimeoVideoConfigKey = keyof CmsElementVimeoVideo["config"];
+
+const vimeoConfigMapping = {
+  byLine: "byline",
+  color: "color",
+  doNotTrack: "dnt",
+  loop: "loop",
+  mute: "mute",
+  title: "title",
+  portrait: "portrait",
+  controls: "controls",
+  videoID: "videoID",
+  autoplay: "autoplay",
+  previewMedia: "previewMedia",
+  needsConfirmation: "needsConfirmation",
+};
+
+const videoUrl: Ref = ref(
+  `https://player.vimeo.com/video/${getConfigValue("videoID")}?`,
+);
+
+const convertAttr = (
+  value: string,
+  configKey: CmsElementVimeoVideoConfigKey,
+) => {
+  if (configKey === "color")
+    return value
+      ? `${vimeoConfigMapping[configKey]}=${value}&`.replace("#", "")
+      : "";
+
+  return value ? `${vimeoConfigMapping[configKey]}=${value}&` : "";
+};
+
+for (const key in props.content.config) {
+  if (Object.prototype.hasOwnProperty.call(vimeoConfigMapping, key)) {
+    videoUrl.value += convertAttr(
+      props.content.config[key as CmsElementVimeoVideoConfigKey]
+        .value as string,
+      key as CmsElementVimeoVideoConfigKey,
+    );
+  }
+}
+</script>
+<template>
+  <div class="cms-element-vimeo-video">
+    <iframe
+      class="w-full inset-0 aspect-video"
+      :src="videoUrl.replace(/ /g, '')"
+    >
+    </iframe>
+  </div>
+</template>

package/components/public/cms/element/CmsElementYoutubeVideo.md

@@ -0,0 +1 @@
+Display a player for YouTube video

package/components/public/cms/element/CmsElementYoutubeVideo.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { CmsElementYoutubeVideo } from "@shopware/composables";
+import { computed } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementYoutubeVideo;
+}>();
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const config = computed(() => ({
+  videoID: getConfigValue("videoID"),
+  relatedVideos: "rel=0&",
+  loop: getConfigValue("loop")
+    ? `loop=1&playlist=${getConfigValue("videoID")}&`
+    : "",
+  showControls: getConfigValue("showControls") ? "controls=0&" : "",
+  start:
+    Number.parseInt(getConfigValue("start")) !== 0
+      ? `start=${getConfigValue("start")}&`
+      : "",
+  end:
+    Number.parseInt(getConfigValue("end")) !== 0
+      ? `end=${getConfigValue("end")}&`
+      : "",
+  disableKeyboard: "disablekb=1",
+}));
+
+const videoUrl = `https://www.youtube-nocookie.com/embed/\
+            ${config.value.videoID}?\
+            ${config.value.relatedVideos}\
+            ${config.value.loop}\
+            ${config.value.showControls}\
+            ${config.value.start}\
+            ${config.value.end}\
+            ${config.value.disableKeyboard}`.replace(/ /g, "");
+</script>
+<template>
+  <div class="cms-element-youtube-video">
+    <iframe class="w-full inset-0 aspect-video" :src="videoUrl"> </iframe>
+  </div>
+</template>

package/components/public/cms/section/CmsSectionDefault.md

@@ -0,0 +1,3 @@
+**Renders a generic block type**
+
+See the [`<CmsPage/>`](#cmspage) source code to see how it's used

package/components/public/cms/section/CmsSectionDefault.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { CmsSectionDefault } from "@shopware/composables";
+import { getCmsLayoutConfiguration } from "@shopware/helpers";
+
+const props = defineProps<{
+  content: CmsSectionDefault;
+}>();
+
+const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
+</script>
+
+<template>
+  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
+    <CmsGenericBlock
+      v-for="cmsBlock in content.blocks"
+      :key="cmsBlock.id"
+      class="overflow-auto"
+      :content="cmsBlock"
+    />
+  </div>
+</template>

package/components/public/cms/section/CmsSectionSidebar.md

@@ -0,0 +1,3 @@
+**Renders a generic block type**
+
+See the [`<CmsPage/>`](#cmspage) source code to see how it's used