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

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

@@ -0,0 +1,190 @@
+<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;
+    deliveryTime: string;
+    days: string;
+    noAvailable: string;
+    productNumber: 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",
+    deliveryTime: "Available, delivery time",
+    days: "days",
+    noAvailable: "No longer available",
+    productNumber: "Product number",
+  },
+};
+
+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, isListPrice } = useProductPrice(product);
+const regulationPrice = computed(() => price.value?.regulationPrice?.price);
+const { getFormattedPrice } = usePrice();
+
+const referencePrice = computed(
+  () => product.value?.calculatedPrice?.referencePrice,
+);
+const productNumber = computed(() => product.value?.productNumber);
+const purchaseUnit = computed(() => product.value?.purchaseUnit);
+const unitName = computed(() => product.value?.unit?.name);
+const availableStock = computed(() => product.value?.availableStock ?? 0);
+const minPurchase = computed(() => product.value?.minPurchase ?? 0);
+const deliveryTime = computed(() => product.value?.deliveryTime);
+const restockTime = computed(() => product.value?.restockTime);
+</script>
+<template>
+  <div
+    v-if="product"
+    :class="{
+      'h-full flex flex-col': true,
+      'justify-start': alignment === 'flex-start',
+      'justify-end': alignment === 'flex-end',
+      'justify-center': alignment === 'center',
+    }"
+  >
+    <div>
+      <div v-if="tierPrices.length <= 1">
+        <SwSharedPrice
+          v-if="isListPrice"
+          class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
+          :value="price?.listPrice?.price"
+        />
+        <SwSharedPrice
+          v-if="unitPrice"
+          class="text-3xl text-secondary-900 basis-2/6 justify-start"
+          :class="{
+            'text-red': isListPrice,
+          }"
+          :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-indigo-600">
+        <template v-if="taxState === 'gross'">
+          {{ translations.product.pricesIncl }}
+        </template>
+        <template v-else> {{ translations.product.pricesExcl }} </template>
+      </span>
+    </div>
+    <div class="mt-4">
+      <span v-if="availableStock >= minPurchase && deliveryTime"
+        >{{ translations.product.deliveryTime }} {{ deliveryTime?.name }}
+      </span>
+      <span
+        v-else-if="availableStock < minPurchase && deliveryTime && restockTime"
+      >
+        {{ translations.product.deliveryTime }} {{ restockTime }}
+        {{ translations.product.days }} {{ deliveryTime?.name }}</span
+      >
+      <span v-else>{{ translations.product.noAvailable }}</span>
+    </div>
+    <SwVariantConfigurator @change="changeVariant" />
+    <SwProductAddToCart :product="product" />
+    <div class="mt-3 product-detail-ordernumber-container">
+      <span class="font-bold text-secondary-900">
+        {{ translations.product.productNumber }}:
+      </span>
+      <span>
+        {{ productNumber }}
+      </span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1 @@
+Load a navigation menu for current category

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

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import { useCmsTranslations } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
+import { defu } from "defu";
+import type { Ref } from "vue";
+import { onMounted, ref } from "vue";
+import { useCategory, useNavigation } from "#imports";
+import type { Schemas } from "#shopware";
+
+type Translations = {
+  listing: {
+    category: string;
+    subCategory: string;
+    subCategoryOf: string;
+    loading: string;
+    categories: string;
+    subCategories: string;
+  };
+};
+
+let translations: Translations = {
+  listing: {
+    category: "Category",
+    subCategory: "Sub-category",
+    subCategoryOf: "of",
+    loading: "Loading ...",
+    categories: "Categories",
+    subCategories: "Sub-categories",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+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 ? 0 : 1;
+  categoryNavigation.value = await loadNavigationElements({ depth });
+  if (!flagAllowSubcategories) {
+    categoryNavigation.value = removeChildrenIfNotActiveCategory();
+  }
+  loading.value = false;
+});
+</script>
+<template>
+  <div>
+    <div
+      v-if="categoryNavigation && categoryNavigation.length"
+      class="cms-element-category-navigation max-w-screen-xl mx-auto"
+    >
+      <h2
+        v-if="categoryNavigation.length > 0 && !flagAllowSubcategories"
+        class="text-3xl tracking-tight text-secondary-900 m-0 px-5"
+      >
+        {{
+          categoryNavigation.length > 1
+            ? translations.listing.categories
+            : translations.listing.category
+        }}
+      </h2>
+      <h2
+        v-if="categoryNavigation.length > 0 && flagAllowSubcategories"
+        class="text-3xl tracking-tight text-secondary-900 m-0 px-5"
+      >
+        {{
+          categoryNavigation.length > 1
+            ? translations.listing.subCategories
+            : translations.listing.subCategory
+        }}
+        {{ translations.listing.subCategoryOf }}
+        {{ getTranslatedProperty(activeCategory, "name") }}
+      </h2>
+      <SwCategoryNavigation
+        :level="0"
+        :elements="categoryNavigation"
+        :active-category="activeCategory"
+      />
+    </div>
+    <div v-if="loading">
+      <div class="px-5">
+        <h2 class="text-3xl tracking-tight text-secondary-900 m-0 px-5 pl-0">
+          {{ translations.listing.loading }}
+        </h2>
+        <div
+          class="border border-secondary-200 shadow rounded-md p-4 max-w-screen-xl mx-auto"
+        >
+          <div class="animate-pulse flex space-x-4">
+            <div class="flex-1 space-y-6 py-1">
+              <div class="space-y-3">
+                <div class="grid grid-cols-3 gap-4">
+                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
+                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
+                </div>
+                <div class="h-2 bg-secondary-200 rounded"></div>
+              </div>
+              <div class="space-y-3">
+                <div class="grid grid-cols-3 gap-4">
+                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
+                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
+                </div>
+                <div class="h-2 bg-secondary-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+          <div class="animate-pulse flex space-x-4">
+            <div class="flex-1 space-y-6 py-4">
+              <div class="space-y-3">
+                <div class="grid grid-cols-3 gap-4">
+                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
+                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
+                </div>
+                <div class="h-2 bg-secondary-200 rounded"></div>
+              </div>
+              <div class="space-y-3">
+                <div class="grid grid-cols-3 gap-4">
+                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
+                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
+                </div>
+                <div class="h-2 bg-secondary-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+          <div class="animate-pulse flex space-x-4">
+            <div class="flex-1 space-y-6 pt-4">
+              <div class="space-y-3">
+                <div class="grid grid-cols-6 gap-4">
+                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
+                  <div class="h-2 bg-light-200 rounded col-span-5"></div>
+                </div>
+                <div class="h-2 bg-secondary-200 rounded"></div>
+              </div>
+              <div class="space-y-3">
+                <div class="grid grid-cols-3 gap-4">
+                  <div class="h-2 bg-light-200 rounded col-span-2"></div>
+                  <div class="h-2 bg-light-200 rounded col-span-1"></div>
+                </div>
+                <div class="h-2 bg-secondary-200 rounded"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1 @@
+Render slider of the products from cross-selling setting of a product

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

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import type {
+  CmsElementCrossSelling,
+  SliderElementConfig,
+} from "@shopware/composables";
+import { useElementSize } from "@vueuse/core";
+import { computed, ref, useTemplateRef } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementCrossSelling;
+}>();
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+const currentTabIndex = ref<number>(0);
+const crossSellContainer = useTemplateRef("crossSellContainer");
+const config = computed<SliderElementConfig>(() => ({
+  minHeight: {
+    value: "300px",
+    source: "static",
+  },
+  minWidth: {
+    value: "300px",
+    source: "static",
+  },
+  displayMode: {
+    value: "contain",
+    source: "static",
+  },
+  navigationDots: {
+    value: "",
+    source: "static",
+  },
+  navigationArrows: {
+    value: "outside",
+    source: "static",
+  },
+}));
+
+const crossSellCollections = computed(() => {
+  return (
+    props.content?.data?.crossSellings?.filter(
+      (collection) => !!collection.products.length,
+    ) || []
+  );
+});
+
+const { width } = useElementSize(crossSellContainer);
+const slidesToShow = computed(() => {
+  const minWidth = +(config.value.minWidth?.value.replace(/\D+/g, "") || 0);
+  return Math.floor(width.value / (minWidth * 1.2));
+});
+
+const toggleTab = (index: number) => {
+  if (currentTabIndex.value === index) return;
+  currentTabIndex.value = index;
+};
+</script>
+
+<template>
+  <div ref="crossSellContainer" class="cms-element-cross-selling">
+    <div class="flex gap-10 mb-5">
+      <a
+        v-for="(collection, index) of crossSellCollections"
+        :key="index"
+        class="transition text-lg font-bold text-secondary-700 cursor-pointer"
+        :class="{
+          'border-b-3 border-primary text-primary': currentTabIndex === index,
+        }"
+        @click="toggleTab(index)"
+      >
+        {{ collection.crossSelling.name }}
+      </a>
+    </div>
+    <transition name="fade" mode="out-in">
+      <SwSlider
+        v-if="crossSellCollections.length"
+        :config="config"
+        gap="1.25rem"
+        :slides-to-show="slidesToShow"
+        :slides-to-scroll="1"
+        :autoplay="false"
+      >
+        <SwProductCard
+          v-for="product of crossSellCollections[currentTabIndex].products"
+          :key="product.id"
+          class="w-[300px]"
+          :product="product"
+          :layout-type="getConfigValue('boxLayout')"
+          :display-mode="getConfigValue('displayMode')"
+        />
+      </SwSlider>
+    </transition>
+  </div>
+</template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1 @@
+Display a contact or newsletter sign up form

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { CmsElementForm } from "@shopware/composables";
+import { computed, defineAsyncComponent } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementForm;
+}>();
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const FormComponent = computed(() => {
+  switch (getConfigValue("type")) {
+    case "newsletter":
+      return defineAsyncComponent(
+        () => import("../../../SwNewsletterForm.vue"),
+      );
+    default:
+      return defineAsyncComponent(() => import("../../../SwContactForm.vue"));
+  }
+});
+</script>
+<template>
+  <div class="cms-element-form">
+    <component :is="FormComponent" :content="content" />
+  </div>
+</template>

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

@@ -0,0 +1 @@
+Display a contact or newsletter sign up form

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { CmsElementForm } from "@shopware/composables";
+import { computed, defineAsyncComponent } from "vue";
+import { useCmsElementConfig } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementForm;
+}>();
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const FormComponent = computed(() => {
+  switch (getConfigValue("type")) {
+    case "newsletter":
+      return defineAsyncComponent(
+        () => import("../../../SwNewsletterForm.vue"),
+      );
+    default:
+      return defineAsyncComponent(() => import("../../../SwContactForm.vue"));
+  }
+});
+</script>
+<template>
+  <div class="cms-element-form">
+    <component :is="FormComponent" :content="content" />
+  </div>
+</template>

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

@@ -0,0 +1 @@
+Display an image for provided media content. Including extra attributes like `srcset` and `alt`

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type {
+  CmsElementImage,
+  CmsElementManufacturerLogo,
+} from "@shopware/composables";
+import { buildUrlPrefix } 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 { isSpatial } from "../../../../helpers/media/isSpatial";
+
+const props = defineProps<{
+  content: CmsElementImage | CmsElementManufacturerLogo;
+  imageGallery?: boolean;
+}>();
+
+const { getUrlPrefix } = useUrlResolver();
+const {
+  containerStyle,
+  displayMode,
+  imageContainerAttrs,
+  imageAttrs,
+  imageLink,
+  isVideoElement,
+  mimeType,
+} = useCmsElementImage(props.content);
+
+const DEFAULT_THUMBNAIL_SIZE = 10;
+const imageElement = useTemplateRef("imageElement");
+const { width, height } = useElementSize(imageElement);
+
+function roundUp(num: number) {
+  return num ? Math.ceil(num / 100) * 100 : DEFAULT_THUMBNAIL_SIZE;
+}
+
+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`;
+});
+const imageComputedContainerAttrs = computed(() => {
+  const imageAttrsCopy = Object.assign({}, imageContainerAttrs.value);
+  if (imageAttrsCopy?.href) {
+    imageAttrsCopy.href = buildUrlPrefix(
+      imageAttrsCopy.href,
+      getUrlPrefix(),
+    ).path;
+  }
+  return imageAttrsCopy;
+});
+
+const SwMedia3D = computed(() => {
+  if (isSpatial(props.content.data.media)) {
+    return defineAsyncComponent(() => import("../../../SwMedia3D.vue"));
+  }
+  return "";
+});
+</script>
+<template>
+  <!-- TODO: using a tag only works with externalLink, need to improve this element to deal with both internalLink & externalLink -->
+  <component
+    :is="imageLink.url ? 'a' : 'div'"
+    v-if="imageAttrs.src"
+    class="cms-element-image relative h-full w-full"
+    :class="{
+      'flex justify-center items-center': imageGallery,
+    }"
+    :style="containerStyle"
+    v-bind="imageComputedContainerAttrs"
+  >
+    <video
+      v-if="isVideoElement"
+      controls
+      :class="{
+        'h-full w-full': true,
+        'absolute inset-0': ['cover', 'stretch'].includes(displayMode),
+        'object-cover': displayMode === 'cover',
+      }"
+    >
+      <source :src="imageAttrs.src" :type="mimeType" />
+      Your browser does not support the video tag.
+    </video>
+    <ClientOnly v-else-if="isSpatial(props.content.data.media)">
+      <component :is="SwMedia3D" :src="props.content.data.media.url" />
+    </ClientOnly>
+    <img
+      v-else
+      ref="imageElement"
+      loading="lazy"
+      :class="{
+        'w-full h-full': !imageGallery,
+        'w-4/5': imageGallery,
+        'absolute inset-0': ['cover', 'stretch'].includes(displayMode),
+        'object-cover': displayMode === 'cover',
+        'object-contain': imageGallery,
+      }"
+      :alt="imageAttrs.alt"
+      :src="srcPath"
+      :srcset="imageAttrs.srcset"
+    />
+  </component>
+</template>

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

@@ -0,0 +1 @@
+Display a gallery for provided media. Handles a plain image and the spatial (3d) images.