feat: add configurable filters

- filters can now be whitelisted
- update how yes_no filter is rendered on the applied filrer list
- update types for removable filters
- add docs for the filters managing

Author: bartoszherba

docs/.vuepress/config.js

@@ -73,6 +73,7 @@ module.exports = {
         children: [
           ['/guide/image-optimization', 'Image optimization'],
           ['/guide/override-queries', 'Override queries'],
+          ['/guide/filters', 'Filters'],
           ['/guide/testing', 'Testing'],
           ['/guide/recaptcha', 'ReCaptcha'],
         ],

docs/guide/filters.md

@@ -0,0 +1,29 @@
+# Filters
+Filters are filterable attributes available on the category page to narrow the result set. Natively Magetno 2 supports a lot of configuration options for each attribute including renderer, where to display the attribute or how to do that. Unfortunately GraphQL has its limitations and most of the filter options are unavailable for headless fronted purposes. That is why we introduced extensive and configurable implementation to address that issue.
+
+### Renderers
+In the core we implemented four most commonly used renderer types:
+
+* Checkbox
+* Radio
+* Color Swatch
+* Yes No
+
+You can find all of them in `<root>/modules/catalog/category/components/filters/renderer`
+
+### Configuration
+Filter's config file is located in `<root>/modules/catalog/category/config/config.ts`. You can configure what filters you want to display, which renderer to use, what is the type of filter and eventually disable some of them. The list of filters is tha actual set of filter that will be displayed in the sidebar on the category page. If there is no filter configured - at least its code must be set - it will be not displayed.
+The default configuration fallback is as follows
+
+```javascript
+const defaultCfg = {
+  attrCode,
+  type: FilterTypeEnum.CHECKBOX,
+  component: RendererTypesEnum.CHECKBOX,
+  disabled: false,
+};
+```
+As you can see only the `attrCode` is required because it is not possible to guess or assume this parameter.
+
+### Query
+The command responsible for fetching all filters is `<root>>/modules/catalog/category/components/filters/command/getProductFilterByCategoryCommand.ts` and the query `<root>/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts`. This is the best place to modify filters fetching logic.

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

@@ -127,7 +127,7 @@ import {
 
 import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
 import { useUiHelpers } from '~/composables';
-import { getFilterConfig, getDisabledFilters } from '~/modules/catalog/category/config/FiltersConfig';
+import { getFilterConfig, isFilterEnabled } from '~/modules/catalog/category/config/FiltersConfig';
 import SelectedFilters from '~/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue';
 import { getProductFilterByCategoryCommand } from '~/modules/catalog/category/components/filters/command/getProductFilterByCategoryCommand';
 
@@ -208,7 +208,7 @@ export default defineComponent({
 
     onMounted(async () => {
       const loadedFilters = await getProductFilterByCategoryCommand.execute({ eq: props.catUid });
-      filters.value = loadedFilters.filter((filter) => !getDisabledFilters().includes(filter.attribute_code));
+      filters.value = loadedFilters.filter((filter) => isFilterEnabled(filter.attribute_code));
       updateRemovableFilters();
       isLoading.value = false;
     });

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

@@ -7,8 +7,8 @@
     >
       <HTMLContent
         class="selected-filter__label"
-        :tag="span"
-        :content="filter.label"
+        tag="span"
+        :content="getLabel(filter)"
       />
       <button
         type="button"
@@ -27,9 +27,11 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api';
+import { defineComponent, PropType, useContext } from '@nuxtjs/composition-api';
 import { SfBadge, SfIcon } from '@storefront-ui/vue';
 import HTMLContent from '~/components/HTMLContent.vue';
+import type { RemovableFilterInterface } from '~/modules/catalog/category/components/filters/useFilters';
+import { FilterTypeEnum } from '~/modules/catalog/category/config/config';
 
 export default defineComponent({
   components: {
@@ -39,10 +41,26 @@ export default defineComponent({
   },
   props: {
     removableFilters: {
-      type: Array,
+      type: Array as PropType<RemovableFilterInterface[]>,
       default: () => [],
     },
   },
+  setup(props) {
+    const { app: { i18n } } = useContext();
+    console.log(props.removableFilters);
+    const getLabel = (filter: RemovableFilterInterface) => {
+      if (filter.type === FilterTypeEnum.YES_NO) {
+        const yesNo = filter.label === '1' ? i18n.t('Yes') : i18n.t('No');
+        return `${filter.name}: ${yesNo}`;
+      }
+
+      return filter.label;
+    };
+
+    return {
+      getLabel,
+    };
+  },
 });
 </script>
 <style lang="scss">

packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue

@@ -35,7 +35,6 @@ export default defineComponent({
     const { isFilterSelected } = inject('UseFiltersProvider');
     const selected = computed(() => ((id: string, optVal: string) => isFilterSelected(id, optVal)));
     const label = (option: AggregationOption) => `${(option.value === '1' ? i18n.t('Yes') : i18n.t('No'))} ${`(${option.count})`}`;
-
     return { selected, label };
   },
 });

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

@@ -8,6 +8,14 @@ import type { Aggregation, AggregationOption } from '~/modules/GraphQL/types';
 
 export interface SelectedFiltersInterface {[p: string]: string[]}
 
+export interface RemovableFilterInterface {
+  id: string;
+  name: string;
+  label: string;
+  value: string;
+  type: string;
+}
+
 export function useFilters() {
   // @ts-ignore
   const { getFacetsFromURL } = useUiHelpers();
@@ -42,7 +50,7 @@ export function useFilters() {
       set(selectedFilters.value, filter.attribute_code, []);
     }
 
-    if (config.type === FilterTypeEnum.RADIO) {
+    if (config.type === FilterTypeEnum.RADIO || config.type === FilterTypeEnum.YES_NO) {
       selectedFilters.value[filter.attribute_code] = [option.value];
       return;
     }
@@ -57,14 +65,16 @@ export function useFilters() {
     selectedFilters.value[filter.attribute_code].push(String(option.value));
   };
 
-  const getRemovableFilters = (filters: Aggregation[], selected: SelectedFiltersInterface) => {
+  const getRemovableFilters = (filters: Aggregation[], selected: SelectedFiltersInterface): RemovableFilterInterface[] => {
     const result = [];
 
     filters.forEach((filter) => {
       filter.options.forEach((option) => {
         if ((selected[filter.attribute_code] ?? []).includes(option.value)) {
+          const filterConfig = getFilterConfig(filter.attribute_code);
+
           result.push({
-            id: filter.attribute_code, name: filter.label, label: option.label, value: option.value,
+            id: filter.attribute_code, name: filter.label, label: option.label, value: option.value, type: filterConfig.type,
           });
         }
       });

packages/theme/modules/catalog/category/config/FiltersConfig.ts

@@ -13,10 +13,12 @@ export const getFilterConfig = (attrCode: string): FilterConfigInterface => {
     attrCode,
     type: FilterTypeEnum.CHECKBOX,
     component: RendererTypesEnum.CHECKBOX,
+    disabled: false,
   };
 
   const find = config().find((cfgItem) => cfgItem.attrCode === attrCode) ?? {};
   return { ...defaultCfg, ...find };
 };
 
 export const getDisabledFilters = () => config().filter((filter) => filter.disabled).map((filter) => filter.attrCode);
+export const isFilterEnabled = (attrCode: string) => config().find((attr) => attr.attrCode === attrCode && !attr.disabled);

packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.ts

@@ -1,7 +1,7 @@
 import config, { FilterTypeEnum } from '~/modules/catalog/category/config/config';
 import RendererTypesEnum from '~/modules/catalog/category/components/filters/renderer/RendererTypesEnum';
 import {
-  getFilterConfig, getDisabledFilters,
+  getFilterConfig, getDisabledFilters, isFilterEnabled,
 } from '../FiltersConfig';
 
 jest.mock('~/modules/catalog/category/config/config');
@@ -72,4 +72,10 @@ describe('FiltersConfig', () => {
     const expected = ['sale'];
     expect(result).toEqual(expected);
   });
+
+  it('isFilterEnabled', () => {
+    (config as jest.Mock).mockReturnValue(defaultFiltersConfig);
+    expect(isFilterEnabled('invalid')).toBeFalsy();
+    expect(isFilterEnabled('size')).toBeTruthy();
+  });
 });

packages/theme/modules/catalog/category/config/config.ts

@@ -5,6 +5,7 @@ export enum FilterTypeEnum {
   RADIO = 'radio',
   CHECKBOX = 'checkbox',
   SWATCH_COLOR = 'swatch_color',
+  YES_NO = 'yes_no',
 }
 
 /**
@@ -25,24 +26,28 @@ export default function config(): FilterConfigInterface[] {
     {
       attrCode: 'size',
     },
+    {
+      attrCode: 'material',
+    },
+    {
+      attrCode: 'strap_bags',
+    },
+    {
+      attrCode: 'style_bottom',
+    },
     {
       attrCode: 'color',
       type: FilterTypeEnum.SWATCH_COLOR,
       component: RendererTypesEnum.SWATCH_COLOR,
     },
     {
       attrCode: 'new',
-      type: FilterTypeEnum.RADIO,
-      component: RendererTypesEnum.YES_NO,
-    },
-    {
-      attrCode: 'performance_fabric',
-      type: FilterTypeEnum.RADIO,
+      type: FilterTypeEnum.YES_NO,
       component: RendererTypesEnum.YES_NO,
     },
     {
       attrCode: 'sale',
-      type: FilterTypeEnum.RADIO,
+      type: FilterTypeEnum.YES_NO,
       component: RendererTypesEnum.YES_NO,
     },
   ];