@shopware/cms-base-layer 3.0.1 → 3.1.0

package/README.md

@@ -5,7 +5,7 @@
 [![](https://img.shields.io/github/issues/shopware/frontends/cms-base?label=cms-base%20issues&logo=github)](https://github.com/shopware/frontends/issues?q=is%3Aopen+is%3Aissue+label%3Acms-base)
 [![](https://img.shields.io/github/license/shopware/frontends?color=blue)](#)
 
-Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://frontends.shopware.com/framework/styling.html).
+Nuxt [layer](https://nuxt.com/docs/getting-started/layers) that provides an implementation of all CMS components in Shopware [based on utility-classes](https://developer.shopware.com/frontends/concepts/styling.html).
 
 It is useful for projects that want to use the CMS components while keeping CMS functionality separate from the styling system and design tokens.
 
@@ -90,7 +90,7 @@ Since all CMS components are registered in your Nuxt application, you can now st
 
 > `@shopware/cms-base-layer` no longer owns the default UnoCSS theme. If you want the shared Shopware Frontends design tokens and UnoCSS defaults, extend `@shopware/unocss-design-tokens-layer` as shown above.
 
-See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) on how to use `cms-base-layer` in your Nuxt project.
+See a [short guide](https://developer.shopware.com/frontends/guides/cms/content-pages.html#use-the-cms-base-package) on how to use `cms-base-layer` in your Nuxt project.
 
 ## Styling and Design Tokens
 
@@ -442,13 +442,13 @@ export default defineAppConfig({
 
 ## 📘 Available components
 
-The list of available blocks and elements is [here](https://frontends.shopware.com/packages/cms-base-layer.html#available-components).
+The list of available blocks and elements is [here](https://developer.shopware.com/frontends/packages/cms-base-layer.html#available-components).
 
 ## 🔄 Overwriting components
 
 The procedure is:
 
-- find a component in component's [list](https://frontends.shopware.com/packages/cms-base.html#available-components), using a [Vue devtools](https://devtools.vuejs.org/) or browsing the github [repository](https://github.com/shopware/frontends/tree/main/packages/cms-base-layer/app/components)
+- find a component in component's [list](https://developer.shopware.com/frontends/packages/cms-base.html#available-components), using a [Vue devtools](https://devtools.vuejs.org/) or browsing the github [repository](https://github.com/shopware/frontends/tree/main/packages/cms-base-layer/app/components)
 - take its name
 - create a file with the same name and place it into `~/components` dir in your nuxt project (or wherever according your nuxt config)
 
@@ -475,7 +475,7 @@ No additional packages needed to be installed.
 
 ## Links
 
-- [📘 Documentation](https://frontends.shopware.com)
+- [📘 Documentation](https://developer.shopware.com/frontends)
 
 - [👥 Community](https://discord.com/channels/1308047705309708348/1405501315160739951) (`#composable-frontend`)
 
@@ -485,9 +485,31 @@ No additional packages needed to be installed.
 
 Full changelog for stable version is available [here](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/CHANGELOG.md)
 
-### Latest changes: 3.0.1
+### Latest changes: 3.1.0
+
+### Minor Changes
+
+- [#2503](https://github.com/shopware/frontends/pull/2503) [`1b0ccc9`](https://github.com/shopware/frontends/commit/1b0ccc95fcef89de42931155fb40119b9075d21b) Thanks [@mkucmus](https://github.com/mkucmus)! - `SwProductListingFilters` and `SwProductListingFiltersHorizontal`: honor the `listingType` prop. When set to `productSearchListing` the components drive `useProductSearchListing` instead of `useCategoryListing` and keep the active search term in the request criteria and resulting URL, so the shared filter sidebar can be reused on the product search page without resetting the query. Category listing behavior is unchanged.
 
 ### Patch Changes
 
-- Updated dependencies [[`8be060d`](https://github.com/shopware/frontends/commit/8be060de825ca799f98a8f045a5e7fea61f5d1a2), [`5678fb0`](https://github.com/shopware/frontends/commit/5678fb008cbd86eaddd061e004de89e6f45bb7ec), [`22611e5`](https://github.com/shopware/frontends/commit/22611e542b8f42a4f34dce5186f628f9a17f457b)]:
-  - @shopware/composables@1.12.0
+- [#2593](https://github.com/shopware/frontends/pull/2593) [`760635c`](https://github.com/shopware/frontends/commit/760635cdbaf3c80ae99fbe0f42a31a8ebaa14675) Thanks [@patzick](https://github.com/patzick)! - Stop registering the `@unocss/nuxt` module from the CMS layer. UnoCSS is not a dependency of this package anymore (it lives in `@shopware/unocss-design-tokens-layer`), so registering the module made every app that doesn't install UnoCSS itself fail to build with `Could not load @unocss/nuxt. Is it installed?` - for example the blank template. Apps that want the shared UnoCSS setup keep getting it from `@shopware/unocss-design-tokens-layer` or their own `@unocss/nuxt` registration.
+
+- [#2568](https://github.com/shopware/frontends/pull/2568) [`6315350`](https://github.com/shopware/frontends/commit/6315350add0464abef153343897d42f5808f2003) Thanks [@patzick](https://github.com/patzick)! - Add cacheable GET support for category details and product reviews while preserving the existing POST behavior when `cacheableReads` is disabled.
+
+  - `useCategorySearch.search` now calls `GET /category/{navigationId}` and sends the complete encoded Criteria in the `_criteria` query parameter when cacheable reads are enabled.
+  - `useProductReviews.loadProductReviews` now calls `GET /product/{productId}/reviews` and sends its encoded Criteria in `_criteria` when cacheable reads are enabled.
+  - The CMS product description reviews element follows the same flag and endpoint behavior when it needs to fetch reviews directly.
+
+- [#2571](https://github.com/shopware/frontends/pull/2571) [`c64ae1c`](https://github.com/shopware/frontends/commit/c64ae1c6e2d11e33bd52df4b55177cc26b646433) Thanks [@patzick](https://github.com/patzick)! - Show the category a shopper came from in product breadcrumbs, while direct product links continue to use the default category.
+
+- [#2596](https://github.com/shopware/frontends/pull/2596) [`6572aa8`](https://github.com/shopware/frontends/commit/6572aa84431e1f4a34d6cf04e549037692d638a6) Thanks [@patzick](https://github.com/patzick)! - Reduce Rolldown/Vite build noise: scope Nuxt global components, keep the three.js async chunk warning intentional, avoid shipping full carbon icon JSON via UnoCSS runtime, and bump @vueuse to 14.4.0.
+
+- [#2592](https://github.com/shopware/frontends/pull/2592) [`fcc3d71`](https://github.com/shopware/frontends/commit/fcc3d71af05c2f2d409aa63ecb562714e6bc0e69) Thanks [@patzick](https://github.com/patzick)! - Replace CMS layer `@apply` styles with plain CSS declarations to avoid Nuxt build warnings.
+
+- [#2568](https://github.com/shopware/frontends/pull/2568) [`6315350`](https://github.com/shopware/frontends/commit/6315350add0464abef153343897d42f5808f2003) Thanks [@patzick](https://github.com/patzick)! - Preserve CMS image aspect ratios when responsive dimensions are calculated after hydration, preventing visible image scaling as optimized sources load.
+
+- Updated dependencies [[`6315350`](https://github.com/shopware/frontends/commit/6315350add0464abef153343897d42f5808f2003), [`b767721`](https://github.com/shopware/frontends/commit/b767721847bf3391f9067eca7a045089fb22fce0), [`f16c5a0`](https://github.com/shopware/frontends/commit/f16c5a0785d6187b73c3edcf37feab7c90bd7988), [`978b02c`](https://github.com/shopware/frontends/commit/978b02c969ca4b16f5fc1d7a953ec4cce3d98173), [`6572aa8`](https://github.com/shopware/frontends/commit/6572aa84431e1f4a34d6cf04e549037692d638a6), [`744833b`](https://github.com/shopware/frontends/commit/744833b9d7d2f8ea1f5dfe65be3fa554dbe4a09f), [`e03c91b`](https://github.com/shopware/frontends/commit/e03c91be172374894d90b7a0111855b76719fee1), [`33facb1`](https://github.com/shopware/frontends/commit/33facb178792c8cb26b47ab984ac48c08ab4b72b), [`9137475`](https://github.com/shopware/frontends/commit/91374753cedb2034385f642e6af11314f2971caa), [`474d3fe`](https://github.com/shopware/frontends/commit/474d3fed346816135b0c7c797990b215a8b691c0), [`38379a5`](https://github.com/shopware/frontends/commit/38379a5d52ab09008774533ef417ebe2cde3f7fd)]:
+  - @shopware/composables@1.12.1
+  - @shopware/api-client@1.5.1
+  - @shopware/helpers@1.7.2

package/app/components/SwProductCard.vue

@@ -17,6 +17,7 @@ import {
   useAddToCart,
   useCartErrorParamsResolver,
   useCartNotification,
+  useNavigationContext,
   useNotifications,
   useProductWishlist,
   useUrlResolver,
@@ -144,10 +145,25 @@ const productManufacturer = computed(() =>
   getProductManufacturerName(product.value),
 );
 
-const { getUrlPrefix } = useUrlResolver();
-const productLink = computed(() =>
-  buildUrlPrefix(getProductRoute(product.value), getUrlPrefix()),
+const { foreignKey: currentNavigationId, routeName } = useNavigationContext();
+const referrerCategoryId = computed(() =>
+  isProductListing && routeName.value === "frontend.navigation.page"
+    ? currentNavigationId.value
+    : undefined,
 );
+const { getUrlPrefix } = useUrlResolver();
+const productLink = computed(() => {
+  const productRoute = getProductRoute(product.value);
+  const productRouteWithReferrer = {
+    ...productRoute,
+    state: {
+      ...productRoute.state,
+      referrerCategoryId: referrerCategoryId.value,
+    },
+  };
+
+  return buildUrlPrefix(productRouteWithReferrer, getUrlPrefix());
+});
 </script>
 
 <template>

package/app/components/SwProductListingFilters.vue

@@ -5,11 +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<{
@@ -17,6 +25,8 @@ const props = defineProps<{
   listingType?: string;
 }>();
 
+const isProductSearch = props.listingType === "productSearchListing";
+
 type Translations = {
   listing: {
     filters: string;
@@ -25,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",
@@ -54,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 (
@@ -94,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;
@@ -172,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;
@@ -186,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,
@@ -215,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);
     }

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -5,11 +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<{
@@ -17,6 +25,8 @@ const props = defineProps<{
   listingType?: string;
 }>();
 
+const isProductSearch = props.listingType === "productSearchListing";
+
 type Translations = {
   listing: {
     filters: string;
@@ -25,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 +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 (
@@ -93,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;
@@ -171,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;
@@ -185,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,
@@ -214,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);
     }

package/app/components/public/cms/CmsGenericBlock.vue

@@ -71,7 +71,7 @@ const DynamicRender = () => {
   }
   if (import.meta.dev) {
     console.warn(
-      `[CMS] Block type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-blocks`,
+      `[CMS] Block type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://developer.shopware.com/frontends/guides/cms/create-blocks`,
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }

package/app/components/public/cms/CmsGenericElement.vue

@@ -31,7 +31,7 @@ const DynamicRender = () => {
   }
   if (import.meta.dev) {
     console.warn(
-      `[CMS] Element type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://frontends.shopware.com/getting-started/cms/create-elements`,
+      `[CMS] Element type "${componentName}" is not implemented.\n  → Create a component named "${componentNameToResolve}.vue" to render it.\n  📖 Docs: https://developer.shopware.com/frontends/guides/cms/create-elements`,
     );
     return h(resolveComponent("CmsNoComponent"), { content: props.content });
   }

package/app/components/public/cms/CmsNoComponent.vue

@@ -28,7 +28,7 @@ const docsUrl = computed(() => {
     component: expectedComponentName.value,
     type: elementType.value.toLowerCase(),
   });
-  return `https://frontends.shopware.com/getting-started/cms/missing-component?${params}`;
+  return `https://developer.shopware.com/frontends/guides/cms/missing-component?${params}`;
 });
 
 const aiPrompt = computed(() => {

package/app/components/public/cms/block/CmsBlockCenterText.vue

@@ -22,6 +22,7 @@ const slotCenterContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-center-text .cms-element-image {
-  @apply self-stretch min-h-12;
+  align-self: stretch;
+  min-height: 3rem;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageBubbleRow.vue

@@ -30,6 +30,10 @@ const centerContent = getSlotContent("center");
 </template>
 <style scoped>
 .cms-block-image-bubble-row :deep(.cms-element-image) {
-  @apply object-cover max-w-xs overflow-hidden rounded-full aspect-square;
+  aspect-ratio: 1 / 1;
+  max-width: 20rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageFourColumn.vue

@@ -35,10 +35,14 @@ const centerRightContent = getSlotContent("center-right");
 
 <style scoped>
 .cms-block-image-four-column :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-four-column :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageGalleryBig.vue

@@ -20,24 +20,28 @@ const cmsContent = getSlotContent("imageGallery");
 
 <style scoped>
 .cms-block-image-gallery-big {
-  @apply w-full;
+  width: 100%;
 }
 
 .cms-block-image-gallery-big :deep(.cms-element-image-gallery) {
-  @apply max-w-screen-xl mx-auto;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /* Enhanced styling for the big gallery version */
 .cms-block-image-gallery-big :deep(.gallery-slider) {
-  @apply max-h-[800px];
+  max-height: 800px;
 }
 
 .cms-block-image-gallery-big :deep(img) {
-  @apply object-contain mx-auto;
+  margin-left: auto;
+  margin-right: auto;
+  object-fit: contain;
 }
 
 /* Larger navigation controls */
 .cms-block-image-gallery-big :deep(.gallery-slider-controls) {
-  @apply scale-125;
+  transform: scale(1.25);
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageHighlightRow.vue

@@ -31,10 +31,15 @@ const centerContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-image-highlight-row :deep(.cms-element-image) {
-  @apply relative h-full w-full border-[12px] border-surface-surface;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  border: 12px solid #ffffff;
 }
 
 .cms-block-image-highlight-row :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageTextRow.vue

@@ -43,14 +43,20 @@ const rightTextContent = getSlotContent("right-text");
 
 <style scoped>
 .cms-block-image-text-row :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-text-row :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover rounded-lg;
+  height: 100%;
+  width: 100%;
+  border-radius: 0.5rem;
+  object-fit: cover;
 }
 
 .cms-block-image-text-row :deep(.cms-element-text) {
-  @apply self-stretch min-h-12;
+  align-self: stretch;
+  min-height: 3rem;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageThreeCover.vue

@@ -31,10 +31,15 @@ const centerContent = getSlotContent("center");
 
 <style scoped>
 .cms-block-image-three-cover :deep(.cms-element-image) {
-  @apply aspect-square relative h-full w-full;
+  position: relative;
+  aspect-ratio: 1 / 1;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-three-cover :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 </style>

package/app/components/public/cms/block/CmsBlockImageTwoColumn.vue

@@ -27,14 +27,18 @@ const rightContent = getSlotContent("right");
 
 <style scoped>
 .cms-block-image-two-column :deep(.cms-element-image) {
-  @apply relative h-full w-full;
+  position: relative;
+  height: 100%;
+  width: 100%;
 }
 
 .cms-block-image-two-column :deep(.cms-element-image img) {
-  @apply w-full h-full object-cover;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
 }
 
 .cms-block-image-two-column :deep(.cms-element-image-slider) {
-  @apply w-full;
+  width: 100%;
 }
 </style>

package/app/components/public/cms/block/CmsBlockProductHeading.vue

@@ -22,6 +22,7 @@ const rightContent = getSlotContent("right");
 
 <style scoped>
 .cms-block-product-heading .cms-element-image {
-  @apply max-w-[7.5rem] max-h-[7.5rem];
+  max-height: 7.5rem;
+  max-width: 7.5rem;
 }
 </style>

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

@@ -92,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/CmsElementProductDescriptionReviews.vue

@@ -1,4 +1,5 @@
 <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";
@@ -56,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);

package/app/utils/routeQuery.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it } from "vitest";
+
+import { firstQueryValue, toNumber } from "./routeQuery";
+
+describe("firstQueryValue", () => {
+  it("returns a plain string value", () => {
+    expect(firstQueryValue("name-asc")).toBe("name-asc");
+  });
+
+  it("returns the first element of a repeated (array) param", () => {
+    expect(firstQueryValue(["30", "45"])).toBe("30");
+  });
+
+  it("returns undefined for undefined", () => {
+    expect(firstQueryValue(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for null", () => {
+    expect(firstQueryValue(null)).toBeUndefined();
+  });
+
+  it("returns undefined for an empty array", () => {
+    expect(firstQueryValue([])).toBeUndefined();
+  });
+
+  it("returns undefined when the first array element is null", () => {
+    expect(firstQueryValue([null])).toBeUndefined();
+  });
+});
+
+describe("toNumber", () => {
+  it("parses an integer string", () => {
+    expect(toNumber("15")).toBe(15);
+  });
+
+  it("parses a decimal string", () => {
+    expect(toNumber("19.99")).toBe(19.99);
+  });
+
+  it("parses zero and negative values", () => {
+    expect(toNumber("0")).toBe(0);
+    expect(toNumber("-5")).toBe(-5);
+  });
+
+  it("returns undefined for undefined", () => {
+    expect(toNumber(undefined)).toBeUndefined();
+  });
+
+  it("returns undefined for an empty string", () => {
+    expect(toNumber("")).toBeUndefined();
+  });
+
+  it("returns undefined for a non-numeric string", () => {
+    expect(toNumber("abc")).toBeUndefined();
+    expect(toNumber("12px")).toBeUndefined();
+  });
+
+  it("returns undefined for non-finite values", () => {
+    expect(toNumber("Infinity")).toBeUndefined();
+  });
+
+  it("composes with firstQueryValue for repeated numeric params", () => {
+    expect(toNumber(firstQueryValue(["30", "45"]))).toBe(30);
+  });
+});

package/app/utils/routeQuery.ts

@@ -0,0 +1,26 @@
+import type { LocationQuery } from "vue-router";
+
+/**
+ * Collapses a route-query param to a single string.
+ *
+ * Router query values are `string | null`, an array when a param is repeated
+ * (e.g. `?p=1&p=2`), or `undefined` when absent. Returns the first usable
+ * string, or `undefined` for missing/empty/null values.
+ */
+export const firstQueryValue = (
+  value: LocationQuery[string] | undefined,
+): string | undefined => {
+  const raw = Array.isArray(value) ? value[0] : value;
+  return raw ?? undefined;
+};
+
+/**
+ * Parses a query string (typically from {@link firstQueryValue}) into a finite
+ * number, or `undefined` when missing/empty/non-numeric. Lets callers fall back
+ * with `??` instead of forwarding `NaN` into a request.
+ */
+export const toNumber = (value: string | undefined): number | undefined => {
+  if (value === undefined || value === "") return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+};

package/app/utils/useSelectedListingFilters.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  applyQueryToFilters,
+  createEmptyFilterState,
+} from "./useSelectedListingFilters";
+
+describe("applyQueryToFilters", () => {
+  it("populates sets from pipe-joined values", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a|b", properties: "x" });
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+    expect([...state.properties]).toEqual(["x"]);
+  });
+
+  it("clears removed filters when the query no longer has them (Back/Forward)", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a|b", search: "shirt" });
+    applyQueryToFilters(state, { search: "shirt" }); // manufacturer removed
+    expect(state.manufacturer.size).toBe(0);
+    expect(state.properties.size).toBe(0);
+  });
+
+  it("clears removed scalar filters on resync", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, {
+      "min-price": "10",
+      "max-price": "20",
+      rating: "4",
+      "shipping-free": "true",
+    });
+    applyQueryToFilters(state, {});
+    expect(state["min-price"]).toBeUndefined();
+    expect(state["max-price"]).toBeUndefined();
+    expect(state.rating).toBeUndefined();
+    expect(state["shipping-free"]).toBeUndefined();
+  });
+
+  it("keeps the Set identity stable across re-applies (reactive binding)", () => {
+    const state = createEmptyFilterState();
+    const manufacturerRef = state.manufacturer;
+    const propertiesRef = state.properties;
+    applyQueryToFilters(state, { manufacturer: "a" });
+    expect(state.manufacturer).toBe(manufacturerRef);
+    expect(state.properties).toBe(propertiesRef);
+  });
+
+  it("drops empty members from pipe-joined values", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { manufacturer: "a||b|" });
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+  });
+
+  it("parses scalars array/NaN-safe and ignores junk", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, {
+      "min-price": ["10", "20"],
+      "max-price": "abc",
+      rating: "4",
+      "shipping-free": "true",
+    });
+    expect(state["min-price"]).toBe(10); // first of repeated param
+    expect(state["max-price"]).toBeUndefined(); // NaN -> undefined
+    expect(state.rating).toBe(4);
+    expect(state["shipping-free"]).toBe(true);
+  });
+
+  it("treats shipping-free other than 'true' as false", () => {
+    const state = createEmptyFilterState();
+    applyQueryToFilters(state, { "shipping-free": "false" });
+    expect(state["shipping-free"]).toBe(false);
+  });
+
+  it("is idempotent (same query twice -> equal state)", () => {
+    const state = createEmptyFilterState();
+    const query = { manufacturer: "a|b", rating: "4" };
+    applyQueryToFilters(state, query);
+    applyQueryToFilters(state, query);
+    expect([...state.manufacturer]).toEqual(["a", "b"]);
+    expect(state.rating).toBe(4);
+  });
+});

package/app/utils/useSelectedListingFilters.ts

@@ -0,0 +1,105 @@
+import { reactive, watch } from "vue";
+import type { UnwrapNestedRefs } from "vue";
+import { useRoute } from "vue-router";
+import type { LocationQuery } from "vue-router";
+
+import { firstQueryValue, toNumber } from "./routeQuery";
+
+export type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+/** Fresh, fully-empty filter state. The single source of "no selection". */
+export const createEmptyFilterState = (): FilterState => ({
+  manufacturer: new Set<string>(),
+  properties: new Set<string>(),
+  "min-price": undefined,
+  "max-price": undefined,
+  rating: undefined,
+  "shipping-free": undefined,
+});
+
+/**
+ * Resets `state` to empty, then repopulates it from `query`. Pure with respect
+ * to the router: it only mutates `state`, never navigates or fetches.
+ *
+ * Reset-first is what clears filters whose query param vanished (e.g. browser
+ * Back/Forward), which the old add-only loop left lingering. Idempotent:
+ * applying the same query twice yields identical contents, so it is safe to
+ * call from a route.query watcher that also fires on the user's own
+ * executeSearch() push.
+ *
+ * Array-valued params (e.g. ?manufacturer=a&manufacturer=b) collapse to the
+ * first value via firstQueryValue; numeric params are NaN-safe via toNumber -
+ * consistent with the rest of the listing parsing.
+ */
+export const applyQueryToFilters = (
+  state: FilterState,
+  query: LocationQuery,
+): void => {
+  // 1) Reset every field. Clear the Sets in place so their identity is kept
+  //    (props bound to them stay reactive); replace scalars with undefined.
+  state.manufacturer.clear();
+  state.properties.clear();
+  state["min-price"] = undefined;
+  state["max-price"] = undefined;
+  state.rating = undefined;
+  state["shipping-free"] = undefined;
+
+  // 2) Repopulate from the current query.
+  for (const code of ["manufacturer", "properties"] as const) {
+    const value = firstQueryValue(query[code]);
+    if (!value) continue;
+    for (const element of value.split("|")) {
+      if (element) state[code].add(element);
+    }
+  }
+
+  const minPrice = toNumber(firstQueryValue(query["min-price"]));
+  if (minPrice !== undefined) state["min-price"] = minPrice;
+
+  const maxPrice = toNumber(firstQueryValue(query["max-price"]));
+  if (maxPrice !== undefined) state["max-price"] = maxPrice;
+
+  const rating = toNumber(firstQueryValue(query.rating));
+  if (rating !== undefined) state.rating = rating;
+
+  const shippingFree = firstQueryValue(query["shipping-free"]);
+  if (shippingFree !== undefined) {
+    state["shipping-free"] = shippingFree === "true";
+  }
+};
+
+/**
+ * Returns the reactive filter state, populated from the current route.query at
+ * setup (runs on server AND client -> identical first render, no hydration
+ * mismatch) and kept in sync on every subsequent query-only navigation
+ * (Back/Forward, manual URL edits, the component's own executeSearch push).
+ *
+ * The watcher is intentionally NOT immediate: the setup-time apply already
+ * covers the first render, and an immediate watcher would re-run during
+ * hydration. It only resyncs UI state - it never navigates or fetches - so it
+ * cannot loop with executeSearch() nor cause an extra listing request.
+ */
+export const useSelectedListingFilters = (): UnwrapNestedRefs<FilterState> => {
+  const route = useRoute();
+  const state = reactive<FilterState>(createEmptyFilterState());
+
+  // Initial parse (SSR + first client render).
+  applyQueryToFilters(state as FilterState, route.query);
+
+  // Resync on query-only route changes while the component stays mounted.
+  watch(
+    () => route.query,
+    (query) => {
+      applyQueryToFilters(state as FilterState, query);
+    },
+  );
+
+  return state;
+};

package/nuxt.config.ts

@@ -1,6 +1,7 @@
 import { createResolver } from "@nuxt/kit";
 import type { NuxtConfig } from "@nuxt/schema";
 import { defineNuxtConfig } from "nuxt/config";
+import type { LoggingFunction, RollupLog } from "rollup";
 
 const { resolve: resolveLayer } = createResolver(import.meta.url);
 
@@ -9,7 +10,11 @@ export default defineNuxtConfig({
   // to prevent bundling heavy 3D libraries in the initial bundle.
   // If you need 3D support, add "@tresjs/nuxt" to your app's nuxt.config.ts modules array
   // and dynamically import SwMedia3D using defineAsyncComponent.
-  modules: ["@unocss/nuxt", "@nuxt/image"],
+  //
+  // @unocss/nuxt is not included here either. This layer only ships CMS components,
+  // the UnoCSS setup lives in @shopware/unocss-design-tokens-layer (or your own config),
+  // so apps that don't use UnoCSS can still extend this layer.
+  modules: ["@nuxt/image"],
 
   hooks: {
     "components:extend"(components) {
@@ -115,6 +120,24 @@ export default defineNuxtConfig({
     optimizeDeps: {
       include: ["xss"],
     },
+    build: {
+      // Async SwMedia3D/three chunk is ~977 kB after minify; that split is intentional.
+      chunkSizeWarningLimit: 1000,
+    },
+  },
+  nitro: {
+    rollupConfig: {
+      // @vueuse/shared still embeds @__NO_SIDE_EFFECTS__ inside JSDoc (injectLocal).
+      // Nitro/Rollup treats that as a misplaced annotation. Track upstream vueuse.
+      onwarn(warning: RollupLog, warn: LoggingFunction) {
+        if (
+          warning.message?.includes("annotation that Rollup cannot interpret")
+        ) {
+          return;
+        }
+        warn(warning);
+      },
+    },
   },
   telemetry: {
     enabled: false,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shopware/frontends.git"
   },
-  "homepage": "https://frontends.shopware.com/framework/shopping-experiences.html",
+  "homepage": "https://developer.shopware.com/frontends/concepts/shopping-experiences.html",
   "keywords": [
     "Shopware",
     "Vue",
@@ -28,39 +28,38 @@
     "index.cjs",
     "index.d.ts",
     "app.config.ts",
-    "nuxt.config.ts",
-    "uno.config.ts"
+    "nuxt.config.ts"
   ],
   "dependencies": {
-    "@iconify-json/carbon": "1.2.23",
+    "@iconify-json/carbon": "1.2.24",
     "@nuxt/image": "2.0.0",
     "@nuxt/kit": "4.4.8",
     "@tresjs/cientos": "5.7.2",
-    "@tresjs/nuxt": "^5.6.1",
+    "@tresjs/nuxt": "^5.6.3",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
-    "@vueuse/core": "14.3.0",
-    "entities": "6.0.0",
+    "@vueuse/core": "14.4.0",
+    "entities": "8.0.0",
     "scule": "1.3.0",
     "html-to-ast": "0.0.6",
     "three": "0.183.2",
-    "vue": "3.5.38",
+    "vue": "3.5.39",
     "xss": "1.0.15",
-    "@shopware/helpers": "1.7.1",
-    "@shopware/composables": "1.12.0",
-    "@shopware/api-client": "1.5.0"
+    "@shopware/api-client": "1.5.1",
+    "@shopware/composables": "1.12.1",
+    "@shopware/helpers": "1.7.2"
   },
   "devDependencies": {
     "@nuxt/schema": "4.4.8",
     "@types/three": "0.182.0",
     "@typescript/native-preview": "7.0.0-dev.20260205.1",
-    "@vitest/coverage-v8": "4.1.9",
+    "@vitest/coverage-v8": "4.1.10",
     "nuxt": "4.4.8",
     "typescript": "5.9.3",
     "unbuild": "3.6.1",
-    "vitest": "4.1.9",
+    "vitest": "4.1.10",
     "vue-router": "5.1.0",
-    "vue-tsc": "3.3.5",
+    "vue-tsc": "3.3.7",
     "tsconfig": "0.0.0"
   },
   "scripts": {