From c7c5fa79a412f72fa12dfbbd51c683595ee9ef71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Meyer?= <b.meyer@shopware.com>
Date: Tue, 6 Jun 2023 15:58:57 +0200
Subject: [PATCH] fix(search): filters and design (#239)

---
 packages/composables/src/useListing.ts        |   8 +-
 .../components/layout/LayoutStoreSearch.vue   |   2 +-
 .../listing-filters/ListingFilter.vue         |  45 +++++
 .../listing-filters/ListingFilters.vue        | 185 ++++++++++++++----
 .../ListingFiltersManufacturer.vue            |  89 ---------
 .../listing-filters/ListingFiltersPrice.vue   | 129 +++++++-----
 .../ListingFiltersProperties.vue              | 147 +++++++-------
 .../listing-filters/ListingFiltersRating.vue  | 122 +++++++-----
 .../ListingFiltersShippingFree.vue            | 125 +++++++-----
 .../vue-demo-store/i18n/en-US/general.json    |   8 +-
 .../vue-demo-store/i18n/pl-PL/general.json    |   8 +-
 templates/vue-demo-store/pages/search.vue     |  36 ++--
 12 files changed, 549 insertions(+), 355 deletions(-)
 create mode 100644 templates/vue-demo-store/components/listing-filters/ListingFilter.vue
 delete mode 100644 templates/vue-demo-store/components/listing-filters/ListingFiltersManufacturer.vue

diff --git a/packages/composables/src/useListing.ts b/packages/composables/src/useListing.ts
index d28977089..ab811dba9 100644
--- a/packages/composables/src/useListing.ts
+++ b/packages/composables/src/useListing.ts
@@ -467,15 +467,17 @@ export function createListingComposable<ELEMENTS_TYPE>({
     const appliedFilters = Object.assign({}, getCurrentFilters.value, filter, {
       query: getCurrentFilters.value.search,
     });
-    _storeAppliedListing.value.currentFilters = appliedFilters;
+    if (_storeAppliedListing.value) {
+      _storeAppliedListing.value.currentFilters = appliedFilters;
+    }
     return search(appliedFilters);
   };
 
   const resetFilters = () => {
     const defaultFilters = Object.assign(
       {
-        manufacturer: [],
-        properties: [],
+        manufacturer: "",
+        properties: "",
         price: { min: 0, max: 0 },
         search: getCurrentFilters.value.search,
       },
diff --git a/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue b/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
index 8ae0d8da3..602311680 100644
--- a/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
+++ b/templates/vue-demo-store/components/layout/LayoutStoreSearch.vue
@@ -124,7 +124,7 @@ watch(enter, (value) => {
             {{ $t("search.see") }}
             <span v-if="getTotal !== 1">{{ $t("search.all") }}</span>
             {{ getTotal }}
-            <span>{{ $tc("search.result", getTotal) }}</span>
+            <span>{{ $t("search.result", getTotal) }}</span>
           </NuxtLink>
           <div v-else>{{ $t("search.noResults") }}</div>
         </div>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFilter.vue b/templates/vue-demo-store/components/listing-filters/ListingFilter.vue
new file mode 100644
index 000000000..55206ae64
--- /dev/null
+++ b/templates/vue-demo-store/components/listing-filters/ListingFilter.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { ListingFilter } from "@shopware-pwa/types";
+import ListingFiltersPrice from "./ListingFiltersPrice.vue";
+import ListingFiltersProperties from "./ListingFiltersProperties.vue";
+import ListingFiltersRating from "./ListingFiltersRating.vue";
+import ListingFiltersShippingFree from "./ListingFiltersShippingFree.vue";
+
+const emit = defineEmits<{
+  (
+    e: "selectFilterValue",
+    { code, value }: { code: string; value: string }
+  ): void;
+}>();
+
+const props = defineProps<{
+  filter: ListingFilter;
+  selectedFilters: {
+    [key: string]: object;
+  };
+}>();
+
+const cmsMap = () => {
+  const map: {
+    [key: string]: object;
+  } = {
+    manufacturer: ListingFiltersProperties,
+    properties: ListingFiltersProperties,
+    price: ListingFiltersPrice,
+    rating: ListingFiltersRating,
+    "shipping-free": ListingFiltersShippingFree,
+  };
+
+  return map[props.filter?.code];
+};
+</script>
+<template>
+  <div>
+    <component
+      :is="cmsMap()"
+      :filter="filter"
+      :selected-filters="selectedFilters"
+      @select-value="emit('selectFilterValue', $event)"
+    />
+  </div>
+</template>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFilters.vue b/templates/vue-demo-store/components/listing-filters/ListingFilters.vue
index cd4cd0936..499067a6e 100644
--- a/templates/vue-demo-store/components/listing-filters/ListingFilters.vue
+++ b/templates/vue-demo-store/components/listing-filters/ListingFilters.vue
@@ -1,55 +1,168 @@
 <script setup lang="ts">
-import { ListingFilterCode } from "@shopware-pwa/types";
+import ListingFilter from "./ListingFilter.vue";
+import {
+  ComputedRef,
+  UnwrapNestedRefs,
+  computed,
+  provide,
+  reactive,
+} from "vue";
 
-const { getAvailableFilters, setCurrentFilters, resetFilters } = useListing({
+const {
+  filtersToQuery,
+  getCurrentFilters,
+  getCurrentSortingOrder,
+  getInitialFilters,
+  search,
+} = useListing({
   listingType: "productSearchListing",
 });
 
-const mapComponent = (code: ListingFilterCode): string => {
-  const components: { [key: string]: string } = {
-    manufacturer: "ListingFiltersManufacturer",
-    properties: "ListingFiltersProperties",
-    price: "ListingFiltersPrice",
-    rating: "ListingFiltersRating",
-    "shipping-free": "ListingFiltersShippingFree",
-  };
+const route = useRoute();
+const router = useRouter();
 
-  return components[code];
-};
+// @ToDo: clean up the "any" inside searchSelectedFilters
+/* eslint-disable */
+const searchSelectedFilters: UnwrapNestedRefs<{
+  [key: string]: any;
+}> = reactive<{
+  manufacturer: Set<any>;
+  properties: Set<any>;
+  "min-price": string | number | undefined;
+  "max-price": string | number | undefined;
+  rating: string | number | undefined;
+  "shipping-free": boolean | undefined;
+}>({
+  manufacturer: new Set(),
+  properties: new Set(),
+  "min-price": undefined,
+  "max-price": undefined,
+  rating: undefined,
+  "shipping-free": undefined,
+});
+/* eslint-enable */
 
-const dirty = ref(false);
+const searchCriteriaForRequest: ComputedRef<{
+  [code: string]: string | string[] | number | number[] | boolean | undefined;
+}> = computed(() => ({
+  // turn Set to array and then into string with | separator
+  manufacturer: [...searchSelectedFilters.manufacturer]?.join("|"),
+  // turn Set to array and then into string with | separator
+  properties: [...searchSelectedFilters.properties]?.join("|"),
+  "min-price": searchSelectedFilters["min-price"],
+  "max-price": searchSelectedFilters["max-price"],
+  order: getCurrentSortingOrder.value,
+  "shipping-free": searchSelectedFilters["shipping-free"],
+  rating: searchSelectedFilters["rating"],
+}));
 
-const updateFilter = (filter: {
+for (const param in route.query) {
+  if (searchSelectedFilters.hasOwnProperty(param)) {
+    if (
+      searchSelectedFilters[param] &&
+      typeof searchSelectedFilters[param] === "object"
+    ) {
+      (route.query[param] as unknown as string)
+        .split("|")
+        .forEach((element) => {
+          searchSelectedFilters[param].add(element);
+        });
+    } else {
+      searchSelectedFilters[param] = route.query[param];
+    }
+  }
+}
+
+const onOptionSelectToggle = async ({
+  code,
+  value,
+}: {
   code: string;
-  value: string | boolean | number;
+  value: string;
 }) => {
-  setCurrentFilters({ [filter.code]: filter.value });
-  dirty.value = true;
+  if (!["properties", "manufacturer"].includes(code)) {
+    searchSelectedFilters[code] = value;
+  } else {
+    if (searchSelectedFilters[code]?.has(value)) {
+      searchSelectedFilters[code]?.delete(value);
+    } else {
+      searchSelectedFilters[code]?.add(value);
+    }
+  }
+
+  await search({
+    ...searchCriteriaForRequest.value,
+    ...route.query,
+  });
+  await router.push({
+    query: {
+      query: route.query.query,
+      ...filtersToQuery(searchCriteriaForRequest.value),
+    },
+  });
 };
 
-const handleReset = () => {
-  dirty.value = false;
-  resetFilters();
+const clearFilters = async () => {
+  searchSelectedFilters.manufacturer.clear();
+  searchSelectedFilters.properties.clear();
+  searchSelectedFilters["min-price"] = undefined;
+  searchSelectedFilters["max-price"] = undefined;
+  searchSelectedFilters["rating"] = undefined;
+  searchSelectedFilters["shipping-free"] = undefined;
+  search({
+    ...route.query,
+    ...filtersToQuery(searchCriteriaForRequest.value),
+  });
+
+  await router.push({
+    query: {
+      query: route.query.query,
+      ...filtersToQuery(searchCriteriaForRequest.value),
+    },
+  });
 };
+
+async function invokeCleanFilters() {
+  await search({
+    ...route.query,
+  });
+  clearFilters();
+}
+
+const selectedOptionIds = computed(() => [
+  ...searchSelectedFilters.properties,
+  ...searchSelectedFilters.manufacturer,
+]);
+provide("selectedOptionIds", selectedOptionIds);
 </script>
 
 <template>
   <div class="flex flex-wrap gap-5">
-    <component
-      :is="mapComponent(filter.code)"
-      v-for="filter in getAvailableFilters"
-      :key="filter.code"
-      :filter="filter"
-      @select-value="updateFilter"
-    />
-
-    <button
-      v-show="dirty"
-      class="justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-      type="button"
-      @click="handleReset"
-    >
-      {{ $t("listing.resetFilters") }}
-    </button>
+    <div v-if="getInitialFilters.length" class="flex flex-wrap">
+      <div
+        v-for="filter in getInitialFilters"
+        :key="`${filter?.id || filter?.code}`"
+        class="mb-2 w-full"
+      >
+        <ListingFilter
+          class="relative"
+          :selected-filters="getCurrentFilters"
+          :filter="filter"
+          @select-filter-value="onOptionSelectToggle"
+        />
+      </div>
+      <div v-if="selectedOptionIds.length !== 0" class="mx-auto mt-4 mb-2">
+        <button
+          class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+          type="button"
+          @click="invokeCleanFilters"
+        >
+          {{ $t("search.resetFilters") }}
+          <span
+            class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
+          ></span>
+        </button>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFiltersManufacturer.vue b/templates/vue-demo-store/components/listing-filters/ListingFiltersManufacturer.vue
deleted file mode 100644
index e180a8771..000000000
--- a/templates/vue-demo-store/components/listing-filters/ListingFiltersManufacturer.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup lang="ts">
-import { ListingFilter } from "@shopware-pwa/types";
-
-const { getCurrentFilters } = useListing({
-  listingType: "productSearchListing",
-});
-
-defineProps<{
-  filter: ListingFilter;
-}>();
-
-const emits = defineEmits<{
-  (e: "select-value", value: { code: string; value: unknown }): void;
-}>();
-
-const selectedOptionIds = computed(() => [
-  ...getCurrentFilters.value.manufacturer,
-]);
-
-const isOpen = ref<boolean>(false);
-
-const onToggleOption = (entity: { code: string; id: string }) => {
-  let manufacturerIds = [];
-  if (selectedOptionIds.value.includes(entity.id)) {
-    manufacturerIds = selectedOptionIds.value.filter(
-      (entry) => entry != entity.id
-    );
-  } else {
-    manufacturerIds = [...selectedOptionIds.value, entity.id];
-  }
-
-  emits("select-value", {
-    code: entity.code,
-    value: manufacturerIds,
-  });
-};
-
-const dropdownElement = ref(null);
-
-onClickOutside(dropdownElement, () => (isOpen.value = false));
-</script>
-
-<template>
-  <div ref="dropdownElement" class="relative">
-    <button
-      type="button"
-      class="border-2 border-gray-300 px-2 py-3 bg-white w-full flex items-center justify-between text-gray-400 hover:text-gray-500 rounded"
-      @click="isOpen = !isOpen"
-    >
-      <span class="font-medium text-gray-900">{{ filter.label }}</span>
-      <span class="ml-6 flex items-center">
-        <div
-          class="h-5 w-5"
-          :class="[!isOpen ? 'i-carbon-chevron-down' : 'i-carbon-chevron-up']"
-        />
-      </span>
-    </button>
-    <div
-      :class="[
-        `absolute mt-1 bg-white border-2 border-gray-300 max-h-70 overflow-auto p-3 rounded z-1000`,
-        { hidden: !isOpen },
-      ]"
-    >
-      <div class="space-y-6">
-        <div
-          v-for="entity in filter.entities"
-          :key="`${entity.id}-${selectedOptionIds?.includes(entity.id)}`"
-          class="flex items-center"
-        >
-          <input
-            :id="`filter-mobile-${filter.code}-${entity.id}`"
-            :checked="selectedOptionIds?.includes(entity.id)"
-            :name="filter.name"
-            :value="entity.name"
-            type="checkbox"
-            class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-            @click="onToggleOption({ code: filter.code, id: entity.id })"
-          />
-          <label
-            :for="`filter-mobile-${filter.code}-${entity.id}`"
-            class="ml-3 min-w-0 flex-1 text-gray-500"
-          >
-            {{ entity.name }}
-          </label>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFiltersPrice.vue b/templates/vue-demo-store/components/listing-filters/ListingFiltersPrice.vue
index 1e33b5668..3165d9041 100644
--- a/templates/vue-demo-store/components/listing-filters/ListingFiltersPrice.vue
+++ b/templates/vue-demo-store/components/listing-filters/ListingFiltersPrice.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ListingFilter } from "@shopware-pwa/types";
+import { reactive, ref, watch } from "vue";
 
 const emits = defineEmits<{
   (e: "select-value", value: { code: string; value: unknown }): void;
@@ -9,15 +10,31 @@ const props = defineProps<{
   filter: ListingFilter;
 }>();
 
+type Translations = {
+  listing: {
+    min: string;
+    max: string;
+  };
+};
+let translations: Translations = {
+  listing: {
+    min: "Min",
+    max: "Max",
+  },
+};
+
 const prices = reactive<{ min: number; max: number }>({
   min: props.filter?.min || 0,
   max: props.filter?.max || 0,
 });
 
-const isOpen = ref<boolean>(false);
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
 
 const dropdownElement = ref(null);
-onClickOutside(dropdownElement, () => (isOpen.value = false));
+onClickOutside(dropdownElement, () => (isFilterVisible.value = false));
 
 function onMinPriceChange(newPrice: number, oldPrice: number) {
   if (newPrice == oldPrice) return;
@@ -41,50 +58,74 @@ watch(() => prices.max, debounceMaxPriceUpdate);
 </script>
 
 <template>
-  <div ref="dropdownElement" class="relative">
-    <button
-      type="button"
-      class="border-2 border-gray-300 px-2 py-3 bg-white w-full flex items-center justify-between text-gray-400 hover:text-gray-500 rounded"
-      @click="isOpen = !isOpen"
-    >
-      <span class="font-medium text-gray-900">{{ filter.label }}</span>
-      <span class="ml-6 flex items-center">
-        <div
-          class="h-5 w-5"
-          :class="[!isOpen ? 'i-carbon-chevron-down' : 'i-carbon-chevron-up']"
-        />
-      </span>
-    </button>
-    <div
-      :class="[
-        `absolute bg-white mt-1 border-2 rounded border-gray-300 p-3 z-1000`,
-        { hidden: !isOpen },
-      ]"
-    >
-      <div class="flex gap-4 text-sm text-gray-500">
-        <div class="w-36">
-          <div>{{ $t("listing.min") }}</div>
-          <input
-            id="min-price"
-            v-model="prices.min"
-            type="number"
-            name="min-price"
-            class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full border border-gray-300 rounded"
-            :placeholder="prices.min?.toString()"
-          />
-        </div>
-        <div class="w-36">
-          <div>{{ $t("listing.max") }}</div>
-          <input
-            id="max-price"
-            v-model="prices.max"
-            type="number"
-            name="max-price"
-            class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full border border-gray-300 rounded"
-            :placeholder="prices.max?.toString()"
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
           />
+        </span>
+      </button>
+    </h3>
+
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible" class="space-y-6 mt-5">
+        <div class="mt-2 flex">
+          <div class="w-1/2 flex rounded-md mr-4">
+            <span
+              class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
+            >
+              {{ translations.listing.min }}
+            </span>
+            <input
+              id="min-price"
+              v-model="prices.min"
+              type="number"
+              name="min-price"
+              class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border border-gray-300"
+              :placeholder="prices.min?.toString()"
+            />
+          </div>
+          <div class="w-1/2 flex rounded-md">
+            <span
+              class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
+            >
+              {{ translations.listing.max }}
+            </span>
+            <input
+              id="max-price"
+              v-model="prices.max"
+              type="number"
+              name="max-price"
+              class="pl-2 focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-r-md sm:text-sm border border-gray-300"
+              :placeholder="prices.max?.toString()"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFiltersProperties.vue b/templates/vue-demo-store/components/listing-filters/ListingFiltersProperties.vue
index d7dc5dae1..4930be472 100644
--- a/templates/vue-demo-store/components/listing-filters/ListingFiltersProperties.vue
+++ b/templates/vue-demo-store/components/listing-filters/ListingFiltersProperties.vue
@@ -1,11 +1,8 @@
 <script setup lang="ts">
 import { ListingFilter } from "@shopware-pwa/types";
+import { inject, ref } from "vue";
 import { getTranslatedProperty } from "@shopware-pwa/helpers-next";
 
-const { getCurrentFilters } = useListing({
-  listingType: "productSearchListing",
-});
-
 defineProps<{
   filter: ListingFilter;
 }>();
@@ -13,76 +10,92 @@ defineProps<{
 const emits = defineEmits<{
   (e: "select-value", value: { code: string; value: unknown }): void;
 }>();
-
-const selectedOptionIds = computed(() => [
-  ...getCurrentFilters.value.properties,
-]);
-
-const isOpen = ref<boolean>(false);
-
-const onToggleOption = (entity: { code: string; id: string }) => {
-  let options = [];
-  if (selectedOptionIds.value.includes(entity.id)) {
-    options = selectedOptionIds.value.filter((entry) => entry != entity.id);
-  } else {
-    options = [...selectedOptionIds.value, entity.id];
-  }
-
-  emits("select-value", {
-    code: entity.code,
-    value: options,
-  });
+const selectedOptionIds = inject<string[]>("selectedOptionIds");
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
 };
-
-const dropdownElement = ref(null);
-
-onClickOutside(dropdownElement, () => (isOpen.value = false));
 </script>
 
 <template>
-  <div ref="dropdownElement" class="relative">
-    <button
-      type="button"
-      class="border-1 border-gray-500 px-2 py-3 bg-white w-full flex items-center justify-between text-gray-400 hover:text-gray-500 rounded"
-      @click="isOpen = !isOpen"
-    >
-      <span class="font-medium text-gray-900">{{ filter.label }}</span>
-      <span class="ml-6 flex items-center">
-        <div
-          class="h-5 w-5"
-          :class="[!isOpen ? 'i-carbon-chevron-down' : 'i-carbon-chevron-up']"
-        />
-      </span>
-    </button>
-    <div
-      :class="[
-        `absolute mt-1 bg-white border-2 border-gray-300 max-h-70 overflow-auto p-3 rounded z-1000`,
-        { hidden: !isOpen },
-      ]"
-    >
-      <div class="space-y-6">
-        <div
-          v-for="option in filter.options || filter.entities"
-          :key="`${option.id}-${selectedOptionIds?.includes(option.id)}`"
-          class="flex items-center"
-        >
-          <input
-            :id="`filter-mobile-${filter.code}-${option.id}`"
-            :checked="selectedOptionIds?.includes(option.id)"
-            :name="filter.name"
-            :value="option.name"
-            type="checkbox"
-            class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-            @click="onToggleOption({ code: filter.code, id: option.id })"
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
           />
-          <label
-            :for="`filter-mobile-${filter.code}-${option.id}`"
-            class="ml-3 min-w-0 flex-1 text-gray-500"
+        </span>
+      </button>
+    </h3>
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible" id="filter-section-0" class="pt-6">
+        <div class="space-y-4">
+          <div
+            v-for="option in filter.options || filter.entities"
+            :key="`${option.id}-${selectedOptionIds?.includes(option.id)}`"
+            class="flex items-center"
+            @click="
+              emits('select-value', { code: filter.code, value: option.id })
+            "
           >
-            {{ getTranslatedProperty(option, "name") }}
-          </label>
+            <input
+              :id="`filter-mobile-${filter.code}-${option.id}`"
+              :checked="selectedOptionIds?.includes(option.id)"
+              :name="filter.name"
+              :value="option.name"
+              type="checkbox"
+              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
+            />
+
+            <div v-if="option.media?.url">
+              <img
+                class="ml-2 h-4 w-4"
+                :src="option.media.url"
+                :alt="option.media.translated?.alt || ''"
+                :class="{
+                  'border-blue border-2': selectedOptionIds?.includes(
+                    option.id
+                  ),
+                }"
+              />
+            </div>
+            <div
+              v-else-if="option.colorHexCode"
+              class="ml-2 h-4 w-4"
+              :style="`background-color: ${option.colorHexCode}`"
+              :class="{
+                'border-blue border-2': selectedOptionIds?.includes(option.id),
+              }"
+            />
+            <label for="filter-color-0" class="ml-3 text-gray-600">
+              {{ getTranslatedProperty(option, "name") }}
+            </label>
+          </div>
         </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFiltersRating.vue b/templates/vue-demo-store/components/listing-filters/ListingFiltersRating.vue
index 994594ecc..359dcd058 100644
--- a/templates/vue-demo-store/components/listing-filters/ListingFiltersRating.vue
+++ b/templates/vue-demo-store/components/listing-filters/ListingFiltersRating.vue
@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { ListingFilter } from "@shopware-pwa/types";
+import {
+  EntitiesAggregation,
+  AggregationFilterEntity,
+  PriceAggregation,
+  MaxAggregation,
+  ListingFilter,
+} from "@shopware-pwa/types";
+import { computed, ref } from "vue";
 
 const emits = defineEmits<{
   (e: "select-value", value: { code: string; value: unknown }): void;
@@ -7,74 +14,91 @@ const emits = defineEmits<{
 
 const props = defineProps<{
   filter: ListingFilter;
+  selectedFilters: {
+    [key: string]:
+      | EntitiesAggregation<AggregationFilterEntity>
+      | PriceAggregation
+      | MaxAggregation
+      | number;
+    rating: number;
+  };
 }>();
-
-const { getCurrentFilters } = useListing({
-  listingType: "productSearchListing",
-});
-
 const isHoverActive = ref(false);
 const hoveredIndex = ref(0);
 const displayedScore = computed(() =>
-  isHoverActive.value
-    ? hoveredIndex.value
-    : getCurrentFilters.value?.rating || 0
+  isHoverActive.value ? hoveredIndex.value : props.selectedFilters?.rating || 0
 );
 
 const hoverRating = (key: number) => {
   hoveredIndex.value = key;
   isHoverActive.value = true;
 };
-
 const onChangeRating = () => {
   const newValue =
-    getCurrentFilters.value?.rating !== hoveredIndex.value
+    props.selectedFilters?.rating !== hoveredIndex.value
       ? hoveredIndex.value
       : undefined;
   emits("select-value", { code: props.filter?.code, value: newValue });
 };
 
-const isOpen = ref<boolean>(false);
-
-const dropdownElement = ref(null);
-onClickOutside(dropdownElement, () => (isOpen.value = false));
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
 </script>
 
 <template>
-  <div ref="dropdownElement" class="relative">
-    <button
-      type="button"
-      class="border-2 border-gray-300 px-2 py-3 bg-white w-full flex items-center justify-between text-gray-400 hover:text-gray-500 rounded"
-      @click="isOpen = !isOpen"
-    >
-      <span class="font-medium text-gray-900">{{ filter.label }}</span>
-      <span class="ml-6 flex items-center">
-        <div
-          class="h-5 w-5"
-          :class="[!isOpen ? 'i-carbon-chevron-down' : 'i-carbon-chevron-up']"
-        />
-      </span>
-    </button>
-    <div
-      :class="[
-        `absolute bg-white mt-1 border-2 rounded border-gray-300 p-3 z-1000`,
-        { hidden: !isOpen },
-      ]"
-    >
-      <div class="flex">
-        <div
-          v-for="i in 5"
-          :key="i"
-          class="h-6 w-6 c-yellow-500"
-          :class="{
-            'i-carbon-star-filled': displayedScore >= i,
-            'i-carbon-star': displayedScore < i,
-          }"
-          @mouseleave="isHoverActive = false"
-          @click="onChangeRating()"
-          @mouseover="hoverRating(i)"
-        />
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
+          />
+        </span>
+      </button>
+    </h3>
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible">
+        <div class="space-y-6 mt-4">
+          <div class="flex">
+            <div
+              v-for="i in 5"
+              :key="i"
+              class="h-6 w-6 c-yellow-500"
+              :class="{
+                'i-carbon-star-filled': displayedScore >= i,
+                'i-carbon-star': displayedScore < i,
+              }"
+              @mouseleave="isHoverActive = false"
+              @click="onChangeRating()"
+              @mouseover="hoverRating(i)"
+            />
+          </div>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/templates/vue-demo-store/components/listing-filters/ListingFiltersShippingFree.vue b/templates/vue-demo-store/components/listing-filters/ListingFiltersShippingFree.vue
index 4878233e2..b504aaf30 100644
--- a/templates/vue-demo-store/components/listing-filters/ListingFiltersShippingFree.vue
+++ b/templates/vue-demo-store/components/listing-filters/ListingFiltersShippingFree.vue
@@ -1,68 +1,101 @@
 <script setup lang="ts">
-import { ListingFilter } from "@shopware-pwa/types";
+import {
+  AggregationFilterEntity,
+  EntitiesAggregation,
+  ListingFilter,
+  MaxAggregation,
+  PriceAggregation,
+} from "@shopware-pwa/types";
+import { computed } from "vue";
 
 const props = defineProps<{
   filter: ListingFilter;
+  selectedFilters: {
+    [key: string]:
+      | EntitiesAggregation<AggregationFilterEntity>
+      | PriceAggregation
+      | MaxAggregation
+      | number;
+  };
 }>();
 
 const emits = defineEmits<{
   (e: "select-value", value: { code: string; value: unknown }): void;
 }>();
-
-const state = ref<boolean>(false);
-const isOpen = ref<boolean>(false);
-
+const currentFilterData = computed(
+  () => !!props.selectedFilters[props.filter?.code]
+);
 const onChangeOption = (): void => {
-  state.value = !state.value;
-
   emits("select-value", {
     code: props.filter?.code,
-    value: state.value,
+    value: !currentFilterData.value,
   });
 };
 
+const isFilterVisible = ref<boolean>(false);
+const toggle = () => {
+  isFilterVisible.value = !isFilterVisible.value;
+};
+
 const dropdownElement = ref(null);
-onClickOutside(dropdownElement, () => (isOpen.value = false));
+onClickOutside(dropdownElement, () => (isFilterVisible.value = false));
 </script>
 
 <template>
-  <div ref="dropdownElement" class="relative">
-    <button
-      type="button"
-      class="border-2 border-gray-300 px-2 py-3 bg-white w-full flex items-center justify-between text-gray-400 hover:text-gray-500 rounded"
-      @click="isOpen = !isOpen"
-    >
-      <span class="font-medium text-gray-900">{{ filter.label }}</span>
-      <span class="ml-6 flex items-center">
-        <div
-          class="h-5 w-5"
-          :class="[!isOpen ? 'i-carbon-chevron-down' : 'i-carbon-chevron-up']"
-        />
-      </span>
-    </button>
-    <div
-      :class="[
-        `absolute mt-1 bg-white border-2 border-gray-300 max-h-70 overflow-auto p-3 rounded z-1000`,
-        { hidden: !isOpen },
-      ]"
-    >
-      <div class="flex items-center">
-        <input
-          :id="`filter-mobile-${filter.id || filter.code}`"
-          :checked="state"
-          :name="filter.name"
-          :value="filter.name"
-          type="checkbox"
-          class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
-          @change="onChangeOption"
-        />
-        <label
-          :for="`filter-mobile-${filter.id || filter.code}`"
-          class="ml-3 min-w-0 flex-1 text-gray-500"
-        >
-          {{ filter.label }}
-        </label>
+  <div class="border-b border-gray-200 py-6 px-5">
+    <h3 class="-my-3 flow-root">
+      <button
+        type="button"
+        class="flex w-full items-center justify-between bg-white py-2 text-base text-gray-400 hover:text-gray-500"
+        @click="toggle"
+      >
+        <span class="font-medium text-gray-900 text-left">{{
+          filter.label
+        }}</span>
+        <span class="ml-6 flex items-center">
+          <i
+            :class="[
+              !isFilterVisible
+                ? 'i-carbon-chevron-down'
+                : 'i-carbon-chevron-up',
+            ]"
+          />
+        </span>
+      </button>
+    </h3>
+    <transition name="fade" mode="out-in">
+      <div v-show="isFilterVisible" id="filter-section-0" class="pt-6">
+        <div class="space-y-4">
+          <div class="flex items-center" @click="onChangeOption()">
+            <input
+              :id="`filter-mobile-${filter.id || filter.code}`"
+              :checked="currentFilterData"
+              :name="filter.name"
+              :value="filter.name"
+              type="checkbox"
+              class="h-4 w-4 border-gray-300 rounded text-indigo-600 focus:ring-indigo-500"
+            />
+
+            <label
+              :for="`filter-mobile-${filter.id || filter.code}`"
+              class="ml-3 text-gray-600"
+            >
+              {{ filter.label }}
+            </label>
+          </div>
+        </div>
       </div>
-    </div>
+    </transition>
   </div>
 </template>
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/templates/vue-demo-store/i18n/en-US/general.json b/templates/vue-demo-store/i18n/en-US/general.json
index 608d70ee1..796e50f59 100644
--- a/templates/vue-demo-store/i18n/en-US/general.json
+++ b/templates/vue-demo-store/i18n/en-US/general.json
@@ -13,11 +13,13 @@
     "closeMenu": "Close menu"
   },
   "search": {
-    "noResults": "No products found",
     "all": "all",
+    "filters": "Filters",
+    "noResults": "No products found",
+    "resetFilters": "Reset Filters",
     "result": "result | results",
-    "see": "see",
-    "resultsHeader": "Search Result"
+    "resultsHeader": "Search Result for",
+    "see": "see"
   },
   "messages": {
     "error": "Something goes wrong please try again later"
diff --git a/templates/vue-demo-store/i18n/pl-PL/general.json b/templates/vue-demo-store/i18n/pl-PL/general.json
index 46094a3b0..dc89a0883 100644
--- a/templates/vue-demo-store/i18n/pl-PL/general.json
+++ b/templates/vue-demo-store/i18n/pl-PL/general.json
@@ -13,11 +13,13 @@
     "closeMenu": "Zamknij menu"
   },
   "search": {
-    "noResults": "Nie znaleziono produktów",
     "all": "wszystkie",
+    "filters": "Filtr",
+    "noResults": "Nie znaleziono produktów",
+    "resetFilters": "Zresetuj filtry",
     "result": "wynik | wyniki | wyników",
-    "see": "zobacz",
-    "resultsHeader": "Wyniki wyszukiwania"
+    "resultsHeader": "Wynik wyszukiwania dla",
+    "see": "zobacz"
   },
   "messages": {
     "error": "Coś poszło nie tak, spróbuj ponownie później"
diff --git a/templates/vue-demo-store/pages/search.vue b/templates/vue-demo-store/pages/search.vue
index b06cc3fd7..4848ea692 100644
--- a/templates/vue-demo-store/pages/search.vue
+++ b/templates/vue-demo-store/pages/search.vue
@@ -66,23 +66,31 @@ export default {
       />
     </div>
 
-    <h1 class="mb-8 text-3xl font-extrabold text-center">
-      <span v-if="products.length">{{ $t("search.resultsHeader") }}</span>
+    <h1 class="mb-8 mt-8 md:mt-0 text-3xl text-center">
+      <span v-if="products.length"
+        >{{ $t("search.resultsHeader") }} "<strong>{{
+          route.query.query
+        }}</strong
+        >"</span
+      >
       <span v-else>{{ $t("search.noResults") }}</span>
     </h1>
 
-    <ListingFilters class="mb-4" />
-
-    <hr />
-
-    <div
-      class="grid grid-cols-1 mt-4 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8"
-    >
-      <ProductCard
-        v-for="product in products"
-        :key="product.id"
-        :product="product"
-      />
+    <div class="cms-section-sidebar flex flex-col md:block">
+      <div class="inline-block align-top w-12/12 md:w-3/12 order-2 md:order-1">
+        <h2>{{ $t("search.filters") }}</h2>
+        <ListingFilters class="pr-4 md:pr-8" />
+      </div>
+      <div class="inline-block w-12/12 md:w-9/12 order-1 md:order-2">
+        <div class="flex flex-wrap justify-center sm:justify-between">
+          <ProductCard
+            v-for="product in products"
+            :key="product.id"
+            :product="product"
+            class="w-full sm:w-3/7 lg:w-2/7 mb-8"
+          />
+        </div>
+      </div>
     </div>
 
     <SharedPagination