@shopware/cms-base-layer 0.0.0-canary-20260114124620 → 0.0.0-canary-20260119085417

package/README.md

@@ -349,7 +349,13 @@ 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: 0.0.0-canary-20260114124620
+### Latest changes: 0.0.0-canary-20260119085417
+
+### Minor Changes
+
+- [#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.
 
 ### Patch Changes
 

package/app/components/SwFilterDropdown.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+import { ref, useTemplateRef } from "vue";
+
+defineProps<{
+  label: string;
+  isActive?: boolean;
+}>();
+
+const isOpen = ref(false);
+const dropdownElement = useTemplateRef<HTMLDivElement>("dropdownElement");
+
+onClickOutside(dropdownElement, () => {
+  isOpen.value = false;
+});
+
+function toggle() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<template>
+  <div ref="dropdownElement" class="relative">
+    <!-- Pill button -->
+    <button
+      type="button"
+      class="bg-brand-tertiary rounded-full px-4 py-1.5 inline-flex items-center hover:bg-brand-tertiary-hover transition-colors"
+      :class="{ 'ring-2 ring-brand-primary': isActive }"
+      @click="toggle"
+      :aria-expanded="isOpen"
+      aria-haspopup="true"
+    >
+      <div class="py-1 inline-flex items-center gap-1">
+        <span class="text-brand-on-tertiary text-base font-normal leading-6">
+          {{ label }}
+        </span>
+        <SwChevronIcon
+          :direction="isOpen ? 'up' : 'down'"
+          :size="24"
+          class="text-brand-on-tertiary"
+        />
+      </div>
+    </button>
+
+    <!-- Dropdown panel -->
+    <div
+      v-if="isOpen"
+      class="absolute top-full left-0 mt-2 min-w-64 bg-surface-surface rounded-lg shadow-lg ring-1 ring-outline-outline-variant z-50 p-4"
+      role="menu"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/SwProductListingFilter.vue

@@ -6,7 +6,16 @@ import SwFilterPropertiesVue from "./listing-filters/SwFilterProperties.vue";
 import SwFilterRatingVue from "./listing-filters/SwFilterRating.vue";
 import SwFilterShippingFreeVue from "./listing-filters/SwFilterShippingFree.vue";
 
-const props = defineProps<{
+const {
+  filter,
+  selectedManufacturer,
+  selectedProperties,
+  selectedMinPrice,
+  selectedMaxPrice,
+  selectedRating,
+  selectedShippingFree,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedManufacturer: Set<string>;
   selectedProperties: Set<string>;
@@ -14,6 +23,7 @@ const props = defineProps<{
   selectedMaxPrice: number | undefined;
   selectedRating: number | undefined;
   selectedShippingFree: boolean | undefined;
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 const emit = defineEmits<{
@@ -22,13 +32,13 @@ const emit = defineEmits<{
 
 const transformedFilters = computed(() => ({
   price: {
-    min: props.selectedMinPrice,
-    max: props.selectedMaxPrice,
+    min: selectedMinPrice,
+    max: selectedMaxPrice,
   },
-  rating: props.selectedRating,
-  "shipping-free": props.selectedShippingFree,
-  manufacturer: [...props.selectedManufacturer],
-  properties: [...props.selectedProperties],
+  rating: selectedRating,
+  "shipping-free": selectedShippingFree,
+  manufacturer: [...selectedManufacturer],
+  properties: [...selectedProperties],
 }));
 
 const filterComponent = computed<Component | undefined>(() => {
@@ -40,8 +50,8 @@ const filterComponent = computed<Component | undefined>(() => {
   };
 
   return (
-    componentMap[props.filter.code] ||
-    ("options" in props.filter ? SwFilterPropertiesVue : undefined)
+    componentMap[filter.code] ||
+    ("options" in filter ? SwFilterPropertiesVue : undefined)
   );
 });
 
@@ -58,6 +68,7 @@ const handleSelectValue = ({
       :is="filterComponent"
       :filter="filter"
       :selected-filters="transformedFilters"
+      :display-mode="displayMode"
       @select-value="handleSelectValue"
     />
   </div>

package/app/components/SwProductListingFiltersHorizontal.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import type {
+  CmsElementProductListing,
+  CmsElementSidebarFilter,
+} from "@shopware/composables";
+import { useCmsTranslations } from "@shopware/composables";
+import { defu } from "defu";
+import { computed, reactive } from "vue";
+import type { ComputedRef, UnwrapNestedRefs } from "vue";
+import { type LocationQueryRaw, useRoute, useRouter } from "vue-router";
+import { useCategoryListing } from "#imports";
+import type { Schemas, operations } from "#shopware";
+
+const props = defineProps<{
+  content: CmsElementProductListing | CmsElementSidebarFilter;
+  listingType?: string;
+}>();
+
+type Translations = {
+  listing: {
+    filters: string;
+    sort: string;
+    resetFilters: string;
+  };
+};
+
+type FilterState = {
+  manufacturer: Set<string>;
+  properties: Set<string>;
+  "min-price": number | undefined;
+  "max-price": number | undefined;
+  rating: number | undefined;
+  "shipping-free": boolean | undefined;
+};
+
+let translations: Translations = {
+  listing: {
+    filters: "Filters",
+    sort: "Sort",
+    resetFilters: "Reset filters",
+  },
+};
+
+translations = defu(useCmsTranslations(), translations) as Translations;
+
+const route = useRoute();
+const router = useRouter();
+
+const {
+  changeCurrentSortingOrder,
+  getCurrentSortingOrder,
+  getInitialFilters,
+  getSortingOrders,
+  search,
+} = useCategoryListing();
+
+const sidebarSelectedFilters: UnwrapNestedRefs<FilterState> =
+  reactive<FilterState>({
+    manufacturer: new Set(),
+    properties: new Set(),
+    "min-price": undefined,
+    "max-price": undefined,
+    rating: undefined,
+    "shipping-free": undefined,
+  });
+
+const showResetFiltersButton = computed<boolean>(() => {
+  if (
+    sidebarSelectedFilters.manufacturer.size !== 0 ||
+    sidebarSelectedFilters.properties.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(
+      "|",
+    ),
+    "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: "",
+    limit: route.query.limit ? Number(route.query.limit) : 15,
+  }));
+
+for (const param in route.query) {
+  if (param in sidebarSelectedFilters) {
+    const queryValue = route.query[param];
+
+    // Skip arrays
+    if (Array.isArray(queryValue)) continue;
+
+    if (["manufacturer", "properties"].includes(param)) {
+      if (typeof queryValue === "string") {
+        const elements = queryValue.split("|");
+        const targetSet = sidebarSelectedFilters[
+          param as keyof FilterState
+        ] as Set<string>;
+        for (const element of elements) {
+          targetSet.add(element);
+        }
+      }
+    } else if (queryValue && typeof queryValue === "string") {
+      // Fix: Use specific property assignments instead of generic keyof
+      if (param === "min-price") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters["min-price"] = numValue;
+        }
+      } else if (param === "max-price") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters["max-price"] = numValue;
+        }
+      } else if (param === "rating") {
+        const numValue = Number(queryValue);
+        if (!Number.isNaN(numValue)) {
+          sidebarSelectedFilters.rating = numValue;
+        }
+      } else if (param === "shipping-free") {
+        sidebarSelectedFilters["shipping-free"] = queryValue === "true";
+      }
+    }
+  }
+}
+
+const handleFilterChange = async (event: {
+  code: string;
+  value: string | number | boolean;
+}) => {
+  try {
+    const { code, value } = event;
+
+    if (code === "manufacturer" || code === "properties") {
+      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 {
+    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 (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;
+
+    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["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,
+        },
+      });
+
+      await changeCurrentSortingOrder(order, {
+        ...(route.query as unknown as operations["searchPage post /search"]["body"]),
+        limit: route.query.limit ? Number(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;
+};
+
+// Helper to check if a filter has active selections
+const hasActiveFilter = (filter: { code: string }) => {
+  if (filter.code === "manufacturer") {
+    return sidebarSelectedFilters.manufacturer.size > 0;
+  }
+  if (filter.code === "price") {
+    return (
+      sidebarSelectedFilters["min-price"] !== undefined ||
+      sidebarSelectedFilters["max-price"] !== undefined
+    );
+  }
+  if (filter.code === "rating") {
+    return sidebarSelectedFilters.rating !== undefined;
+  }
+  if (filter.code === "shipping-free") {
+    return sidebarSelectedFilters["shipping-free"] === true;
+  }
+  // Properties filter - check if any property from this filter group is selected
+  return sidebarSelectedFilters.properties.size > 0;
+};
+</script>
+
+<template>
+  <div>
+    <!-- Horizontal Filters Row -->
+    <div class="flex flex-wrap items-center justify-start gap-4 z-10">
+      <!-- Filter dropdowns -->
+      <SwFilterDropdown
+        v-for="filter in getInitialFilters"
+        :key="filter.id"
+        :label="filter.label"
+        :is-active="hasActiveFilter(filter)"
+      >
+        <SwProductListingFilter
+          :filter="filter"
+          display-mode="dropdown"
+          :selected-manufacturer="sidebarSelectedFilters.manufacturer"
+          :selected-properties="sidebarSelectedFilters.properties"
+          :selected-min-price="sidebarSelectedFilters['min-price']"
+          :selected-max-price="sidebarSelectedFilters['max-price']"
+          :selected-rating="sidebarSelectedFilters.rating"
+          :selected-shipping-free="sidebarSelectedFilters['shipping-free']"
+          @filter-change="handleFilterChange"
+        />
+      </SwFilterDropdown>
+
+      <!-- Sort dropdown -->
+      <SwSortDropdown
+        :sort-options="getSortingOrders ?? []"
+        :current-sort="getCurrentSortingOrder ?? ''"
+        :label="translations.listing.sort"
+        @sort-change="handleSortChange"
+      />
+
+      <!-- Reset filters button -->
+      <SwBaseButton
+        v-if="showResetFiltersButton"
+        variant="ghost"
+        size="medium"
+        @click="invokeCleanFilters"
+        type="button"
+      >
+        {{ translations.listing.resetFilters }}
+        <span class="w-5 h-5 i-carbon-close inline-block align-middle ml-1"></span>
+      </SwBaseButton>
+    </div>
+  </div>
+</template>

package/app/components/SwSortDropdown.vue

@@ -4,7 +4,10 @@ import { ref, useTemplateRef } from "vue";
 
 type SortOption = {
   key: string;
-  label: string;
+  label: string | null;
+  translated?: {
+    label: string;
+  };
 };
 
 defineProps<{
@@ -54,7 +57,7 @@ const handleSortingClick = (key: string) => {
       </SwBaseButton>
       <div
         :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
-        class="origin-top-right right-0 mt-2 w-40 rounded-md shadow-2xl bg-surface-surface ring-1 ring-opacity-dark-low focus:outline-none z-1000"
+        class="origin-top-right right-0 mt-2 w-40 rounded-md shadow-2xl bg-surface-surface ring-1 ring-outline-outline-variant focus:outline-none z-50"
         role="menu"
         aria-orientation="vertical"
         aria-labelledby="menu-button"
@@ -70,11 +73,11 @@ const handleSortingClick = (key: string) => {
                 ? 'font-medium text-surface-on-surface'
                 : 'text-surface-on-surface-variant',
             ]"
-            class="block px-4 py-2 text-sm bg-transparent hover:bg-surface-surface-container"
+            class="block w-full text-left px-4 py-2 text-sm bg-transparent hover:bg-surface-surface-container"
             role="menuitem"
             tabindex="-1"
           >
-            {{ sorting.label }}
+            {{ sorting.translated?.label }}
           </button>
         </div>
       </div>

package/app/components/listing-filters/SwFilterPrice.vue

@@ -17,9 +17,14 @@ const emits =
     (e: "select-value", value: { code: string; value: unknown }) => void
   >();
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 type Translations = {
@@ -42,12 +47,8 @@ const prices = reactive<{ min: number; max: number }>({
 });
 
 onMounted(() => {
-  prices.min = Math.floor(
-    props.selectedFilters.price?.min ?? props.filter.min ?? 0,
-  );
-  prices.max = Math.floor(
-    props.selectedFilters.price?.max ?? props.filter.max ?? 0,
-  );
+  prices.min = Math.floor(selectedFilters.price?.min ?? filter.min ?? 0);
+  prices.max = Math.floor(selectedFilters.price?.max ?? filter.max ?? 0);
 });
 
 const isFilterVisible = ref<boolean>(false);
@@ -91,8 +92,8 @@ const getClientX = (event: MouseEvent | TouchEvent): number =>
 const updateSliderValue = (clientX: number) => {
   if (!dragging.value || !sliderRect.value) return;
 
-  const min = props.filter.min ?? 0;
-  const max = props.filter.max ?? 100;
+  const min = filter.min ?? 0;
+  const max = filter.max ?? 100;
   const percent = Math.min(
     Math.max((clientX - sliderRect.value.left) / sliderRect.value.width, 0),
     1,
@@ -134,33 +135,38 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
 
 <template>
   <div class="self-stretch flex flex-col justify-start items-start gap-4">
-    <div 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="`filter-${props.filter.code}`"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <div 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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="`filter-${filter.code}`"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <SwIconButton
+            type="ghost"
+            :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+            tabindex="-1"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </SwIconButton>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
+
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" :id="props.filter.code"
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" :id="filter.code"
         class="self-stretch flex flex-col justify-start items-start gap-2.5">
         <div class="self-stretch flex flex-col justify-start items-start gap-1">
           <div class="self-stretch inline-flex justify-between items-center gap-2">
@@ -168,15 +174,15 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
               class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
               <input type="number" :placeholder="translations.listing.min" v-model.number="prices.min"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: props.filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="props.filter.min" :max="prices.max" />
+                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
+                :min="filter.min" :max="prices.max" />
             </div>
             <div
               class="w-16 h-10 px-2 py-1 rounded-lg outline outline-1 outline-offset-[-1px] outline-outline-outline-variant inline-flex flex-col justify-center items-start gap-2.5">
               <input type="number" :placeholder="translations.listing.max" v-model.number="prices.max"
                 class="w-full bg-transparent border-none outline-none text-surface-on-surface text-sm font-normal leading-tight"
-                @change="emits('select-value', { code: props.filter.code, value: { min: prices.min, max: prices.max } })"
-                :min="prices.min" :max="props.filter.max" />
+                @change="emits('select-value', { code: filter.code, value: { min: prices.min, max: prices.max } })"
+                :min="prices.min" :max="filter.max" />
             </div>
           </div>
           <!-- Custom slider UI -->
@@ -187,14 +193,14 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
             </div>
             <!-- Active range -->
             <div class="absolute top-1/2 -translate-y-1/2 h-2 bg-surface-surface-primary rounded-full" :style="{
-              left: ((prices.min - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100 + '%',
-              width: ((prices.max - prices.min) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100 + '%',
+              left: ((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
+              width: ((prices.max - prices.min) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100 + '%',
             }"></div>
             <!-- Min thumb -->
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.min - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.min - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
               }"
               @mousedown.prevent="startDrag('min', $event)"
               @touchstart.prevent="startDrag('min', $event)"></div>
@@ -202,7 +208,7 @@ const startDrag = (type: "min" | "max", event: MouseEvent | TouchEvent) => {
             <div
               class="absolute top-1/2 -translate-y-1/2 w-5 h-5 bg-brand-primary rounded-full shadow-[2px_2px_10px_0px_rgba(0,0,0,0.15)] cursor-pointer touch-none"
               :style="{
-                left: `calc(${((prices.max - (props.filter.min ?? 0)) / ((props.filter.max ?? 100) - (props.filter.min ?? 0))) * 100}% - 10px)`
+                left: `calc(${((prices.max - (filter.min ?? 0)) / ((filter.max ?? 100) - (filter.min ?? 0))) * 100}% - 10px)`
               }"
               @mousedown.prevent="startDrag('max', $event)"
               @touchstart.prevent="startDrag('max', $event)"></div>

package/app/components/listing-filters/SwFilterProperties.vue

@@ -15,13 +15,18 @@ import { getTranslatedProperty } from "@shopware/helpers";
 import { computed, ref } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: {
     manufacturer?: string[];
     properties?: string[];
     [key: string]: unknown;
   };
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 const emits =
@@ -35,17 +40,17 @@ const toggle = () => {
 };
 
 const selectedIds = computed(() => {
-  if (props.filter.code === "manufacturer") {
-    return props.selectedFilters?.manufacturer || [];
+  if (filter.code === "manufacturer") {
+    return selectedFilters?.manufacturer || [];
   }
-  return props.selectedFilters?.properties || [];
+  return selectedFilters?.properties || [];
 });
 
 const isChecked = (id: string) => selectedIds.value.includes(id);
 
 const selectValue = (id: string) => {
   const emitCode =
-    props.filter.code === "manufacturer" ? "manufacturer" : "properties";
+    filter.code === "manufacturer" ? "manufacturer" : "properties";
   emits("select-value", {
     code: emitCode,
     value: id,
@@ -55,38 +60,43 @@ const selectValue = (id: string) => {
 
 <template>
   <div class="self-stretch flex flex-col justify-start items-start gap-4">
-    <div 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="props.filter.code"
-        :aria-label="props.filter.label"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <div 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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="filter.code"
+          :aria-label="filter.label"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <SwIconButton
+            type="ghost"
+            :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+            tabindex="-1"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </SwIconButton>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
+
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" :id="props.filter.code" class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" :id="filter.code" class="self-stretch flex flex-col justify-start items-start gap-4">
         <fieldset class="self-stretch flex flex-col justify-start items-start gap-4">
-        <legend class="sr-only">{{ props.filter.name }}</legend>
+        <legend class="sr-only">{{ filter.name }}</legend>
         <label
-          v-for="option in props.filter.options || props.filter.entities"
+          v-for="option in filter.options || filter.entities"
           :key="`${option.id}-${isChecked(option.id)}`"
           class="self-stretch inline-flex justify-start items-start gap-2 cursor-pointer"
           @click="selectValue(option.id)"

package/app/components/listing-filters/SwFilterRating.vue

@@ -16,14 +16,19 @@ const emits =
     (e: "select-value", value: { code: string; value: unknown }) => void
   >();
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
+  displayMode?: "accordion" | "dropdown";
 }>();
 const isHoverActive = ref(false);
 const hoveredIndex = ref(0);
 const displayedScore = computed(() =>
-  isHoverActive.value ? hoveredIndex.value : props.selectedFilters?.rating || 0,
+  isHoverActive.value ? hoveredIndex.value : selectedFilters?.rating || 0,
 );
 
 const hoverRating = (key: number) => {
@@ -32,10 +37,10 @@ const hoverRating = (key: number) => {
 };
 const onChangeRating = () => {
   const newValue =
-    props.selectedFilters?.rating !== hoveredIndex.value
+    selectedFilters?.rating !== hoveredIndex.value
       ? hoveredIndex.value
       : undefined;
-  emits("select-value", { code: props.filter?.code, value: newValue });
+  emits("select-value", { code: filter?.code, value: newValue });
 };
 
 const isFilterVisible = ref<boolean>(false);
@@ -46,33 +51,38 @@ const toggle = () => {
 
 <template>
   <div class="self-stretch flex flex-col justify-start items-start gap-4">
-    <div 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="`filter-rating`"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <div 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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="`filter-rating`"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <SwIconButton
+            type="ghost"
+            :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+            tabindex="-1"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </SwIconButton>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
+
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" class="self-stretch flex flex-col justify-start items-start gap-4">
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch flex flex-col justify-start items-start gap-4">
         <div class="flex flex-row items-center gap-2 mt-2">
           <div
             v-for="i in 5"

package/app/components/listing-filters/SwFilterShippingFree.vue

@@ -16,10 +16,16 @@ import { defu } from "defu";
 import { computed, ref } from "vue";
 import type { Schemas } from "#shopware";
 
-const props = defineProps<{
+const {
+  filter,
+  selectedFilters,
+  description,
+  displayMode = "accordion",
+} = defineProps<{
   filter: ListingFilter;
   selectedFilters: Schemas["ProductListingResult"]["currentFilters"];
   description?: string; // Optional description for i18n
+  displayMode?: "accordion" | "dropdown";
 }>();
 
 type Translations = {
@@ -38,9 +44,7 @@ const emits =
   defineEmits<
     (e: "select-value", value: { code: string; value: unknown }) => void
   >();
-const currentFilterData = computed(
-  () => !!props.selectedFilters[props.filter?.code],
-);
+const currentFilterData = computed(() => !!selectedFilters[filter?.code]);
 
 const isFilterVisible = ref<boolean>(false);
 const toggle = () => {
@@ -53,50 +57,54 @@ onClickOutside(dropdownElement, () => {
 });
 
 const handleRadioUpdate = (val: string | null | boolean | undefined) => {
-  emits("select-value", { code: props.filter.code, value: !!val });
+  emits("select-value", { code: filter.code, value: !!val });
 };
 </script>
 
 <template>
   <div class="self-stretch flex flex-col justify-start items-start gap-4">
-    <div 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-between items-center gap-1 cursor-pointer"
-        @click="toggle"
-        role="button"
-        tabindex="0"
-        :aria-expanded="isFilterVisible"
-        :aria-controls="`filter-${props.filter.code}`"
-        @keydown.enter="toggle"
-        @keydown.space.prevent="toggle"
-      >
-        <div class="flex-1 flex items-center gap-2.5">
-          <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
-            {{ props.filter.label }}
+    <!-- Accordion header (only in accordion mode) -->
+    <template v-if="displayMode === 'accordion'">
+      <div 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-between items-center gap-1 cursor-pointer"
+          @click="toggle"
+          role="button"
+          tabindex="0"
+          :aria-expanded="isFilterVisible"
+          :aria-controls="`filter-${filter.code}`"
+          @keydown.enter="toggle"
+          @keydown.space.prevent="toggle"
+        >
+          <div class="flex-1 flex items-center gap-2.5">
+            <div class="flex-1 text-surface-on-surface text-base font-bold leading-normal text-left">
+              {{ filter.label }}
+            </div>
           </div>
+          <SwIconButton
+            type="ghost"
+            :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
+            tabindex="-1"
+          >
+            <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
+          </SwIconButton>
         </div>
-        <SwIconButton 
-          type="ghost" 
-          :aria-label="isFilterVisible ? 'Collapse filter' : 'Expand filter'"
-          tabindex="-1"
-        >
-          <SwChevronIcon :direction="isFilterVisible ? 'up' : 'down'" :size="24" />
-        </SwIconButton>
       </div>
-    </div>
+    </template>
 
+    <!-- Filter content -->
     <transition name="filter-collapse">
-      <div v-if="isFilterVisible" class="self-stretch">
+      <div v-if="isFilterVisible || displayMode === 'dropdown'" class="self-stretch">
         <div class="pt-6 space-y-4">
           <div class="self-stretch inline-flex justify-start items-start gap-2 w-full">
             <div class="flex-1 pt-[3px]">
               <SwSwitchButton
                 :model-value="currentFilterData"
                 @update:model-value="handleRadioUpdate"
-                :name="props.filter.code"
-                :aria-label="props.filter.label"
-                :label="props.filter.label"
-                :description="props.description || translations.listing.freeShipping"
+                :name="filter.code"
+                :aria-label="filter.label"
+                :label="filter.label"
+                :description="description || translations.listing.freeShipping"
               />
             </div>
           </div>

package/app/components/public/cms/element/CmsElementSidebarFilter.vue

@@ -1,12 +1,20 @@
 <script setup lang="ts">
 import type { CmsElementSidebarFilter } from "@shopware/composables";
+import { inject } from "vue";
 
 defineProps<{
   content: CmsElementSidebarFilter;
 }>();
+
+// Inject layout context from parent section
+// If in sidebar section -> use vertical accordion filters
+// Otherwise -> use horizontal dropdown filters
+const sectionLayout = inject<string>("cms-section-layout", "default");
+const isInSidebar = sectionLayout === "sidebar";
 </script>
 <template>
-  <div class="max-w-screen-xl mx-auto">
-    <SwProductListingFilters :content="content" />
+  <div>
+    <SwProductListingFilters v-if="isInSidebar" :content="content" />
+    <SwProductListingFiltersHorizontal v-else :content="content" />
   </div>
 </template>

package/app/components/public/cms/section/CmsSectionDefault.vue

@@ -14,7 +14,6 @@ const { cssClasses, layoutStyles } = getCmsLayoutConfiguration(props.content);
     <CmsGenericBlock
       v-for="cmsBlock in content.blocks"
       :key="cmsBlock.id"
-      class="overflow-auto"
       :content="cmsBlock"
     />
   </div>

package/app/components/public/cms/section/CmsSectionSidebar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCmsSection } from "@shopware/composables";
 import type { CmsSectionSidebar } from "@shopware/composables";
-import { computed } from "vue";
+import { computed, provide } from "vue";
 
 const props = defineProps<{
   content: CmsSectionSidebar;
@@ -12,6 +12,9 @@ const sidebarBlocks = getPositionContent("sidebar");
 const mainBlocks = getPositionContent("main");
 const mobileBehavior = computed(() => props.content.mobileBehavior);
 const fullWidth = computed(() => section.sizingMode === "full_width");
+
+// Provide layout context for child components
+provide("cms-section-layout", "sidebar");
 </script>
 
 <template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware/cms-base-layer",
-  "version": "0.0.0-canary-20260114124620",
+  "version": "0.0.0-canary-20260119085417",
   "description": "Vue CMS Nuxt Layer for Shopware",
   "author": "Shopware",
   "repository": {