@shopware/cms-base-layer 3.0.0 → 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
 
@@ -110,22 +110,24 @@ export default defineNuxtConfig({
   unocss: {
     nuxtLayers: true, // enable Nuxt layers for UnoCSS
   },
-})
+});
 ```
 
 ```ts [uno.config.ts]
-import { mergeConfigs } from '@unocss/core'
-import baseConfig from './.nuxt/uno.config.mjs'
-
-export default mergeConfigs([baseConfig, {
-  theme: {
-    colors: {
-      'brand-primary': '#ff3e00',
-      'brand-secondary': '#1c1c1c',
+import { mergeConfigs } from "@unocss/core";
+import baseConfig from "./.nuxt/uno.config.mjs";
+
+export default mergeConfigs([
+  baseConfig,
+  {
+    theme: {
+      colors: {
+        "brand-primary": "#ff3e00",
+        "brand-secondary": "#1c1c1c",
+      },
     },
   },
-}])
-
+]);
 ```
 
 See the [UnoCSS reference](https://unocss.dev/integrations/nuxt#configuration) for more information on how to configure UnoCSS in Nuxt when work with layers.
@@ -150,12 +152,14 @@ This layer includes [Nuxt Image](https://image.nuxt.com/) configuration optimize
 The layer comes pre-configured with optimized settings. No additional setup is required! The configuration includes:
 
 **Available Presets:**
+
 - `productCard` - Product listing images (WebP, quality 90, cover fit)
 - `productDetail` - Product detail page images (WebP, quality 90, contain fit)
 - `thumbnail` - Small thumbnails (150x150, WebP, quality 90)
 - `hero` - Hero banners (WebP, quality 95, cover fit)
 
 **Responsive Breakpoints:**
+
 - `xs: 320px`, `sm: 640px`, `md: 768px`, `lg: 1024px`, `xl: 1280px`, `xxl: 1536px`
 
 ### Usage in Components
@@ -196,21 +200,23 @@ Replace standard `<img>` tags with `<NuxtImg>` to enable automatic optimization:
 
 Shopware supports the following URL parameters for image transformation:
 
-| Modifier | Description | Example | Support |
-|----------|-------------|---------|---------|
-| `width` | Image width in pixels | `400` | ✅ Always supported |
-| `height` | Image height in pixels | `600` | ✅ Always supported |
-| `quality` | Image quality (0-100) | `85` | ⚠️ Cloud/Plugin required* |
-| `format` | Output format | `webp`, `avif`, `jpg`, `png` | ⚠️ Cloud/Plugin required* |
-| `fit` | Resize behavior | `cover`, `contain`, `fill` | ⚠️ Cloud/Plugin required* |
+| Modifier  | Description            | Example                      | Support                    |
+| --------- | ---------------------- | ---------------------------- | -------------------------- |
+| `width`   | Image width in pixels  | `400`                        | ✅ Always supported        |
+| `height`  | Image height in pixels | `600`                        | ✅ Always supported        |
+| `quality` | Image quality (0-100)  | `85`                         | ⚠️ Cloud/Plugin required\* |
+| `format`  | Output format          | `webp`, `avif`, `jpg`, `png` | ⚠️ Cloud/Plugin required\* |
+| `fit`     | Resize behavior        | `cover`, `contain`, `fill`   | ⚠️ Cloud/Plugin required\* |
+
+\*Advanced transformations (quality, format, fit) are available in:
 
-*Advanced transformations (quality, format, fit) are available in:
 - **Shopware Cloud (SaaS)**: Built-in support via managed infrastructure. For a complete list of supported image transformation parameters, see [Fastly Image Optimizer Query Parameters](https://www.fastly.com/documentation/reference/io/#query-parameters).
 - **Self-hosted instances**: Require thumbnail processor plugins like [FroshPlatformThumbnailProcessor](https://github.com/FriendsOfShopware/FroshPlatformThumbnailProcessor) or third-party CDN integration
 
 ### How It Works
 
 This layer includes a custom Shopware provider for Nuxt Image that maps modifiers to Shopware's query parameters:
+
 - `width` modifier → `?width=400`
 - `height` modifier → `?height=300`
 - `quality` modifier → `?quality=85`
@@ -249,31 +255,31 @@ export default defineNuxtConfig({
     quality: 85,
 
     // Add/change formats
-    formats: ['avif', 'webp', 'jpg'],
+    formats: ["avif", "webp", "jpg"],
 
     // Override or add presets
     presets: {
       // Override existing preset
       productCard: {
         modifiers: {
-          format: 'avif',
+          format: "avif",
           quality: 80,
-          fit: 'cover',
-        }
+          fit: "cover",
+        },
       },
       // Add custom preset
       categoryBanner: {
         modifiers: {
-          format: 'webp',
+          format: "webp",
           quality: 90,
           width: 1200,
           height: 400,
-          fit: 'cover',
-        }
-      }
-    }
-  }
-})
+          fit: "cover",
+        },
+      },
+    },
+  },
+});
 ```
 
 ## 🖼️ Image Placeholder
@@ -335,6 +341,7 @@ When a CMS section or block has a `backgroundMedia` set, the components call `ge
 4. Appends `format` and `quality` from `app.config.ts` if provided
 
 **Example generated URL:**
+
 ```
 url("https://cdn.shopware.store/.../image.jpg?width=1000&fit=crop,smart&format=webp&quality=85")
 ```
@@ -348,6 +355,7 @@ This layer includes a `useLcpImagePreload` composable that automatically preload
 ### How it works
 
 The composable scans CMS sections in document order, checking:
+
 1. Section background images (`section.backgroundMedia`)
 2. Block background images (`block.backgroundMedia`)
 3. Image element media (`slot.data.media`)
@@ -386,11 +394,14 @@ productCard: {
 ```
 
 ```vue
-<NuxtImg preset="productCard"
+<NuxtImg
+  preset="productCard"
   :src="coverSrcPath"
-  width="400" height="400"
+  width="400"
+  height="400"
   densities="1x"
-  loading="lazy" />
+  loading="lazy"
+/>
 ```
 
 - **Fixed `width`/`height`** (400px) — avoid hydration mismatches caused by dynamic DOM measurement
@@ -431,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)
 
@@ -464,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`)
 
@@ -474,36 +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.0
-
-### Major Changes
-
-- [#2406](https://github.com/shopware/frontends/pull/2406) [`df93461`](https://github.com/shopware/frontends/commit/df93461434cb79ec9d722cdbd42a37a9af07fb03) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove bundled UnoCSS configuration and design tokens from the CMS layer. Consumers who relied on the previous default UnoCSS setup should extend `@shopware/unocss-design-tokens-layer` alongside this package. See the package README and framework docs for migration steps.
+### Latest changes: 3.1.0
 
 ### Minor Changes
 
-- [#2420](https://github.com/shopware/frontends/pull/2420) [`9e37ab6`](https://github.com/shopware/frontends/commit/9e37ab6897f501ed3d261fa619aee349e46342c2) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add FrontendAccountCustomerGroupRegistrationPage component for customer group view
+- [#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
 
-- [#2439](https://github.com/shopware/frontends/pull/2439) [`a992e39`](https://github.com/shopware/frontends/commit/a992e396ea6aa3b44783d183561fa8b0605b77f0) Thanks [@patzick](https://github.com/patzick)! - Use Nuxt route composables in CMS components to keep route query access available during SSR.
-
-- [#2389](https://github.com/shopware/frontends/pull/2389) [`05438c6`](https://github.com/shopware/frontends/commit/05438c636a6c99b48e87d8f2ff5b03bf313c4e67) Thanks [@mkucmus](https://github.com/mkucmus)! - Fix product card and CMS image sizing to prevent duplicate/oversized image requests. Move fixed dimensions and `densities="1x"` into the `productCard` preset, and use `useElementSize`-based `width`/`height` props for `CmsElementImage`.
+- [#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.
 
-- [#2378](https://github.com/shopware/frontends/pull/2378) [`c36bc1f`](https://github.com/shopware/frontends/commit/c36bc1ff17e8e34c52fa91e6388ce210fffb7e8e) Thanks [@patzick](https://github.com/patzick)! - Add UnoCSS directive transformation for CMS block styles so layered Nuxt apps do not emit CSS minification warnings from raw `@apply` directives during production builds.
+- [#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.
 
-- [#2369](https://github.com/shopware/frontends/pull/2369) [`3c16985`](https://github.com/shopware/frontends/commit/3c16985ddf3878bc207c514a5ab8e4a6409f809c) Thanks [@mkucmus](https://github.com/mkucmus)! - Fixed `xss` library loading issue in Vite dev server by adding it to `optimizeDeps.include`
+  - `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.
 
-- [#2371](https://github.com/shopware/frontends/pull/2371) [`33e0c69`](https://github.com/shopware/frontends/commit/33e0c69afc3de854733ab61f866ba65cce1489f6) Thanks [@patzick](https://github.com/patzick)! - Disable automatic CMS LCP image preload by default.
+- [#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.
 
-  The preload helper now only injects image preload tags when
-  `appConfig.lcpImagePreload` is explicitly enabled, which avoids noisy preload
-  warnings on storefront pages that do not immediately use the detected image.
+- [#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.
 
-- [#2326](https://github.com/shopware/frontends/pull/2326) [`e7efff8`](https://github.com/shopware/frontends/commit/e7efff8c615ae8d0858572933285216cc533dd0b) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Gate wishlist button behind login when useLoginModal is provided via provide/inject. For guests, show login modal on wishlist click and add product to wishlist after successful login.
+- [#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.
 
-- [#2346](https://github.com/shopware/frontends/pull/2346) [`a47143a`](https://github.com/shopware/frontends/commit/a47143a670f49deecc35dce4bb8b6bd12d9a3b47) Thanks [@joberthel](https://github.com/joberthel)! - Improve `SwMedia3D` model framing by fitting loaded 3D models into the viewport automatically. This fixes cases where very small 3D files appeared tiny and hard to inspect.
+- [#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 [[`22fc8a7`](https://github.com/shopware/frontends/commit/22fc8a7301f6a7d2612d907ab73555978b651c00), [`bea7f58`](https://github.com/shopware/frontends/commit/bea7f5882cb58c6d47c84a82db5c8ecaf9bcf8ef), [`b8c0091`](https://github.com/shopware/frontends/commit/b8c00913c3afb5e1e63de9565105f8f8e3bf299f)]:
-  - @shopware/helpers@1.7.1
-  - @shopware/composables@1.11.1
+- 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/SwCategoryNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const {

package/app/components/SwCategoryNavigationLink.vue

@@ -7,6 +7,7 @@ import {
 } from "@shopware/helpers";
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
+
 import { useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
 
@@ -43,7 +44,9 @@ const hasChildren = computed(() => {
     v-if="props.level === 0"
     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">
+    <div
+      class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1"
+    >
       <div class="flex-1 flex justify-start items-center gap-2.5">
         <RouterLink
           v-if="!urlIsAbsolute(url.path)"
@@ -76,17 +79,19 @@ const hasChildren = computed(() => {
         type="button"
         :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
       >
-        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+        <SwChevronIcon
+          :direction="props.isExpanded ? 'up' : 'down'"
+          :size="20"
+        />
       </button>
     </div>
   </div>
 
   <!-- Level 2+ Categories (Nested with left padding) -->
-  <div
-    v-else
-    class="self-stretch flex flex-col justify-center items-center"
-  >
-    <div class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2">
+  <div v-else class="self-stretch flex flex-col justify-center items-center">
+    <div
+      class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2"
+    >
       <div class="py-0.5 flex-1 flex justify-start items-center gap-2.5">
         <RouterLink
           v-if="!urlIsAbsolute(url.path)"
@@ -121,7 +126,10 @@ const hasChildren = computed(() => {
         type="button"
         :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
       >
-        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+        <SwChevronIcon
+          :direction="props.isExpanded ? 'up' : 'down'"
+          :size="20"
+        />
       </button>
     </div>
   </div>

package/app/components/SwContactForm.vue

@@ -7,6 +7,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { email, minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import {
   useCmsElementConfig,
   useNavigationContext,

package/app/components/SwFilterChips.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 type FilterState = {

package/app/components/SwListingProductPrice.vue

@@ -2,6 +2,7 @@
 import { useCmsTranslations, useProductPrice } from "@shopware/composables";
 import { defu } from "defu";
 import { toRefs } from "vue";
+
 import type { Schemas } from "#shopware";
 
 const props = defineProps<{
@@ -53,13 +54,18 @@ const {
           </template>
         </SwSharedPrice>
       </div>
-      <div class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through">
+      <div
+        class="text-surface-on-surface-variant text-sm font-normal leading-tight line-through"
+      >
         <SwSharedPrice :value="price?.listPrice?.price" />
       </div>
     </div>
 
     <!-- Regular price display -->
-    <div v-else class="text-surface-on-surface text-base font-bold leading-normal">
+    <div
+      v-else
+      class="text-surface-on-surface text-base font-bold leading-normal"
+    >
       <SwSharedPrice :value="unitPrice">
         <template #beforePrice>
           <span v-if="displayFrom || displayFromVariants" class="text-sm">{{
@@ -70,7 +76,10 @@ const {
     </div>
 
     <!-- Variants from price -->
-    <div v-if="displayFromVariants" class="text-surface-on-surface text-base font-bold leading-normal">
+    <div
+      v-if="displayFromVariants"
+      class="text-surface-on-surface text-base font-bold leading-normal"
+    >
       <SwSharedPrice :value="displayFromVariants">
         <template #beforePrice>
           <span v-if="displayFromVariants" class="text-sm">{{
@@ -81,7 +90,10 @@ const {
     </div>
 
     <!-- Regulation price -->
-    <div v-if="regulationPrice" class="flex gap-2 text-surface-on-surface-variant text-sm">
+    <div
+      v-if="regulationPrice"
+      class="flex gap-2 text-surface-on-surface-variant text-sm"
+    >
       {{ translations.listing.previously }}
       <SwSharedPrice :value="regulationPrice" />
     </div>

package/app/components/SwMedia3D.vue

@@ -29,10 +29,7 @@ function focusObject() {
 </script>
 <template>
   <TresCanvas v-bind="gl">
-    <TresPerspectiveCamera
-      :args="[75, 1, 0.1, 2000]"
-      :position="[0, 0, 500]"
-    />
+    <TresPerspectiveCamera :args="[75, 1, 0.1, 2000]" :position="[0, 0, 500]" />
     <OrbitControls make-default />
     <Bounds ref="boundsRef" clip use-mounted>
       <primitive v-if="model" :object="model" @click="focusObject" />

package/app/components/SwNewsletterForm.vue

@@ -8,6 +8,7 @@ import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { email, required } from "@vuelidate/validators";
 import { defu } from "defu";
 import { computed, reactive, ref } from "vue";
+
 import { useCmsElementConfig, useNewsletter, useSalutations } from "#imports";
 
 const props = defineProps<{
@@ -236,7 +237,7 @@ const invokeSubmit = async () => {
             id="salutation"
             v-model="state.salutationId"
             name="salutation"
-            class=" border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
+            class="border-outline-outline-variant focus:border-brand-primaryappearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
           >
             <option disabled selected value="">
               {{ translations.form.salutationPlaceholder }}
@@ -261,8 +262,8 @@ const invokeSubmit = async () => {
             class="appearance-none relative block w-full px-3 py-2 border placeholder-surface-on-surface-variant text-surface-on-surface rounded-md focus:outline-none focus:ring-brand-primary focus:z-10 sm:text-sm"
             :class="[
               $v.firstName?.$error
-          ? 'border-red-600 focus:border-red-600'
-          : 'border-outline-outline-variant focus:border-brand-primary',
+                ? 'border-red-600 focus:border-red-600'
+                : 'border-outline-outline-variant focus:border-brand-primary',
             ]"
             :placeholder="translations.form.firstNamePlaceholder"
             @blur="$v.firstName?.$touch()"

package/app/components/SwProductAddToCart.vue

@@ -3,6 +3,7 @@ import { useCmsTranslations } from "@shopware/composables";
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, toRefs } from "vue";
+
 import {
   useAddToCart,
   useCartErrorParamsResolver,
@@ -72,16 +73,32 @@ const addToCartProxy = async () => {
 
 <template>
   <div class="w-full inline-flex flex-col justify-start items-start gap-8">
-    <SwQuantitySelect v-model="quantity" :min="product.minPurchase" :max="product.maxPurchase"
-      :steps="product.purchaseSteps" />
-    <SwStockInfo :availableStock="availableStock" :minPurchase="minPurchase" :deliveryTime="deliveryTime"
-      :restockTime="restockTime" />
+    <SwQuantitySelect
+      v-model="quantity"
+      :min="product.minPurchase"
+      :max="product.maxPurchase"
+      :steps="product.purchaseSteps"
+    />
+    <SwStockInfo
+      :availableStock="availableStock"
+      :minPurchase="minPurchase"
+      :deliveryTime="deliveryTime"
+      :restockTime="restockTime"
+    />
     <div class="self-stretch flex flex-col justify-start items-start gap-1">
-      <SwBaseButton variant="primary" size="medium" :disabled="!product?.available" block data-testid="add-to-cart-button"
-        @click="addToCartProxy">
+      <SwBaseButton
+        variant="primary"
+        size="medium"
+        :disabled="!product?.available"
+        block
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
         {{ translations.product.addToCart }}
       </SwBaseButton>
-      <div class="self-stretch text-surface-on-surface text-xs font-normal leading-none">
+      <div
+        class="self-stretch text-surface-on-surface text-xs font-normal leading-none"
+      >
         {{ translations.product.productNumber }}: {{ productNumber }}
       </div>
     </div>

package/app/components/SwProductCard.vue

@@ -12,10 +12,12 @@ import {
 import { getCmsTranslate } from "@shopware/helpers";
 import { defu } from "defu";
 import { computed, ref, toRef } from "vue";
+
 import {
   useAddToCart,
   useCartErrorParamsResolver,
   useCartNotification,
+  useNavigationContext,
   useNotifications,
   useProductWishlist,
   useUrlResolver,
@@ -143,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/SwProductCardDetails.vue

@@ -2,6 +2,7 @@
 import type { BoxLayout } from "@shopware/composables";
 import type { UrlRouteOutput } from "@shopware/helpers";
 import { computed } from "vue";
+
 import type { Schemas } from "#shopware";
 
 type Translations = {
@@ -28,18 +29,24 @@ const props = defineProps<{
 const isMinimalLayout = computed(() => props.layoutType === "minimal");
 </script>
 <template>
-  <div class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1">
+  <div
+    class="self-stretch p-2 flex flex-col justify-between items-start gap-4 flex-1"
+  >
     <div class="self-stretch flex flex-col justify-start items-start gap-4">
       <div class="self-stretch flex flex-col justify-start items-start gap-2">
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
-          <div v-if="productManufacturer"
-            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight">
+          <div
+            v-if="productManufacturer"
+            class="self-stretch text-surface-on-surface text-sm font-bold leading-tight"
+          >
             {{ productManufacturer }}
           </div>
 
-          <RouterLink :to="productLink"
+          <RouterLink
+            :to="productLink"
             class="self-stretch text-surface-on-surface text-2xl font-normal font-serif leading-9 overflow-hidden line-clamp-2 break-words min-h-[4.5rem]"
-            data-testid="product-box-product-name-link">
+            data-testid="product-box-product-name-link"
+          >
             {{ productName }}
           </RouterLink>
         </div>
@@ -54,13 +61,24 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
       />
 
       <!-- Price for standard layout -->
-      <SwListingProductPrice v-else :product="product" data-testid="product-box-product-price" />
+      <SwListingProductPrice
+        v-else
+        :product="product"
+        data-testid="product-box-product-price"
+      />
     </div>
 
     <!-- CTA buttons only for non-minimal layout -->
     <template v-if="!isMinimalLayout">
-      <SwBaseButton variant="primary" v-if="!fromPrice" size="medium" :disabled="!product?.available" block
-        data-testid="add-to-cart-button" @click="addToCartProxy">
+      <SwBaseButton
+        variant="primary"
+        v-if="!fromPrice"
+        size="medium"
+        :disabled="!product?.available"
+        block
+        data-testid="add-to-cart-button"
+        @click="addToCartProxy"
+      >
         {{ translations.product.addToCart }}
       </SwBaseButton>
 
@@ -71,4 +89,4 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
       </RouterLink>
     </template>
   </div>
-</template>
+</template>