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

package/components/SwProductPrice.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { toRefs } from "vue";
+import { usePrice, useProductPrice } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+}>();
+
+type Translations = {
+  product: {
+    amount: string;
+    price: {
+      [key: string]: string;
+    };
+    to: string;
+    from: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    amount: "Amount",
+    price: {
+      label: "Price",
+      to: "To",
+      from: "From",
+    },
+    to: "To",
+    from: "From",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product } = toRefs(props);
+
+const { unitPrice, price, tierPrices, isListPrice } = useProductPrice(product);
+const { getFormattedPrice } = usePrice();
+</script>
+
+<template>
+  <div>
+    <div v-if="!tierPrices.length">
+      <SwSharedPrice
+        v-if="isListPrice"
+        class="text-1xl text-gray-900 basis-2/6 justify-end line-through"
+        :value="price?.listPrice?.price"
+      />
+      <SwSharedPrice
+        v-if="unitPrice"
+        class="text-3xl text-gray-900 basis-2/6 justify-end"
+        :class="{
+          'text-red': isListPrice,
+        }"
+        :value="unitPrice"
+      />
+    </div>
+    <div v-else>
+      <table class="border-collapse table-auto w-full text-sm mb-8">
+        <thead>
+          <tr>
+            <th
+              class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-600 dark:text-slate-200 text-left"
+            >
+              {{ translations.product.amount }}
+            </th>
+
+            <th
+              class="border-b dark:border-slate-600 font-medium p-4 pr-8 pt-0 pb-3 text-slate-600 dark:text-slate-200 text-left"
+            >
+              {{ translations.product.price.label }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="bg-white dark:bg-slate-800">
+          <tr v-for="(tierPrice, index) in tierPrices" :key="tierPrice.label">
+            <td
+              class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 font-medium text-slate-500 dark:text-slate-400"
+            >
+              <span v-if="index < tierPrices.length - 1">{{
+                translations.product.price.to
+              }}</span
+              ><span v-else>{{ translations.product.price.from }}</span>
+              {{ tierPrice.quantity }}
+            </td>
+            <td
+              class="border-b border-slate-100 dark:border-slate-700 p-4 pr-8 font-medium text-current-500 dark:text-slate-400"
+            >
+              {{ getFormattedPrice(tierPrice.unitPrice) }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/components/SwProductReviews.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { defu } from "defu";
+import { computed, onMounted, ref, toRefs } from "vue";
+import { useCmsTranslations, useProductReviews } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  product: Schemas["Product"];
+  reviews?: Schemas["ProductReview"][];
+}>();
+
+type Translations = {
+  product: {
+    noReviews: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    noReviews: "No reviews yet.",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const { product, reviews } = toRefs(props);
+
+const shouldLoadReviews = !reviews?.value;
+
+const loadingReviews = ref<boolean>(shouldLoadReviews);
+const { loadProductReviews, productReviews } = useProductReviews(product);
+
+onMounted(async () => {
+  if (shouldLoadReviews) {
+    await loadProductReviews();
+  }
+  loadingReviews.value = false;
+});
+const reviewsList = computed<Schemas["ProductReview"][]>(
+  () => reviews?.value || productReviews.value || [],
+);
+
+const format: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "short",
+  day: "numeric",
+  hour: "numeric",
+  minute: "numeric",
+  hour12: true,
+};
+
+const formatDate = (date: string) =>
+  new Date(date).toLocaleDateString("en-us", format);
+</script>
+
+<template>
+  <div
+    v-if="loadingReviews"
+    class="absolute inset-0 flex items-center justify-center z-10 bg-white/75"
+  >
+    <div
+      class="h-15 w-15 i-carbon-progress-bar-round animate-spin c-gray-500"
+    />
+  </div>
+  <div v-else-if="reviewsList.length">
+    <div v-for="review in reviews" :key="review.id">
+      <div
+        v-if="review.createdAt"
+        class="cms-block-product-description-reviews__reviews-time mt-3 text-gray-600 text-sm"
+      >
+        <span>{{ formatDate(review.createdAt) }}</span>
+      </div>
+      <div
+        class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
+      >
+        <div
+          v-for="_ in review.points"
+          :key="`filled-star-${_}`"
+          class="w-5 h-5 i-carbon-star-filled"
+        ></div>
+        <div
+          v-for="_ in 5 - (review.points || 0)"
+          :key="`empty-star-${_}`"
+          class="w-5 h-5 i-carbon-star"
+        ></div>
+        <div
+          class="cms-block-product-description-reviews__reviews-title font-semibold ml-2"
+        >
+          <p>{{ review.title }}</p>
+        </div>
+      </div>
+      <div class="cms-block-product-description-reviews__reviews-content mt-2">
+        <span>{{ review.content }}</span>
+      </div>
+    </div>
+  </div>
+
+  <div v-else>{{ translations.product.noReviews }}.</div>
+</template>

package/components/SwProductUnits.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { computed } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = withDefaults(
+  defineProps<{
+    product: Schemas["Product"];
+    showContent?: boolean;
+  }>(),
+  {
+    showContent: true,
+  },
+);
+
+type Translations = {
+  product: {
+    content: string;
+  };
+};
+
+let translations: Translations = {
+  product: {
+    content: "Content",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const purchaseUnit = computed(() => props.product?.purchaseUnit);
+const unitName = computed(() => props.product?.unit?.translated.name);
+const referencePrice = computed(
+  () => props.product?.calculatedPrice?.referencePrice?.price,
+);
+const referenceUnit = computed(
+  () => props.product?.calculatedPrice?.referencePrice?.referenceUnit,
+);
+const referenceUnitName = computed(
+  () => props.product?.calculatedPrice?.referencePrice?.unitName,
+);
+</script>
+
+<template>
+  <div v-if="purchaseUnit" class="flex text-gray-500 justify-end gap-1">
+    <template v-if="props.showContent">
+      {{ translations.product.content }}: {{ purchaseUnit }} {{ unitName }}
+    </template>
+    <template v-if="referencePrice">
+      (<SwSharedPrice :value="referencePrice" /> / {{ referenceUnit }}
+      {{ referenceUnitName }} )
+    </template>
+  </div>
+</template>

package/components/SwSharedPrice.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePrice } from "#imports";
+
+const { getFormattedPrice } = usePrice();
+const props = defineProps<{
+  value: number | undefined;
+}>();
+
+const getPrice = computed<string>(() => getFormattedPrice(props.value));
+</script>
+
+<template>
+  <p class="flex gap-1">
+    <slot name="beforePrice" />
+    <span>{{ getPrice }}</span>
+    <slot name="afterPrice" />
+  </p>
+</template>

package/components/SwSlider.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+import type { SliderElementConfig } from "@shopware/composables";
+import { useElementSize, useResizeObserver } from "@vueuse/core";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  useSlots,
+  useTemplateRef,
+  watch,
+} from "vue";
+import type { CSSProperties, VNodeArrayChildren } from "vue";
+import { useCmsElementConfig } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = withDefaults(
+  defineProps<{
+    config: SliderElementConfig;
+    slidesToShow?: number;
+    slidesToScroll?: number;
+    gap?: string;
+    autoplay?: boolean;
+    autoplaySpeed?: number;
+  }>(),
+  {
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    gap: "0px",
+    autoplay: false,
+    autoplaySpeed: 3000,
+  },
+);
+
+const { getConfigValue } = useCmsElementConfig({
+  config: props.config,
+} as Schemas["CmsSlot"] & {
+  config: SliderElementConfig;
+});
+
+const slots = useSlots();
+const childrenRaw = computed(
+  () => (slots?.default?.()[0].children as VNodeArrayChildren) ?? [],
+);
+const slidesToScroll = computed(() =>
+  props.slidesToScroll >= props.slidesToShow
+    ? props.slidesToShow
+    : props.slidesToScroll,
+);
+const slidesToShow = computed(() =>
+  props.slidesToShow >= childrenRaw.value.length
+    ? childrenRaw.value.length
+    : props.slidesToShow,
+);
+const children = computed<string[]>(() => {
+  if (childrenRaw.value.length === 0) return [];
+  return [
+    ...childrenRaw.value.slice(-slidesToShow.value),
+    ...childrenRaw.value,
+    ...childrenRaw.value.slice(0, slidesToShow.value),
+  ] as string[];
+});
+const emit = defineEmits<(e: "changeSlide", index: number) => void>();
+const slider = useTemplateRef("slider");
+const imageSlider = useTemplateRef("imageSlider");
+const imageSliderTrackStyle = ref<CSSProperties>();
+const activeSlideIndex = ref<number>(0);
+const speed = ref<number>(300);
+const imageSliderTrack = useTemplateRef("imageSliderTrack");
+const autoPlayInterval = ref();
+const isReady = ref<boolean>();
+const isSliding = ref<boolean>();
+
+const { width: imageSliderWidth } = useElementSize(imageSlider);
+let timeoutGuard: ReturnType<typeof setTimeout> | undefined;
+
+onMounted(() => {
+  initSlider();
+
+  useResizeObserver(slider, () => {
+    clearTimeout(timeoutGuard);
+    timeoutGuard = setTimeout(() => {
+      buildImageSliderTrackStyle(activeSlideIndex.value);
+    }, 100);
+  });
+});
+
+onBeforeUnmount(() => {
+  clearInterval(autoPlayInterval.value);
+});
+
+watch(
+  () => props.autoplay && isReady.value,
+  (value) => {
+    if (value) {
+      autoPlayInterval.value = setInterval(() => {
+        next();
+      }, props.autoplaySpeed);
+    } else {
+      if (autoPlayInterval.value) {
+        clearInterval(autoPlayInterval.value);
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const imageSliderStyle = computed(() => {
+  if (getConfigValue("displayMode") === "cover") {
+    return {
+      height: getConfigValue("minHeight"),
+      margin: `0 -${props.gap}`,
+    };
+  }
+  return {
+    minHeight: getConfigValue("minHeight"),
+  };
+});
+
+const verticalAlignValue = computed(
+  () => getConfigValue("verticalAlign") || "flex-start",
+);
+const displayModeValue = computed(
+  () => getConfigValue("displayMode") || "standard",
+);
+
+const navigationArrowsValue = computed(
+  () => props.config?.navigationArrows?.value || "none",
+);
+const navigationDotsValue = computed(
+  () => props.config?.navigationDots?.value || "none",
+);
+
+function initSlider() {
+  if (imageSlider.value) {
+    setTimeout(() => {
+      buildImageSliderTrackStyle(activeSlideIndex.value, false, undefined);
+      isReady.value = true;
+    }, 100);
+  }
+}
+
+function buildImageSliderTrackStyle(
+  transformIndex: number,
+  moving = false,
+  callback = () => {},
+) {
+  let styleObj: CSSProperties = {
+    transform: `translate3d(-${
+      (transformIndex + slidesToShow.value) *
+      (imageSliderWidth.value / slidesToShow.value)
+    }px, 0px, 0px)`,
+    width: `${children.value.length * imageSliderWidth.value}px`,
+  };
+
+  if (imageSliderTrackStyle.value?.height) {
+    styleObj.height = imageSliderTrackStyle.value?.height;
+  }
+
+  if (moving) {
+    styleObj = {
+      ...styleObj,
+      transition: `transform ${speed.value}ms ease 0s`,
+    };
+    imageSliderTrackStyle.value = { ...styleObj };
+    isSliding.value = true;
+    setTimeout(() => {
+      const { transition: _, ...styleWithoutTransition } = styleObj;
+      imageSliderTrackStyle.value = { ...styleWithoutTransition };
+      isSliding.value = false;
+      callback();
+    }, speed.value);
+  } else {
+    imageSliderTrackStyle.value = { ...styleObj };
+  }
+
+  setTimeout(() => {
+    let height = "unset";
+    if (displayModeValue.value === "cover") {
+      height = "100%";
+    } else if (displayModeValue.value === "standard") {
+      const childComponent =
+        imageSliderTrack.value?.children[transformIndex + 1];
+      // If image exist
+      height = childComponent?.children[0].children[0].clientHeight
+        ? `${childComponent.clientHeight}px`
+        : "auto";
+    }
+    styleObj = {
+      ...styleObj,
+      height,
+    };
+    imageSliderTrackStyle.value = { ...styleObj };
+  });
+}
+
+function next() {
+  if (isSliding.value) return;
+  activeSlideIndex.value = activeSlideIndex.value + slidesToScroll.value;
+  buildImageSliderTrackStyle(activeSlideIndex.value, true, () => {
+    if (
+      activeSlideIndex.value ===
+      children.value.length - slidesToShow.value * 2
+    ) {
+      activeSlideIndex.value = 0;
+      buildImageSliderTrackStyle(activeSlideIndex.value);
+    }
+    emit("changeSlide", activeSlideIndex.value);
+  });
+}
+
+function previous() {
+  if (isSliding.value) return;
+  activeSlideIndex.value = activeSlideIndex.value - slidesToScroll.value;
+  buildImageSliderTrackStyle(activeSlideIndex.value, true, () => {
+    if (activeSlideIndex.value <= 0 - slidesToShow.value) {
+      activeSlideIndex.value = children.value.length - slidesToShow.value * 3;
+      buildImageSliderTrackStyle(activeSlideIndex.value);
+    }
+    emit("changeSlide", activeSlideIndex.value);
+  });
+}
+
+function goToSlide(index: number) {
+  if (isSliding.value) return;
+  if (activeSlideIndex.value === index) return;
+  activeSlideIndex.value = index;
+  buildImageSliderTrackStyle(activeSlideIndex.value, true);
+  emit("changeSlide", activeSlideIndex.value);
+}
+
+defineExpose({
+  next,
+  previous,
+  goToSlide,
+});
+</script>
+<template>
+  <div
+    ref="slider"
+    :class="{
+      'relative overflow-hidden h-full': true,
+      'px-10': navigationArrowsValue === 'outside',
+      'pb-15': navigationDotsValue === 'outside',
+      'opacity-0': !isReady,
+    }"
+  >
+    <div
+      ref="imageSlider"
+      class="overflow-hidden h-full"
+      :style="imageSliderStyle"
+    >
+      <div
+        ref="imageSliderTrack"
+        :class="{
+          flex: true,
+          'items-center':
+            displayModeValue === 'contain' && verticalAlignValue === 'center',
+          'items-start':
+            displayModeValue === 'contain' &&
+            verticalAlignValue === 'flex-start',
+          'items-end':
+            displayModeValue === 'contain' && verticalAlignValue === 'flex-end',
+        }"
+        :style="imageSliderTrackStyle"
+      >
+        <div
+          v-for="(child, index) of children"
+          :key="index"
+          :index="index - slidesToShow"
+          :style="{
+            width: imageSliderWidth
+              ? `${imageSliderWidth / slidesToShow}px`
+              : 'auto',
+            padding: `0 ${gap}`,
+            height: displayModeValue === 'standard' ? 'min-content' : '100%',
+          }"
+        >
+          <component :is="child as any" />
+        </div>
+      </div>
+    </div>
+    <div :class="{ hidden: navigationArrowsValue === 'none' }">
+      <button
+        aria-label="Previous slide"
+        :class="{
+          'absolute bg-transparent top-1/2 left-0 transform -translate-y-1/2 py-4': true,
+          'transition bg-white/20 hover:bg-white/50':
+            navigationArrowsValue === 'inside',
+        }"
+        @click="previous"
+      >
+        <div class="w-15 h-15 i-carbon-chevron-left"></div>
+      </button>
+      <button
+        aria-label="Next slide"
+        :class="{
+          'absolute bg-transparent top-1/2 right-0 transform -translate-y-1/2 py-4': true,
+          'transition bg-white/20 hover:bg-white/50':
+            navigationArrowsValue === 'inside',
+        }"
+        @click="next"
+      >
+        <div class="w-15 h-15 i-carbon-chevron-right"></div>
+      </button>
+    </div>
+    <div
+      :class="{
+        'absolute bottom-5 left-1/2 transform -translate-x-1/2 gap-5': true,
+        flex: navigationDotsValue !== 'none',
+        hidden: navigationDotsValue === 'none',
+      }"
+    >
+      <div
+        v-for="(_, i) of childrenRaw"
+        :key="`dot-${i}`"
+        :class="{
+          'w-5 h-5 rounded-full cursor-pointer': true,
+          'bg-gray-100': i === activeSlideIndex,
+          'bg-gray-500/50': i !== activeSlideIndex,
+        }"
+        @click="() => goToSlide(i)"
+      ></div>
+    </div>
+  </div>
+</template>