refactor: move filters to sidebar on desktop view

packages/theme/lang/de.js

@@ -260,4 +260,5 @@ export default {
   "Show less": "Zeige weniger",
   "Yes": "Ja",
   "No": "Nein",
+  "Apply filters": "Filter anwenden"
 };

packages/theme/lang/en.js

@@ -258,4 +258,5 @@ export default {
   "Show less": "Show less",
   "Yes": "Yes",
   "No": "No",
+  "Apply filters": "Apply filters"
 };

packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss

@@ -1,4 +1,5 @@
 .filters {
+  position: relative;
   &__title {
     --heading-title-font-size: var(--font-size--xl);
     margin: var(--spacer-xl) 0 var(--spacer-base) 0;
@@ -49,6 +50,11 @@
 
   &__buttons {
     margin: var(--spacer-sm) 0;
+    @include for-desktop {
+      background-color: #fff;
+      position: sticky;
+      bottom: 0;
+    }
   }
 
   &__button-clear {
@@ -57,3 +63,10 @@
     margin: var(--spacer-xs) 0 0 0;
   }
 }
+.heading__title {
+  border: 1px solid var(--c-light);
+  border-width: 1px 0 0 0;
+  padding: var(--spacer-xs) 0;
+  font-weight: normal;
+  margin-bottom: var(--spacer-sm);
+}

packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue

@@ -1,12 +1,34 @@
 <template>
-  <SfSidebar
-    :visible="isVisible"
-    class="sidebar-filters"
-    title="Filters"
-    @close="$emit('close')"
-  >
-    <div class="filters desktop-only">
+  <div>
+    <h4 class="heading__title h4 desktop-only">
+      {{ $t('Filters') }}
+    </h4>
+    <div v-if="isLoading">
+      <div
+        v-for="n in 3"
+        :key="n"
+      >
+        <SkeletonLoader
+          class="filters__title sf-heading--left sf-heading"
+          height="20px"
+          width="85%"
+        />
+        <SkeletonLoader width="50%" />
+        <SkeletonLoader
+          width="62%"
+        />
+        <SkeletonLoader
+          width="40%"
+          height="10px"
+        />
+      </div>
+    </div>
+    <div
+      v-else
+      class="filters desktop-only"
+    >
       <SelectedFilters
+        :removable-filters="removableFilters"
         @removeFilter="doRemoveFilter($event)"
       />
       <hr class="sf-divider">
@@ -26,36 +48,12 @@
           @selectFilter="selectFilter(filter, $event)"
         />
       </div>
-    </div>
-    <SfAccordion class="filters smartphone-only">
-      <SelectedFilters
-        @removeFilter="doRemoveFilter($event)"
-      />
-      <hr class="sf-divider">
-      <div
-        v-for="(filter, i) in filters"
-        :key="i"
-      >
-        <SfAccordionItem
-          :key="`filter-title-${filter.attribute_code}`"
-          :header="filter.label"
-          class="filters__accordion-item"
-        >
-          <component
-            :is="getFilterConfig(filter.attribute_code).component"
-            :filter="filter"
-            @selectFilter="selectFilter(filter, $event)"
-          />
-        </SfAccordionItem>
-      </div>
-    </SfAccordion>
-    <template #content-bottom>
       <div class="filters__buttons">
         <SfButton
           class="sf-button--full-width"
           @click="doApplyFilters"
         >
-          {{ $t('Done') }}
+          {{ $t('Apply filters') }}
         </SfButton>
         <SfButton
           class="sf-button--full-width filters__button-clear"
@@ -64,8 +62,53 @@
           {{ $t('Clear all') }}
         </SfButton>
       </div>
-    </template>
-  </SfSidebar>
+    </div>
+    <SfSidebar
+      :visible="isVisible"
+      class="sidebar-filters smartphone-only"
+      title="Filters"
+      @close="$emit('close')"
+    >
+      <SfAccordion class="filters smartphone-only">
+        <SelectedFilters
+          @removeFilter="doRemoveFilter($event)"
+        />
+        <hr class="sf-divider">
+        <div
+          v-for="(filter, i) in filters"
+          :key="i"
+        >
+          <SfAccordionItem
+            :key="`filter-title-${filter.attribute_code}`"
+            :header="filter.label"
+            class="filters__accordion-item"
+          >
+            <component
+              :is="getFilterConfig(filter.attribute_code).component"
+              :filter="filter"
+              @selectFilter="selectFilter(filter, $event)"
+            />
+          </SfAccordionItem>
+        </div>
+      </SfAccordion>
+      <template #content-bottom>
+        <div class="filters__buttons">
+          <SfButton
+            class="sf-button--full-width"
+            @click="doApplyFilters"
+          >
+            {{ $t('Apply filters') }}
+          </SfButton>
+          <SfButton
+            class="sf-button--full-width filters__button-clear"
+            @click="doClearFilters"
+          >
+            {{ $t('Clear all') }}
+          </SfButton>
+        </div>
+      </template>
+    </SfSidebar>
+  </div>
 </template>
 <script lang="ts">
 import {
@@ -80,6 +123,7 @@ import {
   SfSidebar,
 } from '@storefront-ui/vue';
 
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
 import { useUiHelpers } from '~/composables';
 import { getFilterConfig, getDisabledFilters } from '~/modules/catalog/category/config/FiltersConfig';
 import SelectedFilters from '~/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue';
@@ -98,6 +142,7 @@ export default defineComponent({
   name: 'CategoryFilters',
   components: {
     SelectedFilters,
+    SkeletonLoader,
     CheckboxType: () => import('~/modules/catalog/category/components/filters/renderer/CheckboxType.vue'),
     SwatchColorType: () => import('~/modules/catalog/category/components/filters/renderer/SwatchColorType.vue'),
     RadioType: () => import('~/modules/catalog/category/components/filters/renderer/RadioType.vue'),
@@ -121,35 +166,49 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const { changeFilters, clearFilters } = useUiHelpers();
+    const removableFilters = ref([]);
+    const filters = ref<Aggregation[]>([]);
+    const isLoading = ref(true);
+
     const {
-      selectedFilters, selectFilter, removeFilter, isFilterSelected,
+      selectedFilters, selectFilter, removeFilter, isFilterSelected, getRemovableFilters,
     } = useFilters();
 
+    const updateRemovableFilters = () => {
+      removableFilters.value = getRemovableFilters(filters.value, selectedFilters.value);
+    };
+
     const doApplyFilters = () => {
       changeFilters(selectedFilters.value, false);
+      updateRemovableFilters();
+      if (window?.scroll) {
+        window.scroll(0, 0);
+      }
       emit('reloadProducts');
       emit('close');
     };
 
     const doRemoveFilter = ({ id, value }: { id: string, value: string }) => {
       removeFilter(id, value);
       changeFilters(selectedFilters.value, false);
+      updateRemovableFilters();
       emit('reloadProducts');
       emit('close');
     };
 
     const doClearFilters = () => {
       clearFilters(false);
       selectedFilters.value = {};
+      updateRemovableFilters();
       emit('reloadProducts');
       emit('close');
     };
 
-    const filters = ref<Aggregation[]>([]);
-
     onMounted(async () => {
       const loadedFilters = await getProductFilterByCategoryCommand.execute({ eq: props.catUid });
       filters.value = loadedFilters.filter((filter) => !getDisabledFilters().includes(filter.attribute_code));
+      updateRemovableFilters();
+      isLoading.value = false;
     });
 
     provide('UseFiltersProvider', { isFilterSelected, selectedFilters, filters });
@@ -162,6 +221,8 @@ export default defineComponent({
       getFilterConfig,
       selectedFilters,
       filters,
+      isLoading,
+      removableFilters,
     };
   },
 });

packages/theme/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue

@@ -1,67 +1,43 @@
 <template>
-  <div>
-    <div class="sf-heading filters__title">
-      <h2 class="sf-heading__title h2">
-        {{ $t('Filters') }}
-      </h2>
-    </div>
-    <div class="selected-filters-wrapper">
-      <SfBadge
-        v-for="(filter, key) in removableFilters"
-        :key="key"
-        class="selected-filter"
+  <div class="selected-filters-wrapper">
+    <SfBadge
+      v-for="(filter, key) in removableFilters"
+      :key="key"
+      class="selected-filter"
+    >
+      <span class="selected-filter__label">
+        {{ filter.label }}
+      </span>
+      <button
+        type="button"
+        class="selected-filter__remove"
+        @click.prevent="$emit('removeFilter', {id: filter.id, value: filter.value})"
       >
-        <a
-          href="#"
-          class="selected-filter__remove"
-          @click.prevent="$emit('removeFilter', {id: filter.id, value: filter.value})"
-        >
-          <SfIcon
-            class="sf-cross__icon"
-            icon="cross"
-            size="20px"
-            color="white"
-            viewBox="0 0 24 12"
-          />
-        </a>
-        <span class="selected-filter__label">
-          {{ filter.label }}
-        </span>
-      </SfBadge>
-    </div>
+        <SfIcon
+          class="sf-cross__icon"
+          icon="cross"
+          size="20px"
+          color="white"
+          viewBox="0 0 24 12"
+        />
+      </button>
+    </SfBadge>
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, inject } from '@nuxtjs/composition-api';
+import { defineComponent } from '@nuxtjs/composition-api';
 import { SfBadge, SfIcon } from '@storefront-ui/vue';
-import type { UseFiltersProviderInterface } from '~/modules/catalog/category/components/filters/CategoryFilters.vue';
 
 export default defineComponent({
   components: {
     SfBadge,
     SfIcon,
   },
-  setup() {
-    const { selectedFilters, filters }: UseFiltersProviderInterface = inject('UseFiltersProvider');
-
-    const removableFilters = computed(() => {
-      const result = [];
-
-      filters.value.forEach((filter) => {
-        filter.options.forEach((option) => {
-          if ((selectedFilters.value[filter.attribute_code] ?? []).includes(option.value)) {
-            result.push({
-              id: filter.attribute_code, name: filter.label, label: option.label, value: option.value,
-            });
-          }
-        });
-      });
-
-      return result;
-    });
-    return {
-      removableFilters,
-    };
+  props: {
+    removableFilters: {
+      type: Array,
+      default: () => [],
+    },
   },
 });
 </script>
@@ -70,17 +46,23 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
 }
+
 .selected-filter {
   display: flex;
   margin-right: var(--spacer-xs);
   margin-bottom: var(--spacer-xs);
+  padding: var(--spacer-xs) var(--spacer-xs);
+
   &__label {
     font-size: var(--font-size--base);
   }
+
   &__remove {
     display: inline-flex;
     align-items: center;
-    margin-right: 6px;
+    background: none;
+    border: none;
+    cursor: pointer;
   }
 }
 </style>