@shopware/cms-base-layer 1.5.1 → 2.0.0

package/README.md

@@ -87,15 +87,232 @@ 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>
+```
+
 ## 📘 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 +322,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 +341,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 +349,119 @@ 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.0.0
+
+### Major Changes
+
+- [#1944](https://github.com/shopware/frontends/pull/1944) [`c41a839`](https://github.com/shopware/frontends/commit/c41a8397538e5b18475134635cc44295c34dde2d) Thanks [@mkucmus](https://github.com/mkucmus)! - Updates the `@shopware/cms-base-layer` package with the following changes:
+  - Adds support for the new `SwQuantitySelect` component
+  - Updates the `SwProductAddToCart` component to use the new `SwQuantitySelect` component
+  - Fixes the `Status` component to use the new state classes
+  - Updates the `uno.config.ts` file to include default styling that can be used and extended in the end-project:
+
+  ## Nuxt UnoCSS Configuration Example
+
+  ```ts
+  // nuxt.config.ts in your end-project
+  {
+    unocss: {
+      nuxtLayers: true; // enable Nuxt layers support in order to merge UnoCSS configurations
+    }
+  }
+  ```
+
+  ## UnoCSS Configuration Example
+
+  ```ts
+  // uno.config.ts in your end-project
+  import { mergeConfigs } from "@unocss/core";
+  import baseConfig from "./.nuxt/uno.config.mjs";
+
+  export default mergeConfigs(baseConfig, {
+    // will be merged with the base config - all optional
+    theme: {
+      colors: {
+        "brand-primary": "#ff3e00",
+        "brand-secondary": "#ff6a00",
+      },
+    },
+    safelist: ["states-success"],
+    preflights: [
+      {
+        getCSS: () => `
+          body {
+              font-family: 'Inter', sans-serif;
+              -moz-osx-font-smoothing: grayscale;
+              -webkit-font-smoothing: antialiased;
+          }
+          `,
+      },
+    ],
+  });
+  ```
+
+### Minor Changes
+
+- [#2030](https://github.com/shopware/frontends/pull/2030) [`22ff62e`](https://github.com/shopware/frontends/commit/22ff62e354f024599d64ea8096af57695248851c) Thanks [@mkucmus](https://github.com/mkucmus)! - Introduce new UI components, refine listing filters (structure and UX), add global collapse animations, and improve type safety.
+
+  ### Features
+  - New UI components:
+    - SwFilterChips – shows active filters as removable chips
+    - SwSortDropdown – sorting dropdown
+    - SwProductListingPagination – listing pagination
+    - Checkbox – reusable checkbox
+    - ChevronIcon – configurable chevron (up/down/left/right)
+    - RadioButton – reusable radio button
+    - SwitchButton – toggle switch
+
+  ### Refactors
+  - SwFilterProperties:
+    - Replace computed factory with `isChecked()` and `selectValue()` helpers for better performance and readability.
+  - Filter collapse animation:
+    - Unified expand/collapse animations for SwFilterProperties, SwFilterRating, SwFilterShippingFree, and SwFilterPrice using UnoCSS preflights.
+
+  ### TypeScript fixes
+  - SwProductListingFilters:
+    - Provide fallbacks (`?? []`, `?? ''`) when passing `getSortingOrders` and `getCurrentSortingOrder`.
+  - SwFilterChips:
+    - Relax prop types to accept union types compatible with both full Shopware schemas and simplified helper types.
+
+  ### Code quality improvements
+  - SwFilterPrice:
+    - Remove unnecessary optional chaining on `props.selectedFilters` to prevent masking undefined errors
+  - Checkbox component:
+    - Replace `outline-blue-500` with `outline-brand-primary` for brand consistency
+    - Make `label` prop optional to support checkbox-only pattern
+  - SwFilterShippingFree:
+    - Add i18n support using `useCmsTranslations` instead of hardcoded "free delivery" text
+  - SwFilterProperties:
+    - Remove unnecessary empty label prop from Checkbox usage
+
+  **Note:** Transition classes are globally available via UnoCSS preflights.
+
+- [#2139](https://github.com/shopware/frontends/pull/2139) [`20d1066`](https://github.com/shopware/frontends/commit/20d106638958170dd191ac3d95e3e536f3fcc787) Thanks [@mkucmus](https://github.com/mkucmus)! - Added a new `SwProductReviewsForm` component that allows logged-in customers to submit product reviews.
+
+- [#1959](https://github.com/shopware/frontends/pull/1959) [`c77daa6`](https://github.com/shopware/frontends/commit/c77daa6a11e96c7f3688b16f7da010b54c7f5e8b) Thanks [@patzick](https://github.com/patzick)! - Updated default types to Shopware 6.7
+
+- [#2176](https://github.com/shopware/frontends/pull/2176) [`c647baf`](https://github.com/shopware/frontends/commit/c647baf93e7174b849f5961ee5803add99d78602) Thanks [@mkucmus](https://github.com/mkucmus)! - - Extract product listing data early from CMS page responses to enable SSR rendering
+  - Remove ClientOnly wrappers from `SwProductListingFilters` and `SwFilterChips` components
+  - Resolve hydration mismatches on category pages with filters
 
 ### 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.
+- [#2174](https://github.com/shopware/frontends/pull/2174) [`e9f3d97`](https://github.com/shopware/frontends/commit/e9f3d972d7a126ec72f405a3595e53a61f6180f9) Thanks [@mkucmus](https://github.com/mkucmus)! - Added a new image placeholder.
+
+- [#2162](https://github.com/shopware/frontends/pull/2162) [`e1fae3e`](https://github.com/shopware/frontends/commit/e1fae3eb6430e5c8e133456fbaf7f215f80c36f6) Thanks [@mkucmus](https://github.com/mkucmus)! - Replace hardcoded colors with theme tokens, add image placeholder composable, improve URL encoding for special characters in image paths, enhance CMS block layouts, and use useTemplateRef for better type safety
+
+- [#2128](https://github.com/shopware/frontends/pull/2128) [`efe125e`](https://github.com/shopware/frontends/commit/efe125e7bea273bb904356114cf93adf68a416fb) Thanks [@mkucmus](https://github.com/mkucmus)! - Enhanced SwProductReviews component with reviewer names, shop feedback, and star ratings using direct SVG imports.
 
-- [#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
+- [#2008](https://github.com/shopware/frontends/pull/2008) [`3a1bca9`](https://github.com/shopware/frontends/commit/3a1bca983c4fc866c67b90897bd86d7488f8cac8) Thanks [@mkucmus](https://github.com/mkucmus)! - Added missing labels for `SwQuantitySelect` component.
 
-- [#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.
+- [#1951](https://github.com/shopware/frontends/pull/1951) [`3f2379b`](https://github.com/shopware/frontends/commit/3f2379bdc428b481943cbcf3711a37cb91e2d298) Thanks [@mkucmus](https://github.com/mkucmus)! - Use proper paths for components configuration
 
-- [#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`
+- [#2154](https://github.com/shopware/frontends/pull/2154) [`168989e`](https://github.com/shopware/frontends/commit/168989e51e5c81c4cbb746c132d6561c019e046a) Thanks [@mkucmus](https://github.com/mkucmus)! - Implicitly set public components as global to expose them for templates that extend from the base one.
 
-- 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 [[`87771c3`](https://github.com/shopware/frontends/commit/87771c3b7a4521fcdba43cb4c967b61f5db01b3e), [`22ff62e`](https://github.com/shopware/frontends/commit/22ff62e354f024599d64ea8096af57695248851c), [`a44d871`](https://github.com/shopware/frontends/commit/a44d8712d9ae5ee196c03ac8b894f3d1392d0e68), [`e43d9b7`](https://github.com/shopware/frontends/commit/e43d9b7f559af21be8b66f2021cea2d14940e4aa), [`2cbda25`](https://github.com/shopware/frontends/commit/2cbda257a1056454e12f2fba9052f83eecb6d986), [`2cbda25`](https://github.com/shopware/frontends/commit/2cbda257a1056454e12f2fba9052f83eecb6d986), [`7fe2ef9`](https://github.com/shopware/frontends/commit/7fe2ef96a9d9d156683b85d31f0a660458c9fbfd), [`70dcf95`](https://github.com/shopware/frontends/commit/70dcf95d4370c63964d877a5cab113a53f93ca19), [`56cd178`](https://github.com/shopware/frontends/commit/56cd178e25fe2399b7170ccac3044e980621f041), [`c647baf`](https://github.com/shopware/frontends/commit/c647baf93e7174b849f5961ee5803add99d78602), [`e1fae3e`](https://github.com/shopware/frontends/commit/e1fae3eb6430e5c8e133456fbaf7f215f80c36f6), [`c647baf`](https://github.com/shopware/frontends/commit/c647baf93e7174b849f5961ee5803add99d78602), [`c77daa6`](https://github.com/shopware/frontends/commit/c77daa6a11e96c7f3688b16f7da010b54c7f5e8b)]:
+  - @shopware/composables@1.10.0
+  - @shopware/helpers@1.6.0
+  - @shopware/api-client@1.4.0

package/app/app.config.ts

@@ -0,0 +1,7 @@
+import { defineAppConfig } from "#imports";
+
+export default defineAppConfig({
+  imagePlaceholder: {
+    color: "#543B95",
+  },
+});

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,76 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import type { Schemas } from "#shopware";
+
+const props = withDefaults(
+  defineProps<{
+    activeCategory: Schemas["Category"];
+    elements: Schemas["Category"][];
+    level: number;
+  }>(),
+  {
+    level: 0,
+  },
+);
+
+const expandedItems = ref<Set<string>>(new Set());
+
+function isActive(navigationElement: Schemas["Category"]) {
+  return navigationElement.id === props.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="props.elements?.length" class="self-stretch flex flex-col justify-start items-start gap-4">
+    <div
+      v-for="(navigationElement, index) in props.elements"
+      :key="index"
+      class="w-full"
+    >
+      <SwCategoryNavigationLink
+        :navigation-element="navigationElement"
+        :is-active="isActive(navigationElement)"
+        :is-expanded="isExpanded(navigationElement.id)"
+        :level="props.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="props.activeCategory"
+            :level="props.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>

package/app/components/SwCategoryNavigationLink.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import {
+  buildUrlPrefix,
+  getCategoryRoute,
+  getTranslatedProperty,
+  urlIsAbsolute,
+} from "@shopware/helpers";
+import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { useUrlResolver } from "#imports";
+import type { Schemas } from "#shopware";
+
+interface Props {
+  navigationElement: Schemas["Category"];
+  isActive?: boolean;
+  isExpanded?: boolean;
+  level?: number;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  toggle: [];
+}>();
+
+const { getUrlPrefix } = useUrlResolver();
+const url = computed(() => {
+  return buildUrlPrefix(
+    getCategoryRoute(props.navigationElement),
+    getUrlPrefix(),
+  );
+});
+
+const hasChildren = computed(() => {
+  return (
+    props.navigationElement.children &&
+    props.navigationElement.children.length > 0
+  );
+});
+</script>
+<template>
+  <!-- Level 1 Category (Top-level with border and toggle) -->
+  <div
+    v-if="props.level === 0"
+    class="self-stretch flex flex-col justify-center items-center"
+  >
+    <div class="self-stretch py-3 border-b border-outline-outline-variant inline-flex justify-start items-center gap-1">
+      <div class="flex-1 flex justify-start items-center gap-2.5">
+        <RouterLink
+          v-if="!urlIsAbsolute(url.path)"
+          :to="url"
+          :class="[
+            'flex-1 justify-start text-surface-on-surface text-base leading-normal font-bold',
+          ]"
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </RouterLink>
+        <a
+          v-else
+          :href="url.path"
+          :class="[
+            'flex-1 justify-start text-surface-on-surface text-base leading-normal font-bold',
+          ]"
+          :target="
+            navigationElement.externalLink || navigationElement.linkNewTab
+              ? '_blank'
+              : ''
+          "
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </a>
+      </div>
+      <button
+        v-if="hasChildren"
+        @click="emit('toggle')"
+        class="w-6 h-6 relative flex items-center justify-center bg-transparent cursor-pointer focus:outline-none"
+        type="button"
+        :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
+      >
+        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+      </button>
+    </div>
+  </div>
+
+  <!-- Level 2+ Categories (Nested with left padding) -->
+  <div
+    v-else
+    class="self-stretch flex flex-col justify-center items-center"
+  >
+    <div class="self-stretch pl-4 py-1.5 inline-flex justify-start items-center gap-2">
+      <div class="py-0.5 flex-1 flex justify-start items-center gap-2.5">
+        <RouterLink
+          v-if="!urlIsAbsolute(url.path)"
+          :to="url"
+          :class="[
+            'justify-start text-surface-on-surface text-base leading-normal',
+            props.isActive ? 'font-bold' : 'font-normal',
+          ]"
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </RouterLink>
+        <a
+          v-else
+          :href="url.path"
+          :class="[
+            'justify-start text-surface-on-surface text-base leading-normal',
+            props.isActive ? 'font-bold' : 'font-normal',
+          ]"
+          :target="
+            navigationElement.externalLink || navigationElement.linkNewTab
+              ? '_blank'
+              : ''
+          "
+        >
+          {{ getTranslatedProperty(navigationElement, "name") }}
+        </a>
+      </div>
+      <button
+        v-if="hasChildren"
+        @click="emit('toggle')"
+        class="w-6 h-6 relative flex items-center justify-center bg-transparent cursor-pointer focus:outline-none"
+        type="button"
+        :aria-label="props.isExpanded ? 'Collapse' : 'Expand'"
+      >
+        <SwChevronIcon :direction="props.isExpanded ? 'up' : 'down'" :size="20" />
+      </button>
+    </div>
+  </div>
+</template>