refactor: change removable filters behavior

- removable filters will be now updated only on the explict filter selection action
- actions are now sticky so it will be easier to apply filters

Author: bartoszherba

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 {

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

@@ -28,6 +28,7 @@
       class="filters desktop-only"
     >
       <SelectedFilters
+        :removable-filters="removableFilters"
         @removeFilter="doRemoveFilter($event)"
       />
       <hr class="sf-divider">
@@ -165,12 +166,21 @@ export default defineComponent({
   },
   setup({ catUid }, { 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);
       }
@@ -181,22 +191,23 @@ export default defineComponent({
     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[]>([]);
-    const isLoading = ref(true);
     onMounted(async () => {
       const loadedFilters = await getProductFilterByCategoryCommand.execute({ eq: catUid });
       filters.value = loadedFilters.filter((filter) => !getDisabledFilters().includes(filter.attribute_code));
+      updateRemovableFilters();
       isLoading.value = false;
     });
 
@@ -211,6 +222,7 @@ export default defineComponent({
       selectedFilters,
       filters,
       isLoading,
+      removableFilters,
     };
   },
 });

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

@@ -25,37 +25,20 @@
   </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({
   name: 'SelectedFilters',
   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>

packages/theme/modules/catalog/category/components/filters/useFilters.ts

@@ -57,12 +57,29 @@ export const useFilters = () => {
     selectedFilters.value[filter.attribute_code].push(String(option.value));
   };
 
+  const getRemovableFilters = (filters: Aggregation[], selected: SelectedFiltersInterface) => {
+    const result = [];
+
+    filters.forEach((filter) => {
+      filter.options.forEach((option) => {
+        if ((selected[filter.attribute_code] ?? []).includes(option.value)) {
+          result.push({
+            id: filter.attribute_code, name: filter.label, label: option.label, value: option.value,
+          });
+        }
+      });
+    });
+
+    return result;
+  };
+
   return {
     getSelectedFiltersFromUrl,
     isFilterSelected,
     removeFilter,
     selectFilter,
     selectedFilters,
+    getRemovableFilters,
   };
 };