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

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

@@ -0,0 +1,249 @@
+<script setup lang="ts">
+import type { CmsElementImageGallery } from "@shopware/composables";
+import { computed, onMounted, ref, useTemplateRef } from "vue";
+import { useCmsElementConfig } from "#imports";
+import { isSpatial } from "../../../../helpers/media/isSpatial";
+
+const props = withDefaults(
+  defineProps<{
+    content: CmsElementImageGallery;
+    slidesToShow?: number;
+    slidesToScroll?: number;
+  }>(),
+  {
+    slidesToShow: 5,
+    slidesToScroll: 4,
+  },
+);
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const speed = ref<number>(300);
+const currentIndex = ref(0);
+const currentThumb = ref(0);
+const imageSlider = useTemplateRef("imageSlider");
+const imageThumbsTrack = useTemplateRef("imageThumbsTrack");
+const isLoading = ref(true);
+const imageThumbsTrackStyle = ref({});
+const imageThumbs = useTemplateRef("imageThumbs");
+const imageThumbsStyle = ref({});
+const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
+const galleryPosition = computed<string>(
+  () => getConfigValue("galleryPosition") ?? "left",
+);
+const scrollPx = ref(0);
+
+onMounted(() => {
+  initThumbs();
+});
+
+function initThumbs() {
+  if (imageThumbsTrack.value) {
+    setTimeout(() => {
+      if (galleryPosition.value === "left") {
+        const clientHeight = imageThumbsTrack.value?.clientHeight ?? 0;
+        scrollPx.value = clientHeight / mediaGallery.value.length;
+        imageThumbsStyle.value = {
+          height: `${scrollPx.value * +props.slidesToShow}px`,
+        };
+      } else {
+        const clientWidth = imageThumbs.value?.clientWidth ?? 0;
+        scrollPx.value = clientWidth / props.slidesToShow;
+        imageThumbsTrackStyle.value = {
+          width: `${scrollPx.value * mediaGallery.value.length}px`,
+        };
+      }
+      isLoading.value = false;
+    }, 100);
+  }
+}
+
+function changeCover(i: number) {
+  if (i === currentIndex.value) return;
+  imageSlider.value?.goToSlide(i);
+}
+
+function handleChangeSlide(e: number) {
+  currentIndex.value = e;
+  if (currentIndex.value > currentThumb.value + props.slidesToShow - 1) {
+    move("next", currentIndex.value);
+    return;
+  }
+  if (currentIndex.value < currentThumb.value) {
+    move("previous", currentIndex.value);
+    return;
+  }
+}
+
+function move(type: "next" | "previous", specificIndex?: number | string) {
+  let step: number;
+  const index =
+    typeof specificIndex !== "number"
+      ? Number.parseInt(specificIndex as string)
+      : specificIndex;
+  if (index >= 0) {
+    if (type === "next") {
+      step =
+        index + props.slidesToScroll < mediaGallery.value.length
+          ? index
+          : mediaGallery.value.length - props.slidesToShow;
+    } else {
+      step =
+        index - props.slidesToScroll > 0 ? index - props.slidesToScroll : 0;
+    }
+  } else {
+    if (type === "next") {
+      step =
+        currentThumb.value + props.slidesToShow - 1 + props.slidesToScroll <
+        mediaGallery.value.length
+          ? currentThumb.value + props.slidesToScroll
+          : mediaGallery.value.length - props.slidesToShow;
+    } else {
+      step =
+        currentThumb.value - props.slidesToScroll > 0
+          ? currentThumb.value - props.slidesToScroll
+          : 0;
+    }
+  }
+  currentThumb.value = step;
+  let xAxis = 0;
+  let yAxis = 0;
+  if (galleryPosition.value === "left") {
+    yAxis = scrollPx.value * currentThumb.value;
+  } else {
+    xAxis = scrollPx.value * currentThumb.value;
+  }
+  imageThumbsTrackStyle.value = {
+    ...imageThumbsTrackStyle.value,
+    transform: `translate3d(-${xAxis}px, -${yAxis}px, 0px)`,
+    transition: `transform ${speed.value}ms ease 0s`,
+  };
+}
+
+function previous() {
+  if (currentThumb.value <= 0) {
+    return;
+  }
+  move("previous");
+}
+
+function next() {
+  if (currentThumb.value + props.slidesToShow >= mediaGallery.value.length) {
+    return;
+  }
+  move("next");
+}
+</script>
+
+<template>
+  <div
+    :class="{
+      'opacity-0': isLoading,
+      'flex gap-10': true,
+      'flex-col-reverse': galleryPosition === 'underneath',
+    }"
+  >
+    <div
+      :class="{
+        'hidden lg:flex basis-20 relative flex-col items-center':
+          galleryPosition === 'left',
+        'flex relative w-full': galleryPosition === 'underneath',
+      }"
+    >
+      <button
+        v-if="mediaGallery.length > slidesToShow"
+        class="disabled:opacity-10 p-1"
+        aria-label="Previous image"
+        @click="previous"
+      >
+        <div
+          class="h-7 w-7"
+          :class="{
+            'i-carbon-chevron-up': galleryPosition === 'left',
+            'i-carbon-chevron-left': galleryPosition !== 'left',
+          }"
+        />
+      </button>
+      <span class="sr-only">Previous image</span>
+      <div
+        ref="imageThumbs"
+        class="overflow-hidden -my-2.5"
+        :style="imageThumbsStyle"
+      >
+        <div
+          ref="imageThumbsTrack"
+          :class="{
+            flex: true,
+            'flex-col': galleryPosition === 'left',
+          }"
+          :style="imageThumbsTrackStyle"
+        >
+          <div
+            v-for="(image, i) in mediaGallery"
+            :key="image.media.url"
+            :class="{
+              'py-2.5': galleryPosition === 'left',
+              'flex-1 px-2.5': galleryPosition === 'underneath',
+            }"
+          >
+            <div
+              class="w-20 h-20 overflow-hidden cursor-pointer p-1 border-secondary-200 rounded transition duration-150 ease-in-out"
+              :class="{
+                border: i !== currentIndex,
+                'border-indigo-500 border-3': i === currentIndex,
+              }"
+              @click="() => changeCover(i)"
+            >
+              <div v-if="isSpatial(image.media)" class="h-full relative">
+                <CmsElementImageGallery3dPlaceholder
+                  class="w-full h-full object-center"
+                />
+                <span
+                  class="absolute bottom-0 text-sm bg-gray rounded px-1 text-white"
+                >
+                  3D</span
+                >
+              </div>
+              <img
+                v-else
+                loading="lazy"
+                :src="image.media.url"
+                class="w-full h-full object-center object-cover"
+                alt="Product image"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <button
+        v-if="mediaGallery.length > slidesToShow"
+        class="disabled:opacity-10 p-1"
+        aria-label="Next image"
+        @click="next"
+      >
+        <span class="sr-only">Next image</span>
+        <div
+          class="h-7 w-7"
+          :class="{
+            'i-carbon-chevron-down': galleryPosition === 'left',
+            'i-carbon-chevron-right': galleryPosition !== 'left',
+          }"
+        />
+      </button>
+    </div>
+    <div class="flex-1 overflow-hidden">
+      <SwSlider
+        ref="imageSlider"
+        :config="props.content.config"
+        @change-slide="handleChangeSlide"
+      >
+        <CmsElementImage
+          v-for="image of mediaGallery"
+          :key="image.media.url"
+          :image-gallery="true"
+          :content="{ data: image, config: props.content.config } as any"
+        />
+      </SwSlider>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,53 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    width="552"
+    height="383"
+    viewBox="0 0 552 383"
+  >
+    <defs>
+      <g
+        id="icons-default-placeholder"
+        fill="none"
+        fill-rule="evenodd"
+        opacity=".65"
+      >
+        <rect
+          width="333.061"
+          height="499.591"
+          x="84.659"
+          y="-82.663"
+          fill="#E9EBF2"
+          fill-rule="nonzero"
+          transform="rotate(-89.862 251.19 167.132)"
+        ></rect>
+        <g transform="translate(51 49)">
+          <rect
+            width="333.06"
+            height="499.59"
+            x="83.983"
+            y="-83.234"
+            fill="#DADDE5"
+            fill-rule="nonzero"
+            transform="rotate(-90 250.513 166.561)"
+          ></rect>
+          <polygon
+            fill="#E9EBF2"
+            points="137.18 333.1 500.31 333.1 500.31 302.36 322.15 110.42"
+          ></polygon>
+          <circle cx="113.04" cy="65.68" r="35.9" fill="#F5F7FC"></circle>
+          <polygon
+            fill="#F5F7FC"
+            points="219.88 157.3 73.85 333.1 383.05 333.1"
+          ></polygon>
+        </g>
+      </g>
+    </defs>
+    <use
+      xlink:href="#icons-default-placeholder"
+      fill="#758CA3"
+      fill-rule="evenodd"
+    ></use>
+  </svg>
+</template>

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

@@ -0,0 +1 @@
+Display a slider of images

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type {
+  CmsElementImage,
+  CmsElementImageSlider,
+} from "@shopware/composables";
+import { computed } from "vue";
+
+const props = defineProps<{
+  content: CmsElementImageSlider;
+}>();
+const items = computed(() => props.content.data.sliderItems);
+</script>
+<template>
+  <!-- need some with here for small views that the slider can calculate the correct items with -->
+  <div class="cms-element-image-slider w-[92vw] sm:w-[94vw] md:w-auto">
+    <SwSlider :config="props.content.config">
+      <CmsElementImage
+        v-for="image of items"
+        :key="image.media.url"
+        :content="
+          {
+            data: image,
+            config: props.content.config,
+          } as unknown as CmsElementImage
+        "
+      />
+    </SwSlider>
+  </div>
+</template>

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

@@ -0,0 +1 @@
+Display a logo of manufacturer of a product

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { CmsElementManufacturerLogo } from "@shopware/composables";
+import CmsElementImage from "./CmsElementImage.vue";
+
+defineProps<{
+  content: CmsElementManufacturerLogo;
+}>();
+</script>
+<template>
+  <CmsElementImage :content="content" />
+</template>

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

@@ -0,0 +1 @@
+Display a box for provided product

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

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { CmsElementProductBox } from "@shopware/composables";
+import { computed } from "vue";
+
+const props = defineProps<{
+  content: CmsElementProductBox;
+}>();
+
+const product = computed(() => props.content.data?.product || {});
+</script>
+
+<template>
+  <SwProductCard :product="product" />
+</template>

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

@@ -0,0 +1 @@
+Display a description and reviews for provided product

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { CmsElementProductDescriptionReviews } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { getProductName, getTranslatedProperty } from "@shopware/helpers";
+import { defu } from "defu";
+import { computed, ref } from "vue";
+import xss from "xss";
+import { useProduct } from "#imports";
+
+const props = defineProps<{
+  content: CmsElementProductDescriptionReviews;
+}>();
+
+type Translations = {
+  products: {
+    description: string;
+    reviews: string;
+  };
+};
+
+let translations: Translations = {
+  products: {
+    description: "Description",
+    reviews: "Reviews",
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const currentTab = ref<number>(1);
+const { product } = useProduct(props.content.data?.product);
+
+const description = computed(() =>
+  xss(getTranslatedProperty(product.value, "description")),
+);
+
+const toggleTabs = (tabNumber: number) => {
+  currentTab.value = tabNumber;
+};
+
+const reviews = computed(() => props.content.data.reviews.elements);
+</script>
+
+<template>
+  <div
+    v-if="product"
+    class="cms-block-product-description-reviews flex flex-wrap"
+  >
+    <div class="w-full">
+      <ul
+        class="flex flex-wrap text-sm font-medium list-none text-center text-secondary-500 border-b border-secondary-200 dark:border-secondary-500 dark:text-secondary-400"
+      >
+        <li class="mr-2 text-center">
+          <a
+            class="font-bold uppercase px-5 py-3 block leading-normal cursor-pointer"
+            :class="[
+              currentTab !== 1
+                ? 'text-secondary-500 bg-white'
+                : 'text-white bg-secondary-500',
+            ]"
+            @click="() => toggleTabs(1)"
+          >
+            <i class="fas fa-space-shuttle text-base mr-1" />
+            {{ translations.products.description }}
+          </a>
+        </li>
+        <li class="mr-2 text-center">
+          <a
+            class="font-bold uppercase px-5 py-3 block leading-normal cursor-pointer"
+            :class="[
+              currentTab !== 2
+                ? 'text-secondary-500 bg-white'
+                : 'text-white bg-secondary-500',
+            ]"
+            @click="() => toggleTabs(2)"
+          >
+            <i class="fas fa-cog text-base mr-1" />
+            {{ translations.products.reviews }}
+          </a>
+        </li>
+      </ul>
+      <div class="relative flex flex-col min-w-0 break-words w-full mb-6">
+        <div class="px-4 py-5 flex-auto">
+          <div class="tab-content tab-space">
+            <div
+              :class="[
+                'cms-block-product-description-reviews__description',
+                currentTab !== 1 ? 'hidden' : 'block',
+              ]"
+            >
+              <p class="text-xl font-bold mt-3">
+                {{ getProductName({ product }) }}
+              </p>
+              <!-- eslint-disable-next-line vue/no-v-html -->
+              <div class="mt-2" v-html="description"></div>
+            </div>
+            <div
+              :class="[
+                'cms-block-product-description-reviews__reviews',
+                currentTab !== 2 ? 'hidden' : 'block',
+              ]"
+            >
+              <SwProductReviews :product="product" :reviews="reviews" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1 @@
+Display the list of products for currently active listing page