@shopware/cms-base-layer 1.5.1 → 2.1.0

package/README.md

@@ -87,15 +87,377 @@ Since all CMS components are registered in your Nuxt application, you can now st
 
 See a [short guide](https://frontends.shopware.com/getting-started/cms/content-pages.html#use-the-cms-base-package) how to use `cms-base` package in your project based on Nuxt v3.
 
+## Default styling
+
+The components are styled using [Tailwind CSS](https://tailwindcss.com/) utility classes, so you can use them in your project without any additional configuration if your project uses Tailwind CSS. 
+
+This layer provides a default Tailwind CSS configuration (see [uno.config.ts](./uno.config.ts) for details), which is used to style the components. If you want to customize the styling, you can do so by creating your own Tailwind CSS configuration file and extending the default one:
+
+```ts [nuxt.config.ts]
+// nuxt.config.ts
+export default defineNuxtConfig({
+  // ...
+  unocss: {
+    nuxtLayers: true, // enable Nuxt layers for UnoCSS
+  },
+})
+```
+
+```ts [uno.config.ts]
+// uno.config.ts
+import config from './.nuxt/uno.config.mjs'
+
+export default config
+```
+
+Thanks to this, you can **use the default configuration** provided by this layer, or **extend/overwrite** it with your own customizations in your end-project:
+
+```ts [uno.config.ts]
+// uno.config.ts
+import { mergeConfigs } from '@unocss/core'
+import config from './.nuxt/uno.config.mjs'
+
+export default mergeConfigs([config, {
+  theme: {
+    colors: {
+      primary: '#ff3e00',
+      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.
+
+## 🖼️ Image Optimization
+
+This layer includes [Nuxt Image](https://image.nuxt.com/) configuration optimized for Shopware 6 instances, with a custom provider that maps Nuxt Image modifiers to Shopware's query parameters (`width`, `height`, `quality`, `format`, `fit`).
+
+> **Note for Cloud (SaaS) Users:** Image optimization and all modifiers used in the Nuxt Image module are handled automatically by Shopware Cloud infrastructure powered by [Fastly CDN](https://developer.shopware.com/docs/products/paas/shopware/cdn/). No additional configuration or plugins are required - simply use `<NuxtImg>` and all transformations (format conversion, quality adjustment, responsive sizing) work out of the box through Fastly's Image Optimizer.
+
+### Features
+
+- ✅ Automatic WebP/AVIF format conversion
+- ✅ Responsive image sizing based on viewport
+- ✅ Lazy loading support
+- ✅ Quality optimization
+- ✅ Multiple image presets for common use cases
+- ✅ Works with Shopware Cloud (SaaS) and self-hosted instances
+
+### Configuration
+
+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
+
+Replace standard `<img>` tags with `<NuxtImg>` to enable automatic optimization:
+
+```vue
+<!-- Using presets -->
+<NuxtImg
+  src="https://cdn.shopware.store/media/path/to/image.jpg"
+  preset="productCard"
+  :width="400"
+  alt="Product"
+  loading="lazy"
+/>
+
+<!-- Custom modifiers -->
+<NuxtImg
+  src="https://cdn.shopware.store/media/path/to/image.jpg"
+  :width="800"
+  :height="600"
+  format="webp"
+  :quality="85"
+  fit="cover"
+  alt="Custom image"
+/>
+
+<!-- Using with dynamic Shopware media URLs -->
+<NuxtImg
+  :src="product.cover.media.url"
+  preset="productDetail"
+  :width="800"
+  :alt="product.cover.media.alt"
+/>
+```
+
+### Supported Modifiers
+
+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* |
+
+*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`
+- `format` modifier → `?format=webp`
+- `fit` modifier → `?fit=cover`
+
+When you use `<NuxtImg>`, the custom provider automatically converts your component props into the correct URL format for Shopware. The images are then processed on-the-fly by Shopware Cloud (SaaS) infrastructure or your configured thumbnail processor.
+
+#### 🔍 Understanding Image Processing in Shopware
+
+**Built-in Thumbnail Generation:**
+Shopware has native thumbnail generation (using GD2 or ImageMagick) that creates predefined sizes (400x400, 800x800, 1920x1920) during image upload. These thumbnails are generated once and stored on your server.
+
+**Dynamic On-the-Fly Transformations:**
+For dynamic image transformations via query parameters (like `?width=800&format=webp`), you need **remote thumbnail generation** configured:
+
+- **Shopware Cloud (SaaS)**: ✅ Fully supported out-of-the-box via Fastly CDN - all query parameters work automatically
+- **Self-hosted**: ⚠️ Requires additional setup:
+  - Install a plugin like [FroshPlatformThumbnailProcessor](https://github.com/FriendsOfShopware/FroshPlatformThumbnailProcessor) for on-the-fly processing, OR
+  - Configure external middleware (Thumbor, Sharp, imgproxy) via [remote thumbnail generation](https://developer.shopware.com/docs/guides/plugins/plugins/content/media/remote-thumbnail-generation.html)
+
+**Without remote thumbnail generation configured**, query parameters will be ignored and only the predefined static thumbnails will be served.
+
+> **💡 Recommendation**: If you're self-hosting Shopware and want to use dynamic image transformations with Nuxt Image modifiers, install the FroshPlatformThumbnailProcessor plugin first to enable on-the-fly processing.
+
+### Customizing Configuration
+
+You can extend or override the default settings in your project's `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  extends: ["@shopware/cms-base-layer"],
+
+  image: {
+    // Change default quality
+    quality: 85,
+
+    // Add/change formats
+    formats: ['avif', 'webp', 'jpg'],
+
+    // Override or add presets
+    presets: {
+      // Override existing preset
+      productCard: {
+        modifiers: {
+          format: 'avif',
+          quality: 80,
+          fit: 'cover',
+        }
+      },
+      // Add custom preset
+      categoryBanner: {
+        modifiers: {
+          format: 'webp',
+          quality: 90,
+          width: 1200,
+          height: 400,
+          fit: 'cover',
+        }
+      }
+    }
+  }
+})
+```
+
+## 🖼️ Image Placeholder
+
+This layer provides a `useImagePlaceholder` composable that generates an SVG placeholder for images during loading. The placeholder features a centered icon with a subtle background.
+
+### Customizing Placeholder Color
+
+You can customize the placeholder color globally in your project's `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  imagePlaceholder: {
+    color: "#your-color-here", // Default: #543B95
+  },
+});
+```
+
+Or use a custom color for specific instances:
+
+```vue
+<script setup>
+const customPlaceholder = useImagePlaceholder("#FF0000");
+</script>
+
+<template>
+  <NuxtImg :placeholder="customPlaceholder" src="..." />
+</template>
+```
+
+## 🖼️ Background Image Optimization
+
+CMS sections and blocks can have background images set via the Shopware admin. This layer automatically optimizes those background image URLs by appending `format` and `quality` query parameters — bringing the same optimization applied to `<NuxtImg>` components to CSS background images.
+
+Both `CmsPage` (for section backgrounds) and `CmsGenericBlock` (for block backgrounds) read the configuration from `app.config.ts` and pass it to the `getBackgroundImageUrl` helper from `@shopware/helpers`.
+
+### Configuration
+
+Default values are set in `app.config.ts` and can be overridden in your project:
+
+```ts
+export default defineAppConfig({
+  backgroundImage: {
+    format: "webp", // Default: "webp" — output format ("webp" | "avif" | "jpg" | "png")
+    quality: 90, // Default: 90 — image quality (0-100)
+  },
+});
+```
+
+Setting `format` or `quality` to `undefined` (or omitting the key) will skip that parameter in the generated URL.
+
+### How It Works
+
+When a CMS section or block has a `backgroundMedia` set, the components call `getBackgroundImageUrl()` which:
+
+1. Extracts the raw image URL from the CSS `url()` value
+2. Appends `width` or `height` based on the image's original dimensions (capped at 1920px)
+3. Adds `fit=crop,smart` for intelligent cropping
+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")
+```
+
+> **Note:** Like other dynamic image transformations, background image optimization requires remote thumbnail generation support. See the [Image Optimization](#%EF%B8%8F-image-optimization) section above for Shopware Cloud vs. self-hosted requirements.
+
+## 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.
+
+### 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`)
+
+The first image found is injected as a `<link rel="preload" as="image" fetchpriority="high">` in the `<head>` during SSR. This allows the browser to start fetching the LCP image immediately, before parsing CSS or executing JavaScript. The `fetchpriority="high"` attribute ensures the preload is prioritized — this is especially useful for background images which don't natively support `fetchpriority`.
+
+### Usage
+
+The composable is already called in `CmsPage.vue`. If you override `CmsPage`, you can use it in your custom component:
+
+```vue
+<script setup>
+import { useLcpImagePreload } from "@shopware/cms-base-layer/composables/useLcpImagePreload";
+
+const props = defineProps<{ content: Schemas["CmsPage"] }>();
+
+useLcpImagePreload(props.content?.sections || []);
+</script>
+```
+
+The preload URL includes the optimized `format` and `quality` parameters from `app.config.ts` for both background images and element images.
+
+## Responsive CMS Images
+
+CMS image elements (`CmsElementImage`) automatically serve appropriately-sized images using responsive `srcset` and `sizes` attributes. This prevents the browser from downloading images larger than their displayed dimensions — a common Lighthouse performance issue.
+
+### How it works
+
+1. **`CmsGenericBlock`** counts the number of slots in each block, `provide`s a responsive `sizes` value (e.g., a 2-slot block means images are ~50% viewport width on desktop), and `provide`s the slot count via `cms-block-slot-count` for slider SSR breakpoint scaling.
+2. **`CmsElementImage`** `inject`s the sizes hint and applies it to `<NuxtImg>`.
+3. If the media has **pre-generated thumbnails** from Shopware, the existing `srcset` from thumbnails is used.
+4. If **no thumbnails** exist, a synthetic `srcset` is generated using CDN width-based resizing (`?width=400`, `?width=800`, etc.) via the `generateCdnSrcSet` helper from `@shopware/helpers`.
+5. **Slider components** (`CmsElementProductSlider`, `CmsElementCrossSelling`) `inject` the slot count to scale their SSR breakpoints — ensuring media queries account for the container being a fraction of the viewport (e.g., a 2-slot block doubles the breakpoint thresholds).
+
+The browser combines `sizes` + `srcset` to download only the image size it actually needs — during HTML parsing, before any JavaScript runs.
+
+### Configuration
+
+Default slot-count-to-sizes mappings are set in `app.config.ts` and can be overridden:
+
+```ts
+export default defineAppConfig({
+  imageSizes: {
+    // slot count → sizes attribute value
+    1: "(max-width: 768px) 100vw, 100vw",   // full-width blocks
+    2: "(max-width: 768px) 100vw, 50vw",    // two-column blocks (e.g., image-text)
+    3: "(max-width: 768px) 100vw, 33vw",    // three-column blocks
+    default: "(max-width: 768px) 50vw, 25vw", // 4+ columns
+  },
+});
+```
+
+For example, to cap image sizes at a fixed pixel width for boxed layouts:
+
+```ts
+export default defineAppConfig({
+  imageSizes: {
+    1: "(max-width: 768px) 100vw, 1200px",
+    2: "(max-width: 768px) 100vw, 600px",
+    3: "(max-width: 768px) 100vw, 400px",
+    default: "(max-width: 768px) 50vw, 300px",
+  },
+});
+```
+
+### Per-block override
+
+Individual block components can override the sizes value by calling `provide("cms-image-sizes", "custom value")` — this takes precedence over the default from `CmsGenericBlock`.
+
+### Synthetic srcset fallback
+
+When Shopware media has no thumbnails (common in Cloud/SaaS setups using CDN-based resizing), the layer generates a synthetic `srcset` using CDN query parameters:
+
+```html
+<img srcset="
+  ...image.jpg?width=400&fit=crop,smart&format=webp&quality=90 400w,
+  ...image.jpg?width=800&fit=crop,smart&format=webp&quality=90 800w,
+  ...image.jpg?width=1200&fit=crop,smart&format=webp&quality=90 1200w,
+  ...image.jpg?width=1600&fit=crop,smart&format=webp&quality=90 1600w"
+  sizes="(max-width: 768px) 100vw, 50vw"
+>
+```
+
+The `format` and `quality` values are taken from the `backgroundImage` config in `app.config.ts`.
+
+> **Note:** Synthetic srcset requires CDN-based image resizing support. See the [Image Optimization](#%EF%B8%8F-image-optimization) section for requirements.
+
+## 🔄 UnoCSS Runtime
+
+This layer includes a client-side [UnoCSS runtime](https://unocss.dev/integrations/runtime) plugin that resolves utility classes dynamically at runtime using a DOM MutationObserver. This is useful when CMS content from Shopware contains utility classes that aren't known at build time (e.g., inline styles or dynamic class bindings from the admin panel).
+
+The runtime is **enabled by default**. To disable it, set `unocssRuntime` to `false` in your project's `app.config.ts`:
+
+```ts
+export default defineAppConfig({
+  unocssRuntime: false,
+});
+```
+
+> **When to disable**: If you don't use dynamic CMS utility classes, or if you experience performance issues caused by the MutationObserver in pages with frequent DOM mutations.
+
 ## 📘 Available components
 
-The list of available blocks and elements is [here](https://frontends.shopware.com/packages/cms-base.html#available-components).
+The list of available blocks and elements is [here](https://frontends.shopware.com/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/components)
+- 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)
 - 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)
 
@@ -105,7 +467,7 @@ The procedure is:
 
 ❗**Internal components are not a part of public API. Once overwritten you need to track the changes on your own.**
 
-There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with `Sw` prefix, like [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/components/SwProductCard.vue).
+There is also a possibility to override the internal components, shared between public blocks and elements, the ones starting with `Sw` prefix, like [SwSlider.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/SwSlider.vue) or [SwProductCard.vue](https://github.com/shopware/frontends/blob/main/packages/cms-base-layer/app/components/SwProductCard.vue).
 
 An example: some components use `SwSharedPrice.vue` to show prices with corresponding currency for products in many places like product card, product details page and so on. In order to change the way how the price is displayed consistently - create a one component with a name `SwSharedPrice.vue` and that's it. The new component will be used everywhere where is "imported" (autoimported actually).
 
@@ -124,7 +486,7 @@ No additional packages needed to be installed.
 
 - [📘 Documentation](https://frontends.shopware.com)
 
-- [👥 Community](https://shopwarecommunity.slack.com) (`#composable-frontends`)
+- [👥 Community](https://discord.com/channels/1308047705309708348/1405501315160739951) (`#composable-frontend`)
 
 <!-- AUTO GENERATED CHANGELOG -->
 
@@ -132,18 +494,42 @@ 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: 1.5.1
+### Latest changes: 2.1.0
+
+### Minor Changes
+
+- [#2275](https://github.com/shopware/frontends/pull/2275) [`432dd24`](https://github.com/shopware/frontends/commit/432dd246571dfa8c149293da97d5bb16f505e54c) Thanks [@mkucmus](https://github.com/mkucmus)! - - Add configurable UnoCSS runtime plugin for dynamic CMS class support
+  - Extend theme with overlay and fixed color tokens
+
+- [#2223](https://github.com/shopware/frontends/pull/2223) [`1db8704`](https://github.com/shopware/frontends/commit/1db870413dcea13c690504ffcaee13526bc8035f) Thanks [@mkucmus](https://github.com/mkucmus)! - Add horizontal filter layout for product listings. When the sidebar filter element is placed outside a sidebar section, filters now display as horizontal dropdowns.
+
+  Includes new `SwFilterDropdown` and `SwProductListingFiltersHorizontal` components, with a `displayMode` prop added to all filter components to support both layouts.
+
+- [#2287](https://github.com/shopware/frontends/pull/2287) [`c9bde38`](https://github.com/shopware/frontends/commit/c9bde38d497d5c6c2fbd97700a362eb44ce8881f) Thanks [@mkucmus](https://github.com/mkucmus)! - Add responsive image sizing (srcset/sizes) via provide/inject, LCP preload with fetchpriority, configurable imageSizes in app.config, ISR route rules, inline styles, and AppConfig type declarations
+
+- [#2241](https://github.com/shopware/frontends/pull/2241) [`9ccbaa1`](https://github.com/shopware/frontends/commit/9ccbaa1fb6cc1f790d979c3dd3745c5402b6d8d1) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Replace `withDefaults` by props destructure
+
+- [#2273](https://github.com/shopware/frontends/pull/2273) [`18455e7`](https://github.com/shopware/frontends/commit/18455e77221fcc77b119d0ba7eae89dfce0e2941) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Remove SwMedia3D.vue component from autoload
+
+- [#2268](https://github.com/shopware/frontends/pull/2268) [`c3fff84`](https://github.com/shopware/frontends/commit/c3fff847e46a17c9c905bd893f1c1de287426c65) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Improve accessibility (A11y) of CMS base layer components.
+
+- [#2214](https://github.com/shopware/frontends/pull/2214) [`ccb9384`](https://github.com/shopware/frontends/commit/ccb93849be07f1b6a4e192de02579a528b5b6ac4) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Add full TypeScript typing to html-to-vue helper functions
 
 ### Patch Changes
 
-- [#1879](https://github.com/shopware/frontends/pull/1879) [`eaf170b`](https://github.com/shopware/frontends/commit/eaf170bd037a278b3d2e155c4d69de8e5fd9516d) Thanks [@acuriouspotion](https://github.com/acuriouspotion)! - Fix youtube player control display and usage of advanced privacy mode setting.
+- [#2226](https://github.com/shopware/frontends/pull/2226) [`d77eacc`](https://github.com/shopware/frontends/commit/d77eaccdec6c56a6f2d999048c751fb9f01177d4) Thanks [@mkucmus](https://github.com/mkucmus)! - Add config prop support to `SwProductGallery` and make `CmsElementImageGallery` respect `minHeight`, `navigationArrows`, and `navigationDots` config values.
 
-- [#1862](https://github.com/shopware/frontends/pull/1862) [`20fd2c6`](https://github.com/shopware/frontends/commit/20fd2c615738f93a3947c69f351fc5d37ea89ebf) Thanks [@aheartforspinach](https://github.com/aheartforspinach)! - Fix CmsSectionSidebar.vue when used on a landing page by removing useCategory and related code
+- [#2275](https://github.com/shopware/frontends/pull/2275) [`432dd24`](https://github.com/shopware/frontends/commit/432dd246571dfa8c149293da97d5bb16f505e54c) Thanks [@mkucmus](https://github.com/mkucmus)! - - Fix CMS block layout: height propagation in CmsBlockImageText, conditional `h-full` in CmsElementImage, `backgroundSize` forwarding in CmsGenericBlock, `w-full` for full_width sizing mode, and exclude `sizingMode` from section inline styles
+  - Fix vertical alignment support in CmsElementText and CmsElementProductSlider using `align-content` CSS property
+  - Remove rounded corners from image placeholder SVG and simplify CmsBlockTextOnImage structure
 
-- [#1884](https://github.com/shopware/frontends/pull/1884) [`3004b97`](https://github.com/shopware/frontends/commit/3004b973913b90cdf4b255ffb3f9cee265241666) Thanks [@MorennMcFly](https://github.com/MorennMcFly)! - Fix cms blocks TextTeaserSection and TextTwoColumn responsivity so the elements stack from md breakpoint and under.
+- [#2210](https://github.com/shopware/frontends/pull/2210) [`c6b88b7`](https://github.com/shopware/frontends/commit/c6b88b7d2c50054188356aeb0f83053554d442f5) Thanks [@mkucmus](https://github.com/mkucmus)! - Anchor tags with "btn btn-primary" classes from the API were not being
+  transformed to Tailwind utility classes due to condition matching issues
+  in the html-to-vue renderer.
 
-- [#1863](https://github.com/shopware/frontends/pull/1863) [`f8c5cd5`](https://github.com/shopware/frontends/commit/f8c5cd5c9aa8b65d394c831e3ac548b4743c53a6) Thanks [@aheartforspinach](https://github.com/aheartforspinach)! - move `CmsBlockHtml.vue` to block folder (instead of element), remove `CmsBlockHtml.md`
+- [#2318](https://github.com/shopware/frontends/pull/2318) [`b40305f`](https://github.com/shopware/frontends/commit/b40305f9e2ec51f29c279650e411bb773438faed) Thanks [@mdanilowicz](https://github.com/mdanilowicz)! - Components (CmsElementBuyBox, SwListingProductPrice, SwProductPrice) updated to use `hasListPrice` instead of deprecated `isListPrice`.
 
-- Updated dependencies [[`ab040bb`](https://github.com/shopware/frontends/commit/ab040bb6cc05541001a983c26d5cb6dbf3192394), [`c8fa438`](https://github.com/shopware/frontends/commit/c8fa438b38de6dbc43a2895f2d1906907447c384)]:
-  - @shopware/composables@1.9.1
-  - @shopware/helpers@1.5.0
+- Updated dependencies [[`9604f22`](https://github.com/shopware/frontends/commit/9604f22678150d04c3c3156fd8ee2ce440c8c8bf), [`b40305f`](https://github.com/shopware/frontends/commit/b40305f9e2ec51f29c279650e411bb773438faed), [`432dd24`](https://github.com/shopware/frontends/commit/432dd246571dfa8c149293da97d5bb16f505e54c), [`b5f7e2a`](https://github.com/shopware/frontends/commit/b5f7e2a20c9dfdde1690e9006252d847f732bc0a), [`b5f7e2a`](https://github.com/shopware/frontends/commit/b5f7e2a20c9dfdde1690e9006252d847f732bc0a), [`9604f22`](https://github.com/shopware/frontends/commit/9604f22678150d04c3c3156fd8ee2ce440c8c8bf), [`a871c7b`](https://github.com/shopware/frontends/commit/a871c7b6256b75c2e40d93fc0354ba1971420062), [`c9bde38`](https://github.com/shopware/frontends/commit/c9bde38d497d5c6c2fbd97700a362eb44ce8881f)]:
+  - @shopware/api-client@1.5.0
+  - @shopware/composables@1.11.0
+  - @shopware/helpers@1.7.0

package/app/app.config.ts

@@ -0,0 +1,18 @@
+import { defineAppConfig } from "#imports";
+
+export default defineAppConfig({
+  imagePlaceholder: {
+    color: "#543B95",
+  },
+  backgroundImage: {
+    format: "webp",
+    quality: 90,
+  },
+  imageSizes: {
+    1: "(max-width: 768px) 100vw, 100vw",
+    2: "(max-width: 768px) 100vw, 50vw",
+    3: "(max-width: 768px) 100vw, 33vw",
+    default: "(max-width: 768px) 50vw, 25vw",
+  },
+  unocssRuntime: true,
+});

package/app/assets/icons/check-circle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24ZM7.56066 10.9393L10.5 13.8787L16.4393 7.93934C17.0251 7.35355 17.9749 7.35355 18.5607 7.93934C19.1464 8.52513 19.1464 9.47487 18.5607 10.0607L11.5607 17.0607C10.9749 17.6464 10.0251 17.6464 9.43934 17.0607L5.43934 13.0607C4.85355 12.4749 4.85355 11.5251 5.43934 10.9393C6.02513 10.3536 6.97487 10.3536 7.56066 10.9393Z" fill="#1E1E24"/>
+</svg>

package/app/assets/icons/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.06066 10.4393C2.47487 9.85355 1.52513 9.85355 0.93934 10.4393C0.353553 11.0251 0.353553 11.9749 0.93934 12.5607L7.93934 19.5607C8.52513 20.1464 9.47487 20.1464 10.0607 19.5607L23.0607 6.56066C23.6464 5.97487 23.6464 5.02513 23.0607 4.43934C22.4749 3.85355 21.5251 3.85355 20.9393 4.43934L9 16.3787L3.06066 10.4393Z" fill="#1E1E24"/>
+</svg>

package/app/assets/icons/chevron.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.70711 8.79289C8.31658 8.40237 7.68342 8.40237 7.29289 8.79289C6.90237 9.18342 6.90237 9.81658 7.29289 10.2071L11.2929 14.2071C11.6834 14.5976 12.3166 14.5976 12.7071 14.2071L16.7071 10.2071C17.0976 9.81658 17.0976 9.18342 16.7071 8.79289C16.3166 8.40237 15.6834 8.40237 15.2929 8.79289L12 12.0858L8.70711 8.79289Z" fill="currentColor"/>
+</svg>

package/app/assets/icons/exclamation-circle.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM10.5 7.5V12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12V7.5C13.5 6.67157 12.8284 6 12 6C11.1716 6 10.5 6.67157 10.5 7.5ZM12 18C12.8284 18 13.5 17.3284 13.5 16.5C13.5 15.6716 12.8284 15 12 15C11.1716 15 10.5 15.6716 10.5 16.5C10.5 17.3284 11.1716 18 12 18Z" fill="#1E1E24"/>
+</svg>

package/app/assets/icons/star-empty.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00015 12.5599L12.0046 14.3245L11.5638 9.97075L14.4795 6.70761L10.2026 5.78147L8.00015 2.00012L5.79771 5.78147L1.52085 6.70761L4.43653 9.97075L3.99572 14.3245L8.00015 12.5599ZM4.53339 15.5446C3.85953 15.8416 3.07255 15.536 2.7756 14.8622C2.68261 14.6511 2.64594 14.4196 2.66917 14.1902L3.0508 10.421L0.526591 7.59599C0.0359476 7.04688 0.083346 6.20399 0.632458 5.71335C0.804415 5.5597 1.01328 5.45328 1.23866 5.40448L4.94128 4.60269L6.848 1.32905C7.21862 0.692736 8.0349 0.477347 8.67122 0.847967C8.87048 0.964028 9.03624 1.12979 9.1523 1.32905L11.059 4.60269L14.7616 5.40448C15.4813 5.56033 15.9384 6.2701 15.7826 6.9898C15.7338 7.21517 15.6274 7.42404 15.4737 7.59599L12.9495 10.421L13.3311 14.1902C13.4053 14.9228 12.8715 15.5769 12.1389 15.651C11.9095 15.6743 11.6779 15.6376 11.4669 15.5446L8.00015 14.0169L4.53339 15.5446Z" fill="#696470"/>
+</svg>

package/app/assets/icons/star-filled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.53339 15.5446C3.85953 15.8416 3.07255 15.536 2.7756 14.8622C2.68261 14.6511 2.64594 14.4196 2.66917 14.1902L3.0508 10.421L0.526591 7.59599C0.0359476 7.04688 0.083346 6.20399 0.632458 5.71335C0.804415 5.5597 1.01328 5.45328 1.23866 5.40448L4.94128 4.60269L6.848 1.32905C7.21862 0.692736 8.0349 0.477347 8.67122 0.847967C8.87048 0.964028 9.03624 1.12979 9.1523 1.32905L11.059 4.60269L14.7616 5.40448C15.4813 5.56033 15.9384 6.2701 15.7826 6.9898C15.7338 7.21517 15.6274 7.42404 15.4737 7.59599L12.9495 10.421L13.3311 14.1902C13.4053 14.9228 12.8715 15.5769 12.1389 15.651C11.9095 15.6743 11.6779 15.6376 11.4669 15.5446L8.00015 14.0169L4.53339 15.5446Z" fill="#696470"/>
+</svg>

package/app/assets/icons/user.svg

@@ -0,0 +1 @@
+<svg id="meteor-icon-kit__regular-user" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 2C7.79086 2 6 3.79086 6 6C6 8.20914 7.79086 10 10 10C12.2091 10 14 8.20914 14 6C14 3.79086 12.2091 2 10 2zM10 0C13.3137 0 16 2.68629 16 6C16 9.3137 13.3137 12 10 12C6.68629 12 4 9.3137 4 6C4 2.68629 6.68629 0 10 0zM2 21.099C2 21.6513 1.55228 22.099 1 22.099C0.44772 22.099 0 21.6513 0 21.099V19C0 16.2386 2.23858 14 5 14H15.0007C17.7621 14 20.0007 16.2386 20.0007 19V21.099C20.0007 21.6513 19.553 22.099 19.0007 22.099C18.4484 22.099 18.0007 21.6513 18.0007 21.099V19C18.0007 17.3431 16.6576 16 15.0007 16H5C3.34315 16 2 17.3431 2 19V21.099z" fill="currentColor"/></svg>

package/app/components/SwCategoryNavigation.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const {
+  activeCategory,
+  elements,
+  level = 0,
+} = defineProps<{
+  activeCategory: Schemas["Category"];
+  elements: Schemas["Category"][];
+  level: number;
+}>();
+
+const expandedItems = ref<Set<string>>(new Set());
+
+function isActive(navigationElement: Schemas["Category"]) {
+  return navigationElement.id === activeCategory?.id;
+}
+
+function toggleExpanded(id: string) {
+  if (expandedItems.value.has(id)) {
+    expandedItems.value.delete(id);
+  } else {
+    expandedItems.value.add(id);
+  }
+}
+
+function isExpanded(id: string) {
+  return expandedItems.value.has(id);
+}
+</script>
+<template>
+  <div
+    v-if="elements?.length"
+    class="self-stretch flex flex-col justify-start items-start gap-4"
+  >
+    <div
+      v-for="(navigationElement, index) in elements"
+      :key="index"
+      class="w-full"
+    >
+      <SwCategoryNavigationLink
+        :navigation-element="navigationElement"
+        :is-active="isActive(navigationElement)"
+        :is-expanded="isExpanded(navigationElement.id)"
+        :level="level"
+        @toggle="toggleExpanded(navigationElement.id)"
+      />
+      <transition name="filter-collapse">
+        <div
+          v-if="navigationElement.children && isExpanded(navigationElement.id)"
+          class="self-stretch flex flex-col justify-start items-start"
+        >
+          <SwCategoryNavigation
+            :elements="navigationElement.children"
+            :active-category="activeCategory"
+            :level="level + 1"
+          />
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+<style scoped>
+.filter-collapse-enter-active,
+.filter-collapse-leave-active {
+  transition:
+    max-height 240ms ease,
+    opacity 200ms ease;
+  overflow: hidden;
+}
+.filter-collapse-enter-from,
+.filter-collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.filter-collapse-enter-to,
+.filter-collapse-leave-from {
+  max-height: 800px;
+  opacity: 1;
+}
+</style>