@shopware/cms-base-layer 1.5.1 → 2.1.0

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

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { CmsElementImageGallery } from "@shopware/composables";
+import { computed, defineAsyncComponent, ref } from "vue";
+import { useCmsElementConfig, useImagePlaceholder } from "#imports";
+import { isSpatial } from "../../../../helpers/media/isSpatial";
+
+// Load SwMedia3D only on client-side to avoid SSR issues with three.js packages
+const SwMedia3DAsync = defineAsyncComponent(
+  () => import("../../../SwMedia3D.vue"),
+);
+
+const props = defineProps<{
+  content: CmsElementImageGallery;
+}>();
+
+const { getConfigValue } = useCmsElementConfig(props.content);
+
+const DEFAULT_MIN_HEIGHT = "500px";
+const DEFAULT_NAVIGATION = "inside";
+
+const minHeight = computed(
+  () => getConfigValue("minHeight") || DEFAULT_MIN_HEIGHT,
+);
+const navigationArrows = computed(
+  () => getConfigValue("navigationArrows") || DEFAULT_NAVIGATION,
+);
+const navigationDots = computed(
+  () => getConfigValue("navigationDots") || DEFAULT_NAVIGATION,
+);
+
+const currentIndex = ref(0);
+const mediaGallery = computed(() => props.content.data?.sliderItems ?? []);
+const placeholderSvg = useImagePlaceholder();
+
+function goToSlide(index: number) {
+  if (index >= 0 && index < mediaGallery.value.length) {
+    currentIndex.value = index;
+  }
+}
+
+function previous() {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  }
+}
+
+function next() {
+  if (currentIndex.value < mediaGallery.value.length - 1) {
+    currentIndex.value++;
+  }
+}
+
+const currentImage = computed(() => {
+  return mediaGallery.value[currentIndex.value]?.media;
+});
+
+// Touch event handling for mobile swipe gestures
+const touchStartX = ref(0);
+const touchEndX = ref(0);
+
+function onTouchStart(event: TouchEvent) {
+  touchStartX.value = event.touches?.[0]?.clientX || 0;
+}
+
+function onTouchMove(event: TouchEvent) {
+  touchEndX.value = event?.touches?.[0]?.clientX || 0;
+}
+
+function onTouchEnd() {
+  const deltaX = touchEndX.value - touchStartX.value;
+  const threshold = 50; // pixels
+
+  if (Math.abs(deltaX) > threshold) {
+    if (deltaX < 0) {
+      next();
+    } else {
+      previous();
+    }
+  }
+
+  touchStartX.value = 0;
+  touchEndX.value = 0;
+}
+</script>
+
+<template>
+  <div
+    class="w-full max-w-full relative inline-flex flex-col justify-center items-center gap-2 mx-auto"
+  >
+    <div class="w-full">
+      <!-- Main Image Display -->
+      <div
+        class="w-full relative overflow-hidden"
+        :style="{ minHeight }"
+        @touchstart="onTouchStart"
+        @touchmove="onTouchMove"
+        @touchend="onTouchEnd"
+      >
+        <Transition name="gallery-fade" mode="out-in">
+          <!-- 3D media -->
+          <div
+            v-if="currentImage && isSpatial(currentImage)"
+            :key="currentImage.url + '-3d'"
+            class="w-full h-full relative"
+             :style="{ minHeight }"
+          >
+            <client-only>
+              <SwMedia3DAsync :src="currentImage.url" />
+              <template #fallback>
+                <CmsElementImageGallery3dPlaceholder
+                  class="w-full h-full absolute inset-0 object-cover"
+                />
+                <span
+                  class="absolute bottom-4 right-4 text-sm bg-gray-800 rounded px-2 py-1 text-white"
+                >
+                  3D
+                </span>
+              </template>
+            </client-only>
+          </div>
+          <!-- Regular image -->
+          <NuxtImg
+            v-else-if="currentImage"
+            :key="currentImage.url"
+            preset="hero"
+            loading="lazy"
+            class="w-full h-full absolute inset-0 object-cover"
+            :placeholder="placeholderSvg"
+            :src="currentImage.url"
+            :alt="currentImage.alt || 'Product image'"
+          />
+          <!-- Placeholder -->
+          <img
+            v-else
+            class="w-full h-full absolute inset-0 object-cover"
+            :src="placeholderSvg"
+            alt="Placeholder image"
+          />
+        </Transition>
+      </div>
+
+      <!-- Navigation Arrows -->
+      <div
+        v-if="mediaGallery.length > 1 && navigationArrows !== 'none'"
+        class="absolute inset-0 flex items-center justify-between px-2 sm:px-4 pointer-events-none"
+      >
+        <!-- Previous Button -->
+        <button
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
+          :disabled="currentIndex === 0"
+          aria-label="Previous image"
+          @click="previous"
+        >
+          <SwChevronIcon direction="left" />
+        </button>
+
+        <!-- Next Button -->
+        <button
+          :class="[
+            'w-10 h-10 rounded-full transition disabled:opacity-50 pointer-events-auto shadow-lg flex items-center justify-center',
+            navigationArrows === 'outside'
+              ? 'bg-brand-tertiary text-surface-on-surface'
+              : 'bg-surface-surface/20 hover:bg-surface-surface/50',
+          ]"
+          :disabled="currentIndex === mediaGallery.length - 1"
+          aria-label="Next image"
+          @click="next"
+        >
+          <SwChevronIcon direction="right" />
+        </button>
+      </div>
+
+      <!-- Dot Indicators -->
+      <div
+        v-if="mediaGallery.length > 1 && navigationDots !== 'none'"
+        :class="[
+          'flex justify-center items-center gap-2',
+          navigationDots === 'outside' ? 'mt-4' : 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
+        ]"
+      >
+        <button
+          v-for="(image, index) in mediaGallery"
+          :key="image.media?.url"
+          class="relative rounded-full transition-all duration-200 hover:scale-110"
+          :class="{
+            'w-6 h-2 bg-surface-on-surface-variant': index === currentIndex,
+            'w-2 h-2 bg-surface-surface-container-highest':
+              index !== currentIndex,
+          }"
+          :aria-label="`Go to image ${index + 1}`"
+          @click="goToSlide(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Gallery fade transition */
+.gallery-fade-enter-active,
+.gallery-fade-leave-active {
+  transition: all 0.3s ease-in-out;
+}
+
+.gallery-fade-enter-from {
+  opacity: 0;
+  transform: scale(1.05) translateY(10px);
+}
+
+.gallery-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.95) translateY(-10px);
+}
+
+.gallery-fade-enter-to,
+.gallery-fade-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+</style>

package/{components → app/components}/public/cms/element/CmsElementImageSlider.vue

@@ -11,8 +11,8 @@ const props = defineProps<{
 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">
+  <!-- need some width 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-full">
     <SwSlider :config="props.content.config">
       <CmsElementImage
         v-for="image of items"

package/{components → app/components}/public/cms/element/CmsElementProductBox.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
 import type { CmsElementProductBox } from "@shopware/composables";
 import { computed } from "vue";
+import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
   content: CmsElementProductBox;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
 const product = computed(() => props.content.data?.product || {});
 </script>
 
 <template>
-  <SwProductCard :product="product" />
+  <SwProductCard
+    v-if="product?.id"
+    :product="product"
+    :layout-type="getConfigValue('boxLayout')"
+  />
+  <SwProductCardSkeleton v-else />
 </template>

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

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import type { CmsElementProductDescriptionReviews } from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
+import { defu } from "defu";
+import { type Ref, computed, onMounted, ref } from "vue";
+import xss from "xss";
+import { useProduct, useShopwareContext, useUser } from "#imports";
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  content: CmsElementProductDescriptionReviews;
+}>();
+
+type Translations = {
+  product: {
+    description: string;
+    reviews: string;
+    messages: {
+      reviewAdded: string;
+      loginToReview: string;
+    };
+  };
+};
+
+let translations: Translations = {
+  product: {
+    description: "Description",
+    reviews: "Reviews",
+    messages: {
+      reviewAdded: "Thank you for submitting your review",
+      loginToReview: "Please log in to write a review",
+    },
+  },
+};
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const openSections = ref<Set<number>>(new Set([1]));
+const { product } = useProduct(props.content.data?.product);
+
+const description = computed(() =>
+  xss(getTranslatedProperty(product.value, "description")),
+);
+
+const toggleSection = (sectionNumber: number) => {
+  if (openSections.value.has(sectionNumber)) {
+    openSections.value.delete(sectionNumber);
+  } else {
+    openSections.value.add(sectionNumber);
+  }
+};
+
+const isSectionOpen = (sectionNumber: number) => {
+  return openSections.value.has(sectionNumber);
+};
+
+const reviews: Ref<Schemas["ProductReview"][]> = ref([]);
+const { apiClient } = useShopwareContext();
+const { isLoggedIn } = useUser();
+const reviewAdded = ref(false);
+
+const fetchReviews = async () => {
+  try {
+    const reviewsResponse = await apiClient.invoke(
+      "readProductReviews post /product/{productId}/reviews",
+      {
+        pathParams: { productId: product.value.id },
+      },
+    );
+    reviews.value = reviewsResponse.data.elements || [];
+  } catch (error) {
+    console.error("Failed to fetch reviews:", error);
+    // Keep existing reviews if fetch fails
+  }
+};
+
+const handleReviewAdded = () => {
+  reviewAdded.value = true;
+  fetchReviews();
+};
+
+onMounted(async () => {
+  if (props.content.data?.reviews?.elements?.length) {
+    reviews.value = props.content.data.reviews.elements;
+  } else {
+    await fetchReviews();
+  }
+});
+</script>
+
+<template>
+  <div class="w-full self-stretch inline-flex flex-col justify-start items-start gap-4">
+    <div class="self-stretch flex flex-col justify-center items-center">
+      <div
+        class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1 cursor-pointer hover:bg-surface-surface-variant transition-colors"
+        @click="toggleSection(1)">
+        <div class="flex-1 flex items-center gap-2.5">
+          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+            {{ translations.product.description }}
+          </div>
+        </div>
+        <div class="w-6 h-6 relative">
+          <div class="w-2.5 h-1.5 left-[7px] top-[9.50px] absolute">
+            <div class="i-carbon-chevron-down transition-transform duration-200"
+              :class="{ 'rotate-180': isSectionOpen(1) }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Transition name="accordion">
+      <div v-if="isSectionOpen(1)" class="self-stretch flex flex-col justify-center items-center gap-2.5">
+        <div
+          class="self-stretch text-surface-on-surface text-base font-normal leading-normal">
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="description"></div>
+        </div>
+      </div>
+    </Transition>
+    <div class="self-stretch flex flex-col justify-center items-center">
+      <div
+        class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1 cursor-pointer hover:bg-surface-surface-variant transition-colors"
+        @click="toggleSection(2)">
+        <div class="flex-1 flex items-center gap-2.5">
+          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+            {{ translations.product.reviews }} ({{ reviews.length }})
+          </div>
+        </div>
+        <div class="w-6 h-6 relative">
+          <div class="w-2.5 h-1.5 left-[7px] top-[9.50px] absolute">
+            <div class="i-carbon-chevron-down transition-transform duration-200"
+              :class="{ 'rotate-180': isSectionOpen(2) }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Transition name="accordion">
+      <div v-if="isSectionOpen(2)" class="self-stretch flex flex-col justify-center items-center gap-2.5">
+        <div
+          class="self-stretch text-surface-on-surface text-base font-normal leading-normal">
+          <SwProductReviews v-if="product" :product="product" :reviews="reviews" />
+          <ClientOnly>
+            <SwProductReviewsForm
+              v-if="isLoggedIn && !reviewAdded && product"
+              :product-id="product.id"
+              @success="handleReviewAdded"
+            />
+            <div v-else-if="!isLoggedIn && product" class="mt-4 p-3 bg-surface-surface-container border border-surface-on-surface-variant rounded-md flex gap-2 md:gap-3 items-center">
+              <div class="w-5 h-5 text-surface-on-surface-variant flex-shrink-0">
+                <SwUserIcon :size="20" />
+              </div>
+              <span class="text-sm text-surface-on-surface-variant">{{ translations.product.messages.loginToReview }}</span>
+            </div>
+          </ClientOnly>
+          <div v-if="reviewAdded" class="mt-4 p-3 bg-surface-surface-container border border-states-success rounded-md flex gap-2 md:gap-3 items-center">
+            <div class="w-5 h-5 text-states-success flex-shrink-0">
+              <SwCheckmarkIcon :size="20" :filled="true" alt="Success" />
+            </div>
+            <span class="text-sm text-states-success">{{ translations.product.messages.reviewAdded }}</span>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    <div class="self-stretch flex flex-col justify-center items-center">
+      <div
+        class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1 cursor-pointer hover:bg-surface-surface-variant transition-colors"
+        @click="toggleSection(3)">
+        <div class="flex-1 flex items-center gap-2.5">
+          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+            Category
+          </div>
+        </div>
+        <div class="w-6 h-6 relative">
+          <div class="w-2.5 h-1.5 left-[7px] top-[9.50px] absolute">
+            <div class="i-carbon-chevron-down transition-transform duration-200"
+              :class="{ 'rotate-180': isSectionOpen(3) }"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Transition name="accordion">
+      <div v-if="isSectionOpen(3)" class="self-stretch flex flex-col justify-center items-center gap-2.5">
+        <div
+          class="self-stretch text-surface-on-surface text-base font-normal leading-normal">
+          <div v-if="product?.categories">
+            <div v-for="category in product.categories" :key="category.id" class="mb-2">
+              {{ category.name }}
+            </div>
+          </div>
+          <div v-else>
+            No categories available
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.accordion-enter-from,
+.accordion-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.accordion-enter-to,
+.accordion-leave-from {
+  max-height: 500px;
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

package/{components → app/components}/public/cms/element/CmsElementProductListing.vue

@@ -4,17 +4,18 @@ 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 { useCategoryListing, useCmsElementConfig } from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
   content: CmsElementProductListing;
 }>();
 
+const { getConfigValue } = useCmsElementConfig(props.content);
 const defaultLimit = 15;
 const defaultPage = 1;
 const defaultOrder = "name-asc";
-const productListElement = useTemplateRef("productListElement");
+const productListElement = useTemplateRef<HTMLDivElement>("productListElement");
 
 type Translations = {
   listing: {
@@ -87,13 +88,11 @@ const changePage = async (page: number) => {
   productListElement.value?.scrollIntoView({ behavior: "smooth" });
 };
 
-const changeLimit = async (limit: Event) => {
-  const select = limit.target as HTMLSelectElement;
-
+const changeLimit = async (newLimit: number) => {
   await router.push({
     query: {
       ...route.query,
-      limit: select.value,
+      limit: newLimit,
       p: defaultPage,
     },
   });
@@ -151,95 +150,32 @@ 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 class="max-w-2xl mx-auto lg:max-w-full">
+    <div v-if="!loading && getElements.length < 1" class="text-center text-xl py-16 text-surface-on-surface-variant">
+      {{ translations.listing.noProducts }}
+    </div>
+    <div v-if="!loading" ref="productListElement" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-8 sm:gap-y-12 lg:gap-y-16">
+      <SwProductCard
+        v-for="product in getElements"
+        :key="product.id"
+        :product="product"
+        :is-product-listing="isProductListing"
+        :layout-type="getConfigValue('boxLayout')"
+        class="w-full"
+      />
+    </div>
+    <div v-if="loading" data-testid="loading" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 auto-rows-fr gap-x-4 sm:gap-x-6 lg:gap-x-8 gap-y-8 sm:gap-y-12 lg:gap-y-16">
+      <ProductCardSkeleton v-for="index in limit" :key="index"
+        class="w-full" />
     </div>
+    <SwProductListingPagination
+      v-if="!loading"
+      v-model:limit="limit"
+      :total="getTotalPagesCount"
+      :current="Number(getCurrentPage)"
+      :translations="translations"
+      @change-page="changePage"
+      @change-limit="changeLimit"
+    />
   </div>
 </template>

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { CmsElementProductName } from "@shopware/composables";
+
+defineProps<{
+  content: CmsElementProductName;
+}>();
+</script>
+<template>
+  <!-- there is no css config coming from API for this element so we don't need to merge -->
+  <div role="heading" aria-level="1">
+    <CmsElementText
+      :content="content as any"
+      class="self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]"
+    />
+  </div>
+</template>