@shopware/cms-base-layer 3.1.0 → 4.1.0

package/README.md

@@ -192,10 +192,18 @@ Replace standard `<img>` tags with `<NuxtImg>` to enable automatic optimization:
   :src="product.cover.media.url"
   preset="productDetail"
   :width="800"
-  :alt="product.cover.media.alt"
+  :alt="getTranslatedProperty(product.cover.media, 'alt')"
 />
 ```
 
+The media `alt` text is a translatable field, so read it through `getTranslatedProperty` rather than
+`media.alt` — the latter always holds the system language value, no matter which language the current
+request asks for. The helper is not auto-imported, so add it to the component's script block:
+
+```ts
+import { getTranslatedProperty } from "@shopware/helpers";
+```
+
 ### Supported Modifiers
 
 Shopware supports the following URL parameters for image transformation:
@@ -350,7 +358,7 @@ url("https://cdn.shopware.store/.../image.jpg?width=1000&fit=crop,smart&format=w
 
 ## LCP Image Preload
 
-This layer includes a `useLcpImagePreload` composable that automatically preloads the first image found in CMS page content. This targets the [Largest Contentful Paint (LCP)](https://web.dev/lcp/) element, which is often a hero background image or the first visible image element.
+This layer includes a `useLcpImagePreload` composable that preloads the first image found in CMS page content when enabled via `lcpImagePreload: true` in your `app.config.ts` (disabled by default). This targets the [Largest Contentful Paint (LCP)](https://web.dev/lcp/) element, which is often a hero background image or the first visible image element.
 
 ### How it works
 
@@ -364,12 +372,10 @@ The first image found is injected as a `<link rel="preload" as="image" fetchprio
 
 ### Usage
 
-The composable is already called in `CmsPage.vue`. If you override `CmsPage`, you can use it in your custom component:
+The composable is already called in `CmsPage.vue`. If you override `CmsPage`, you can use it in your custom component. It is auto-imported once your app extends this layer, so it needs no import statement:
 
 ```vue
 <script setup>
-import { useLcpImagePreload } from "@shopware/cms-base-layer/composables/useLcpImagePreload";
-
 const props = defineProps<{ content: Schemas["CmsPage"] }>();
 
 useLcpImagePreload(props.content?.sections || []);
@@ -384,7 +390,7 @@ Images are optimized to prevent the browser from downloading images larger than
 
 ### Product Card Images (`SwProductCardImage`)
 
-The `productCard` preset only defines URL modifiers (format/quality/fit). `width`/`height`/`densities`/`loading` stay on the component — NuxtImg presets don't propagate these reliably:
+The `productCard` preset only defines URL modifiers (format/quality/fit). `width`/`height` and `loading` stay on the component: in `@nuxt/image` 2.1.0 a preset carries `width`/`height` only as `modifiers`, which shape the URL rather than the rendered attributes, and `loading` is not a preset field at all. `densities` is kept alongside them for consistency, though a preset would propagate it:
 
 ```ts
 // nuxt.config.ts
@@ -448,12 +454,42 @@ The list of available blocks and elements is [here](https://developer.shopware.c
 
 The procedure is:
 
-- 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)
+- find a component in component's [list](https://developer.shopware.com/frontends/packages/cms-base-layer.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)
+- create a file with the same name and place it under a `components` directory that your `nuxt.config.ts` registers with `global: true` — CMS components are looked up with `resolveComponent`, so an override outside a global path is never found and this layer's version keeps rendering with no error. In the starter template that directory is `app/components/cms/`; because it is registered with `pathPrefix: false`, the name comes from the filename alone and subdirectory depth under it does not matter.
 
 ✅ Thanks to this, nuxt will take the component registered in your app instead of the one registered by this nuxt layer.
 
+### App blocks (`app-renderer`)
+
+Every block an app registers through the Meteor Admin SDK (`cms.registerCmsBlock`) reaches the Store API with the type `app-renderer`, so they all render through `CmsBlockAppRenderer`. By default it places the block's slots in the CSS grid the app declared, like the Storefront's fallback, in the order the app declared them.
+
+To give one app block its own markup, add a global component named after the block, `CmsBlockAppRenderer` followed by the PascalCase `appBlockName` — for a block registered as `swag-two-columns`, that is `CmsBlockAppRendererSwagTwoColumns.vue`. It receives the block as its `content` prop, and every other app block keeps the fallback:
+
+```vue
+<script setup lang="ts">
+import type { CmsBlockAppRenderer } from "@shopware/composables";
+
+const props = defineProps<{ content: CmsBlockAppRenderer }>();
+
+const { getSlotContent } = useCmsBlock(() => props.content);
+
+const text = computed(() => getSlotContent("text-0"));
+const image = computed(() => getSlotContent("image-1"));
+</script>
+
+<template>
+  <div class="grid gap-6 md:grid-cols-2">
+    <CmsGenericElement :content="text" />
+    <CmsGenericElement :content="image" />
+  </div>
+</template>
+```
+
+The slots are named `{element}-{index}` in the order the app declared them, so look them up by name rather than by position: the Store API sorts them by name, so `image-1` comes before `text-0` and `text-10` before `text-2`. The fallback restores the declared order from the index, as the Administration preview shows it. The Storefront's fallback keeps the Store API order, so a block that mixes element types can place its slots differently there.
+
+The lookup of these components lives in `CmsBlockAppRenderer` itself. If you override `CmsBlockAppRenderer`, for example to change the fallback markup, your override replaces that lookup too, and your `CmsBlockAppRenderer{AppBlockName}` components are no longer used unless it renders them. A component whose name does not match the `appBlockName` renders the fallback without a warning, as a misnamed override of any other CMS component does.
+
 ### Internal components
 
 ❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.**
@@ -485,31 +521,51 @@ 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.1.0
+### Latest changes: 4.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.
+- [#2785](https://github.com/shopware/frontends/pull/2785) [`74a477b`](https://github.com/shopware/frontends/commit/74a477bfa88e3c518d3a0336e4d301c823122ba8) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Render the CMS blocks and elements Shopware added since 6.6, which rendered nothing until now:
+
+  - `category-heading` block and `category-name` element (6.7.12), used by the default listing layouts for the category headline.
+  - `video` block and element (6.7.8) for media library videos, with every option of the Administration. New translation keys: `cms.video.playLabel`, `cms.video.pauseLabel`, `cms.video.loadError` and `cms.video.notSupported`.
+  - `app-renderer` block (6.6.1) for blocks registered through the Meteor Admin SDK. A global `CmsBlockAppRenderer{AppBlockName}` component overrides a single app block, see "App blocks" in the README.
+
+- [#2774](https://github.com/shopware/frontends/pull/2774) [`5961f55`](https://github.com/shopware/frontends/commit/5961f55b9f7cebad626cc073ae0bf857aa26f91b) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Render blocks reactively and survive a missing slot
+
+  `CmsGenericElement` now takes `content` as an optional prop and renders nothing when it is missing, instead of handing `undefined` to `resolveCmsComponent` and throwing. A block does not have to carry every slot its layout allows, so that is no longer an error path.
+
+  Every block component now passes its `content` to `useCmsBlock` as a getter and reads slot lookups through a `computed`, and `CmsSectionSidebar` does the same with `useCmsSection`. A block or section that receives new content re-resolves which slot goes where, instead of rendering the tree it was mounted with.
+
+  That stops at the element boundary. Element components still call `useCmsElementConfig(props.content)` and `useCmsElementImage(props.content)`, which capture the slot object at setup, so an element reused for a different slot of the same type keeps its old config- and media-derived values — an image its old source, a text its old configured content. Only values read straight from the prop (`props.content.data`) follow. Making those composables accept a getter is a separate change.
+
+  Both generic components also stop emitting an empty `<div>` where they used to render a placeholder: a missing slot and — in production — a block or element type with no component now render nothing. Dev mode is unchanged: it still warns and renders `CmsNoComponent`.
+
+  `CmsGenericBlock` and `CmsGenericElement` dropped their `Problem resolving component: …` branch. It sat behind `if (resolvedComponent)` and tested `isResolved`, which was always `true` there, so it never rendered; an unresolved component still logs a dev warning and renders `CmsNoComponent`.
 
 ### Patch Changes
 
-- [#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.
+- [#2778](https://github.com/shopware/frontends/pull/2778) [`0d4151c`](https://github.com/shopware/frontends/commit/0d4151ce1fb231606c33e1fd88f525baff60416d) Thanks [@grenzenlos-digital](https://github.com/grenzenlos-digital)! - Use Three.js vectors for the 3D camera and light positions.
+
+- [#2731](https://github.com/shopware/frontends/pull/2731) [`46d6daa`](https://github.com/shopware/frontends/commit/46d6daade81e3d9e443f3badfeba2ca0e2751477) Thanks [@patzick](https://github.com/patzick)! - Add an optional notification action (label + link) so add-to-cart toasts can offer a "View cart" shortcut, and keep those toasts visible a little longer.
+
+- [#2813](https://github.com/shopware/frontends/pull/2813) [`c6abd30`](https://github.com/shopware/frontends/commit/c6abd3000a9c3ad8ec4512704aa99a66ab0e671c) Thanks [@patzick](https://github.com/patzick)! - Fix a 500 on every page with a listing filter (`Cannot read properties of undefined (reading 'query')`) in projects that install the layer outside this monorepo. `useSelectedListingFilters` imported `useRoute` straight from `vue-router`, which the layer does not depend on, so it could resolve to a different `vue-router` copy than the one Nuxt's router uses and get no route back. It now uses Nuxt's `useRoute`, and `SwCategoryNavigationLink` renders `NuxtLink` instead of importing `RouterLink` from `vue-router` for the same reason. The pure filter-state helpers moved from `app/utils/useSelectedListingFilters.ts` to `app/utils/listingFilterState.ts`; their auto-imported names are unchanged.
 
-- [#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.
+- [#2785](https://github.com/shopware/frontends/pull/2785) [`74a477b`](https://github.com/shopware/frontends/commit/74a477bfa88e3c518d3a0336e4d301c823122ba8) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Fix how `CmsElementText` renders CMS text. `CmsElementProductName` and `CmsElementCategoryName` render through it and get the same fixes.
 
-  - `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.
+  - It renders only the content the Store API resolved. When that content was empty, it fell back to the raw `config.content` value, which the backend sanitizer never saw. Static content that the sanitizer removed completely, such as a lone `<script>`, came back unsanitized, and a `{{ … }}` placeholder that resolved to nothing was shown as it was typed. Both now render nothing, as in the Storefront. An element built by hand without `data` still renders its static config.
+  - It no longer shows a mapping path. The backend answers a mapping to a value that is not a string with the path itself, for example `category.customFields`. That is now treated as unresolved.
+  - It follows a new `content`. It read its content and config once, when it was set up, so a component that received a new `content` kept the old text.
+  - HTML attributes other than `class`, `style` and `align` now reach the page, for example `id`, `title` and `colspan`. They were passed in the Vue 2 shape, so server renders dropped them and client renders added `attrs="[object Object]"`. That also made the server and client markup differ on hydration.
 
-- [#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.
+- [#2677](https://github.com/shopware/frontends/pull/2677) [`62c8d4c`](https://github.com/shopware/frontends/commit/62c8d4c86130c076b8391271593372eac83380e3) Thanks [@mkucmus](https://github.com/mkucmus)! - Drive the product listing from the URL. Browser back and forward now update the products, and sorting no longer fires a duplicate request.
 
-- [#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.
+- [#2677](https://github.com/shopware/frontends/pull/2677) [`62c8d4c`](https://github.com/shopware/frontends/commit/62c8d4c86130c076b8391271593372eac83380e3) Thanks [@mkucmus](https://github.com/mkucmus)! - Write listing filters to the URL before fetching, so a slow or failed request no longer drops the selection. Expose the product id on the add-to-cart button.
 
-- [#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.
+- [#2812](https://github.com/shopware/frontends/pull/2812) [`09d8b0f`](https://github.com/shopware/frontends/commit/09d8b0fea5489e973ef4f1f49d09e72372ab9ecf) Thanks [@mkucmus](https://github.com/mkucmus)! - Show "Details" instead of "Add to cart" for variant parents, and show success only when the product is in the cart. A product with a single price tier now shows "Add to cart", like in the Twig storefront.
 
-- [#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.
+  New translation key: `product.notAddedToCart`. Variant parents now use `product.details`. Add both to your locale files.
 
-- 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
+- Updated dependencies [[`44ece9d`](https://github.com/shopware/frontends/commit/44ece9dac2e4d0248c2270f7eff496c258632f5b), [`46d6daa`](https://github.com/shopware/frontends/commit/46d6daade81e3d9e443f3badfeba2ca0e2751477), [`7dbca8b`](https://github.com/shopware/frontends/commit/7dbca8bf8bca1225b365bc03e4dbc07d3764c2e1), [`74a477b`](https://github.com/shopware/frontends/commit/74a477bfa88e3c518d3a0336e4d301c823122ba8), [`74a477b`](https://github.com/shopware/frontends/commit/74a477bfa88e3c518d3a0336e4d301c823122ba8), [`5961f55`](https://github.com/shopware/frontends/commit/5961f55b9f7cebad626cc073ae0bf857aa26f91b), [`c78188a`](https://github.com/shopware/frontends/commit/c78188ac6c95ae19b070f5ea3361a60f21dff281), [`0df4c17`](https://github.com/shopware/frontends/commit/0df4c17b18ec38fc4d0c33f1cb6396f8f532a65d), [`4b43e64`](https://github.com/shopware/frontends/commit/4b43e64a8d78be6eca1f8d9c24140e046193af41)]:
+  - @shopware/api-client@1.7.0
+  - @shopware/composables@1.14.0

package/app/app.config.ts

@@ -1,6 +1,6 @@
-import { defineAppConfig } from "#imports";
+import type { AppConfigInput } from "nuxt/schema";
 
-export default defineAppConfig({
+export default {
   imagePlaceholder: {
     color: "#543B95",
   },
@@ -16,4 +16,4 @@ export default defineAppConfig({
     default: "(max-width: 768px) 50vw, 25vw",
   },
   unocssRuntime: true,
-});
+} satisfies AppConfigInput;

package/app/assets/css/rich-text.css

@@ -0,0 +1,80 @@
+.cms-element-text {
+  word-break: break-word;
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: var(--rte-heading-mb, 10px);
+    font-weight: var(--rte-heading-weight, 600);
+  }
+
+  :where(h1) {
+    font-size: var(--rte-h1-size, 2.25rem);
+    line-height: var(--rte-h1-line, 2.5rem);
+  }
+
+  :where(h2) {
+    font-size: var(--rte-h2-size, 1.75rem);
+    line-height: var(--rte-h2-line, 2rem);
+  }
+
+  :where(h3) {
+    font-size: var(--rte-h3-size, 1.25rem);
+    line-height: var(--rte-h3-line, 1.5rem);
+  }
+
+  :where(h4, h5, h6) {
+    font-size: var(--rte-h4-size, 1.125rem);
+    line-height: var(--rte-h4-line, 1.5rem);
+  }
+
+  :where(p, blockquote, pre) {
+    margin-bottom: var(--rte-flow, 1rem);
+  }
+
+  :where(ol, ul, dl) {
+    list-style-type: disc;
+    padding-left: var(--rte-list-indent, 40px);
+    margin-top: 0;
+    margin-bottom: var(--rte-flow, 1rem);
+  }
+
+  :where(ol) {
+    list-style-type: decimal;
+  }
+
+  :where(img, iframe, video) {
+    max-width: 100%;
+  }
+
+  :where(img) {
+    height: auto;
+  }
+
+  :where(table) {
+    width: 100%;
+    margin-bottom: var(--rte-flow, 1rem);
+    border-collapse: collapse;
+  }
+
+  :where(th, td) {
+    padding: var(--rte-cell-padding, 0.5rem 0.75rem);
+    border: 1px solid var(--rte-border-color, #e5e7eb);
+  }
+
+  :where(th, thead td) {
+    text-align: left;
+    font-weight: var(--rte-heading-weight, 600);
+  }
+
+  :where(hr) {
+    margin: var(--rte-flow, 1rem) 0;
+    border-top: 1px solid var(--rte-border-color, #e5e7eb);
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  :where(.sw-text-editor-table__col-selector) {
+    display: none;
+  }
+}

package/app/components/SwCategoryNavigationLink.vue

@@ -6,7 +6,6 @@ import {
   urlIsAbsolute,
 } from "@shopware/helpers";
 import { computed } from "vue";
-import { RouterLink } from "vue-router";
 
 import { useUrlResolver } from "#imports";
 import type { Schemas } from "#shopware";
@@ -48,7 +47,7 @@ const hasChildren = computed(() => {
       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
+        <NuxtLink
           v-if="!urlIsAbsolute(url.path)"
           :to="url"
           :class="[
@@ -56,7 +55,7 @@ const hasChildren = computed(() => {
           ]"
         >
           {{ getTranslatedProperty(navigationElement, "name") }}
-        </RouterLink>
+        </NuxtLink>
         <a
           v-else
           :href="url.path"
@@ -93,7 +92,7 @@ const hasChildren = computed(() => {
       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
+        <NuxtLink
           v-if="!urlIsAbsolute(url.path)"
           :to="url"
           :class="[
@@ -102,7 +101,7 @@ const hasChildren = computed(() => {
           ]"
         >
           {{ getTranslatedProperty(navigationElement, "name") }}
-        </RouterLink>
+        </NuxtLink>
         <a
           v-else
           :href="url.path"

package/app/components/SwContactForm.vue

@@ -3,6 +3,7 @@ import { ApiClientError } from "@shopware/api-client";
 import type { ApiError } from "@shopware/api-client";
 import type { CmsElementForm } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
 import { useVuelidate } from "@vuelidate/core";
 import { email, minLength, required } from "@vuelidate/validators";
 import { defu } from "defu";
@@ -189,7 +190,7 @@ const invokeSubmit = async () => {
               :key="salutation.id"
               :value="salutation.id"
             >
-              {{ salutation.displayName }}
+              {{ getTranslatedProperty(salutation, "displayName") }}
             </option>
           </select>
         </div>

package/app/components/SwFilterChips.vue

@@ -6,6 +6,9 @@ import type { Schemas } from "#shopware";
 type FilterState = {
   manufacturer: Set<string>;
   properties: Set<string>;
+  // Optional: consumers building their own filter-state object predate this
+  // field, so a missing one must render no category chips, not throw.
+  categories?: Set<string>;
   "min-price": number | undefined;
   "max-price": number | undefined;
   rating: number | undefined;
@@ -70,13 +73,14 @@ const activeChips = computed(() => {
   }
 
   // Add manufacturer filters
-  const manufacturers = Array.from(props.filters.manufacturer);
-  for (const manufacturerId of manufacturers) {
-    const filter = props.availableFilters.find(
-      (f) => f.code === "manufacturer",
-    );
-    if (filter && "entities" in filter && filter.entities) {
-      const entity = filter.entities.find((e) => e.id === manufacturerId);
+  const manufacturerFilter = props.availableFilters.find(
+    (f) => f.code === "manufacturer",
+  );
+  if (manufacturerFilter?.entities) {
+    for (const manufacturerId of props.filters.manufacturer) {
+      const entity = manufacturerFilter.entities.find(
+        (e) => e.id === manufacturerId,
+      );
       const name = getTranslatedName(entity);
       if (name) {
         chips.push({
@@ -88,6 +92,24 @@ const activeChips = computed(() => {
     }
   }
 
+  // Add category filters
+  const categoryFilter = props.availableFilters.find(
+    (f) => f.code === "categories",
+  );
+  if (categoryFilter?.entities) {
+    for (const categoryId of props.filters.categories ?? []) {
+      const entity = categoryFilter.entities.find((e) => e.id === categoryId);
+      const name = getTranslatedName(entity);
+      if (name) {
+        chips.push({
+          label: name,
+          code: "categories",
+          value: categoryId,
+        });
+      }
+    }
+  }
+
   // Add price filters
   if (props.filters["min-price"] || props.filters["max-price"]) {
     const min = props.filters["min-price"] || 0;

package/app/components/SwMedia3D.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Bounds, OrbitControls, useGLTF } from "@tresjs/cientos";
 import { TresCanvas } from "@tresjs/core";
-import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from "three";
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace, Vector3 } from "three";
 import { computed, shallowRef } from "vue";
 
 const props = defineProps<{
@@ -20,6 +20,8 @@ const gl = {
 
 const { state } = await useGLTF(props.src);
 const model = computed(() => state.value?.scene);
+const cameraPosition = new Vector3(0, 0, 500);
+const lightPosition = new Vector3(3, 3, 3);
 
 const boundsRef = shallowRef();
 
@@ -29,12 +31,15 @@ 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="cameraPosition"
+    />
     <OrbitControls make-default />
     <Bounds ref="boundsRef" clip use-mounted>
       <primitive v-if="model" :object="model" @click="focusObject" />
     </Bounds>
-    <TresDirectionalLight :position="[3, 3, 3]" :intensity="1" />
+    <TresDirectionalLight :position="lightPosition" :intensity="1" />
     <TresAmbientLight :intensity="2" />
   </TresCanvas>
 </template>

package/app/components/SwNewsletterForm.vue

@@ -3,6 +3,7 @@ import { ApiClientError } from "@shopware/api-client";
 import type { ApiError } from "@shopware/api-client";
 import type { CmsElementForm } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
+import { getTranslatedProperty } from "@shopware/helpers";
 import { useVuelidate } from "@vuelidate/core";
 import type { ValidationRuleWithoutParams } from "@vuelidate/core";
 import { email, required } from "@vuelidate/validators";
@@ -247,7 +248,7 @@ const invokeSubmit = async () => {
               :key="salutation.id"
               :value="salutation.id"
             >
-              {{ salutation.displayName }}
+              {{ getTranslatedProperty(salutation, "displayName") }}
             </option>
           </select>
         </div>

package/app/components/SwProductAddToCart.vue

@@ -22,6 +22,8 @@ const props = defineProps<{
 type Translations = {
   product: {
     addedToCart: string;
+    notAddedToCart: string;
+    viewCart: string;
     qty: string;
     addToCart: string;
     productNumber: string;
@@ -34,6 +36,8 @@ type Translations = {
 let translations: Translations = {
   product: {
     addedToCart: "has been added to cart.",
+    notAddedToCart: "could not be added to cart.",
+    viewCart: "View cart",
     qty: "Qty",
     addToCart: "Add to cart",
     productNumber: "Product number",
@@ -56,7 +60,7 @@ const restockTime = computed(() => product.value?.restockTime);
 const productNumber = computed(() => product.value?.productNumber ?? "");
 
 const addToCartProxy = async () => {
-  await addToCart();
+  const cart = await addToCart();
   const errors = getErrorsCodes();
   for (const element of errors) {
     const { messageKey, params } = resolveCartError(element);
@@ -64,10 +68,28 @@ const addToCartProxy = async () => {
       pushError(getCmsTranslate(translations.errors[messageKey], params));
   }
 
-  if (!errors.length)
-    pushSuccess(
-      `${props.product?.translated.name} ${translations.product.addedToCart}`,
+  if (errors.length) return;
+
+  // Shopware drops some items without a cart error, e.g. a variant parent.
+  const added =
+    cart?.lineItems?.some((item) => item.referencedId === product.value.id) ??
+    true;
+  if (!added) {
+    pushError(
+      `${props.product?.translated.name} ${translations.product.notAddedToCart}`,
     );
+    return;
+  }
+
+  pushSuccess(
+    `${props.product?.translated.name} ${translations.product.addedToCart}`,
+    {
+      action: {
+        label: translations.product.viewCart,
+        to: "/checkout/cart",
+      },
+    },
+  );
 };
 </script>
 
@@ -92,6 +114,7 @@ const addToCartProxy = async () => {
         :disabled="!product?.available"
         block
         data-testid="add-to-cart-button"
+        :data-product-id="product?.id"
         @click="addToCartProxy"
       >
         {{ translations.product.addToCart }}

package/app/components/SwProductCard.vue

@@ -47,6 +47,8 @@ type Translations = {
     reason: string;
     cannotAddToWishlist: string;
     addedToCart: string;
+    notAddedToCart: string;
+    viewCart: string;
     addToCart: string;
     details: string;
     badges: {
@@ -67,6 +69,8 @@ let translations: Translations = {
     reason: "Reason",
     cannotAddToWishlist: "cannot be added to wishlist.",
     addedToCart: "has been added to cart.",
+    notAddedToCart: "could not be added to cart.",
+    viewCart: "View cart",
     addToCart: "Add to cart",
     details: "Details",
     badges: {
@@ -125,7 +129,7 @@ const toggleWishlistProduct = async () => {
 };
 
 const addToCartProxy = async () => {
-  await addToCart();
+  const cart = await addToCart();
   const errors = getErrorsCodes();
   for (const element of errors) {
     const { messageKey, params } = resolveCartError(element);
@@ -133,10 +137,28 @@ const addToCartProxy = async () => {
       pushError(getCmsTranslate(translations.errors[messageKey], params));
   }
 
-  if (!errors.length)
-    pushSuccess(
-      `${product?.value.translated.name} ${translations.product.addedToCart}`,
+  if (errors.length) return;
+
+  // Shopware drops some items without a cart error, e.g. a variant parent.
+  const added =
+    cart?.lineItems?.some((item) => item.referencedId === product.value.id) ??
+    true;
+  if (!added) {
+    pushError(
+      `${product?.value.translated.name} ${translations.product.notAddedToCart}`,
     );
+    return;
+  }
+
+  pushSuccess(
+    `${product?.value.translated.name} ${translations.product.addedToCart}`,
+    {
+      action: {
+        label: translations.product.viewCart,
+        to: "/checkout/cart",
+      },
+    },
+  );
 };
 
 const fromPrice = getProductFromPrice(product.value);

package/app/components/SwProductCardDetails.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { BoxLayout } from "@shopware/composables";
+import { useProductPrice } from "@shopware/composables";
 import type { UrlRouteOutput } from "@shopware/helpers";
-import { computed } from "vue";
+import { computed, toRef } from "vue";
 
 import type { Schemas } from "#shopware";
 
+import { shouldShowBuyButton } from "../helpers/product/shouldShowBuyButton";
+
 type Translations = {
   product: {
     addToCart: string;
@@ -27,6 +30,10 @@ const props = defineProps<{
 }>();
 
 const isMinimalLayout = computed(() => props.layoutType === "minimal");
+const { displayFrom } = useProductPrice(toRef(props, "product"));
+const showBuyButton = computed(() =>
+  shouldShowBuyButton(props.product, displayFrom.value),
+);
 </script>
 <template>
   <div
@@ -72,7 +79,7 @@ const isMinimalLayout = computed(() => props.layoutType === "minimal");
     <template v-if="!isMinimalLayout">
       <SwBaseButton
         variant="primary"
-        v-if="!fromPrice"
+        v-if="showBuyButton"
         size="medium"
         :disabled="!product?.available"
         block

package/app/components/SwProductCardImage.vue

@@ -2,6 +2,7 @@
 import {
   type UrlRouteOutput,
   getSmallestThumbnailUrl,
+  getTranslatedProperty,
   isProductOnSale,
   isProductTopSeller,
 } from "@shopware/helpers";
@@ -37,7 +38,10 @@ const coverSrcPath = computed(() => {
 });
 
 const coverAlt = computed(() => {
-  return props.product?.cover?.media?.alt || props.product?.translated?.name;
+  return (
+    getTranslatedProperty(props.product?.cover?.media, "alt") ||
+    props.product?.translated?.name
+  );
 });
 
 const isOnSale = computed(() => isProductOnSale(props.product));