@shopware/cms-base-layer 1.5.0 → 2.0.0

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

@@ -14,7 +14,7 @@ const props = defineProps<{
 const defaultLimit = 15;
 const defaultPage = 1;
 const defaultOrder = "name-asc";
-const productListElement = useTemplateRef("productListElement");
+const productListElement = useTemplateRef<HTMLDivElement>("productListElement");
 
 type Translations = {
   listing: {
@@ -87,13 +87,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 +149,26 @@ 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" 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,11 @@
+<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 -->
+  <CmsElementText :content="content as any" class="self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]" />
+</template>

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

@@ -12,12 +12,12 @@ const props = defineProps<{
 }>();
 const { getConfigValue } = useCmsElementConfig(props.content);
 
-const productSlider = useTemplateRef("productSlider");
+const productSlider = useTemplateRef<HTMLDivElement>("productSlider");
 const slidesToShow = ref<number>();
 const products = computed(() => props.content?.data?.products ?? []);
 const config: ComputedRef<SliderElementConfig> = computed(() => ({
   minHeight: {
-    value: "300px",
+    value: "450px",
     source: "static",
   },
   verticalAlign: {
@@ -55,10 +55,10 @@ 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">
+    <h3 v-if="title" class="pl-6 pb-6 text-center md:text-left text-surface-on-surface">
       {{ title }}
     </h3>
-    <div :class="{ 'py-5 border border-secondary-300': border }">
+    <div :class="{ 'py-5 border border-outline-outline-variant': border }">
       <SwSlider
         :config="config"
         gap="1.25rem"

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

@@ -75,8 +75,14 @@ const CmsTextRender = defineComponent({
                 "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`);
+                .replace(
+                  "btn-secondary",
+                  `${btnClass} bg-brand-secondary text-brand-on-secondary hover:bg-brand-secondary-hover`,
+                )
+                .replace(
+                  "btn-primary",
+                  `${btnClass} bg-brand-primary text-brand-on-primary hover:bg-brand-primary-hover`,
+                );
             }
 
             return createElement(

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

@@ -15,7 +15,7 @@ const config = computed(() => ({
   loop: getConfigValue("loop")
     ? `loop=1&playlist=${getConfigValue("videoID")}&`
     : "",
-  showControls: getConfigValue("showControls") ? "controls=0&" : "",
+  showControls: getConfigValue("showControls") ? "controls=1&" : "controls=0&",
   start:
     Number.parseInt(getConfigValue("start")) !== 0
       ? `start=${getConfigValue("start")}&`
@@ -27,7 +27,13 @@ const config = computed(() => ({
   disableKeyboard: "disablekb=1",
 }));
 
-const videoUrl = `https://www.youtube-nocookie.com/embed/\
+const YOUTUBE_URL = "https://www.youtube.com/embed/";
+const YOUTUBE_NOCOOKIE_URL = "https://www.youtube-nocookie.com/embed/";
+const videoDomain = getConfigValue("advancedPrivacyMode")
+  ? YOUTUBE_NOCOOKIE_URL
+  : YOUTUBE_URL;
+
+const videoUrl = `${videoDomain}\
             ${config.value.videoID}?\
             ${config.value.relatedVideos}\
             ${config.value.loop}\

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

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+type Translations = {
+  listing: {
+    perPage: string;
+    product: string;
+    products: string;
+  };
+};
+
+defineProps<{
+  total: number;
+  current: number;
+  limit: number;
+  translations: Translations;
+}>();
+
+const emit = defineEmits<{
+  changePage: [page: number];
+  changeLimit: [limit: number];
+}>();
+
+const limitModel = defineModel<number>("limit", { required: true });
+
+const handlePageChange = (page: number) => {
+  emit("changePage", page);
+};
+
+const handleLimitChange = (event: Event) => {
+  const select = event.target as HTMLSelectElement;
+  emit("changeLimit", Number(select.value));
+};
+</script>
+
+<template>
+  <div v-if="total > 0" class="flex flex-col gap-6 sm:gap-8 mt-6 sm:mt-8">
+    <!-- Pagination Controls -->
+    <div class="flex justify-center w-full">
+      <SwPagination :total="total" :current="current" @change-page="handlePageChange" />
+    </div>
+
+    <!-- Items per page selector -->
+    <div class="flex justify-center items-center gap-3 sm:gap-4">
+      <label
+        for="limit"
+        class="text-sm sm:text-base text-surface-on-surface"
+        data-testid="listing-pagination-limit-label"
+      >
+        {{ translations.listing.perPage }}
+      </label>
+      <div class="relative">
+        <select
+          id="limit"
+          v-model="limitModel"
+          name="limitchoices"
+          class="appearance-none bg-surface-surface border border-outline-outline hover:border-outline-outline-primary focus:border-outline-outline-primary focus:ring-2 focus:ring-outline-outline-primary focus:ring-opacity-20 px-4 py-2 pr-10 rounded-md text-sm sm:text-base text-surface-on-surface cursor-pointer transition-colors"
+          data-testid="listing-pagination-limit-select"
+          @change="handleLimitChange"
+        >
+          <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 pr-3">
+          <SwChevronIcon direction="down" :size="16" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/{components → app/components}/public/cms/section/CmsSectionDefault.vue

@@ -10,7 +10,7 @@ const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
 </script>
 
 <template>
-  <div class="cms-section-default" :class="cssClasses" :styles="layoutStyles">
+  <div class="my-4" :class="cssClasses" :style="layoutStyles as any">
     <CmsGenericBlock
       v-for="cmsBlock in content.blocks"
       :key="cmsBlock.id"

package/app/components/public/cms/section/CmsSectionSidebar.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useCmsSection } from "@shopware/composables";
+import type { CmsSectionSidebar } from "@shopware/composables";
+import { computed } from "vue";
+
+const props = defineProps<{
+  content: CmsSectionSidebar;
+}>();
+const { getPositionContent, section } = useCmsSection(props.content);
+
+const sidebarBlocks = getPositionContent("sidebar");
+const mainBlocks = getPositionContent("main");
+const mobileBehavior = computed(() => props.content.mobileBehavior);
+const fullWidth = computed(() => section.sizingMode === "full_width");
+</script>
+
+<template>
+  <div class="self-stretch flex flex-col lg:flex-row items-stretch gap-16" :class="{
+    'px-6': fullWidth,
+  }">
+    <aside :class="{
+      'w-full lg:w-72 xl:w-80 flex-shrink-0 bg-surface-surface flex flex-col justify-start items-stretch gap-4 lg:sticky lg:top-20 px-4 lg:px-0':
+        mobileBehavior !== 'hidden',
+      'hidden lg:block': mobileBehavior === 'hidden',
+    }">
+      <div v-for="cmsBlock in sidebarBlocks" :key="cmsBlock.id" class="w-full">
+        <CmsGenericBlock :content="cmsBlock" />
+      </div>
+    </aside>
+    <main class="flex-1 flex flex-col justify-start items-stretch gap-20">
+      <div v-for="cmsBlock in mainBlocks" :key="cmsBlock.id" class="w-full">
+        <CmsGenericBlock :content="cmsBlock" />
+      </div>
+    </main>
+  </div>
+</template>

package/app/components/public/cms/skeleton/ProductCardSkeleton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useImagePlaceholder } from "#imports";
+
+const placeholderSvg = useImagePlaceholder();
+</script>
+
+<template>
+  <div role="status" class="p-px flex flex-col justify-start items-start overflow-hidden">
+    <!-- Image skeleton -->
+    <div class="self-stretch min-h-[350px] relative flex items-center justify-center overflow-hidden aspect-square animate-pulse">
+      <img
+        :src="placeholderSvg"
+        alt=""
+        aria-hidden="true"
+        class="w-full h-full object-cover"
+      />
+    </div>
+
+    <!-- Details skeleton -->
+    <div class="w-full pt-4 animate-pulse">
+      <div class="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-3/4 mb-3"></div>
+      <div class="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-1/2 mb-4"></div>
+      <div class="h-5 bg-gray-200 rounded-full dark:bg-gray-700 w-20 mb-3"></div>
+      <div class="h-10 bg-gray-200 rounded dark:bg-gray-700 w-full"></div>
+    </div>
+    <span class="sr-only">Loading...</span>
+  </div>
+</template>