@shopware/cms-base-layer 3.0.0 → 3.1.0

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

@@ -3,6 +3,7 @@ import type { CmsElementBuyBox } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed } from "vue";
+
 import {
   useCmsElementConfig,
   usePrice,
@@ -67,79 +68,96 @@ const unitName = computed(() => product.value?.unit?.name);
 const productName = computed(() => product.value?.translated?.name || "");
 </script>
 <template>
-    <div v-if="product" :class="{
-        'h-full w-full flex flex-col': true,
-        'justify-start': alignment === 'flex-start',
-        'justify-end': alignment === 'flex-end',
-        'justify-center': alignment === 'center',
-    }">
-        <div class="self-stretch inline-flex flex-col justify-start items-start gap-8 mt-4 min-w-0">
-            <div
-                class="md:hidden self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]">
-                {{ productName }}</div>
-
-            <div v-if="tierPrices.length <= 1">
-                <SwSharedPrice v-if="hasListPrice"
-                    class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
-                    :value="price?.listPrice?.price" />
-                <SwSharedPrice v-if="unitPrice"
-                    class="text-surface-on-surface text-base font-bold leading-normal"
-                    :class="{
-                        'text-red': hasListPrice,
-                    }" :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>
+  <div
+    v-if="product"
+    :class="{
+      'h-full w-full flex flex-col': true,
+      'justify-start': alignment === 'flex-start',
+      'justify-end': alignment === 'flex-end',
+      'justify-center': alignment === 'center',
+    }"
+  >
+    <div
+      class="self-stretch inline-flex flex-col justify-start items-start gap-8 mt-4 min-w-0"
+    >
+      <div
+        class="md:hidden self-stretch text-surface-on-surface text-4xl font-normal font-serif leading-[60px]"
+      >
+        {{ productName }}
+      </div>
 
-                            <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-brand-primary">
-                <template v-if="taxState === 'gross'">
-                    {{ translations.product.pricesIncl }}
-                </template>
-                <template v-else> {{ translations.product.pricesExcl }} </template>
-            </span>
-            <SwVariantConfigurator @change="changeVariant" />
-            <SwProductAddToCart :product="product" />
+      <div v-if="tierPrices.length <= 1">
+        <SwSharedPrice
+          v-if="hasListPrice"
+          class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
+          :value="price?.listPrice?.price"
+        />
+        <SwSharedPrice
+          v-if="unitPrice"
+          class="text-surface-on-surface text-base font-bold leading-normal"
+          :class="{
+            'text-red': hasListPrice,
+          }"
+          :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-brand-primary">
+        <template v-if="taxState === 'gross'">
+          {{ translations.product.pricesIncl }}
+        </template>
+        <template v-else> {{ translations.product.pricesExcl }} </template>
+      </span>
+      <SwVariantConfigurator @change="changeVariant" />
+      <SwProductAddToCart :product="product" />
     </div>
+  </div>
 </template>

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from "vue";
 import { onMounted, ref } from "vue";
+
 import { useCategory, useNavigation } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -39,15 +40,25 @@ onMounted(async () => {
 </script>
 <template>
   <ClientOnly>
-    <div v-if="!loading && categoryNavigation && categoryNavigation.length" class="self-stretch inline-flex flex-col justify-start items-start gap-3">
+    <div
+      v-if="!loading && categoryNavigation && categoryNavigation.length"
+      class="self-stretch inline-flex flex-col justify-start items-start gap-3"
+    >
       <SwCategoryNavigation
         :level="0"
         :elements="categoryNavigation"
         :active-category="activeCategory"
       />
     </div>
-    <div v-else-if="loading" class="self-stretch flex flex-col justify-start items-start gap-4 animate-pulse">
-      <div v-for="i in 3" :key="i" class="w-full h-12 bg-surface-surface-container rounded"></div>
+    <div
+      v-else-if="loading"
+      class="self-stretch flex flex-col justify-start items-start gap-4 animate-pulse"
+    >
+      <div
+        v-for="i in 3"
+        :key="i"
+        class="w-full h-12 bg-surface-surface-container rounded"
+      ></div>
     </div>
   </ClientOnly>
 </template>

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

@@ -5,6 +5,7 @@ import type {
 } from "@shopware/composables";
 import { useElementSize } from "@vueuse/core";
 import { computed, inject, ref, useTemplateRef } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -80,7 +81,8 @@ const toggleTab = (index: number) => {
         :key="index"
         class="transition text-lg font-semibold text-surface-on-surface-variant cursor-pointer"
         :class="{
-          'border-b-3 border-brand-primary text-brand-primary': currentTabIndex === index,
+          'border-b-3 border-brand-primary text-brand-primary':
+            currentTabIndex === index,
         }"
         @click="toggleTab(index)"
       >

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementForm } from "@shopware/composables";
 import { computed, defineAsyncComponent } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementForm } from "@shopware/composables";
 import { computed, defineAsyncComponent } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { CmsElementHtml } from "@shopware/composables";
-
 import { getCmsLayoutConfiguration } from "@shopware/helpers";
 import { h } from "vue";
 

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

@@ -6,7 +6,9 @@ import type {
 import { buildUrlPrefix } from "@shopware/helpers";
 import { useElementSize } from "@vueuse/core";
 import { computed, defineAsyncComponent, useTemplateRef } from "vue";
+
 import { useCmsElementImage, useUrlResolver } from "#imports";
+
 import { isSpatial } from "../../../../helpers/media/isSpatial";
 
 const props = defineProps<{
@@ -90,7 +92,6 @@ const SwMedia3D = computed(() => {
       preset="productDetail"
       loading="lazy"
       :width="imageSize"
-      :height="imageSize"
       :class="{
         'w-full': !imageGallery,
         'h-full': !imageGallery && ['cover', 'stretch'].includes(displayMode),

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

@@ -1,7 +1,9 @@
 <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
@@ -102,7 +104,7 @@ function onTouchEnd() {
             v-if="currentImage && isSpatial(currentImage)"
             :key="currentImage.url + '-3d'"
             class="w-full h-full relative"
-             :style="{ minHeight }"
+            :style="{ minHeight }"
           >
             <client-only>
               <SwMedia3DAsync :src="currentImage.url" />
@@ -180,7 +182,9 @@ function onTouchEnd() {
         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',
+          navigationDots === 'outside'
+            ? 'mt-4'
+            : 'absolute bottom-4 left-1/2 transform -translate-x-1/2',
         ]"
       >
         <button

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CmsElementManufacturerLogo } from "@shopware/composables";
+
 import CmsElementImage from "./CmsElementImage.vue";
 
 defineProps<{

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { CmsElementProductBox } from "@shopware/composables";
 import { computed } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { encodeForQuery } from "@shopware/api-client/helpers";
 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";
 
@@ -55,18 +57,26 @@ const isSectionOpen = (sectionNumber: number) => {
 };
 
 const reviews: Ref<Schemas["ProductReview"][]> = ref([]);
-const { apiClient } = useShopwareContext();
+const { apiClient, cacheableReads } = 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 },
-      },
-    );
+    const reviewsResponse = cacheableReads
+      ? await apiClient.invoke(
+          "readProductReviewsGet get /product/{productId}/reviews",
+          {
+            pathParams: { productId: product.value.id },
+            query: { _criteria: encodeForQuery({}) },
+          },
+        )
+      : 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);
@@ -89,28 +99,39 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-full self-stretch inline-flex flex-col justify-start items-start gap-4">
+  <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)">
+        @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">
+          <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
+              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
+        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">
+          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>
@@ -119,43 +140,68 @@ onMounted(async () => {
     <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)">
+        @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">
+          <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
+              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
+        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" />
+          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">
+            <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>
+              <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
+            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>
+            <span class="text-sm text-states-success">{{
+              translations.product.messages.reviewAdded
+            }}</span>
           </div>
         </div>
       </div>
@@ -163,32 +209,43 @@ onMounted(async () => {
     <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)">
+        @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">
+          <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
+              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
+        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">
+          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">
+            <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 v-else>No categories available</div>
         </div>
       </div>
     </Transition>

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

@@ -3,6 +3,7 @@ import type { CmsElementProductListing } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed, ref, useTemplateRef, watch } from "vue";
+
 import {
   useCategoryListing,
   useCmsElementConfig,
@@ -155,10 +156,17 @@ compareRouteQueryWithInitialListing();
 
 <template>
   <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">
+    <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">
+    <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"
@@ -168,9 +176,12 @@ compareRouteQueryWithInitialListing();
         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
+      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"

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

@@ -6,6 +6,7 @@ import type {
 import { useElementSize } from "@vueuse/core";
 import { computed, inject, useTemplateRef } from "vue";
 import type { CSSProperties, ComputedRef } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{
@@ -70,11 +71,12 @@ const hasVerticalAlignment = computed(
 );
 </script>
 <template>
-  <div
-    :style="hasVerticalAlignment ? verticalAlignStyle : undefined"
-  >
+  <div :style="hasVerticalAlignment ? verticalAlignStyle : undefined">
     <div ref="productSlider" class="cms-element-product-slider">
-      <h3 v-if="title" class="pl-6 pb-6 text-center md:text-left text-surface-on-surface">
+      <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-outline-outline-variant': border }">

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

@@ -3,7 +3,9 @@ import type { CmsElementText } from "@shopware/composables";
 import { decodeHTML } from "entities";
 import { computed, defineComponent, getCurrentInstance, h } from "vue";
 import type { CSSProperties, VNode, VNodeArrayChildren } from "vue";
+
 import { useCmsElementConfig, useUrlResolver } from "#imports";
+
 import { getOptionsFromNode } from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import type { NodeObject } from "../../../../helpers/html-to-vue/getOptionsFromNode";
 import { renderHtml } from "../../../../helpers/html-to-vue/renderToHtml";

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

@@ -2,6 +2,7 @@
 import type { CmsElementVimeoVideo } from "@shopware/composables";
 import { ref } from "vue";
 import type { Ref } from "vue";
+
 import { useCmsElementConfig } from "#imports";
 
 const props = defineProps<{