@shopware/cms-base-layer 4.0.0 → 4.1.0

package/README.md

@@ -460,6 +460,36 @@ The procedure is:
 
 ✅ 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.**
@@ -491,66 +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: 4.0.0
+### Latest changes: 4.1.0
 
-### Major Changes
+### Minor Changes
 
-- [#2609](https://github.com/shopware/frontends/pull/2609) [`2dc86da`](https://github.com/shopware/frontends/commit/2dc86da2532e986ebdadd06a922e68403414a0ff) Thanks [@mkucmus](https://github.com/mkucmus)! - Make the package a plain Nuxt layer.
+- [#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:
 
-  **Breaking:** the package now declares an `exports` map, so only the layer entry point
-  is importable. Deep imports such as
-  `@shopware/cms-base-layer/app/components/SwProductCard.vue` no longer resolve. Use the
-  auto-registered global components instead, which is what extending the layer gives you.
+  - `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.
 
-  **Breaking:** the leftover Nuxt module is gone, so `index.cjs` and the `dist` build are
-  no longer published. The module registered a component folder that moved to `app/` a
-  while ago, so it could not work any more. Consume this package with `extends`, which
-  resolves `nuxt.config.ts`:
+- [#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
 
-  ```ts
-  export default defineNuxtConfig({
-    extends: ["@shopware/cms-base-layer"],
-  });
-  ```
+  `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.
 
-  Other changes:
+  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.
 
-  - Dropped the `build` and `dev` scripts and the `unbuild` dev dependency. There is
-    nothing left to bundle.
-  - Fixed `files`. It listed `helpers` and `app.config.ts`, which do not exist at the
-    package root, and shipped the dead `dist` and `index.cjs`.
-  - Deleted `components.d.ts`. It typed two components at paths that moved to
-    `app/components/public/cms/`, and no tsconfig referenced the file.
-  - Removed two vitest aliases that pointed at files which do not exist.
-  - Removed the `check-colors` script. It read `uno.config.ts` from this package, which
-    moved to `@shopware/unocss-design-tokens-layer`, so it always found zero colors. It
-    also relied on `tsx` without declaring it.
+  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.
 
-### Minor Changes
+  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`.
 
-- [#2574](https://github.com/shopware/frontends/pull/2574) [`2ddf156`](https://github.com/shopware/frontends/commit/2ddf156805b2941fe2069e78453fb3c4eb6d44ac) Thanks [@mkucmus](https://github.com/mkucmus)! - `SwProductListingFilters` and `SwProductListingFiltersHorizontal` render a new `SwFilterCategories` checkbox filter when the listing response contains the category aggregations from `getCategoryFilterAggregations()`. The selection is kept in the `categories` URL param and applied as a criteria `post-filter`. Both are search listings only (`listing-type="productSearchListing"`); on any other listing the category filter is not rendered, because the selection would neither reach the URL nor the criteria. Listings without these aggregations are unaffected.
+  `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
 
-- [#2645](https://github.com/shopware/frontends/pull/2645) [`7a7ce3e`](https://github.com/shopware/frontends/commit/7a7ce3e5649e7ab84f7e547ce1ebcd9413117dde) Thanks [@mkucmus](https://github.com/mkucmus)! - Ship `component-dirs.json` in the published package. `nuxt.config.ts` imports it at load time, but it was missing from `files`, so the layer failed to load when installed from the registry.
+- [#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.
 
-- [#2660](https://github.com/shopware/frontends/pull/2660) [`8913956`](https://github.com/shopware/frontends/commit/89139563924163e57cafdd9770fe603f2dbd8cba) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Read translatable entity fields through their `translated` object instead of the untranslated entity root, so they follow the language of the current request instead of rendering the system language. Affected components: `SwContactForm` and `SwNewsletterForm` (salutation `displayName`), `SwStockInfo` (delivery time `name`), `SwVariantConfigurator` (property group `name` — the option values below it already used `translated`), `CmsElementBuyBox` (unit `name`), `CmsElementCrossSelling` (cross selling `name`), `CmsElementProductDescriptionReviews` (category `name`), `SwProductCardImage` and `CmsElementImageGallery` (media `alt`).
+- [#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.
 
-  All of them now go through `getTranslatedProperty()` from `@shopware/helpers`, which falls back to the root property when `translated` is missing — so the rendered value only ever changes on storefronts whose language differs from the system language.
+- [#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.
 
-- [#2606](https://github.com/shopware/frontends/pull/2606) [`1c9a604`](https://github.com/shopware/frontends/commit/1c9a604e05c0fa1b27708a5338cd5690a0ff5c67) Thanks [@mkucmus](https://github.com/mkucmus)! - Stop leaking internal types into the layer's public type surface.
+  - 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.
 
-  - `index.d.ts` now only augments the app config. It no longer re-exports `@shopware/composables` and `./.nuxt/imports`.
-  - The `#imports` shim moved to a private `types/imports.d.ts`, which is not published.
-  - `app.config` exports a plain object with `satisfies AppConfigInput` instead of calling `defineAppConfig`. No runtime change.
+- [#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.
 
-  This fixes `Cannot find name 'ref'` and similar errors in the shared and node contexts when a project uses the Nuxt 4 project-references `tsconfig.json`.
+- [#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.
 
-- [#2601](https://github.com/shopware/frontends/pull/2601) [`e64d2f9`](https://github.com/shopware/frontends/commit/e64d2f9c13a99054d7e56e4b7ec2f1f23f9768b7) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Typography for CMS-authored HTML is now scoped to a `cms-element-text` class and ships from the layer as `app/assets/css/rich-text.css`, with overflow guards for long strings, media, `pre` and tables. Headings and lists in your own markup that had no explicit size or `list-*` class were relying on the removed global rules and will change.
+- [#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.
 
-- [#2663](https://github.com/shopware/frontends/pull/2663) [`7020545`](https://github.com/shopware/frontends/commit/70205458cb9357a068029d0aaef41898ab94b354) Thanks [@mkucmus](https://github.com/mkucmus)! - A linked CMS image always has an accessible name now. `CmsElementImage` names the link with the element's `ariaLabel`, then the media title, then a generic fallback translatable through `cms.image.linkWithoutLabel`. A decorative image skips the media title.
+  New translation key: `product.notAddedToCart`. Variant parents now use `product.details`. Add both to your locale files.
 
-- Updated dependencies [[`2ddf156`](https://github.com/shopware/frontends/commit/2ddf156805b2941fe2069e78453fb3c4eb6d44ac), [`204c8f4`](https://github.com/shopware/frontends/commit/204c8f45f737e724db6d00b80c5faef8ddb77cb4), [`7020545`](https://github.com/shopware/frontends/commit/70205458cb9357a068029d0aaef41898ab94b354), [`183c183`](https://github.com/shopware/frontends/commit/183c183f905486c27fa770fd0f4cd9993e86c20e), [`458494e`](https://github.com/shopware/frontends/commit/458494e8bd2be88d4fbf161636a109c8f4efc443), [`183c183`](https://github.com/shopware/frontends/commit/183c183f905486c27fa770fd0f4cd9993e86c20e), [`183c183`](https://github.com/shopware/frontends/commit/183c183f905486c27fa770fd0f4cd9993e86c20e), [`8913956`](https://github.com/shopware/frontends/commit/89139563924163e57cafdd9770fe603f2dbd8cba), [`458494e`](https://github.com/shopware/frontends/commit/458494e8bd2be88d4fbf161636a109c8f4efc443)]:
-  - @shopware/helpers@1.8.0
-  - @shopware/composables@1.13.0
-  - @shopware/api-client@1.6.0
+- 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/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/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/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/SwProductListingFilter.vue

@@ -72,7 +72,7 @@ const handleSelectValue = ({
 };
 </script>
 <template>
-  <div>
+  <div :data-testid="`listing-filter-${filter.code}`">
     <component
       :is="filterComponent"
       :filter="filter"

package/app/components/SwProductListingFilters.vue

@@ -4,23 +4,9 @@ import type {
   CmsElementSidebarFilter,
 } from "@shopware/composables";
 import { useCmsTranslations } from "@shopware/composables";
-import { getCategoryFilterPostFilter } from "@shopware/helpers";
 import { defu } from "defu";
-import { computed } from "vue";
-import type { ComputedRef } from "vue";
-import type { LocationQueryRaw } from "vue-router";
 
-import {
-  firstQueryValue,
-  getVisibleListingFilters,
-  toNumber,
-  useCategoryListing,
-  useProductSearchListing,
-  useRoute,
-  useRouter,
-  useSelectedListingFilters,
-} from "#imports";
-import type { Schemas, operations } from "#shopware";
+import { useListingFilters } from "#imports";
 
 const props = defineProps<{
   content?: CmsElementProductListing | CmsElementSidebarFilter;
@@ -47,216 +33,18 @@ let translations: Translations = {
 
 translations = defu(useCmsTranslations(), translations) as Translations;
 
-const route = useRoute();
-const router = useRouter();
-
 const {
-  changeCurrentSortingOrder,
-  getCurrentFilters,
+  currentSortingOrder,
   getCurrentSortingOrder,
-  getInitialFilters,
   getSortingOrders,
-  search,
-} = isProductSearch ? useProductSearchListing() : useCategoryListing();
-
-const sidebarSelectedFilters = useSelectedListingFilters();
-
-// Only the filters this listing can actually apply - the category filter is
-// search-only, matching the post-filter and URL gates below.
-const visibleFilters = computed(() =>
-  getVisibleListingFilters(getInitialFilters.value, { isProductSearch }),
-);
-
-const showResetFiltersButton = computed<boolean>(() => {
-  if (
-    sidebarSelectedFilters.manufacturer.size !== 0 ||
-    sidebarSelectedFilters.properties.size !== 0 ||
-    (isProductSearch && sidebarSelectedFilters.categories.size !== 0) ||
-    sidebarSelectedFilters["max-price"] ||
-    sidebarSelectedFilters["min-price"] ||
-    sidebarSelectedFilters.rating ||
-    sidebarSelectedFilters["shipping-free"]
-  ) {
-    return true;
-  }
-
-  return false;
-});
-
-const searchCriteriaForRequest: ComputedRef<Schemas["ProductListingCriteria"]> =
-  computed(() => ({
-    manufacturer: [
-      ...(sidebarSelectedFilters.manufacturer as Set<string>),
-    ]?.join("|"),
-    properties: [...(sidebarSelectedFilters.properties as Set<string>)]?.join(
-      "|",
-    ),
-    // Category selection travels as a post-filter so the category
-    // aggregation itself is not reduced (faceted behavior). Search pages
-    // only: category pages never offer this filter, so a stale
-    // ?categories= param must not silently narrow them.
-    ...(isProductSearch && sidebarSelectedFilters.categories.size > 0
-      ? {
-          "post-filter": [
-            getCategoryFilterPostFilter([
-              ...(sidebarSelectedFilters.categories as Set<string>),
-            ]),
-          ],
-        }
-      : {}),
-    "min-price": sidebarSelectedFilters["min-price"] as number,
-    "max-price": sidebarSelectedFilters["max-price"] as number,
-    order: getCurrentSortingOrder.value as string,
-    "shipping-free": sidebarSelectedFilters["shipping-free"] as boolean,
-    rating: sidebarSelectedFilters.rating as number,
-    search: isProductSearch ? (firstQueryValue(route.query.search) ?? "") : "",
-    limit: toNumber(firstQueryValue(route.query.limit)) ?? 15,
-  }));
-
-const handleFilterChange = async (event: {
-  code: string;
-  value: string | number | boolean;
-}) => {
-  try {
-    const { code, value } = event;
-
-    if (
-      code === "manufacturer" ||
-      code === "properties" ||
-      code === "categories"
-    ) {
-      const filterSet = sidebarSelectedFilters[code];
-      const stringValue = String(value);
-
-      if (filterSet.has(stringValue)) {
-        filterSet.delete(stringValue);
-      } else {
-        filterSet.add(stringValue);
-      }
-    } else if (code === "min-price" || code === "max-price") {
-      sidebarSelectedFilters[code] =
-        typeof value === "number" ? value : Number(value);
-    } else if (code === "rating") {
-      sidebarSelectedFilters.rating = Number(value);
-    } else if (code === "shipping-free") {
-      sidebarSelectedFilters["shipping-free"] = Boolean(value);
-    }
-
-    await executeSearch();
-  } catch (error) {
-    console.error("Filter update failed:", error);
-  }
-};
-
-const executeSearch = async () => {
-  try {
-    // 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;
-    const query: Record<string, unknown> = {};
-
-    if (criteria.manufacturer) query.manufacturer = criteria.manufacturer;
-    if (criteria.properties) query.properties = criteria.properties;
-    if (isProductSearch && sidebarSelectedFilters.categories.size > 0)
-      query.categories = [
-        ...(sidebarSelectedFilters.categories as Set<string>),
-      ].join("|");
-    if (criteria["min-price"]) query["min-price"] = criteria["min-price"];
-    if (criteria["max-price"]) query["max-price"] = criteria["max-price"];
-    if (criteria.rating) query.rating = criteria.rating;
-    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,
-    });
-  } catch (error) {
-    console.error("Search execution failed:", error);
-  }
-};
-
-const clearFilters = () => {
-  (sidebarSelectedFilters.manufacturer as Set<string>).clear();
-  (sidebarSelectedFilters.properties as Set<string>).clear();
-  (sidebarSelectedFilters.categories as Set<string>).clear();
-  sidebarSelectedFilters["min-price"] = undefined;
-  sidebarSelectedFilters["max-price"] = undefined;
-  sidebarSelectedFilters.rating = undefined;
-  sidebarSelectedFilters["shipping-free"] = undefined;
-};
-
-const currentSortingOrder = computed({
-  get: (): string => getCurrentSortingOrder.value || "",
-  set: async (order: string): Promise<void> => {
-    try {
-      await router.push({
-        query: {
-          ...route.query,
-          order,
-        },
-      });
-
-      // 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);
-    }
-  },
-});
-
-async function invokeCleanFilters() {
-  try {
-    clearFilters();
-    await executeSearch();
-  } catch (error) {
-    console.error("Clear filters failed:", error);
-  }
-}
-
-const handleSortChange = (sortKey: string) => {
-  currentSortingOrder.value = sortKey;
-};
-
-const handleRemoveFilterChip = async (chip: {
-  code: string;
-  value: string | number;
-}) => {
-  if (
-    chip.code === "properties" ||
-    chip.code === "manufacturer" ||
-    chip.code === "categories"
-  ) {
-    const filterSet = sidebarSelectedFilters[chip.code] as Set<string>;
-    filterSet.delete(String(chip.value));
-  } else if (chip.code === "price") {
-    sidebarSelectedFilters["min-price"] = undefined;
-    sidebarSelectedFilters["max-price"] = undefined;
-  } else if (chip.code === "rating") {
-    sidebarSelectedFilters.rating = undefined;
-  } else if (chip.code === "shipping-free") {
-    sidebarSelectedFilters["shipping-free"] = undefined;
-  }
-
-  await executeSearch();
-};
+  handleFilterChange,
+  handleRemoveFilterChip,
+  handleSortChange,
+  invokeCleanFilters,
+  selectedFilters: sidebarSelectedFilters,
+  showResetFiltersButton,
+  visibleFilters,
+} = useListingFilters(isProductSearch);
 </script>
 <template>
   <div>