@shopware/cms-base-layer 3.0.0 → 3.1.0

package/app/components/SwProductCardImage.vue

@@ -6,6 +6,7 @@ import {
   isProductTopSeller,
 } from "@shopware/helpers";
 import { computed, inject } from "vue";
+
 import { useUser } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -57,32 +58,50 @@ function handleWishlistClick() {
 </script>
 
 <template>
-  <div class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square">
-    <RouterLink :to="productLink" class="self-stretch h-full relative overflow-hidden">
-      <NuxtImg preset="productCard"
+  <div
+    class="self-stretch min-h-[350px] relative flex flex-col justify-start items-start overflow-hidden aspect-square"
+  >
+    <RouterLink
+      :to="productLink"
+      class="self-stretch h-full relative overflow-hidden"
+    >
+      <NuxtImg
+        preset="productCard"
         class="w-full h-full absolute top-0 left-0 object-cover"
-        :src="coverSrcPath" :alt="coverAlt"
-        width="400" height="400"
+        :src="coverSrcPath"
+        :alt="coverAlt"
+        width="400"
+        height="400"
         densities="1x"
         loading="lazy"
-        data-testid="product-box-img" />
+        data-testid="product-box-img"
+      />
     </RouterLink>
 
-    <div v-if="isTopseller || isOnSale"
-      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center">
+    <div
+      v-if="isTopseller || isOnSale"
+      class="px-1.5 py-1 left-2 bottom-2 absolute bg-other-sale rounded inline-flex justify-center items-center"
+    >
       <div class="text-states-on-error text-xs font-bold leading-none">
         {{ translations.product.badges.topseller }}
       </div>
     </div>
 
     <client-only>
-      <SwIconButton type="secondary"
-        :aria-label="isInWishlist ? translations.product.removeFromWishlist : translations.product.addToWishlist"
+      <SwIconButton
+        type="secondary"
+        :aria-label="
+          isInWishlist
+            ? translations.product.removeFromWishlist
+            : translations.product.addToWishlist
+        "
         :disabled="isLoading"
         class="w-10 h-10 right-4 top-4 absolute bg-brand-secondary rounded-full flex items-center justify-center"
-        data-testid="product-box-toggle-wishlist-button" @click="handleWishlistClick">
+        data-testid="product-box-toggle-wishlist-button"
+        @click="handleWishlistClick"
+      >
         <SwWishlistIcon :filled="isInWishlist" />
       </SwIconButton>
     </client-only>
   </div>
-</template>
+</template>

package/app/components/SwProductCardSkeleton.vue

@@ -1,33 +1,56 @@
 <template>
-  <div class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
-    aria-hidden="true">
+  <div
+    class="inline-flex flex-col items-start justify-start self-stretch overflow-hidden p-px w-full"
+    aria-hidden="true"
+  >
     <!-- image skeleton -->
-    <div class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden">
-      <div class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+    <div
+      class="relative flex h-80 flex-col items-start justify-start self-stretch overflow-hidden"
+    >
+      <div
+        class="relative h-80 w-full bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div
-        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse">
-        <span class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"></span>
+        class="absolute top-[281px] left-2 inline-flex items-center justify-center rounded bg-gray-300 dark:bg-gray-600 px-3 py-1 animate-pulse"
+      >
+        <span
+          class="h-3 w-16 bg-gray-200 dark:bg-gray-700 rounded block"
+        ></span>
       </div>
 
-      <div class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"></div>
+      <div
+        class="absolute top-4 right-4 h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-600 animate-pulse"
+      ></div>
     </div>
 
     <!-- details skeleton -->
     <div class="flex flex-col items-start justify-start gap-4 self-stretch p-2">
-      <div class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      <div
+        class="h-4 w-32 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div class="w-full">
-        <div class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"></div>
-        <div class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div
+          class="h-7 w-3/4 rounded bg-gray-200 dark:bg-gray-700 mb-2 animate-pulse"
+        ></div>
+        <div
+          class="h-7 w-1/2 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
       </div>
 
-      <div class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+      <div
+        class="h-6 w-24 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+      ></div>
 
       <div class="flex w-full gap-3">
-        <div class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
-        <div class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"></div>
+        <div
+          class="flex-1 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
+        <div
+          class="w-24 h-10 rounded bg-gray-200 dark:bg-gray-700 animate-pulse"
+        ></div>
       </div>
     </div>
   </div>
-</template>
+</template>

package/app/components/SwProductGallery.vue

@@ -4,6 +4,7 @@ import type {
   SliderElementConfig,
 } from "@shopware/composables";
 import { ref, watch } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const { product, config = {} } = defineProps<{

package/app/components/SwProductListingFilter.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts" generic="ListingFilter extends { code: string }">
 import { computed } from "vue";
 import type { Component } from "vue";
+
 import SwFilterPriceVue from "./listing-filters/SwFilterPrice.vue";
 import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
 import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
@@ -58,7 +59,10 @@ const filterComponent = computed<Component | undefined>(() => {
 const handleSelectValue = ({
   code,
   value,
-}: { code: string; value: string | number | boolean }) => {
+}: {
+  code: string;
+  value: string | number | boolean;
+}) => {
   emit("filter-change", { code, value });
 };
 </script>

package/app/components/SwProductListingFilters.vue

@@ -5,10 +5,19 @@ import type {
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
-import { computed, reactive } from "vue";
-import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
 import type { LocationQueryRaw } from "vue-router";
-import { useCategoryListing, useRoute, useRouter } from "#imports";
+
+import {
+  firstQueryValue,
+  toNumber,
+  useCategoryListing,
+  useProductSearchListing,
+  useRoute,
+  useRouter,
+  useSelectedListingFilters,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -16,6 +25,8 @@ const props = defineProps<{
   listingType?: string;
 }>();
 
+const isProductSearch = props.listingType === "productSearchListing";
+
 type Translations = {
   listing: {
     filters: string;
@@ -24,15 +35,6 @@ type Translations = {
   };
 };
 
-type FilterState = {
-  manufacturer: Set<string>;
-  properties: Set<string>;
-  "min-price": number | undefined;
-  "max-price": number | undefined;
-  rating: number | undefined;
-  "shipping-free": boolean | undefined;
-};
-
 let translations: Translations = {
   listing: {
     filters: "Filters",
@@ -53,17 +55,9 @@ const {
   getInitialFilters,
   getSortingOrders,
   search,
-} = useCategoryListing();
+} = isProductSearch ? useProductSearchListing() : useCategoryListing();
 
-const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
-  reactive<FilterState>({
-    manufacturer: new Set(),
-    properties: new Set(),
-    "min-price": undefined,
-    "max-price": undefined,
-    rating: undefined,
-    "shipping-free": undefined,
-  });
+const sidebarSelectedFilters = useSelectedListingFilters();
 
 const showResetFiltersButton = computed<boolean>(() => {
   if (
@@ -93,51 +87,10 @@ const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
     order: getCurrentSortingOrder.value as string,
     "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
     rating: sidebarSelectedFilters.rating as number,
-    search: "",
-    limit: route.query.limit ? Number(route.query.limit) : 15,
+    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
+    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
   }));
 
-for (const param in route.query) {
-  if (param in sidebarSelectedFilters) {
-    const queryValue = route.query[param];
-
-    // Skip arrays
-    if (Array.isArray(queryValue)) continue;
-
-    if (["manufacturer", "properties"].includes(param)) {
-      if (typeof queryValue === "string") {
-        const elements = queryValue.split("|");
-        const targetSet = sidebarSelectedFilters[
-          param as keyof FilterState
-        ] as Set<string>;
-        for (const element of elements) {
-          targetSet.add(element);
-        }
-      }
-    } else if (queryValue && typeof queryValue === "string") {
-      // Fix: Use specific property assignments instead of generic keyof
-      if (param === "min-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["min-price"] = numValue;
-        }
-      } else if (param === "max-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["max-price"] = numValue;
-        }
-      } else if (param === "rating") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters.rating = numValue;
-        }
-      } else if (param === "shipping-free") {
-        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
-      }
-    }
-  }
-}
-
 const handleFilterChange = async (event: {
   code: string;
   value: string | number | boolean;
@@ -171,7 +124,12 @@ const handleFilterChange = async (event: {
 
 const executeSearch = async () => {
   try {
-    await search(searchCriteriaForRequest.value);
+    // Search context refetches from the URL (the page's useAsyncData watches
+    // route.query), so navigating below is enough; calling search() here too
+    // would double-fetch and flicker. Category listings have no URL watcher.
+    if (!isProductSearch) {
+      await search(searchCriteriaForRequest.value);
+    }
 
     // Build query directly from searchCriteriaForRequest which already has pipe-separated strings
     const criteria = searchCriteriaForRequest.value;
@@ -185,6 +143,12 @@ const executeSearch = async () => {
     if (criteria["shipping-free"])
       query["shipping-free"] = criteria["shipping-free"];
     if (criteria.order) query.order = criteria.order;
+    // Keep the search term in the URL so filtering on the search page does not reset the query
+    if (isProductSearch && route.query.search)
+      query.search = route.query.search;
+    // Preserve the page-size selection; rebuilding the query from scratch would
+    // otherwise drop `limit` and revert to the default on refresh/navigation.
+    if (route.query.limit) query.limit = route.query.limit;
 
     await router.push({
       query: query as LocationQueryRaw,
@@ -214,10 +178,13 @@ const currentSortingOrder = computed({
         },
       });
 
-      await changeCurrentSortingOrder(order, {
-        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
-        limit: route.query.limit ? Number(route.query.limit) : 15,
-      });
+      // Search context refetches from the URL; category fetches directly.
+      if (!isProductSearch) {
+        await changeCurrentSortingOrder(order, {
+          ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+          limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
+        });
+      }
     } catch (error) {
       console.error("Sorting order change failed:", error);
     }
@@ -268,8 +235,11 @@ const handleRemoveFilterChip = async (chip: {
     <!-- Filters Header -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <div
-        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant">
-        <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal">
+        class="flex flex-row items-center justify-between w-full mb-4 py-3 border-b border-outline-outline-variant"
+      >
+        <div
+          class="flex-1 text-surface-on-surface text-base font-bold leading-normal"
+        >
           {{ translations.listing.filters }}
         </div>
         <SwSortDropdown
@@ -283,7 +253,9 @@ const handleRemoveFilterChip = async (chip: {
 
     <!-- Filters List -->
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
-      <SwProductListingFilter v-for="filter in getInitialFilters" :key="filter.id"
+      <SwProductListingFilter
+        v-for="filter in getInitialFilters"
+        :key="filter.id"
         :filter="filter"
         :selected-manufacturer="sidebarSelectedFilters.manufacturer"
         :selected-properties="sidebarSelectedFilters.properties"
@@ -292,11 +264,20 @@ const handleRemoveFilterChip = async (chip: {
         :selected-rating="sidebarSelectedFilters.rating"
         :selected-shipping-free="sidebarSelectedFilters['shipping-free']"
         @filter-change="handleFilterChange"
-        class="w-full" />
+        class="w-full"
+      />
       <div v-if="showResetFiltersButton" class="w-full">
-        <SwBaseButton variant="primary" size="medium" block @click="invokeCleanFilters" type="button">
+        <SwBaseButton
+          variant="primary"
+          size="medium"
+          block
+          @click="invokeCleanFilters"
+          type="button"
+        >
           {{ translations.listing.resetFilters }}
-          <span class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"></span>
+          <span
+            class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
+          ></span>
         </SwBaseButton>
       </div>
     </div>

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -5,10 +5,19 @@ import type {
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
-import { computed, reactive } from "vue";
-import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
 import type { LocationQueryRaw } from "vue-router";
-import { useCategoryListing, useRoute, useRouter } from "#imports";
+
+import {
+  firstQueryValue,
+  toNumber,
+  useCategoryListing,
+  useProductSearchListing,
+  useRoute,
+  useRouter,
+  useSelectedListingFilters,
+} from "#imports";
 import type { Schemas, operations } from "#shopware";
 
 const props = defineProps<{
@@ -16,6 +25,8 @@ const props = defineProps<{
   listingType?: string;
 }>();
 
+const isProductSearch = props.listingType === "productSearchListing";
+
 type Translations = {
   listing: {
     filters: string;
@@ -24,15 +35,6 @@ type Translations = {
   };
 };
 
-type FilterState = {
-  manufacturer: Set<string>;
-  properties: Set<string>;
-  "min-price": number | undefined;
-  "max-price": number | undefined;
-  rating: number | undefined;
-  "shipping-free": boolean | undefined;
-};
-
 let translations: Translations = {
   listing: {
     filters: "Filters",
@@ -52,17 +54,9 @@ const {
   getInitialFilters,
   getSortingOrders,
   search,
-} = useCategoryListing();
+} = isProductSearch ? useProductSearchListing() : useCategoryListing();
 
-const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
-  reactive<FilterState>({
-    manufacturer: new Set(),
-    properties: new Set(),
-    "min-price": undefined,
-    "max-price": undefined,
-    rating: undefined,
-    "shipping-free": undefined,
-  });
+const sidebarSelectedFilters = useSelectedListingFilters();
 
 const showResetFiltersButton = computed<boolean>(() => {
   if (
@@ -92,51 +86,10 @@ const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
     order: getCurrentSortingOrder.value as string,
     "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
     rating: sidebarSelectedFilters.rating as number,
-    search: "",
-    limit: route.query.limit ? Number(route.query.limit) : 15,
+    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
+    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
   }));
 
-for (const param in route.query) {
-  if (param in sidebarSelectedFilters) {
-    const queryValue = route.query[param];
-
-    // Skip arrays
-    if (Array.isArray(queryValue)) continue;
-
-    if (["manufacturer", "properties"].includes(param)) {
-      if (typeof queryValue === "string") {
-        const elements = queryValue.split("|");
-        const targetSet = sidebarSelectedFilters[
-          param as keyof FilterState
-        ] as Set<string>;
-        for (const element of elements) {
-          targetSet.add(element);
-        }
-      }
-    } else if (queryValue && typeof queryValue === "string") {
-      // Fix: Use specific property assignments instead of generic keyof
-      if (param === "min-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["min-price"] = numValue;
-        }
-      } else if (param === "max-price") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters["max-price"] = numValue;
-        }
-      } else if (param === "rating") {
-        const numValue = Number(queryValue);
-        if (!Number.isNaN(numValue)) {
-          sidebarSelectedFilters.rating = numValue;
-        }
-      } else if (param === "shipping-free") {
-        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
-      }
-    }
-  }
-}
-
 const handleFilterChange = async (event: {
   code: string;
   value: string | number | boolean;
@@ -170,7 +123,12 @@ const handleFilterChange = async (event: {
 
 const executeSearch = async () => {
   try {
-    await search(searchCriteriaForRequest.value);
+    // Search context refetches from the URL (the page's useAsyncData watches
+    // route.query), so navigating below is enough; calling search() here too
+    // would double-fetch and flicker. Category listings have no URL watcher.
+    if (!isProductSearch) {
+      await search(searchCriteriaForRequest.value);
+    }
 
     // Build query directly from searchCriteriaForRequest which already has pipe-separated strings
     const criteria = searchCriteriaForRequest.value;
@@ -184,6 +142,12 @@ const executeSearch = async () => {
     if (criteria["shipping-free"])
       query["shipping-free"] = criteria["shipping-free"];
     if (criteria.order) query.order = criteria.order;
+    // Keep the search term in the URL so filtering on the search page does not reset the query
+    if (isProductSearch && route.query.search)
+      query.search = route.query.search;
+    // Preserve the page-size selection; rebuilding the query from scratch would
+    // otherwise drop `limit` and revert to the default on refresh/navigation.
+    if (route.query.limit) query.limit = route.query.limit;
 
     await router.push({
       query: query as LocationQueryRaw,
@@ -213,10 +177,13 @@ const currentSortingOrder = computed({
         },
       });
 
-      await changeCurrentSortingOrder(order, {
-        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
-        limit: route.query.limit ? Number(route.query.limit) : 15,
-      });
+      // Search context refetches from the URL; category fetches directly.
+      if (!isProductSearch) {
+        await changeCurrentSortingOrder(order, {
+          ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+          limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
+        });
+      }
     } catch (error) {
       console.error("Sorting order change failed:", error);
     }
@@ -299,7 +266,9 @@ const hasActiveFilter = (filter: { code: string }) => {
         type="button"
       >
         {{ translations.listing.resetFilters }}
-        <span class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"></span>
+        <span
+          class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"
+        ></span>
       </SwBaseButton>
     </div>
   </div>

package/app/components/SwProductPrice.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { toRefs } from "vue";
+
 import { usePrice, useProductPrice } from "#imports";
 import type { Schemas } from "#shopware";
 

package/app/components/SwProductReviews.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { defu } from "defu";
 import { computed, onMounted, ref, toRefs } from "vue";
+
 import {
   useCmsTranslations,
   useProductReviews,
@@ -77,7 +78,10 @@ const formatDate = (date: string) => {
       v-for="(review, index) in reviewsList"
       :key="review.id"
       class="pb-6"
-      :class="{ 'border-b border-surface-surface-container-highest': index < reviewsList.length - 1 }"
+      :class="{
+        'border-b border-surface-surface-container-highest':
+          index < reviewsList.length - 1,
+      }"
     >
       <div
         v-if="review.createdAt"
@@ -87,19 +91,23 @@ const formatDate = (date: string) => {
         <span>{{ formatDate(review.createdAt) }}</span>
       </div>
       <div
-          v-if="!review.status"
-          class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container flex gap-2 items-center"
-        >
+        v-if="!review.status"
+        class="mt-2 text-3 p-2 bg-states-info-container text-states-on-info-container flex gap-2 items-center"
+      >
         <div class="w-6 h-6 i-carbon-warning" />
         {{ translations.product.reviewNotAccepted }}
       </div>
-      <div class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2">
+      <div
+        class="cms-block-product-description-reviews__reviews-rating inline-flex items-center mt-2"
+      >
         <SwProductRating
           :rating="review.points ?? 0"
           :star-size="20"
           :show-count="false"
         />
-        <div class="cms-block-product-description-reviews__reviews-title font-semibold ml-2">
+        <div
+          class="cms-block-product-description-reviews__reviews-title font-semibold ml-2"
+        >
           <p>{{ review.title }}</p>
         </div>
       </div>

package/app/components/SwProductReviewsForm.vue

@@ -7,6 +7,7 @@ import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import { useShopwareContext } from "#imports";
 
 const props = defineProps<{
@@ -154,7 +155,10 @@ const invokeRating = (value: number) => {
 </script>
 
 <template>
-  <form class="flex flex-col gap-4 md:gap-5 relative" @submit.prevent="invokeSend">
+  <form
+    class="flex flex-col gap-4 md:gap-5 relative"
+    @submit.prevent="invokeSend"
+  >
     <div
       v-if="isLoading"
       class="absolute inset-0 flex items-center justify-center z-10 bg-surface-surface/80 rounded-md"
@@ -171,7 +175,11 @@ const invokeRating = (value: number) => {
         <span class="text-sm text-surface-on-surface-variant">{{
           translations.product.reviewsForm.rating
         }}</span>
-        <div class="flex flex-row gap-2" role="group" :aria-label="translations.product.reviewsForm.rating">
+        <div
+          class="flex flex-row gap-2"
+          role="group"
+          :aria-label="translations.product.reviewsForm.rating"
+        >
           <SwStarIcon
             v-for="index in state.rating || 0"
             :key="`filled-${index}`"
@@ -217,7 +225,11 @@ const invokeRating = (value: number) => {
         <SwExclamationIcon :size="20" />
       </div>
       <div class="flex-1">
-        <p v-for="(error, index) in errorMessages" :key="index" class="text-sm text-states-error">
+        <p
+          v-for="(error, index) in errorMessages"
+          :key="index"
+          class="text-sm text-states-error"
+        >
           {{ error.detail }}
         </p>
       </div>

package/app/components/SwProductUnits.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations } from "@shopware/composables";
 import { defu } from "defu";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const { product, showContent = true } = defineProps<{