From 3988d0233c2005b6eb69dcd8c680d37bd67f3299 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Mon, 4 Apr 2022 11:23:06 +0200
Subject: [PATCH 1/4] refactor(filter): rework filters - move category filters
 to the separate component - add filters renderers and filter config resolver
 - move configuration from middleware to catalog module - partially add UT,
 add todo for missing tests

---
 packages/theme/composables/types.ts           |  18 +-
 packages/theme/composables/useFacet/_utils.ts |   8 -
 .../theme/composables/useUiHelpers/index.ts   |   6 +-
 packages/theme/getters/facetGetters.ts        |   8 +-
 packages/theme/getters/types.d.ts             |   4 +-
 .../theme/helpers/integrationPlugin/index.ts  |   1 -
 packages/theme/middleware.config.js           |   3 -
 .../components/filters/CategoryFilters.scss   |  59 ++++
 .../components/filters/CategoryFilters.vue    | 139 ++++++++
 .../filters/__tests__/useFilters.spec.js      |  35 ++
 .../filters/renderer/CheckboxType.vue         |  39 +++
 .../components/filters/renderer/RadioType.vue |  42 +++
 .../filters/renderer/RendererTypesEnum.ts     |   8 +
 .../filters/renderer/SwatchColorType.vue      |  48 +++
 .../category/components/filters/useFilters.ts |  66 ++++
 .../catalog/category/config/FiltersConfig.ts  |  48 +++
 .../config/__tests__/filtersConfig.spec.js    |  41 +++
 .../theme/modules/catalog/category/types.d.ts |   9 +-
 packages/theme/modules/catalog/index.js       |   3 +-
 .../pages/{default.vue => category.vue}       | 312 ++----------------
 packages/theme/nuxt.config.js                 |   2 -
 21 files changed, 583 insertions(+), 316 deletions(-)
 create mode 100644 packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
 create mode 100644 packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
 create mode 100644 packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js
 create mode 100644 packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
 create mode 100644 packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
 create mode 100644 packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts
 create mode 100644 packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
 create mode 100644 packages/theme/modules/catalog/category/components/filters/useFilters.ts
 create mode 100644 packages/theme/modules/catalog/category/config/FiltersConfig.ts
 create mode 100644 packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js
 rename packages/theme/modules/catalog/pages/{default.vue => category.vue} (64%)

diff --git a/packages/theme/composables/types.ts b/packages/theme/composables/types.ts
index f2f0ce959..1a0173d43 100644
--- a/packages/theme/composables/types.ts
+++ b/packages/theme/composables/types.ts
@@ -213,7 +213,7 @@ export enum AgnosticOrderStatus {
   Refunded = 'Refunded',
 }
 
-export interface AgnosticFacet {
+export interface FacetInterface {
   type: string;
   id: string;
   value: any;
@@ -223,15 +223,15 @@ export interface AgnosticFacet {
   metadata?: any;
 }
 
-export interface AgnosticGroupedFacet {
+export interface GroupedFacetInterface {
   id: string;
   label: string;
   count?: number;
-  options: AgnosticFacet[];
+  options: FacetInterface[];
 }
 
 export interface AgnosticSort {
-  options: AgnosticFacet[];
+  options: FacetInterface[];
   selected: string;
 }
 
@@ -280,16 +280,6 @@ export interface AgnosticReviewMetadata {
   }[];
 }
 
-export interface AgnosticFacet {
-  type: string;
-  id: string;
-  value: any;
-  attrName?: string;
-  count?: number;
-  selected?: boolean;
-  metadata?: any;
-}
-
 export interface CategoryTreeInterface {
   label: string;
   slug?: string;
diff --git a/packages/theme/composables/useFacet/_utils.ts b/packages/theme/composables/useFacet/_utils.ts
index 2a5252dc0..02339a54e 100644
--- a/packages/theme/composables/useFacet/_utils.ts
+++ b/packages/theme/composables/useFacet/_utils.ts
@@ -22,13 +22,6 @@ export const buildBreadcrumbs = (rootCat) => buildBreadcrumbsList(rootCat, [])
 
 const filterFacets = (criteria) => (f) => (criteria ? criteria.includes(f.attribute_code) : true);
 
-const getFacetTypeByCode = (code) => {
-  if (code === 'type_of_stones') {
-    return 'radio';
-  }
-  return 'checkbox';
-};
-
 const createFacetsFromOptions = (facets, filters, facet) => {
   const options = facet.options || [];
   const selectedList = filters && filters[facet.attribute_code] ? filters[facet.attribute_code] : [];
@@ -38,7 +31,6 @@ const createFacetsFromOptions = (facets, filters, facet) => {
       value,
       count,
     }) => ({
-      type: getFacetTypeByCode(facet.attribute_code),
       id: label,
       attrName: label,
       value,
diff --git a/packages/theme/composables/useUiHelpers/index.ts b/packages/theme/composables/useUiHelpers/index.ts
index 771fb9ab4..dec3746fe 100644
--- a/packages/theme/composables/useUiHelpers/index.ts
+++ b/packages/theme/composables/useUiHelpers/index.ts
@@ -1,10 +1,10 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { useRoute, useRouter } from '@nuxtjs/composition-api';
-import { CategoryTreeInterface, Category, AgnosticFacet } from '~/composables/types';
+import { CategoryTreeInterface, Category, FacetInterface } from '~/composables/types';
 
 const nonFilters = new Set(['page', 'sort', 'term', 'itemsPerPage']);
 
-const reduceFilters = (query) => (prev, curr) => {
+const reduceFilters = (query) => (prev, curr: string) => {
   const makeArray = Array.isArray(query[curr]) || nonFilters.has(curr);
 
   return {
@@ -76,7 +76,7 @@ const useUiHelpers = () => {
     });
   };
 
-  const isFacetColor = (facet: AgnosticFacet): boolean => facet.id === 'color';
+  const isFacetColor = (facet: FacetInterface): boolean => facet.id === 'color';
 
   const isFacetCheckbox = (): boolean => false;
 
diff --git a/packages/theme/getters/facetGetters.ts b/packages/theme/getters/facetGetters.ts
index 9030fc6fd..9f243f795 100644
--- a/packages/theme/getters/facetGetters.ts
+++ b/packages/theme/getters/facetGetters.ts
@@ -1,10 +1,10 @@
 import {
   AgnosticCategoryTree,
-  AgnosticGroupedFacet,
+  GroupedFacetInterface,
   AgnosticPagination,
   AgnosticSort,
   AgnosticBreadcrumb,
-  AgnosticFacet,
+  FacetInterface,
 } from '~/composables/types';
 
 import { FacetsGetters } from '~/getters/types';
@@ -17,9 +17,9 @@ import {
 } from '~/composables/useFacet/_utils';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getAll = (searchData: SearchData, criteria?: string[]): AgnosticFacet[] => buildFacets(searchData, reduceForFacets, criteria);
+const getAll = (searchData: SearchData, criteria?: string[]): FacetInterface[] => buildFacets(searchData, reduceForFacets, criteria);
 
-const getGrouped = (searchData, criteria?: string[]): AgnosticGroupedFacet[] => buildFacets(searchData, reduceForGroupedFacets, criteria)
+const getGrouped = (searchData: SearchData, criteria?: string[]): GroupedFacetInterface[] => buildFacets(searchData, reduceForGroupedFacets, criteria)
   ?.filter((facet) => facet.options && facet.options.length > 0);
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/packages/theme/getters/types.d.ts b/packages/theme/getters/types.d.ts
index f59e9c725..1f589d001 100644
--- a/packages/theme/getters/types.d.ts
+++ b/packages/theme/getters/types.d.ts
@@ -2,7 +2,7 @@ import { Country } from '~/modules/GraphQL/types';
 import {
   AgnosticAttribute, Countries, AgnosticPrice, AgnosticTotals,
   AgnosticCoupon, AgnosticDiscount, AgnosticCategoryTree, AgnosticBreadcrumb,
-  AgnosticGroupedFacet, AgnosticFacet, AgnosticSort, AgnosticMediaGalleryItem,
+  GroupedFacetInterface, AgnosticSort, AgnosticMediaGalleryItem,
 } from '~/composables/types';
 
 export interface AddressGetter {
@@ -65,7 +65,7 @@ export interface ForgotPasswordGetters<FORGOT_PASSWORD_RESULT> {
 
 export interface FacetsGetters<SEARCH_DATA, RESULTS, CRITERIA = any> {
   getAll: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => AgnosticFacet[];
-  getGrouped: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => AgnosticGroupedFacet[];
+  getGrouped: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => GroupedFacetInterface[];
   getCategoryTree: (searchData: FacetSearchResult<SEARCH_DATA>) => AgnosticCategoryTree;
   getSortOptions: (searchData: FacetSearchResult<SEARCH_DATA>) => AgnosticSort;
   getProducts: (searchData: FacetSearchResult<SEARCH_DATA>) => RESULTS;
diff --git a/packages/theme/helpers/integrationPlugin/index.ts b/packages/theme/helpers/integrationPlugin/index.ts
index 47645a394..735292d9f 100644
--- a/packages/theme/helpers/integrationPlugin/index.ts
+++ b/packages/theme/helpers/integrationPlugin/index.ts
@@ -48,7 +48,6 @@ export const integrationPlugin = (pluginFn: NuxtPluginWithIntegration) => (nuxtC
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       client.defaults.headers.cookie = setCookieValues((nuxtCtx.app.i18n as any).cookieValues, (client.defaults.headers as any).cookie);
     }
-
     injectInContext({ api, client, config });
   };
 
diff --git a/packages/theme/middleware.config.js b/packages/theme/middleware.config.js
index 6b6a3b130..35452744c 100755
--- a/packages/theme/middleware.config.js
+++ b/packages/theme/middleware.config.js
@@ -19,9 +19,6 @@ module.exports = {
             default: config.get('enableMagentoExternalCheckout'),
           },
         },
-        facets: {
-          available: ['color', 'size', 'price'],
-        },
         customApolloHttpLinkOptions: {
           useGETForQueries: true,
         },
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
new file mode 100644
index 000000000..f513f4922
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
@@ -0,0 +1,59 @@
+.filters {
+  &__title {
+    --heading-title-font-size: var(--font-size--xl);
+    margin: var(--spacer-xl) 0 var(--spacer-base) 0;
+
+    &:first-child {
+      margin: calc(var(--spacer-xl) + var(--spacer-base)) 0 var(--spacer-xs) 0;
+    }
+  }
+
+  &__chosen {
+    color: var(--c-text-muted);
+    font-weight: var(--font-weight--normal);
+    font-family: var(--font-family--secondary);
+    position: absolute;
+    right: var(--spacer-xl);
+  }
+
+  &__item {
+    --radio-container-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
+    --radio-background: transparent;
+    --filter-label-color: var(--c-secondary-variant);
+    --filter-count-color: var(--c-secondary-variant);
+    --checkbox-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
+    padding: var(--spacer-sm) 0;
+    border-bottom: 1px solid var(--c-light);
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    @include for-desktop {
+      --checkbox-padding: 0;
+      margin: var(--spacer-sm) 0;
+      border: 0;
+      padding: 0;
+    }
+  }
+
+  &__accordion-item {
+    --accordion-item-content-padding: 0;
+    position: relative;
+    left: 50%;
+    right: 50%;
+    margin-left: -50vw;
+    margin-right: -50vw;
+    width: 100vw;
+  }
+
+  &__buttons {
+    margin: var(--spacer-sm) 0;
+  }
+
+  &__button-clear {
+    --button-background: var(--c-light);
+    --button-color: var(--c-dark-variant);
+    margin: var(--spacer-xs) 0 0 0;
+  }
+}
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
new file mode 100644
index 000000000..1041f5590
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
@@ -0,0 +1,139 @@
+<template>
+  <SfSidebar
+    :visible="isVisible"
+    class="sidebar-filters"
+    title="Filters"
+    @close="$emit('close')"
+  >
+    <div class="filters desktop-only">
+      <div
+        v-for="(facet, i) in facets"
+        :key="i"
+      >
+        <SfHeading
+          :key="`filter-title-${facet.id}`"
+          :level="4"
+          :title="facet.label"
+          class="filters__title sf-heading--left"
+        />
+        <component
+          :is="getFilterConfig(facet.id).component"
+          :facet="facet"
+          :selected-filters="selectedFilters"
+          @selectFilter="selectFilter(facet, $event)"
+        />
+      </div>
+    </div>
+    <SfAccordion class="filters smartphone-only">
+      <div
+        v-for="(facet, i) in facets"
+        :key="i"
+      >
+        <SfAccordionItem
+          :key="`filter-title-${facet.id}`"
+          :header="facet.label"
+          class="filters__accordion-item"
+        >
+          <component
+            :is="getFilterConfig(facet.id).component"
+            :facet="facet"
+            :selected-filters="selectedFilters"
+            @selectFilter="selectFilter(facet, $event)"
+          />
+        </SfAccordionItem>
+      </div>
+    </SfAccordion>
+    <template #content-bottom>
+      <div class="filters__buttons">
+        <SfButton
+          class="sf-button--full-width"
+          @click="applyFilters"
+        >
+          {{ $t('Done') }}
+        </SfButton>
+        <SfButton
+          class="sf-button--full-width filters__button-clear"
+          @click="clearFilters"
+        >
+          {{ $t('Clear all') }}
+        </SfButton>
+      </div>
+    </template>
+  </SfSidebar>
+</template>
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api';
+import {
+  SfAccordion,
+  SfButton,
+  SfFilter,
+  SfHeading,
+  SfRadio,
+  SfSidebar,
+} from '@storefront-ui/vue';
+
+import { useUiHelpers } from '~/composables';
+import { useFilters } from './useFilters';
+import { getFilterConfig } from '~/modules/catalog/category/config/FiltersConfig';
+
+import RadioType from '~/modules/catalog/category/components/filters/renderer/RadioType.vue';
+import SwatchColorType from '~/modules/catalog/category/components/filters/renderer/SwatchColorType.vue';
+import CheckboxType from '~/modules/catalog/category/components/filters/renderer/CheckboxType.vue';
+
+export default defineComponent({
+  name: 'CategoryFilters',
+  components: {
+    CheckboxType,
+    SwatchColorType,
+    RadioType,
+    SfSidebar,
+    SfHeading,
+    SfAccordion,
+    SfFilter,
+    SfButton,
+    SfRadio,
+  },
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+    availableFacets: {
+      type: Array,
+      default: () => [],
+    },
+    facets: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const { changeFilters } = useUiHelpers();
+    const { getSelectedFilters, isFilterSelected, selectFilter } = useFilters();
+    const selectedFilters = getSelectedFilters();
+
+    const applyFilters = () => {
+      changeFilters(getSelectedFilters().value);
+      emit('close');
+    };
+
+    const clearFilters = () => {
+      changeFilters({});
+      emit('close');
+    };
+
+    return {
+      isFilterSelected,
+      selectFilter,
+      applyFilters,
+      clearFilters,
+      getFilterConfig,
+      selectedFilters,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import './CategoryFilters.scss';
+</style>
diff --git a/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js b/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js
new file mode 100644
index 000000000..94a374777
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js
@@ -0,0 +1,35 @@
+import useFilters from '~/modules/catalog/category/components/filters/useFilters';
+import { getFilterableAttributes } from '~/modules/catalog/category/config/FiltersConfig';
+
+import { useUiHelpers } from '~/composables';
+
+jest.mock('~/composables', () => {
+  const originalModule = jest.requireActual('~/composables');
+
+  return {
+    ...originalModule,
+    useUiHelpers: jest.fn(),
+  };
+});
+
+jest.mock('~/modules/catalog/category/config/FiltersConfig');
+
+describe('useFilter', () => {
+  it('getSelectedFilters returns empty data if no filter is selected', () => {
+    useUiHelpers.mockReturnValue({ getFacetsFromURL: jest.fn(() => ({ filters: {} })) });
+    getFilterableAttributes.mockReturnValue(['color']);
+    const { getSelectedFilters } = useFilters();
+    expect(getSelectedFilters()).toMatchObject({ value: { color: [] } });
+  });
+
+  it('getSelectedFilters returns selected filters from url data', () => {
+    useUiHelpers.mockReturnValue({ getFacetsFromURL: jest.fn(() => ({ filters: { color: ['50'] } })) });
+    getFilterableAttributes.mockReturnValue(['color']);
+    const { getSelectedFilters } = useFilters();
+    expect(getSelectedFilters()).toMatchObject({ value: { color: ['50'] } });
+  });
+
+  it.todo('isFilterSelected returns true if filter is selected');
+  it.todo('isFilterSelected returns false if filter is NOT selected');
+  it.todo('selectFilter adds filter to the selected filters pool');
+});
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
new file mode 100644
index 000000000..fd59eec8e
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <SfCheckbox
+      v-for="option in facet.options"
+      :key="`${facet.id}-${option.value}`"
+      :label="option.id + `${option.count ? ` (${option.count})` : ''}`"
+      :selected="Boolean(isFilterSelected(facet, option, selectedFilters))"
+      class="filters__item"
+      @change="$emit('selectFilter', option)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { SfCheckbox } from '@storefront-ui/vue';
+import { defineComponent, ref } from '@nuxtjs/composition-api';
+import { useFilters } from '~/modules/catalog/category/components/filters/useFilters';
+
+export default defineComponent({
+  name: 'CheckboxType',
+  components: {
+    SfCheckbox,
+  },
+  props: {
+    selectedFilters: {
+      type: Object,
+      default: () => ref({}),
+    },
+    facet: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup() {
+    const { isFilterSelected } = useFilters();
+
+    return { isFilterSelected };
+  },
+});
+</script>
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
new file mode 100644
index 000000000..9b9ebd64c
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <SfRadio
+      v-for="option in facet.options"
+      :key="`${facet.id}-${option.value}`"
+      :label="`${option.id}${
+        option.count ? ` (${option.count})` : ''
+      }`"
+      :selected="isFilterSelected(facet, option, selectedFilters)"
+      :value="option.value"
+      name="filter__price"
+      @change="$emit('selectFilter', option)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from '@nuxtjs/composition-api';
+import { SfRadio } from '@storefront-ui/vue';
+import { useFilters } from '~/modules/catalog/category/components/filters/useFilters';
+
+export default defineComponent({
+  name: 'RadioType',
+  components: {
+    SfRadio,
+  },
+  props: {
+    selectedFilters: {
+      type: Object,
+      default: () => ref({}),
+    },
+    facet: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup() {
+    const { isFilterSelected } = useFilters();
+
+    return { isFilterSelected };
+  },
+});
+</script>
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts b/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts
new file mode 100644
index 000000000..efb35dda7
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts
@@ -0,0 +1,8 @@
+enum RendererTypesEnum {
+  RADIO = 'RadioType',
+  CHECKBOX = 'CheckboxType',
+  SWATCH_COLOR = 'SwatchColorType',
+  DEFAULT = 'CheckboxType',
+}
+
+export default RendererTypesEnum;
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
new file mode 100644
index 000000000..258a6fddc
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="swatch_color_wrapper">
+    <SfColor
+      v-for="option in facet.options"
+      :key="`${facet.id}-${option.value}`"
+      :color="option.attrName"
+      :selected="Boolean(isFilterSelected(facet, option, selectedFilters))"
+      class="swatch_color"
+      @click="$emit('selectFilter', option)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from '@nuxtjs/composition-api';
+import { SfColor } from '@storefront-ui/vue';
+import { useFilters } from '~/modules/catalog/category/components/filters/useFilters';
+
+export default defineComponent({
+  name: 'SwatchColorType',
+  components: {
+    SfColor,
+  },
+  props: {
+    selectedFilters: {
+      type: Object,
+      default: () => ref({}),
+    },
+    facet: {
+      type: Object,
+      required: true,
+    },
+  },
+  setup() {
+    const { isFilterSelected } = useFilters();
+
+    return { isFilterSelected };
+  },
+});
+</script>
+<style lang="scss">
+.swatch_color_wrapper {
+  display: flex;
+}
+
+.swatch_color {
+  margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;
+}
+</style>
diff --git a/packages/theme/modules/catalog/category/components/filters/useFilters.ts b/packages/theme/modules/catalog/category/components/filters/useFilters.ts
new file mode 100644
index 000000000..0f2b31e54
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/useFilters.ts
@@ -0,0 +1,66 @@
+import { ref } from '@nuxtjs/composition-api';
+import { useUiHelpers } from '~/composables';
+import { FacetInterface, GroupedFacetInterface } from '~/modules/catalog/category/types';
+import { getFilterConfig, getFilterableAttributes, FilterTypeEnum } from '~/modules/catalog/category/config/FiltersConfig';
+
+export const useFilters = () => {
+  // @ts-ignore
+  const { getFacetsFromURL } = useUiHelpers();
+  const getSelectedFilterValues = () => {
+    const availableFacets = getFilterableAttributes();
+
+    const selectedFilterValues = Object.fromEntries(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      availableFacets.map((curr: string) => [
+        curr,
+        [],
+      ]),
+    );
+    const { filters } = getFacetsFromURL();
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    Object.keys(filters).forEach((filter) => {
+      selectedFilterValues[filter] = filters[filter];
+    });
+
+    return selectedFilterValues;
+  };
+
+  const selectedFilters = ref(getSelectedFilterValues());
+  const getSelectedFilters = () => selectedFilters;
+
+  const isFilterSelected = (facet: GroupedFacetInterface, option: FacetInterface, filtersPool = getSelectedFilters().value) => {
+    const selected = (filtersPool[facet.id] || []).find((filterOpt) => filterOpt === option.value);
+
+    return selected ?? '';
+  };
+
+  const selectFilter = (facet: GroupedFacetInterface, option: FacetInterface) => {
+    const config = getFilterConfig(facet.id);
+    if (config.type === FilterTypeEnum.RADIO) {
+      selectedFilters.value[facet.id] = [option.value];
+      return;
+    }
+
+    if (!selectedFilters.value[facet.id]) {
+      selectedFilters.value[facet.id] = [];
+    }
+
+    if (selectedFilters.value[facet.id].find((f) => f === option.value)) {
+      selectedFilters.value[facet.id] = selectedFilters.value[
+        facet.id
+      ]?.filter((f) => f !== option.value);
+      return;
+    }
+
+    selectedFilters.value[facet.id].push(option.value);
+  };
+
+  return {
+    getSelectedFilterValues,
+    isFilterSelected,
+    selectFilter,
+    getSelectedFilters,
+  };
+};
+
+export default useFilters;
diff --git a/packages/theme/modules/catalog/category/config/FiltersConfig.ts b/packages/theme/modules/catalog/category/config/FiltersConfig.ts
new file mode 100644
index 000000000..85bfdc97e
--- /dev/null
+++ b/packages/theme/modules/catalog/category/config/FiltersConfig.ts
@@ -0,0 +1,48 @@
+import RendererTypesEnum from '~/modules/catalog/category/components/filters/renderer/RendererTypesEnum';
+
+export enum FilterTypeEnum {
+  RADIO = 'radio',
+  CHECKBOX = 'checkbox',
+  SWATCH_COLOR = 'swatch_color',
+}
+
+export interface FilterConfigInterface {
+  attrCode: string;
+  component?: RendererTypesEnum;
+  type?: FilterTypeEnum;
+  [key: string]: any;
+}
+
+/**
+ * Override this to add/modify filters set and data
+ */
+function config(): FilterConfigInterface[] {
+  return [
+    {
+      attrCode: 'price',
+      type: FilterTypeEnum.RADIO,
+      component: RendererTypesEnum.RADIO,
+    },
+    {
+      attrCode: 'size',
+    },
+    {
+      attrCode: 'color',
+      type: FilterTypeEnum.SWATCH_COLOR,
+      component: RendererTypesEnum.SWATCH_COLOR,
+    },
+  ];
+}
+
+export const getFilterConfig = (attrCode: string): FilterConfigInterface => {
+  const defaultCfg = {
+    attrCode,
+    type: FilterTypeEnum.CHECKBOX,
+    component: RendererTypesEnum.CHECKBOX,
+  };
+
+  const find = config().find((cfgItem) => cfgItem.attrCode === attrCode) ?? defaultCfg;
+  return { ...defaultCfg, ...find };
+};
+
+export const getFilterableAttributes = () => config().map((filter) => filter.attrCode);
diff --git a/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js b/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js
new file mode 100644
index 000000000..03ab230c9
--- /dev/null
+++ b/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js
@@ -0,0 +1,41 @@
+import {
+  getFilterConfig, getFilterableAttributes, FilterTypeEnum,
+} from '../FiltersConfig';
+import RendererTypesEnum from '~/modules/catalog/category/components/filters/renderer/RendererTypesEnum';
+
+describe('FiltersConfig', () => {
+  it('getFilterableAttributes', () => {
+    const result = getFilterableAttributes();
+    expect(result).toEqual(['price', 'size', 'color']);
+  });
+
+  it('getFilterConfig with a configured attribute', () => {
+    const result = getFilterConfig('price');
+    const expected = {
+      attrCode: 'price',
+      type: FilterTypeEnum.RADIO,
+      component: RendererTypesEnum.RADIO,
+    };
+    expect(result).toEqual(expected);
+  });
+
+  it('getFilterConfig with a partially configured attribute', () => {
+    const result = getFilterConfig('size');
+    const expected = {
+      attrCode: 'size',
+      type: FilterTypeEnum.CHECKBOX,
+      component: RendererTypesEnum.CHECKBOX,
+    };
+    expect(result).toEqual(expected);
+  });
+
+  it('getFilterConfig with a not-configured attribute (default)', () => {
+    const result = getFilterConfig('ANYTHING');
+    const expected = {
+      attrCode: 'ANYTHING',
+      type: FilterTypeEnum.CHECKBOX,
+      component: RendererTypesEnum.CHECKBOX,
+    };
+    expect(result).toEqual(expected);
+  });
+});
diff --git a/packages/theme/modules/catalog/category/types.d.ts b/packages/theme/modules/catalog/category/types.d.ts
index 2b90a9388..389464815 100644
--- a/packages/theme/modules/catalog/category/types.d.ts
+++ b/packages/theme/modules/catalog/category/types.d.ts
@@ -130,7 +130,7 @@ export interface AgnosticBreadcrumb {
   link: string;
 }
 
-export interface AgnosticFacet {
+export interface FacetInterface {
   type: string;
   id: string;
   value: any;
@@ -140,6 +140,13 @@ export interface AgnosticFacet {
   metadata?: any;
 }
 
+export interface GroupedFacetInterface {
+  id: string;
+  label: string;
+  count?: number;
+  options: FacetInterface[];
+}
+
 export interface CategoryTreeInterface {
   label: string;
   slug?: string;
diff --git a/packages/theme/modules/catalog/index.js b/packages/theme/modules/catalog/index.js
index 1e010cbcd..cc2b6d501 100644
--- a/packages/theme/modules/catalog/index.js
+++ b/packages/theme/modules/catalog/index.js
@@ -1,11 +1,12 @@
 import path from 'node:path';
+import url from 'node:url';
 
 export default function CatalogModule() {
   this.extendRoutes((routes) => {
     routes.unshift({
       name: 'category',
       path: '/c/:slug_1/:slug_2?/:slug_3?/:slug_4?/:slug_5?',
-      component: path.resolve(__dirname, 'pages/default.vue'),
+      component: path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), 'pages/category.vue'),
     });
   });
 }
diff --git a/packages/theme/modules/catalog/pages/default.vue b/packages/theme/modules/catalog/pages/category.vue
similarity index 64%
rename from packages/theme/modules/catalog/pages/default.vue
rename to packages/theme/modules/catalog/pages/category.vue
index 3af46c882..70a5e2f8f 100644
--- a/packages/theme/modules/catalog/pages/default.vue
+++ b/packages/theme/modules/catalog/pages/category.vue
@@ -195,120 +195,12 @@
         </div>
       </div>
 
-      <LazyHydrate when-idle>
-        <SfSidebar
-          v-if="isShowProducts && products.length > 0"
-          :visible="isFilterSidebarOpen"
-          class="sidebar-filters"
-          title="Filters"
-          @close="toggleFilterSidebar"
-        >
-          <div class="filters desktop-only">
-            <div
-              v-for="(facet, i) in facets"
-              :key="i"
-            >
-              <SfHeading
-                :key="`filter-title-${facet.id}`"
-                :level="4"
-                :title="facet.label"
-                class="filters__title sf-heading--left"
-              />
-              <div
-                v-if="isFacetColor(facet)"
-                :key="`${facet.id}-colors`"
-                class="filters__colors"
-              >
-                <SfColor
-                  v-for="option in facet.options"
-                  :key="`${facet.id}-${option.value}`"
-                  :color="option.attrName"
-                  :selected="isFilterSelected(facet, option)"
-                  class="filters__color"
-                  @click="() => selectFilter(facet, option)"
-                />
-              </div>
-              <div v-else-if="facet.id === 'price'">
-                <SfRadio
-                  v-for="option in facet.options"
-                  :key="`${facet.id}-${option.value}`"
-                  :label="`${option.id}${
-                    option.count ? ` (${option.count})` : ''
-                  }`"
-                  :selected="isFilterSelected(facet, option)"
-                  :value="option.value"
-                  name="filter__price"
-                  @change="() => selectFilter(facet, option)"
-                />
-              </div>
-              <div v-else>
-                <SfFilter
-                  v-for="option in facet.options"
-                  :key="`${facet.id}-${option.value}`"
-                  :label="
-                    option.id + `${option.count ? ` (${option.count})` : ''}`
-                  "
-                  :selected="isFilterSelected(facet, option)"
-                  class="filters__item"
-                  @change="() => selectFilter(facet, option)"
-                />
-              </div>
-            </div>
-          </div>
-          <SfAccordion class="filters smartphone-only">
-            <div
-              v-for="(facet, i) in facets"
-              :key="i"
-            >
-              <SfAccordionItem
-                :key="`filter-title-${facet.id}`"
-                :header="facet.label"
-                class="filters__accordion-item"
-              >
-                <div v-if="facet.id === 'price'">
-                  <SfRadio
-                    v-for="option in facet.options"
-                    :key="`${facet.id}-${option.value}`"
-                    :label="`${option.id}${
-                      option.count ? ` (${option.count})` : ''
-                    }`"
-                    :selected="isFilterSelected(facet, option)"
-                    :value="option.value"
-                    name="filter__price"
-                    @change="() => selectFilter(facet, option)"
-                  />
-                </div>
-                <div v-else>
-                  <SfFilter
-                    v-for="option in facet.options"
-                    :key="`${facet.id}-${option.id}`"
-                    :label="option.id"
-                    :selected="isFilterSelected(facet, option)"
-                    class="filters__item"
-                    @change="() => selectFilter(facet, option)"
-                  />
-                </div>
-              </SfAccordionItem>
-            </div>
-          </SfAccordion>
-          <template #content-bottom>
-            <div class="filters__buttons">
-              <SfButton
-                class="sf-button--full-width"
-                @click="applyFilters()"
-              >
-                {{ $t('Done') }}
-              </SfButton>
-              <SfButton
-                class="sf-button--full-width filters__button-clear"
-                @click="applyFilters({})"
-              >
-                {{ $t('Clear all') }}
-              </SfButton>
-            </div>
-          </template>
-        </SfSidebar>
-      </LazyHydrate>
+      <CategoryFilters
+        v-if="isShowProducts"
+        :is-visible="isFilterSidebarOpen"
+        :facets="facets"
+        @close="toggleFilterSidebar"
+      />
     </div>
   </div>
 </template>
@@ -316,25 +208,22 @@
 <script>
 import LazyHydrate from 'vue-lazy-hydration';
 import {
-  SfAccordion,
   SfButton,
-  SfColor,
-  SfFilter,
-  SfHeading,
   SfPagination,
   SfProductCard,
   SfProductCardHorizontal,
   SfProperty,
-  SfRadio,
   SfSelect,
-  SfSidebar,
   SfPrice,
 } from '@storefront-ui/vue';
 import {
-  defineComponent, onMounted, ref, useContext, ssrRef, useFetch,
+  defineComponent, onMounted, ref, ssrRef, useFetch,
 } from '@nuxtjs/composition-api';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
-import { facetGetters, productGetters } from '~/getters';
+import { facetGetters } from '~/getters';
+import {
+  getTotalReviews, getSlug, getProductThumbnailImage, getProductSku, getPrice, getAverageRating, getName,
+} from '~/getters/productGetters';
 import {
   useFacet,
   useUser,
@@ -347,14 +236,15 @@ import { useUrlResolver } from '~/composables/useUrlResolver.ts';
 import cacheControl from '~/helpers/cacheControl';
 import { useAddToCart } from '~/helpers/cart/addToCart';
 import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent.ts';
-import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar';
-import SkeletonLoader from '~/components/SkeletonLoader';
 import { usePrice } from '~/modules/catalog/pricing/usePrice.ts';
-
+import SkeletonLoader from '~/components/SkeletonLoader';
+import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar';
+import { getFilterableAttributes } from '~/modules/catalog/category/config/FiltersConfig';
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
   name: 'CategoryPage',
   components: {
+    CategoryFilters: () => import('~/modules/catalog/category/components/filters/CategoryFilters'),
     SkeletonLoader,
     CategoryNavbar,
     CmsContent: () => import('~/modules/catalog/category/components/cms/CmsContent'),
@@ -362,16 +252,10 @@ export default defineComponent({
     EmptyResults: () => import('~/modules/catalog/category/components/EmptyResults'),
     SfPrice,
     SfButton,
-    SfSidebar,
-    SfFilter,
-    SfRadio,
     SfProductCard,
     SfProductCardHorizontal,
     SfPagination,
-    SfAccordion,
     SfSelect,
-    SfColor,
-    SfHeading,
     SfProperty,
     LazyHydrate,
   },
@@ -384,8 +268,6 @@ export default defineComponent({
     const { getContentData } = useCategoryContent();
     const { addTags } = useCache();
     const uiHelpers = useUiHelpers();
-    const uiState = useUiState();
-
     const cmsContent = ref('');
     const isShowCms = ref(false);
     const isShowProducts = ref(false);
@@ -395,82 +277,22 @@ export default defineComponent({
     const pagination = ref({});
 
     const { path, search: resolveUrl } = useUrlResolver();
-    const {
-      $vsf: { $magento: { config: magentoConfig } },
-    } = useContext();
     const { isAuthenticated } = useUser();
+    const {
+      toggleFilterSidebar,
+      changeToCategoryListView,
+      changeToCategoryGridView,
+      isCategoryGridView,
+      isFilterSidebarOpen,
+    } = useUiState();
     const {
       addItem: addItemToWishlistBase,
       isInWishlist,
       removeItem: removeItemFromWishlist,
     } = useWishlist('GlobalWishlist');
     const { result, search } = useFacet(`facetId:${path}`);
-    const { toggleFilterSidebar } = useUiState();
     const { addItemToCart, isInCart } = useAddToCart();
 
-    const getSelectedFilterValues = () => {
-      const selectedFilterValues = Object.fromEntries(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        magentoConfig.facets.available.map((curr) => [
-          curr,
-          curr === 'price' ? '' : [],
-        ]),
-      );
-      const { filters } = uiHelpers.getFacetsFromURL();
-
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      Object.keys(filters).forEach((filter) => {
-        if (filter === 'price') {
-          const [firstFilter] = filters[filter];
-          selectedFilterValues[filter] = firstFilter;
-        } else {
-          selectedFilterValues[filter] = filters[filter];
-        }
-      });
-      return selectedFilterValues;
-    };
-    const selectedFilters = ref(getSelectedFilterValues());
-
-    const isFilterSelected = (facet, option) => {
-      if (facet.id === 'price') {
-        return selectedFilters.value[facet.id] || '';
-      }
-
-      return (selectedFilters.value[facet.id] || []).includes(option.value);
-    };
-
-    /* eslint-disable */
-    const selectFilter = (facet, option) => {
-      if (facet.id === 'price') {
-        // eslint-disable-next-line
-        selectedFilters.value[facet.id] = option.value;
-        return;
-      }
-
-      if (!selectedFilters.value[facet.id]) {
-        selectedFilters.value[facet.id] = [];
-      }
-
-      if (selectedFilters.value[facet.id].find((f) => f === option.value)) {
-        selectedFilters.value[facet.id] = selectedFilters.value[
-          facet.id
-        ]?.filter((f) => f !== option.value);
-        return;
-      }
-
-      selectedFilters.value[facet.id].push(option.value);
-    };
-    /* eslint-enable */
-
-    const applyFilters = (filters) => {
-      toggleFilterSidebar();
-      if (filters) {
-        selectedFilters.value = filters;
-      }
-
-      uiHelpers.changeFilters(selectedFilters.value);
-    };
-
     const addItemToWishlist = async (product) => {
       await (isInWishlist({ product })
         ? removeItemFromWishlist({ product })
@@ -494,13 +316,11 @@ export default defineComponent({
       isShowProducts.value = content.isShowProducts;
 
       await searchCategoryProduct(routeData?.entity_uid);
-      selectedFilters.value = getSelectedFilterValues();
       products.value = facetGetters.getProducts(result.value) ?? [];
-
       sortBy.value = facetGetters.getSortOptions(result.value);
       facets.value = facetGetters.getGrouped(
         result.value,
-        magentoConfig.facets.available,
+        getFilterableAttributes(),
       );
       pagination.value = facetGetters.getPagination(result.value);
       const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
@@ -533,21 +353,27 @@ export default defineComponent({
 
     return {
       isPriceLoaded,
-      ...productGetters,
+      getTotalReviews,
+      getSlug,
+      getProductThumbnailImage,
+      getProductSku,
+      getPrice,
+      getAverageRating,
+      getName,
       ...uiHelpers,
-      ...uiState,
+      toggleFilterSidebar,
+      isCategoryGridView,
+      changeToCategoryListView,
+      changeToCategoryGridView,
+      isFilterSidebarOpen,
       addItemToCart,
       addItemToWishlist,
-      applyFilters,
       facets,
       isAuthenticated,
-      isFilterSelected,
       isInCart,
       isInWishlist,
       pagination,
       products,
-      selectedFilters,
-      selectFilter,
       sortBy,
       getMagentoImage,
       imageSizes,
@@ -724,72 +550,4 @@ export default defineComponent({
 ::v-deep .sf-sidebar__aside {
   --sidebar-z-index: 3;
 }
-
-.filters {
-  &__title {
-    --heading-title-font-size: var(--font-size--xl);
-    margin: var(--spacer-xl) 0 var(--spacer-base) 0;
-
-    &:first-child {
-      margin: calc(var(--spacer-xl) + var(--spacer-base)) 0 var(--spacer-xs) 0;
-    }
-  }
-
-  &__colors {
-    display: flex;
-  }
-
-  &__color {
-    margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;
-  }
-
-  &__chosen {
-    color: var(--c-text-muted);
-    font-weight: var(--font-weight--normal);
-    font-family: var(--font-family--secondary);
-    position: absolute;
-    right: var(--spacer-xl);
-  }
-
-  &__item {
-    --radio-container-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
-    --radio-background: transparent;
-    --filter-label-color: var(--c-secondary-variant);
-    --filter-count-color: var(--c-secondary-variant);
-    --checkbox-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
-    padding: var(--spacer-sm) 0;
-    border-bottom: 1px solid var(--c-light);
-
-    &:last-child {
-      border-bottom: 0;
-    }
-
-    @include for-desktop {
-      --checkbox-padding: 0;
-      margin: var(--spacer-sm) 0;
-      border: 0;
-      padding: 0;
-    }
-  }
-
-  &__accordion-item {
-    --accordion-item-content-padding: 0;
-    position: relative;
-    left: 50%;
-    right: 50%;
-    margin-left: -50vw;
-    margin-right: -50vw;
-    width: 100vw;
-  }
-
-  &__buttons {
-    margin: var(--spacer-sm) 0;
-  }
-
-  &__button-clear {
-    --button-background: var(--c-light);
-    --button-color: var(--c-dark-variant);
-    margin: var(--spacer-xs) 0 0 0;
-  }
-}
 </style>
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
index fd11af470..c9d85acc5 100755
--- a/packages/theme/nuxt.config.js
+++ b/packages/theme/nuxt.config.js
@@ -15,7 +15,6 @@ const {
         cookies,
         externalCheckout,
         defaultStore,
-        facets,
         magentoBaseUrl,
         imageProvider,
         magentoApiEndpoint,
@@ -85,7 +84,6 @@ export default () => {
         cookies,
         externalCheckout,
         defaultStore,
-        facets,
         magentoBaseUrl,
         imageProvider,
         magentoApiEndpoint,

From d42ebf562e434c27f01f11a07580a1825d01ffc1 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Thu, 7 Apr 2022 09:45:02 +0200
Subject: [PATCH 2/4] refactor(filters): add selected filters component

M2-406
---
 packages/theme/composables/useFacet/index.ts  |   3 +-
 packages/theme/composables/useUrlResolver.ts  |   6 +-
 .../composables/useWishlist/useWishlist.d.ts  |   4 +-
 packages/theme/getters/facetGetters.ts        |   3 +-
 packages/theme/lang/de.js                     |   6 +-
 packages/theme/lang/en.js                     |   8 +-
 packages/theme/modules/GraphQL/types.d.ts     | 968 +++++++++---------
 ...tyResults.vue => CategoryEmptyResults.vue} |   0
 .../components/filters/CategoryFilters.scss   |   2 +-
 .../components/filters/CategoryFilters.vue    | 111 +-
 .../FiltersSidebar/SelectedFilters.vue        |  87 ++
 .../filters/__tests__/useFilters.spec.js      |  15 +-
 .../command/getProductFilterByCategory.gql.ts |  22 +
 .../getProductFilterByCategoryCommand.ts      |  14 +
 .../filters/renderer/CheckboxType.vue         |  40 +-
 .../components/filters/renderer/RadioType.vue |  54 +-
 .../filters/renderer/RendererTypesEnum.ts     |   1 +
 .../filters/renderer/SwatchColorType.vue      |  35 +-
 .../components/filters/renderer/YesNoType.vue |  52 +
 .../category/components/filters/useFilters.ts |  61 +-
 .../components/navbar/CategoryNavbar.vue      |   2 +-
 .../catalog/category/config/FiltersConfig.ts  |  34 +-
 .../config/__tests__/filtersConfig.spec.js    |  46 +-
 .../modules/catalog/category/config/config.ts |  49 +
 .../theme/modules/catalog/pages/category.vue  | 342 ++++---
 packages/theme/tsconfig.json                  |   2 +-
 26 files changed, 1132 insertions(+), 835 deletions(-)
 rename packages/theme/modules/catalog/category/components/{EmptyResults.vue => CategoryEmptyResults.vue} (100%)
 create mode 100644 packages/theme/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue
 create mode 100644 packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts
 create mode 100644 packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategoryCommand.ts
 create mode 100644 packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue
 create mode 100644 packages/theme/modules/catalog/category/config/config.ts

diff --git a/packages/theme/composables/useFacet/index.ts b/packages/theme/composables/useFacet/index.ts
index 819f4b2b7..e744d80a4 100644
--- a/packages/theme/composables/useFacet/index.ts
+++ b/packages/theme/composables/useFacet/index.ts
@@ -73,7 +73,8 @@ export const useFacet = (): UseFacet => {
 
       const itemsPerPage = (params.itemsPerPage) ? params.itemsPerPage : 20;
       const inputFilters = (params.filters) ? params.filters : {};
-      const categoryId = (params.categoryId) ? {
+
+      const categoryId = (params.categoryId && !inputFilters.category_id) ? {
         category_uid: {
           ...(Array.isArray(params.categoryId)
             ? { in: params.categoryId }
diff --git a/packages/theme/composables/useUrlResolver.ts b/packages/theme/composables/useUrlResolver.ts
index e3b0166d8..c000d6e26 100644
--- a/packages/theme/composables/useUrlResolver.ts
+++ b/packages/theme/composables/useUrlResolver.ts
@@ -1,6 +1,6 @@
 import { useRoute, useContext, ref } from '@nuxtjs/composition-api';
 import { Logger } from '~/helpers/logger';
-import { Maybe, UrlResolverQuery } from '~/modules/GraphQL/types';
+import { EntityUrl, Maybe } from '~/modules/GraphQL/types';
 
 export const useUrlResolver = () => {
   const route = useRoute();
@@ -12,9 +12,9 @@ export const useUrlResolver = () => {
     search: null,
   });
 
-  const search = async (): Promise<Maybe<UrlResolverQuery>> => {
+  const search = async (): Promise<Maybe<EntityUrl>> => {
     loading.value = true;
-    let results = null;
+    let results: EntityUrl = {};
 
     try {
       const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '');
diff --git a/packages/theme/composables/useWishlist/useWishlist.d.ts b/packages/theme/composables/useWishlist/useWishlist.d.ts
index 27c372e7f..cde40014b 100644
--- a/packages/theme/composables/useWishlist/useWishlist.d.ts
+++ b/packages/theme/composables/useWishlist/useWishlist.d.ts
@@ -1,5 +1,5 @@
-import { ComposableFunctionArgs } from '~/composables/types';
 import { Ref } from '@nuxtjs/composition-api';
+import { ComposableFunctionArgs } from '~/composables/types';
 import {
   Maybe, Scalars, WishlistItem, WishlistItems,
 } from '~/modules/GraphQL/types';
@@ -32,7 +32,7 @@ export interface UseWishlistErrors {
 export type UseWishlist = {
   wishlist: Ref<Wishlist>,
   loadItemsCount(params: ComposableFunctionArgs<{}>): Promise<number | null>;
-  isInWishlist: (params: { currentWishlist: any; product: any }) => boolean;
+  isInWishlist: (params: { product: any }) => boolean;
   addItem: (
     params: ComposableFunctionArgs<{
       product: any; // TODO: add product intrface
diff --git a/packages/theme/getters/facetGetters.ts b/packages/theme/getters/facetGetters.ts
index 9f243f795..84df8c5b8 100644
--- a/packages/theme/getters/facetGetters.ts
+++ b/packages/theme/getters/facetGetters.ts
@@ -15,6 +15,7 @@ import {
   reduceForGroupedFacets,
   reduceForFacets,
 } from '~/composables/useFacet/_utils';
+import { ProductInterface } from '~/modules/GraphQL/types';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const getAll = (searchData: SearchData, criteria?: string[]): FacetInterface[] => buildFacets(searchData, reduceForFacets, criteria);
@@ -54,7 +55,7 @@ const getCategoryTree = (searchData): AgnosticCategoryTree => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const getProducts = (searchData): any => {
+const getProducts = (searchData): ProductInterface[] => {
   if (!searchData || !searchData.data || !searchData.data.items) {
     return [];
   }
diff --git a/packages/theme/lang/de.js b/packages/theme/lang/de.js
index a92a6e133..49d6aa0bc 100644
--- a/packages/theme/lang/de.js
+++ b/packages/theme/lang/de.js
@@ -256,5 +256,9 @@ export default {
   'Page not found': 'Seite nicht gefunden',
   'Back to Home page': 'Zurück zur Startseite',
   'An error occurred': 'Ein Fehler ist aufgetreten',
-  "AllProductsFromCategory": "Alle {categoryName}"
+  "AllProductsFromCategory": "Alle {categoryName}",
+  "Show more": "Zeig mehr",
+  "Show less": "Zeige weniger",
+  "Yes": "Ja",
+  "No": "Nein",
 };
diff --git a/packages/theme/lang/en.js b/packages/theme/lang/en.js
index 4e8b91190..eec12325c 100644
--- a/packages/theme/lang/en.js
+++ b/packages/theme/lang/en.js
@@ -50,7 +50,7 @@ export default {
   "Enter promo code": "Enter promo code",
   "Feedback": "Your feedback is important to us. Let us know what we could improve.",
   "Feel free to edit": "Feel free to edit any of your details below so your account is always up to date",
-  "Filters": "Filter",
+  "Filters": "Filters",
   "Find out more": "Find out more",
   "First Name": "First Name",
   "Forgot Password": "If you can’t remember your password, you can reset it.",
@@ -254,5 +254,9 @@ export default {
   'Page not found': 'Page not found',
   'Back to Home page': 'Back to Home page',
   'An error occurred': 'An error occurred',
-  "AllProductsFromCategory": "All {categoryName}"
+  "AllProductsFromCategory": "All {categoryName}",
+  "Show more": "Show more",
+  "Show less": "Show less",
+  "Yes": "Yes",
+  "No": "No",
 };
diff --git a/packages/theme/modules/GraphQL/types.d.ts b/packages/theme/modules/GraphQL/types.d.ts
index de4eb51f7..2673a77da 100644
--- a/packages/theme/modules/GraphQL/types.d.ts
+++ b/packages/theme/modules/GraphQL/types.d.ts
@@ -743,10 +743,10 @@ export interface CartUserInputError {
   message: Scalars['String'];
 }
 export declare enum CartUserInputErrorType {
-  InsufficientStock = "INSUFFICIENT_STOCK",
-  NotSalable = "NOT_SALABLE",
-  ProductNotFound = "PRODUCT_NOT_FOUND",
-  Undefined = "UNDEFINED"
+  InsufficientStock = 'INSUFFICIENT_STOCK',
+  NotSalable = 'NOT_SALABLE',
+  ProductNotFound = 'PRODUCT_NOT_FOUND',
+  Undefined = 'UNDEFINED',
 }
 export interface Categories {
   /** The payment method assets */
@@ -960,8 +960,8 @@ export interface CheckoutAgreement {
   name: Scalars['String'];
 }
 export declare enum CheckoutAgreementMode {
-  Auto = "AUTO",
-  Manual = "MANUAL"
+  Auto = 'AUTO',
+  Manual = 'MANUAL',
 }
 /** An error encountered while adding an item the the cart. */
 export interface CheckoutUserInputError {
@@ -973,11 +973,11 @@ export interface CheckoutUserInputError {
   path: Array<Maybe<Scalars['String']>>;
 }
 export declare enum CheckoutUserInputErrorCodes {
-  InsufficientStock = "INSUFFICIENT_STOCK",
-  NotSalable = "NOT_SALABLE",
-  ProductNotFound = "PRODUCT_NOT_FOUND",
-  ReorderNotAvailable = "REORDER_NOT_AVAILABLE",
-  Undefined = "UNDEFINED"
+  InsufficientStock = 'INSUFFICIENT_STOCK',
+  NotSalable = 'NOT_SALABLE',
+  ProductNotFound = 'PRODUCT_NOT_FOUND',
+  ReorderNotAvailable = 'REORDER_NOT_AVAILABLE',
+  Undefined = 'UNDEFINED',
 }
 /** CMS block defines all CMS block information */
 export interface CmsBlock {
@@ -1262,15 +1262,13 @@ export interface ConfigurableProduct extends CustomizableProductInterface, Physi
   /** The weight of the item, in units defined by the store. */
   weight?: Maybe<Scalars['Float']>;
 }
-/** ConfigurableProduct defines basic features of a configurable product and its simple product variants */
-export interface ConfigurableProductConfigurable_Product_Options_SelectionArgs {
-  configurableOptionValueUids?: InputMaybe<Array<Scalars['ID']>>;
-}
+
 /** ConfigurableProduct defines basic features of a configurable product and its simple product variants */
 export interface ConfigurableProductReviewsArgs {
   currentPage?: InputMaybe<Scalars['Int']>;
   pageSize?: InputMaybe<Scalars['Int']>;
 }
+
 export interface ConfigurableProductCartItemInput {
   customizable_options?: InputMaybe<Array<InputMaybe<CustomizableOptionInput>>>;
   data: CartItemInput;
@@ -1396,495 +1394,495 @@ export interface Country {
 /** The list of countries codes */
 export declare enum CountryCodeEnum {
   /** Andorra */
-  Ad = "AD",
+  Ad = 'AD',
   /** United Arab Emirates */
-  Ae = "AE",
+  Ae = 'AE',
   /** Afghanistan */
-  Af = "AF",
+  Af = 'AF',
   /** Antigua & Barbuda */
-  Ag = "AG",
+  Ag = 'AG',
   /** Anguilla */
-  Ai = "AI",
+  Ai = 'AI',
   /** Albania */
-  Al = "AL",
+  Al = 'AL',
   /** Armenia */
-  Am = "AM",
+  Am = 'AM',
   /** Netherlands Antilles */
-  An = "AN",
+  An = 'AN',
   /** Angola */
-  Ao = "AO",
+  Ao = 'AO',
   /** Antarctica */
-  Aq = "AQ",
+  Aq = 'AQ',
   /** Argentina */
-  Ar = "AR",
+  Ar = 'AR',
   /** American Samoa */
-  As = "AS",
+  As = 'AS',
   /** Austria */
-  At = "AT",
+  At = 'AT',
   /** Australia */
-  Au = "AU",
+  Au = 'AU',
   /** Aruba */
-  Aw = "AW",
+  Aw = 'AW',
   /** Åland Islands */
-  Ax = "AX",
+  Ax = 'AX',
   /** Azerbaijan */
-  Az = "AZ",
+  Az = 'AZ',
   /** Bosnia & Herzegovina */
-  Ba = "BA",
+  Ba = 'BA',
   /** Barbados */
-  Bb = "BB",
+  Bb = 'BB',
   /** Bangladesh */
-  Bd = "BD",
+  Bd = 'BD',
   /** Belgium */
-  Be = "BE",
+  Be = 'BE',
   /** Burkina Faso */
-  Bf = "BF",
+  Bf = 'BF',
   /** Bulgaria */
-  Bg = "BG",
+  Bg = 'BG',
   /** Bahrain */
-  Bh = "BH",
+  Bh = 'BH',
   /** Burundi */
-  Bi = "BI",
+  Bi = 'BI',
   /** Benin */
-  Bj = "BJ",
+  Bj = 'BJ',
   /** St. Barthélemy */
-  Bl = "BL",
+  Bl = 'BL',
   /** Bermuda */
-  Bm = "BM",
+  Bm = 'BM',
   /** Brunei */
-  Bn = "BN",
+  Bn = 'BN',
   /** Bolivia */
-  Bo = "BO",
+  Bo = 'BO',
   /** Brazil */
-  Br = "BR",
+  Br = 'BR',
   /** Bahamas */
-  Bs = "BS",
+  Bs = 'BS',
   /** Bhutan */
-  Bt = "BT",
+  Bt = 'BT',
   /** Bouvet Island */
-  Bv = "BV",
+  Bv = 'BV',
   /** Botswana */
-  Bw = "BW",
+  Bw = 'BW',
   /** Belarus */
-  By = "BY",
+  By = 'BY',
   /** Belize */
-  Bz = "BZ",
+  Bz = 'BZ',
   /** Canada */
-  Ca = "CA",
+  Ca = 'CA',
   /** Cocos (Keeling) Islands */
-  Cc = "CC",
+  Cc = 'CC',
   /** Congo-Kinshasa */
-  Cd = "CD",
+  Cd = 'CD',
   /** Central African Republic */
-  Cf = "CF",
+  Cf = 'CF',
   /** Congo-Brazzaville */
-  Cg = "CG",
+  Cg = 'CG',
   /** Switzerland */
-  Ch = "CH",
+  Ch = 'CH',
   /** Côte d’Ivoire */
-  Ci = "CI",
+  Ci = 'CI',
   /** Cook Islands */
-  Ck = "CK",
+  Ck = 'CK',
   /** Chile */
-  Cl = "CL",
+  Cl = 'CL',
   /** Cameroon */
-  Cm = "CM",
+  Cm = 'CM',
   /** China */
-  Cn = "CN",
+  Cn = 'CN',
   /** Colombia */
-  Co = "CO",
+  Co = 'CO',
   /** Costa Rica */
-  Cr = "CR",
+  Cr = 'CR',
   /** Cuba */
-  Cu = "CU",
+  Cu = 'CU',
   /** Cape Verde */
-  Cv = "CV",
+  Cv = 'CV',
   /** Christmas Island */
-  Cx = "CX",
+  Cx = 'CX',
   /** Cyprus */
-  Cy = "CY",
+  Cy = 'CY',
   /** Czech Republic */
-  Cz = "CZ",
+  Cz = 'CZ',
   /** Germany */
-  De = "DE",
+  De = 'DE',
   /** Djibouti */
-  Dj = "DJ",
+  Dj = 'DJ',
   /** Denmark */
-  Dk = "DK",
+  Dk = 'DK',
   /** Dominica */
-  Dm = "DM",
+  Dm = 'DM',
   /** Dominican Republic */
-  Do = "DO",
+  Do = 'DO',
   /** Algeria */
-  Dz = "DZ",
+  Dz = 'DZ',
   /** Ecuador */
-  Ec = "EC",
+  Ec = 'EC',
   /** Estonia */
-  Ee = "EE",
+  Ee = 'EE',
   /** Egypt */
-  Eg = "EG",
+  Eg = 'EG',
   /** Western Sahara */
-  Eh = "EH",
+  Eh = 'EH',
   /** Eritrea */
-  Er = "ER",
+  Er = 'ER',
   /** Spain */
-  Es = "ES",
+  Es = 'ES',
   /** Ethiopia */
-  Et = "ET",
+  Et = 'ET',
   /** Finland */
-  Fi = "FI",
+  Fi = 'FI',
   /** Fiji */
-  Fj = "FJ",
+  Fj = 'FJ',
   /** Falkland Islands */
-  Fk = "FK",
+  Fk = 'FK',
   /** Micronesia */
-  Fm = "FM",
+  Fm = 'FM',
   /** Faroe Islands */
-  Fo = "FO",
+  Fo = 'FO',
   /** France */
-  Fr = "FR",
+  Fr = 'FR',
   /** Gabon */
-  Ga = "GA",
+  Ga = 'GA',
   /** United Kingdom */
-  Gb = "GB",
+  Gb = 'GB',
   /** Grenada */
-  Gd = "GD",
+  Gd = 'GD',
   /** Georgia */
-  Ge = "GE",
+  Ge = 'GE',
   /** French Guiana */
-  Gf = "GF",
+  Gf = 'GF',
   /** Guernsey */
-  Gg = "GG",
+  Gg = 'GG',
   /** Ghana */
-  Gh = "GH",
+  Gh = 'GH',
   /** Gibraltar */
-  Gi = "GI",
+  Gi = 'GI',
   /** Greenland */
-  Gl = "GL",
+  Gl = 'GL',
   /** Gambia */
-  Gm = "GM",
+  Gm = 'GM',
   /** Guinea */
-  Gn = "GN",
+  Gn = 'GN',
   /** Guadeloupe */
-  Gp = "GP",
+  Gp = 'GP',
   /** Equatorial Guinea */
-  Gq = "GQ",
+  Gq = 'GQ',
   /** Greece */
-  Gr = "GR",
+  Gr = 'GR',
   /** South Georgia & South Sandwich Islands */
-  Gs = "GS",
+  Gs = 'GS',
   /** Guatemala */
-  Gt = "GT",
+  Gt = 'GT',
   /** Guam */
-  Gu = "GU",
+  Gu = 'GU',
   /** Guinea-Bissau */
-  Gw = "GW",
+  Gw = 'GW',
   /** Guyana */
-  Gy = "GY",
+  Gy = 'GY',
   /** Hong Kong SAR China */
-  Hk = "HK",
+  Hk = 'HK',
   /** Heard &amp; McDonald Islands */
-  Hm = "HM",
+  Hm = 'HM',
   /** Honduras */
-  Hn = "HN",
+  Hn = 'HN',
   /** Croatia */
-  Hr = "HR",
+  Hr = 'HR',
   /** Haiti */
-  Ht = "HT",
+  Ht = 'HT',
   /** Hungary */
-  Hu = "HU",
+  Hu = 'HU',
   /** Indonesia */
-  Id = "ID",
+  Id = 'ID',
   /** Ireland */
-  Ie = "IE",
+  Ie = 'IE',
   /** Israel */
-  Il = "IL",
+  Il = 'IL',
   /** Isle of Man */
-  Im = "IM",
+  Im = 'IM',
   /** India */
-  In = "IN",
+  In = 'IN',
   /** British Indian Ocean Territory */
-  Io = "IO",
+  Io = 'IO',
   /** Iraq */
-  Iq = "IQ",
+  Iq = 'IQ',
   /** Iran */
-  Ir = "IR",
+  Ir = 'IR',
   /** Iceland */
-  Is = "IS",
+  Is = 'IS',
   /** Italy */
-  It = "IT",
+  It = 'IT',
   /** Jersey */
-  Je = "JE",
+  Je = 'JE',
   /** Jamaica */
-  Jm = "JM",
+  Jm = 'JM',
   /** Jordan */
-  Jo = "JO",
+  Jo = 'JO',
   /** Japan */
-  Jp = "JP",
+  Jp = 'JP',
   /** Kenya */
-  Ke = "KE",
+  Ke = 'KE',
   /** Kyrgyzstan */
-  Kg = "KG",
+  Kg = 'KG',
   /** Cambodia */
-  Kh = "KH",
+  Kh = 'KH',
   /** Kiribati */
-  Ki = "KI",
+  Ki = 'KI',
   /** Comoros */
-  Km = "KM",
+  Km = 'KM',
   /** St. Kitts & Nevis */
-  Kn = "KN",
+  Kn = 'KN',
   /** North Korea */
-  Kp = "KP",
+  Kp = 'KP',
   /** South Korea */
-  Kr = "KR",
+  Kr = 'KR',
   /** Kuwait */
-  Kw = "KW",
+  Kw = 'KW',
   /** Cayman Islands */
-  Ky = "KY",
+  Ky = 'KY',
   /** Kazakhstan */
-  Kz = "KZ",
+  Kz = 'KZ',
   /** Laos */
-  La = "LA",
+  La = 'LA',
   /** Lebanon */
-  Lb = "LB",
+  Lb = 'LB',
   /** St. Lucia */
-  Lc = "LC",
+  Lc = 'LC',
   /** Liechtenstein */
-  Li = "LI",
+  Li = 'LI',
   /** Sri Lanka */
-  Lk = "LK",
+  Lk = 'LK',
   /** Liberia */
-  Lr = "LR",
+  Lr = 'LR',
   /** Lesotho */
-  Ls = "LS",
+  Ls = 'LS',
   /** Lithuania */
-  Lt = "LT",
+  Lt = 'LT',
   /** Luxembourg */
-  Lu = "LU",
+  Lu = 'LU',
   /** Latvia */
-  Lv = "LV",
+  Lv = 'LV',
   /** Libya */
-  Ly = "LY",
+  Ly = 'LY',
   /** Morocco */
-  Ma = "MA",
+  Ma = 'MA',
   /** Monaco */
-  Mc = "MC",
+  Mc = 'MC',
   /** Moldova */
-  Md = "MD",
+  Md = 'MD',
   /** Montenegro */
-  Me = "ME",
+  Me = 'ME',
   /** St. Martin */
-  Mf = "MF",
+  Mf = 'MF',
   /** Madagascar */
-  Mg = "MG",
+  Mg = 'MG',
   /** Marshall Islands */
-  Mh = "MH",
+  Mh = 'MH',
   /** Macedonia */
-  Mk = "MK",
+  Mk = 'MK',
   /** Mali */
-  Ml = "ML",
+  Ml = 'ML',
   /** Myanmar (Burma) */
-  Mm = "MM",
+  Mm = 'MM',
   /** Mongolia */
-  Mn = "MN",
+  Mn = 'MN',
   /** Macau SAR China */
-  Mo = "MO",
+  Mo = 'MO',
   /** Northern Mariana Islands */
-  Mp = "MP",
+  Mp = 'MP',
   /** Martinique */
-  Mq = "MQ",
+  Mq = 'MQ',
   /** Mauritania */
-  Mr = "MR",
+  Mr = 'MR',
   /** Montserrat */
-  Ms = "MS",
+  Ms = 'MS',
   /** Malta */
-  Mt = "MT",
+  Mt = 'MT',
   /** Mauritius */
-  Mu = "MU",
+  Mu = 'MU',
   /** Maldives */
-  Mv = "MV",
+  Mv = 'MV',
   /** Malawi */
-  Mw = "MW",
+  Mw = 'MW',
   /** Mexico */
-  Mx = "MX",
+  Mx = 'MX',
   /** Malaysia */
-  My = "MY",
+  My = 'MY',
   /** Mozambique */
-  Mz = "MZ",
+  Mz = 'MZ',
   /** Namibia */
-  Na = "NA",
+  Na = 'NA',
   /** New Caledonia */
-  Nc = "NC",
+  Nc = 'NC',
   /** Niger */
-  Ne = "NE",
+  Ne = 'NE',
   /** Norfolk Island */
-  Nf = "NF",
+  Nf = 'NF',
   /** Nigeria */
-  Ng = "NG",
+  Ng = 'NG',
   /** Nicaragua */
-  Ni = "NI",
+  Ni = 'NI',
   /** Netherlands */
-  Nl = "NL",
+  Nl = 'NL',
   /** Norway */
-  No = "NO",
+  No = 'NO',
   /** Nepal */
-  Np = "NP",
+  Np = 'NP',
   /** Nauru */
-  Nr = "NR",
+  Nr = 'NR',
   /** Niue */
-  Nu = "NU",
+  Nu = 'NU',
   /** New Zealand */
-  Nz = "NZ",
+  Nz = 'NZ',
   /** Oman */
-  Om = "OM",
+  Om = 'OM',
   /** Panama */
-  Pa = "PA",
+  Pa = 'PA',
   /** Peru */
-  Pe = "PE",
+  Pe = 'PE',
   /** French Polynesia */
-  Pf = "PF",
+  Pf = 'PF',
   /** Papua New Guinea */
-  Pg = "PG",
+  Pg = 'PG',
   /** Philippines */
-  Ph = "PH",
+  Ph = 'PH',
   /** Pakistan */
-  Pk = "PK",
+  Pk = 'PK',
   /** Poland */
-  Pl = "PL",
+  Pl = 'PL',
   /** St. Pierre & Miquelon */
-  Pm = "PM",
+  Pm = 'PM',
   /** Pitcairn Islands */
-  Pn = "PN",
+  Pn = 'PN',
   /** Palestinian Territories */
-  Ps = "PS",
+  Ps = 'PS',
   /** Portugal */
-  Pt = "PT",
+  Pt = 'PT',
   /** Palau */
-  Pw = "PW",
+  Pw = 'PW',
   /** Paraguay */
-  Py = "PY",
+  Py = 'PY',
   /** Qatar */
-  Qa = "QA",
+  Qa = 'QA',
   /** Réunion */
-  Re = "RE",
+  Re = 'RE',
   /** Romania */
-  Ro = "RO",
+  Ro = 'RO',
   /** Serbia */
-  Rs = "RS",
+  Rs = 'RS',
   /** Russia */
-  Ru = "RU",
+  Ru = 'RU',
   /** Rwanda */
-  Rw = "RW",
+  Rw = 'RW',
   /** Saudi Arabia */
-  Sa = "SA",
+  Sa = 'SA',
   /** Solomon Islands */
-  Sb = "SB",
+  Sb = 'SB',
   /** Seychelles */
-  Sc = "SC",
+  Sc = 'SC',
   /** Sudan */
-  Sd = "SD",
+  Sd = 'SD',
   /** Sweden */
-  Se = "SE",
+  Se = 'SE',
   /** Singapore */
-  Sg = "SG",
+  Sg = 'SG',
   /** St. Helena */
-  Sh = "SH",
+  Sh = 'SH',
   /** Slovenia */
-  Si = "SI",
+  Si = 'SI',
   /** Svalbard & Jan Mayen */
-  Sj = "SJ",
+  Sj = 'SJ',
   /** Slovakia */
-  Sk = "SK",
+  Sk = 'SK',
   /** Sierra Leone */
-  Sl = "SL",
+  Sl = 'SL',
   /** San Marino */
-  Sm = "SM",
+  Sm = 'SM',
   /** Senegal */
-  Sn = "SN",
+  Sn = 'SN',
   /** Somalia */
-  So = "SO",
+  So = 'SO',
   /** Suriname */
-  Sr = "SR",
+  Sr = 'SR',
   /** São Tomé & Príncipe */
-  St = "ST",
+  St = 'ST',
   /** El Salvador */
-  Sv = "SV",
+  Sv = 'SV',
   /** Syria */
-  Sy = "SY",
+  Sy = 'SY',
   /** Swaziland */
-  Sz = "SZ",
+  Sz = 'SZ',
   /** Turks & Caicos Islands */
-  Tc = "TC",
+  Tc = 'TC',
   /** Chad */
-  Td = "TD",
+  Td = 'TD',
   /** French Southern Territories */
-  Tf = "TF",
+  Tf = 'TF',
   /** Togo */
-  Tg = "TG",
+  Tg = 'TG',
   /** Thailand */
-  Th = "TH",
+  Th = 'TH',
   /** Tajikistan */
-  Tj = "TJ",
+  Tj = 'TJ',
   /** Tokelau */
-  Tk = "TK",
+  Tk = 'TK',
   /** Timor-Leste */
-  Tl = "TL",
+  Tl = 'TL',
   /** Turkmenistan */
-  Tm = "TM",
+  Tm = 'TM',
   /** Tunisia */
-  Tn = "TN",
+  Tn = 'TN',
   /** Tonga */
-  To = "TO",
+  To = 'TO',
   /** Turkey */
-  Tr = "TR",
+  Tr = 'TR',
   /** Trinidad & Tobago */
-  Tt = "TT",
+  Tt = 'TT',
   /** Tuvalu */
-  Tv = "TV",
+  Tv = 'TV',
   /** Taiwan */
-  Tw = "TW",
+  Tw = 'TW',
   /** Tanzania */
-  Tz = "TZ",
+  Tz = 'TZ',
   /** Ukraine */
-  Ua = "UA",
+  Ua = 'UA',
   /** Uganda */
-  Ug = "UG",
+  Ug = 'UG',
   /** U.S. Outlying Islands */
-  Um = "UM",
+  Um = 'UM',
   /** United States */
-  Us = "US",
+  Us = 'US',
   /** Uruguay */
-  Uy = "UY",
+  Uy = 'UY',
   /** Uzbekistan */
-  Uz = "UZ",
+  Uz = 'UZ',
   /** Vatican City */
-  Va = "VA",
+  Va = 'VA',
   /** St. Vincent & Grenadines */
-  Vc = "VC",
+  Vc = 'VC',
   /** Venezuela */
-  Ve = "VE",
+  Ve = 'VE',
   /** British Virgin Islands */
-  Vg = "VG",
+  Vg = 'VG',
   /** U.S. Virgin Islands */
-  Vi = "VI",
+  Vi = 'VI',
   /** Vietnam */
-  Vn = "VN",
+  Vn = 'VN',
   /** Vanuatu */
-  Vu = "VU",
+  Vu = 'VU',
   /** Wallis & Futuna */
-  Wf = "WF",
+  Wf = 'WF',
   /** Samoa */
-  Ws = "WS",
+  Ws = 'WS',
   /** Yemen */
-  Ye = "YE",
+  Ye = 'YE',
   /** Mayotte */
-  Yt = "YT",
+  Yt = 'YT',
   /** South Africa */
-  Za = "ZA",
+  Za = 'ZA',
   /** Zambia */
-  Zm = "ZM",
+  Zm = 'ZM',
   /** Zimbabwe */
-  Zw = "ZW"
+  Zw = 'ZW',
 }
 export interface CreateCompareListInput {
   /** An array of product IDs to add to the compare list */
@@ -2008,176 +2006,176 @@ export interface Currency {
 }
 /** The list of available currency codes */
 export declare enum CurrencyEnum {
-  Aed = "AED",
-  Afn = "AFN",
-  All = "ALL",
-  Amd = "AMD",
-  Ang = "ANG",
-  Aoa = "AOA",
-  Ars = "ARS",
-  Aud = "AUD",
-  Awg = "AWG",
-  Azm = "AZM",
-  Azn = "AZN",
-  Bam = "BAM",
-  Bbd = "BBD",
-  Bdt = "BDT",
-  Bgn = "BGN",
-  Bhd = "BHD",
-  Bif = "BIF",
-  Bmd = "BMD",
-  Bnd = "BND",
-  Bob = "BOB",
-  Brl = "BRL",
-  Bsd = "BSD",
-  Btn = "BTN",
-  Buk = "BUK",
-  Bwp = "BWP",
-  Byn = "BYN",
-  Bzd = "BZD",
-  Cad = "CAD",
-  Cdf = "CDF",
-  Che = "CHE",
-  Chf = "CHF",
-  Chw = "CHW",
-  Clp = "CLP",
-  Cny = "CNY",
-  Cop = "COP",
-  Crc = "CRC",
-  Cup = "CUP",
-  Cve = "CVE",
-  Czk = "CZK",
-  Djf = "DJF",
-  Dkk = "DKK",
-  Dop = "DOP",
-  Dzd = "DZD",
-  Eek = "EEK",
-  Egp = "EGP",
-  Ern = "ERN",
-  Etb = "ETB",
-  Eur = "EUR",
-  Fjd = "FJD",
-  Fkp = "FKP",
-  Gbp = "GBP",
-  Gek = "GEK",
-  Gel = "GEL",
-  Ghs = "GHS",
-  Gip = "GIP",
-  Gmd = "GMD",
-  Gnf = "GNF",
-  Gqe = "GQE",
-  Gtq = "GTQ",
-  Gyd = "GYD",
-  Hkd = "HKD",
-  Hnl = "HNL",
-  Hrk = "HRK",
-  Htg = "HTG",
-  Huf = "HUF",
-  Idr = "IDR",
-  Ils = "ILS",
-  Inr = "INR",
-  Iqd = "IQD",
-  Irr = "IRR",
-  Isk = "ISK",
-  Jmd = "JMD",
-  Jod = "JOD",
-  Jpy = "JPY",
-  Kes = "KES",
-  Kgs = "KGS",
-  Khr = "KHR",
-  Kmf = "KMF",
-  Kpw = "KPW",
-  Krw = "KRW",
-  Kwd = "KWD",
-  Kyd = "KYD",
-  Kzt = "KZT",
-  Lak = "LAK",
-  Lbp = "LBP",
-  Lkr = "LKR",
-  Lrd = "LRD",
-  Lsl = "LSL",
-  Lsm = "LSM",
-  Ltl = "LTL",
-  Lvl = "LVL",
-  Lyd = "LYD",
-  Mad = "MAD",
-  Mdl = "MDL",
-  Mga = "MGA",
-  Mkd = "MKD",
-  Mmk = "MMK",
-  Mnt = "MNT",
-  Mop = "MOP",
-  Mro = "MRO",
-  Mur = "MUR",
-  Mvr = "MVR",
-  Mwk = "MWK",
-  Mxn = "MXN",
-  Myr = "MYR",
-  Mzn = "MZN",
-  Nad = "NAD",
-  Ngn = "NGN",
-  Nic = "NIC",
-  Nok = "NOK",
-  Npr = "NPR",
-  Nzd = "NZD",
-  Omr = "OMR",
-  Pab = "PAB",
-  Pen = "PEN",
-  Pgk = "PGK",
-  Php = "PHP",
-  Pkr = "PKR",
-  Pln = "PLN",
-  Pyg = "PYG",
-  Qar = "QAR",
-  Rhd = "RHD",
-  Rol = "ROL",
-  Ron = "RON",
-  Rsd = "RSD",
-  Rub = "RUB",
-  Rwf = "RWF",
-  Sar = "SAR",
-  Sbd = "SBD",
-  Scr = "SCR",
-  Sdg = "SDG",
-  Sek = "SEK",
-  Sgd = "SGD",
-  Shp = "SHP",
-  Skk = "SKK",
-  Sll = "SLL",
-  Sos = "SOS",
-  Srd = "SRD",
-  Std = "STD",
-  Svc = "SVC",
-  Syp = "SYP",
-  Szl = "SZL",
-  Thb = "THB",
-  Tjs = "TJS",
-  Tmm = "TMM",
-  Tnd = "TND",
-  Top = "TOP",
-  Trl = "TRL",
-  Try = "TRY",
-  Ttd = "TTD",
-  Twd = "TWD",
-  Tzs = "TZS",
-  Uah = "UAH",
-  Ugx = "UGX",
-  Usd = "USD",
-  Uyu = "UYU",
-  Uzs = "UZS",
-  Veb = "VEB",
-  Vef = "VEF",
-  Vnd = "VND",
-  Vuv = "VUV",
-  Wst = "WST",
-  Xcd = "XCD",
-  Xof = "XOF",
-  Xpf = "XPF",
-  Yer = "YER",
-  Ytl = "YTL",
-  Zar = "ZAR",
-  Zmk = "ZMK",
-  Zwd = "ZWD"
+  Aed = 'AED',
+  Afn = 'AFN',
+  All = 'ALL',
+  Amd = 'AMD',
+  Ang = 'ANG',
+  Aoa = 'AOA',
+  Ars = 'ARS',
+  Aud = 'AUD',
+  Awg = 'AWG',
+  Azm = 'AZM',
+  Azn = 'AZN',
+  Bam = 'BAM',
+  Bbd = 'BBD',
+  Bdt = 'BDT',
+  Bgn = 'BGN',
+  Bhd = 'BHD',
+  Bif = 'BIF',
+  Bmd = 'BMD',
+  Bnd = 'BND',
+  Bob = 'BOB',
+  Brl = 'BRL',
+  Bsd = 'BSD',
+  Btn = 'BTN',
+  Buk = 'BUK',
+  Bwp = 'BWP',
+  Byn = 'BYN',
+  Bzd = 'BZD',
+  Cad = 'CAD',
+  Cdf = 'CDF',
+  Che = 'CHE',
+  Chf = 'CHF',
+  Chw = 'CHW',
+  Clp = 'CLP',
+  Cny = 'CNY',
+  Cop = 'COP',
+  Crc = 'CRC',
+  Cup = 'CUP',
+  Cve = 'CVE',
+  Czk = 'CZK',
+  Djf = 'DJF',
+  Dkk = 'DKK',
+  Dop = 'DOP',
+  Dzd = 'DZD',
+  Eek = 'EEK',
+  Egp = 'EGP',
+  Ern = 'ERN',
+  Etb = 'ETB',
+  Eur = 'EUR',
+  Fjd = 'FJD',
+  Fkp = 'FKP',
+  Gbp = 'GBP',
+  Gek = 'GEK',
+  Gel = 'GEL',
+  Ghs = 'GHS',
+  Gip = 'GIP',
+  Gmd = 'GMD',
+  Gnf = 'GNF',
+  Gqe = 'GQE',
+  Gtq = 'GTQ',
+  Gyd = 'GYD',
+  Hkd = 'HKD',
+  Hnl = 'HNL',
+  Hrk = 'HRK',
+  Htg = 'HTG',
+  Huf = 'HUF',
+  Idr = 'IDR',
+  Ils = 'ILS',
+  Inr = 'INR',
+  Iqd = 'IQD',
+  Irr = 'IRR',
+  Isk = 'ISK',
+  Jmd = 'JMD',
+  Jod = 'JOD',
+  Jpy = 'JPY',
+  Kes = 'KES',
+  Kgs = 'KGS',
+  Khr = 'KHR',
+  Kmf = 'KMF',
+  Kpw = 'KPW',
+  Krw = 'KRW',
+  Kwd = 'KWD',
+  Kyd = 'KYD',
+  Kzt = 'KZT',
+  Lak = 'LAK',
+  Lbp = 'LBP',
+  Lkr = 'LKR',
+  Lrd = 'LRD',
+  Lsl = 'LSL',
+  Lsm = 'LSM',
+  Ltl = 'LTL',
+  Lvl = 'LVL',
+  Lyd = 'LYD',
+  Mad = 'MAD',
+  Mdl = 'MDL',
+  Mga = 'MGA',
+  Mkd = 'MKD',
+  Mmk = 'MMK',
+  Mnt = 'MNT',
+  Mop = 'MOP',
+  Mro = 'MRO',
+  Mur = 'MUR',
+  Mvr = 'MVR',
+  Mwk = 'MWK',
+  Mxn = 'MXN',
+  Myr = 'MYR',
+  Mzn = 'MZN',
+  Nad = 'NAD',
+  Ngn = 'NGN',
+  Nic = 'NIC',
+  Nok = 'NOK',
+  Npr = 'NPR',
+  Nzd = 'NZD',
+  Omr = 'OMR',
+  Pab = 'PAB',
+  Pen = 'PEN',
+  Pgk = 'PGK',
+  Php = 'PHP',
+  Pkr = 'PKR',
+  Pln = 'PLN',
+  Pyg = 'PYG',
+  Qar = 'QAR',
+  Rhd = 'RHD',
+  Rol = 'ROL',
+  Ron = 'RON',
+  Rsd = 'RSD',
+  Rub = 'RUB',
+  Rwf = 'RWF',
+  Sar = 'SAR',
+  Sbd = 'SBD',
+  Scr = 'SCR',
+  Sdg = 'SDG',
+  Sek = 'SEK',
+  Sgd = 'SGD',
+  Shp = 'SHP',
+  Skk = 'SKK',
+  Sll = 'SLL',
+  Sos = 'SOS',
+  Srd = 'SRD',
+  Std = 'STD',
+  Svc = 'SVC',
+  Syp = 'SYP',
+  Szl = 'SZL',
+  Thb = 'THB',
+  Tjs = 'TJS',
+  Tmm = 'TMM',
+  Tnd = 'TND',
+  Top = 'TOP',
+  Trl = 'TRL',
+  Try = 'TRY',
+  Ttd = 'TTD',
+  Twd = 'TWD',
+  Tzs = 'TZS',
+  Uah = 'UAH',
+  Ugx = 'UGX',
+  Usd = 'USD',
+  Uyu = 'UYU',
+  Uzs = 'UZS',
+  Veb = 'VEB',
+  Vef = 'VEF',
+  Vnd = 'VND',
+  Vuv = 'VUV',
+  Wst = 'WST',
+  Xcd = 'XCD',
+  Xof = 'XOF',
+  Xpf = 'XPF',
+  Yer = 'YER',
+  Ytl = 'YTL',
+  Zar = 'ZAR',
+  Zmk = 'ZMK',
+  Zwd = 'ZWD',
 }
 /** CustomAttributeMetadata defines an array of attribute_codes and entity_types */
 export interface CustomAttributeMetadata {
@@ -2254,10 +2252,7 @@ export interface CustomerReviewsArgs {
   currentPage?: InputMaybe<Scalars['Int']>;
   pageSize?: InputMaybe<Scalars['Int']>;
 }
-/** Customer defines the customer name and address and other details */
-export interface CustomerWishlist_V2Args {
-  id: Scalars['ID'];
-}
+
 /** Customer defines the customer name and address and other details */
 export interface CustomerWishlistsArgs {
   currentPage?: InputMaybe<Scalars['Int']>;
@@ -2633,9 +2628,9 @@ export interface CustomizableDateOption extends CustomizableOptionInterface {
 }
 /** This enumeration customizable date type. */
 export declare enum CustomizableDateTypeEnum {
-  Date = "DATE",
-  DateTime = "DATE_TIME",
-  Time = "TIME"
+  Date = 'DATE',
+  DateTime = 'DATE_TIME',
+  Time = 'TIME',
 }
 /** CustomizableDateValue defines the price and sku of a product whose page contains a customized date picker. */
 export interface CustomizableDateValue {
@@ -2901,8 +2896,8 @@ export interface DownloadableCreditMemoItem extends CreditMemoItemInterface {
   quantity_refunded?: Maybe<Scalars['Float']>;
 }
 export declare enum DownloadableFileTypeEnum {
-  File = "FILE",
-  Url = "URL"
+  File = 'FILE',
+  Url = 'URL',
 }
 export interface DownloadableInvoiceItem extends InvoiceItemInterface {
   /** Contains information about the final discount amount for the base product, including discounts on options */
@@ -3223,7 +3218,9 @@ export interface EnteredOptionInput {
   /** Text the customer entered */
   value: Scalars['String'];
 }
-/** EntityUrl is an output object containing the `id`, `relative_url`, and `type` attributes */
+/**
+ *
+ * is an output object containing the `id`, `relative_url`, and `type` attributes */
 export interface EntityUrl {
   /** @deprecated The canonical_url field is deprecated, use relative_url instead. */
   canonical_url?: Maybe<Scalars['String']>;
@@ -3315,15 +3312,15 @@ export interface FixedProductTax {
 /** This enumeration display settings for the fixed product tax */
 export declare enum FixedProductTaxDisplaySettings {
   /** The displayed price does not include the FPT amount. The values of ProductPrice.fixed_product_taxes and the price including the FPT are displayed separately. This value corresponds to 'Excluding FPT, Including FPT description and final price' */
-  ExcludeFptAndIncludeWithDetails = "EXCLUDE_FPT_AND_INCLUDE_WITH_DETAILS",
+  ExcludeFptAndIncludeWithDetails = 'EXCLUDE_FPT_AND_INCLUDE_WITH_DETAILS',
   /** The displayed price does not include the FPT amount. The values from ProductPrice.fixed_product_taxes are not displayed. This value corresponds to 'Excluding FPT' */
-  ExcludeFptWithoutDetails = "EXCLUDE_FPT_WITHOUT_DETAILS",
+  ExcludeFptWithoutDetails = 'EXCLUDE_FPT_WITHOUT_DETAILS',
   /** The FPT feature is not enabled. You can omit  ProductPrice.fixed_product_taxes from your query */
-  FptDisabled = "FPT_DISABLED",
+  FptDisabled = 'FPT_DISABLED',
   /** The displayed price includes the FPT amount without displaying the ProductPrice.fixed_product_taxes values. This value corresponds to 'Including FPT only' */
-  IncludeFptWithoutDetails = "INCLUDE_FPT_WITHOUT_DETAILS",
+  IncludeFptWithoutDetails = 'INCLUDE_FPT_WITHOUT_DETAILS',
   /** The displayed price includes the FPT amount while displaying the values of ProductPrice.fixed_product_taxes separately. This value corresponds to 'Including FPT and FPT description' */
-  IncludeFptWithDetails = "INCLUDE_FPT_WITH_DETAILS"
+  IncludeFptWithDetails = 'INCLUDE_FPT_WITH_DETAILS',
 }
 export interface GenerateCustomerTokenAsAdminInput {
   /** The email address of the customer requesting remote shopping assistance */
@@ -4242,8 +4239,8 @@ export interface PayflowLinkInput {
 }
 /** Mode for payment: TEST or LIVE. Applies to Payflow Link and Payments Advanced payment methods. */
 export declare enum PayflowLinkMode {
-  Live = "LIVE",
-  Test = "TEST"
+  Live = 'LIVE',
+  Test = 'TEST',
 }
 /** Contains information used to generate PayPal iframe for transaction. Applies to Payflow Link and Payments Advanced payment methods. */
 export interface PayflowLinkToken {
@@ -4333,8 +4330,8 @@ export interface PaymentToken {
 }
 /** The list of available payment token types */
 export declare enum PaymentTokenTypeEnum {
-  Account = "account",
-  Card = "card"
+  Account = 'account',
+  Card = 'card',
 }
 /** Required input for Express Checkout and Payments Standard payments */
 export interface PaypalExpressInput {
@@ -4516,14 +4513,14 @@ export interface PriceAdjustment {
 }
 /** PriceAdjustment.code is deprecated. This enumeration contains values defined in modules other than the Catalog module. */
 export declare enum PriceAdjustmentCodesEnum {
-  Tax = "TAX",
-  Weee = "WEEE",
-  WeeeTax = "WEEE_TAX"
+  Tax = 'TAX',
+  Weee = 'WEEE',
+  WeeeTax = 'WEEE_TAX',
 }
 /** PriceAdjustmentDescriptionEnum is deprecated. This enumeration states whether a price adjustment is included or excluded. */
 export declare enum PriceAdjustmentDescriptionEnum {
-  Excluded = "EXCLUDED",
-  Included = "INCLUDED"
+  Excluded = 'EXCLUDED',
+  Included = 'INCLUDED',
 }
 /** Price range for a product. If the product has a single price, the minimum and maximum price will be the same. */
 export interface PriceRange {
@@ -4534,14 +4531,14 @@ export interface PriceRange {
 }
 /** This enumeration the price type. */
 export declare enum PriceTypeEnum {
-  Dynamic = "DYNAMIC",
-  Fixed = "FIXED",
-  Percent = "PERCENT"
+  Dynamic = 'DYNAMIC',
+  Fixed = 'FIXED',
+  Percent = 'PERCENT',
 }
 /** This enumeration defines whether a bundle product's price is displayed as the lowest possible value or as a range. */
 export declare enum PriceViewEnum {
-  AsLowAs = "AS_LOW_AS",
-  PriceRange = "PRICE_RANGE"
+  AsLowAs = 'AS_LOW_AS',
+  PriceRange = 'PRICE_RANGE',
 }
 export interface ProductAttribute {
   /** The unique identifier for a product attribute code. */
@@ -5092,8 +5089,8 @@ export interface ProductSortInput {
 }
 /** This enumeration states whether a product stock status is in stock or out of stock */
 export declare enum ProductStockStatus {
-  InStock = "IN_STOCK",
-  OutOfStock = "OUT_OF_STOCK"
+  InStock = 'IN_STOCK',
+  OutOfStock = 'OUT_OF_STOCK',
 }
 /** ProductTierPrices is deprecated and has been replaced by TierPrice. The ProductTierPrices object defines a tier price, which is a quantity discount offered to a specific customer group. */
 export interface ProductTierPrices {
@@ -5509,8 +5506,8 @@ export interface SetShippingMethodsOnCartOutput {
 }
 /** This enumeration defines whether bundle items must be shipped together. */
 export declare enum ShipBundleItemsEnum {
-  Separately = "SEPARATELY",
-  Together = "TOGETHER"
+  Separately = 'SEPARATELY',
+  Together = 'TOGETHER',
 }
 export interface ShipmentItem extends ShipmentItemInterface {
   /** The unique ID for a `ShipmentItemInterface` object */
@@ -5809,8 +5806,8 @@ export interface SimpleWishlistItem extends WishlistItemInterface {
 }
 /** This enumeration indicates whether to return results in ascending or descending order */
 export declare enum SortEnum {
-  Asc = "ASC",
-  Desc = "DESC"
+  Asc = 'ASC',
+  Desc = 'DESC',
 }
 export interface SortField {
   /** Label of sort field. */
@@ -6003,10 +6000,10 @@ export interface SubscribeEmailToNewsletterOutput {
   status?: Maybe<SubscriptionStatusesEnum>;
 }
 export declare enum SubscriptionStatusesEnum {
-  NotActive = "NOT_ACTIVE",
-  Subscribed = "SUBSCRIBED",
-  Unconfirmed = "UNCONFIRMED",
-  Unsubscribed = "UNSUBSCRIBED"
+  NotActive = 'NOT_ACTIVE',
+  Subscribed = 'SUBSCRIBED',
+  Unconfirmed = 'UNCONFIRMED',
+  Unsubscribed = 'UNSUBSCRIBED',
 }
 export interface SwatchData {
   /** Type of swatch filter item: 1 - text, 2 - image */
@@ -6095,14 +6092,14 @@ export interface UrlRewrite {
 }
 /** This enumeration defines the entity type. */
 export declare enum UrlRewriteEntityTypeEnum {
-  Category = "CATEGORY",
-  CmsPage = "CMS_PAGE",
-  Product = "PRODUCT"
+  Category = 'CATEGORY',
+  CmsPage = 'CMS_PAGE',
+  Product = 'PRODUCT',
 }
 export declare enum UseInLayeredNavigationOptions {
-  FilterableNoResult = "FILTERABLE_NO_RESULT",
-  FilterableWithResults = "FILTERABLE_WITH_RESULTS",
-  No = "NO"
+  FilterableNoResult = 'FILTERABLE_NO_RESULT',
+  FilterableWithResults = 'FILTERABLE_WITH_RESULTS',
+  No = 'NO',
 }
 /** Required input for payment methods with Vault support. */
 export interface VaultTokenInput {
@@ -6354,8 +6351,8 @@ export interface WishListUserInputError {
   message: Scalars['String'];
 }
 export declare enum WishListUserInputErrorType {
-  ProductNotFound = "PRODUCT_NOT_FOUND",
-  Undefined = "UNDEFINED"
+  ProductNotFound = 'PRODUCT_NOT_FOUND',
+  Undefined = 'UNDEFINED',
 }
 export interface Wishlist {
   /** The unique ID for a `Wishlist` object */
@@ -6371,10 +6368,7 @@ export interface Wishlist {
   /** The time of the last modification to the wish list */
   updated_at?: Maybe<Scalars['String']>;
 }
-export interface WishlistItems_V2Args {
-  currentPage?: InputMaybe<Scalars['Int']>;
-  pageSize?: InputMaybe<Scalars['Int']>;
-}
+
 export interface WishlistCartUserInputError {
   /** An error code that describes the error encountered */
   code: WishlistCartUserInputErrorType;
@@ -6385,11 +6379,11 @@ export interface WishlistCartUserInputError {
   /** The unique ID of the wish list item containing an error */
   wishlistItemId: Scalars['ID'];
 }
-export declare enum WishlistCartUserInputErrorType {
-  InsufficientStock = "INSUFFICIENT_STOCK",
-  NotSalable = "NOT_SALABLE",
-  ProductNotFound = "PRODUCT_NOT_FOUND",
-  Undefined = "UNDEFINED"
+export enum WishlistCartUserInputErrorType {
+  InsufficientStock = 'INSUFFICIENT_STOCK',
+  NotSalable = 'NOT_SALABLE',
+  ProductNotFound = 'PRODUCT_NOT_FOUND',
+  Undefined = 'UNDEFINED',
 }
 export interface WishlistItem {
   /** The time when the customer added the item to the wish list */
@@ -51439,4 +51433,4 @@ export declare type WishlistQuery = {
     } | null | undefined>;
   } | null | undefined;
 };
-//# sourceMappingURL=GraphQL.d.ts.map
+// # sourceMappingURL=GraphQL.d.ts.map
diff --git a/packages/theme/modules/catalog/category/components/EmptyResults.vue b/packages/theme/modules/catalog/category/components/CategoryEmptyResults.vue
similarity index 100%
rename from packages/theme/modules/catalog/category/components/EmptyResults.vue
rename to packages/theme/modules/catalog/category/components/CategoryEmptyResults.vue
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
index f513f4922..ecf4ea9e5 100644
--- a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.scss
@@ -4,7 +4,7 @@
     margin: var(--spacer-xl) 0 var(--spacer-base) 0;
 
     &:first-child {
-      margin: calc(var(--spacer-xl) + var(--spacer-base)) 0 var(--spacer-xs) 0;
+      margin: var(--spacer-base) 0 var(--spacer-xs) 0;
     }
   }
 
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
index 1041f5590..3af0c281a 100644
--- a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
@@ -6,39 +6,45 @@
     @close="$emit('close')"
   >
     <div class="filters desktop-only">
+      <SelectedFilters
+        @removeFilter="doRemoveFilter($event)"
+      />
+      <hr class="sf-divider">
       <div
-        v-for="(facet, i) in facets"
+        v-for="(filter, i) in filters"
         :key="i"
       >
         <SfHeading
-          :key="`filter-title-${facet.id}`"
+          :key="`filter-title-${filter.attribute_code}`"
           :level="4"
-          :title="facet.label"
+          :title="filter.label"
           class="filters__title sf-heading--left"
         />
         <component
-          :is="getFilterConfig(facet.id).component"
-          :facet="facet"
-          :selected-filters="selectedFilters"
-          @selectFilter="selectFilter(facet, $event)"
+          :is="getFilterConfig(filter.attribute_code).component"
+          :filter="filter"
+          @selectFilter="selectFilter(filter, $event)"
         />
       </div>
     </div>
     <SfAccordion class="filters smartphone-only">
+      <SelectedFilters
+        @removeFilter="doRemoveFilter($event)"
+      />
+      <hr class="sf-divider">
       <div
-        v-for="(facet, i) in facets"
+        v-for="(filter, i) in filters"
         :key="i"
       >
         <SfAccordionItem
-          :key="`filter-title-${facet.id}`"
-          :header="facet.label"
+          :key="`filter-title-${filter.attribute_code}`"
+          :header="filter.label"
           class="filters__accordion-item"
         >
           <component
-            :is="getFilterConfig(facet.id).component"
-            :facet="facet"
-            :selected-filters="selectedFilters"
-            @selectFilter="selectFilter(facet, $event)"
+            :is="getFilterConfig(filter.attribute_code).component"
+            :filter="filter"
+            @selectFilter="selectFilter(filter, $event)"
           />
         </SfAccordionItem>
       </div>
@@ -47,13 +53,13 @@
       <div class="filters__buttons">
         <SfButton
           class="sf-button--full-width"
-          @click="applyFilters"
+          @click="doApplyFilters"
         >
           {{ $t('Done') }}
         </SfButton>
         <SfButton
           class="sf-button--full-width filters__button-clear"
-          @click="clearFilters"
+          @click="doClearFilters"
         >
           {{ $t('Clear all') }}
         </SfButton>
@@ -62,7 +68,9 @@
   </SfSidebar>
 </template>
 <script lang="ts">
-import { defineComponent } from '@nuxtjs/composition-api';
+import {
+  defineComponent, onMounted, provide, Ref, ref,
+} from '@nuxtjs/composition-api';
 import {
   SfAccordion,
   SfButton,
@@ -74,18 +82,26 @@ import {
 
 import { useUiHelpers } from '~/composables';
 import { useFilters } from './useFilters';
-import { getFilterConfig } from '~/modules/catalog/category/config/FiltersConfig';
+import { getFilterConfig, getDisabledFilters } 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';
+
+import type { SelectedFiltersInterface } from './useFilters';
+import type { Aggregation } from '~/modules/GraphQL/types';
 
-import RadioType from '~/modules/catalog/category/components/filters/renderer/RadioType.vue';
-import SwatchColorType from '~/modules/catalog/category/components/filters/renderer/SwatchColorType.vue';
-import CheckboxType from '~/modules/catalog/category/components/filters/renderer/CheckboxType.vue';
+export interface UseFiltersProviderInterface {
+  selectedFilters: Ref<SelectedFiltersInterface>,
+  filters: Ref<Aggregation[]>,
+}
 
 export default defineComponent({
-  name: 'CategoryFilters',
+  name: 'CategoryFiltersSidebar',
   components: {
-    CheckboxType,
-    SwatchColorType,
-    RadioType,
+    SelectedFilters,
+    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'),
+    YesNoType: () => import('~/modules/catalog/category/components/filters/renderer/YesNoType.vue'),
     SfSidebar,
     SfHeading,
     SfAccordion,
@@ -98,37 +114,50 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
-    availableFacets: {
-      type: Array,
-      default: () => [],
-    },
-    facets: {
-      type: Array,
-      default: () => [],
+    catUid: {
+      type: String,
+      required: true,
     },
   },
-  setup(props, { emit }) {
+  setup({ catUid }, { emit }) {
     const { changeFilters } = useUiHelpers();
-    const { getSelectedFilters, isFilterSelected, selectFilter } = useFilters();
-    const selectedFilters = getSelectedFilters();
+    const {
+      selectedFilters, selectFilter, removeFilter, isFilterSelected,
+    } = useFilters();
 
-    const applyFilters = () => {
-      changeFilters(getSelectedFilters().value);
+    const doApplyFilters = () => {
+      changeFilters(selectedFilters.value);
       emit('close');
     };
 
-    const clearFilters = () => {
+    const doRemoveFilter = ({ id, value }: { id: string, value: string }) => {
+      removeFilter(id, value);
+      changeFilters(selectedFilters.value);
+      emit('close');
+    };
+
+    const doClearFilters = () => {
       changeFilters({});
       emit('close');
     };
 
+    const filters = ref<Aggregation[]>([]);
+
+    onMounted(async () => {
+      const loadedFilters = await getProductFilterByCategoryCommand.execute({ eq: catUid });
+      filters.value = loadedFilters.filter((filter) => !getDisabledFilters().includes(filter.attribute_code));
+    });
+
+    provide('UseFiltersProvider', { isFilterSelected, selectedFilters, filters });
+
     return {
-      isFilterSelected,
       selectFilter,
-      applyFilters,
-      clearFilters,
+      doApplyFilters,
+      doRemoveFilter,
+      doClearFilters,
       getFilterConfig,
       selectedFilters,
+      filters,
     };
   },
 });
diff --git a/packages/theme/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue b/packages/theme/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue
new file mode 100644
index 000000000..437cce958
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/FiltersSidebar/SelectedFilters.vue
@@ -0,0 +1,87 @@
+<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"
+      >
+        <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>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, inject } 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,
+    };
+  },
+});
+</script>
+<style lang="scss">
+.selected-filters-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.selected-filter {
+  display: flex;
+  margin-right: var(--spacer-xs);
+  margin-bottom: var(--spacer-xs);
+  &__label {
+    font-size: var(--font-size--base);
+  }
+  &__remove {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 6px;
+  }
+}
+</style>
diff --git a/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js b/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js
index 94a374777..7b5590971 100644
--- a/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js
+++ b/packages/theme/modules/catalog/category/components/filters/__tests__/useFilters.spec.js
@@ -1,5 +1,4 @@
 import useFilters from '~/modules/catalog/category/components/filters/useFilters';
-import { getFilterableAttributes } from '~/modules/catalog/category/config/FiltersConfig';
 
 import { useUiHelpers } from '~/composables';
 
@@ -15,18 +14,16 @@ jest.mock('~/composables', () => {
 jest.mock('~/modules/catalog/category/config/FiltersConfig');
 
 describe('useFilter', () => {
-  it('getSelectedFilters returns empty data if no filter is selected', () => {
+  it('getSelectedFiltersFromUrl returns empty data if no filter is selected', () => {
     useUiHelpers.mockReturnValue({ getFacetsFromURL: jest.fn(() => ({ filters: {} })) });
-    getFilterableAttributes.mockReturnValue(['color']);
-    const { getSelectedFilters } = useFilters();
-    expect(getSelectedFilters()).toMatchObject({ value: { color: [] } });
+    const { getSelectedFiltersFromUrl } = useFilters();
+    expect(getSelectedFiltersFromUrl()).toMatchObject({});
   });
 
-  it('getSelectedFilters returns selected filters from url data', () => {
+  it('getSelectedFiltersFromUrl returns selected filters from url data', () => {
     useUiHelpers.mockReturnValue({ getFacetsFromURL: jest.fn(() => ({ filters: { color: ['50'] } })) });
-    getFilterableAttributes.mockReturnValue(['color']);
-    const { getSelectedFilters } = useFilters();
-    expect(getSelectedFilters()).toMatchObject({ value: { color: ['50'] } });
+    const { getSelectedFiltersFromUrl } = useFilters();
+    expect(getSelectedFiltersFromUrl()).toMatchObject({ color: ['50'] });
   });
 
   it.todo('isFilterSelected returns true if filter is selected');
diff --git a/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts b/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts
new file mode 100644
index 000000000..b2c5521cb
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql.ts
@@ -0,0 +1,22 @@
+import { gql } from 'graphql-request';
+
+export default gql`
+  query getProductFiltersByCategory($categoryIdFilter: FilterEqualTypeInput!) {
+    products(filter: { category_uid: $categoryIdFilter }) {
+      aggregations {
+        label
+        count
+        attribute_code
+        options {
+          count
+          label
+          value
+          __typename
+        }
+        position
+        __typename
+      }
+      __typename
+    }
+  }
+`;
diff --git a/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategoryCommand.ts b/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategoryCommand.ts
new file mode 100644
index 000000000..3b72d1cb5
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/command/getProductFilterByCategoryCommand.ts
@@ -0,0 +1,14 @@
+import useApi from '~/composables/useApi';
+import { Aggregation, FilterEqualTypeInput } from '~/modules/GraphQL/types';
+import GetProductFilterByCategoryQuery from '~/modules/catalog/category/components/filters/command/getProductFilterByCategory.gql';
+
+export const getProductFilterByCategoryCommand = {
+  execute: async (categoryIdFilter: FilterEqualTypeInput): Promise<Aggregation[]> => {
+    const { query } = useApi();
+    const data = await query(GetProductFilterByCategoryQuery, { categoryIdFilter });
+
+    return data?.products?.aggregations ?? [];
+  },
+};
+
+export default getProductFilterByCategoryCommand;
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
index fd59eec8e..d91a74da7 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/CheckboxType.vue
@@ -1,39 +1,43 @@
 <template>
-  <div>
+  <component
+    :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
+    max-content-height="6.875rem"
+    :show-text="$t('Show more')"
+    :hide-text="$t('Show less')"
+  >
     <SfCheckbox
-      v-for="option in facet.options"
-      :key="`${facet.id}-${option.value}`"
-      :label="option.id + `${option.count ? ` (${option.count})` : ''}`"
-      :selected="Boolean(isFilterSelected(facet, option, selectedFilters))"
+      v-for="option in filter.options"
+      :key="`${filter.attribute_code}-${option.value}`"
+      :label="option.label + `${option.count ? ` (${option.count})` : ''}`"
+      :selected="Boolean(selected(filter.attribute_code, option.value))"
       class="filters__item"
       @change="$emit('selectFilter', option)"
     />
-  </div>
+  </component>
 </template>
 <script lang="ts">
-import { SfCheckbox } from '@storefront-ui/vue';
-import { defineComponent, ref } from '@nuxtjs/composition-api';
-import { useFilters } from '~/modules/catalog/category/components/filters/useFilters';
+import {
+  computed, defineComponent, inject, PropType,
+} from '@nuxtjs/composition-api';
+import { SfCheckbox, SfScrollable } from '@storefront-ui/vue';
+import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   name: 'CheckboxType',
   components: {
     SfCheckbox,
+    SfScrollable,
   },
   props: {
-    selectedFilters: {
-      type: Object,
-      default: () => ref({}),
-    },
-    facet: {
-      type: Object,
+    filter: {
+      type: Object as PropType<Aggregation>,
       required: true,
     },
   },
   setup() {
-    const { isFilterSelected } = useFilters();
-
-    return { isFilterSelected };
+    const { isFilterSelected } = inject('UseFiltersProvider');
+    const selected = computed(() => ((id: string, optVal: string) => isFilterSelected(id, optVal)));
+    return { selected };
   },
 });
 </script>
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
index 9b9ebd64c..326f94c94 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/RadioType.vue
@@ -1,42 +1,62 @@
 <template>
-  <div>
+  <component
+    :is="filter.options.length > 4 ? 'SfScrollable' : 'div' "
+    max-content-height="6.875rem"
+    :show-text="$t('Show more')"
+    :hide-text="$t('Show less')"
+  >
     <SfRadio
-      v-for="option in facet.options"
-      :key="`${facet.id}-${option.value}`"
-      :label="`${option.id}${
+      v-for="option in filter.options"
+      :key="`${filter.attribute_code}-${option.value}`"
+      class="radio-filter"
+      :label="`${option.label}${
         option.count ? ` (${option.count})` : ''
       }`"
-      :selected="isFilterSelected(facet, option, selectedFilters)"
+      :selected="selected(filter.attribute_code, option.value)"
       :value="option.value"
       name="filter__price"
       @change="$emit('selectFilter', option)"
     />
-  </div>
+  </component>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from '@nuxtjs/composition-api';
-import { SfRadio } from '@storefront-ui/vue';
-import { useFilters } from '~/modules/catalog/category/components/filters/useFilters';
+import {
+  computed,
+  defineComponent, inject, PropType,
+} from '@nuxtjs/composition-api';
+import { SfRadio, SfScrollable } from '@storefront-ui/vue';
+import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   name: 'RadioType',
   components: {
     SfRadio,
+    SfScrollable,
   },
   props: {
-    selectedFilters: {
-      type: Object,
-      default: () => ref({}),
-    },
-    facet: {
-      type: Object,
+    filter: {
+      type: Object as PropType<Aggregation>,
       required: true,
     },
   },
   setup() {
-    const { isFilterSelected } = useFilters();
+    const { isFilterSelected } = inject('UseFiltersProvider');
+    const selected = computed(() => ((id: string, optVal: string) => isFilterSelected(id, optVal)));
 
-    return { isFilterSelected };
+    return { selected };
   },
 });
 </script>
+<style lang="scss">
+.radio-filter {
+  .sf-radio__content {
+    display: flex;
+    align-items: center
+  }
+  margin: 0 0 var(--spacer-2xs) 0;
+  .sf-radio__container {
+    padding: 0;
+  }
+}
+
+</style>
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts b/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts
index efb35dda7..eeee1939c 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/RendererTypesEnum.ts
@@ -2,6 +2,7 @@ enum RendererTypesEnum {
   RADIO = 'RadioType',
   CHECKBOX = 'CheckboxType',
   SWATCH_COLOR = 'SwatchColorType',
+  YES_NO = 'YesNoType',
   DEFAULT = 'CheckboxType',
 }
 
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
index 258a6fddc..cffdf98b6 100644
--- a/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/SwatchColorType.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="swatch_color_wrapper">
     <SfColor
-      v-for="option in facet.options"
-      :key="`${facet.id}-${option.value}`"
-      :color="option.attrName"
-      :selected="Boolean(isFilterSelected(facet, option, selectedFilters))"
+      v-for="option in filter.options"
+      :key="`${filter.attribute_code}-${option.value}`"
+      :color="option.label"
+      :selected="Boolean(selected(filter.attribute_code, option.value))"
       class="swatch_color"
       @click="$emit('selectFilter', option)"
     />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref } from '@nuxtjs/composition-api';
+import {
+  computed, defineComponent, inject, PropType,
+} from '@nuxtjs/composition-api';
 import { SfColor } from '@storefront-ui/vue';
-import { useFilters } from '~/modules/catalog/category/components/filters/useFilters';
+import type { Aggregation } from '~/modules/GraphQL/types';
 
 export default defineComponent({
   name: 'SwatchColorType',
@@ -21,25 +23,28 @@ export default defineComponent({
     SfColor,
   },
   props: {
-    selectedFilters: {
-      type: Object,
-      default: () => ref({}),
-    },
-    facet: {
-      type: Object,
+    filter: {
+      type: Object as PropType<Aggregation>,
       required: true,
     },
   },
   setup() {
-    const { isFilterSelected } = useFilters();
-
-    return { isFilterSelected };
+    const { isFilterSelected } = inject('UseFiltersProvider');
+    const selected = computed(() => ((id: string, optVal: string) => isFilterSelected(id, optVal)));
+    return {
+      selected,
+    };
   },
 });
 </script>
 <style lang="scss">
 .swatch_color_wrapper {
   display: flex;
+
+  .sf-color {
+    width: var(--checkbox-size, 1.5rem);
+    height: var(--checkbox-size, 1.5rem);
+  }
 }
 
 .swatch_color {
diff --git a/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue b/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue
new file mode 100644
index 000000000..328d29ea9
--- /dev/null
+++ b/packages/theme/modules/catalog/category/components/filters/renderer/YesNoType.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <SfRadio
+      v-for="option in filter.options"
+      :key="`${filter.attribute_code}-${option.value}`"
+      class="radio-filter"
+      :label="label(option)"
+      :selected="selected(filter.attribute_code, option.value)"
+      :value="option.value"
+      name="filter__price"
+      @change="$emit('selectFilter', option)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import {
+  computed,
+  defineComponent, inject, PropType, useContext,
+} from '@nuxtjs/composition-api';
+import { SfRadio } from '@storefront-ui/vue';
+import type { Aggregation, AggregationOption } from '~/modules/GraphQL/types';
+
+export default defineComponent({
+  name: 'YesNoType',
+  components: {
+    SfRadio,
+  },
+  props: {
+    filter: {
+      type: Object as PropType<Aggregation>,
+      required: true,
+    },
+  },
+  setup() {
+    const { app: { i18n } } = useContext();
+    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 };
+  },
+});
+</script>
+<style lang="scss">
+.radio-filter {
+  margin: 0 0 var(--spacer-2xs) 0;
+  .sf-radio__container {
+    padding: 0;
+  }
+}
+
+</style>
diff --git a/packages/theme/modules/catalog/category/components/filters/useFilters.ts b/packages/theme/modules/catalog/category/components/filters/useFilters.ts
index 0f2b31e54..2301466da 100644
--- a/packages/theme/modules/catalog/category/components/filters/useFilters.ts
+++ b/packages/theme/modules/catalog/category/components/filters/useFilters.ts
@@ -1,21 +1,19 @@
-import { ref } from '@nuxtjs/composition-api';
+import {
+  ref, set,
+} from '@nuxtjs/composition-api';
 import { useUiHelpers } from '~/composables';
-import { FacetInterface, GroupedFacetInterface } from '~/modules/catalog/category/types';
-import { getFilterConfig, getFilterableAttributes, FilterTypeEnum } from '~/modules/catalog/category/config/FiltersConfig';
+import { getFilterConfig } from '~/modules/catalog/category/config/FiltersConfig';
+import { FilterTypeEnum } from '~/modules/catalog/category/config/config';
+import type { Aggregation, AggregationOption } from '~/modules/GraphQL/types';
+
+export interface SelectedFiltersInterface {[p: string]: string[]}
 
 export const useFilters = () => {
   // @ts-ignore
   const { getFacetsFromURL } = useUiHelpers();
-  const getSelectedFilterValues = () => {
-    const availableFacets = getFilterableAttributes();
 
-    const selectedFilterValues = Object.fromEntries(
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-      availableFacets.map((curr: string) => [
-        curr,
-        [],
-      ]),
-    );
+  const getSelectedFiltersFromUrl = () => {
+    const selectedFilterValues = {};
     const { filters } = getFacetsFromURL();
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     Object.keys(filters).forEach((filter) => {
@@ -25,41 +23,46 @@ export const useFilters = () => {
     return selectedFilterValues;
   };
 
-  const selectedFilters = ref(getSelectedFilterValues());
-  const getSelectedFilters = () => selectedFilters;
+  const selectedFilters = ref<SelectedFiltersInterface>(getSelectedFiltersFromUrl());
 
-  const isFilterSelected = (facet: GroupedFacetInterface, option: FacetInterface, filtersPool = getSelectedFilters().value) => {
-    const selected = (filtersPool[facet.id] || []).find((filterOpt) => filterOpt === option.value);
+  const isFilterSelected = (name: string, value: string) => {
+    const selected = (selectedFilters.value[name] ?? []).find((selectedValue) => selectedValue === value);
 
     return selected ?? '';
   };
 
-  const selectFilter = (facet: GroupedFacetInterface, option: FacetInterface) => {
-    const config = getFilterConfig(facet.id);
-    if (config.type === FilterTypeEnum.RADIO) {
-      selectedFilters.value[facet.id] = [option.value];
-      return;
+  const removeFilter = (attrCode: string, valToRemove: string) => {
+    if (!selectedFilters.value[attrCode]) return;
+    selectedFilters.value[attrCode] = selectedFilters.value[attrCode].filter((value) => value !== valToRemove);
+  };
+
+  const selectFilter = (filter: Aggregation, option: AggregationOption) => {
+    const config = getFilterConfig(filter.attribute_code);
+    if (!selectedFilters.value[filter.attribute_code]) {
+      set(selectedFilters.value, filter.attribute_code, []);
     }
 
-    if (!selectedFilters.value[facet.id]) {
-      selectedFilters.value[facet.id] = [];
+    if (config.type === FilterTypeEnum.RADIO) {
+      selectedFilters.value[filter.attribute_code] = [option.value];
+      return;
     }
 
-    if (selectedFilters.value[facet.id].find((f) => f === option.value)) {
-      selectedFilters.value[facet.id] = selectedFilters.value[
-        facet.id
+    if (selectedFilters.value[filter.attribute_code].find((f) => f === option.value)) {
+      selectedFilters.value[filter.attribute_code] = selectedFilters.value[
+        filter.attribute_code
       ]?.filter((f) => f !== option.value);
       return;
     }
 
-    selectedFilters.value[facet.id].push(option.value);
+    selectedFilters.value[filter.attribute_code].push(String(option.value));
   };
 
   return {
-    getSelectedFilterValues,
+    getSelectedFiltersFromUrl,
     isFilterSelected,
+    removeFilter,
     selectFilter,
-    getSelectedFilters,
+    selectedFilters,
   };
 };
 
diff --git a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
index 8cc8234eb..62c30be02 100644
--- a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
+++ b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
@@ -73,7 +73,7 @@
     </div>
   </div>
 </template>
-<script>
+<script lang="ts">
 import { defineComponent } from '@nuxtjs/composition-api';
 import {
   SfSelect,
diff --git a/packages/theme/modules/catalog/category/config/FiltersConfig.ts b/packages/theme/modules/catalog/category/config/FiltersConfig.ts
index 85bfdc97e..254627949 100644
--- a/packages/theme/modules/catalog/category/config/FiltersConfig.ts
+++ b/packages/theme/modules/catalog/category/config/FiltersConfig.ts
@@ -1,37 +1,11 @@
 import RendererTypesEnum from '~/modules/catalog/category/components/filters/renderer/RendererTypesEnum';
-
-export enum FilterTypeEnum {
-  RADIO = 'radio',
-  CHECKBOX = 'checkbox',
-  SWATCH_COLOR = 'swatch_color',
-}
+import config, { FilterTypeEnum } from './config';
 
 export interface FilterConfigInterface {
   attrCode: string;
   component?: RendererTypesEnum;
   type?: FilterTypeEnum;
-  [key: string]: any;
-}
-
-/**
- * Override this to add/modify filters set and data
- */
-function config(): FilterConfigInterface[] {
-  return [
-    {
-      attrCode: 'price',
-      type: FilterTypeEnum.RADIO,
-      component: RendererTypesEnum.RADIO,
-    },
-    {
-      attrCode: 'size',
-    },
-    {
-      attrCode: 'color',
-      type: FilterTypeEnum.SWATCH_COLOR,
-      component: RendererTypesEnum.SWATCH_COLOR,
-    },
-  ];
+  disabled?: boolean
 }
 
 export const getFilterConfig = (attrCode: string): FilterConfigInterface => {
@@ -41,8 +15,8 @@ export const getFilterConfig = (attrCode: string): FilterConfigInterface => {
     component: RendererTypesEnum.CHECKBOX,
   };
 
-  const find = config().find((cfgItem) => cfgItem.attrCode === attrCode) ?? defaultCfg;
+  const find = config().find((cfgItem) => cfgItem.attrCode === attrCode) ?? {};
   return { ...defaultCfg, ...find };
 };
 
-export const getFilterableAttributes = () => config().map((filter) => filter.attrCode);
+export const getDisabledFilters = () => config().filter((filter) => filter.disabled).map((filter) => filter.attrCode);
diff --git a/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js b/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js
index 03ab230c9..66663975d 100644
--- a/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js
+++ b/packages/theme/modules/catalog/category/config/__tests__/filtersConfig.spec.js
@@ -1,15 +1,40 @@
 import {
-  getFilterConfig, getFilterableAttributes, FilterTypeEnum,
+  getFilterConfig, getDisabledFilters,
 } from '../FiltersConfig';
+import config, { FilterTypeEnum } from '~/modules/catalog/category/config/config';
 import RendererTypesEnum from '~/modules/catalog/category/components/filters/renderer/RendererTypesEnum';
 
-describe('FiltersConfig', () => {
-  it('getFilterableAttributes', () => {
-    const result = getFilterableAttributes();
-    expect(result).toEqual(['price', 'size', 'color']);
-  });
+jest.mock('~/modules/catalog/category/config/config');
 
+const defaultFiltersConfig = [
+  {
+    attrCode: 'price',
+    type: FilterTypeEnum.RADIO,
+    component: RendererTypesEnum.RADIO,
+  },
+  {
+    attrCode: 'size',
+  },
+  {
+    attrCode: 'color',
+    type: FilterTypeEnum.SWATCH_COLOR,
+    component: RendererTypesEnum.SWATCH_COLOR,
+  },
+  {
+    attrCode: 'new',
+    type: FilterTypeEnum.RADIO,
+    component: RendererTypesEnum.YES_NO,
+  },
+  {
+    attrCode: 'sale',
+    type: FilterTypeEnum.RADIO,
+    component: RendererTypesEnum.YES_NO,
+    disabled: true,
+  },
+];
+describe('FiltersConfig', () => {
   it('getFilterConfig with a configured attribute', () => {
+    config.mockReturnValueOnce(defaultFiltersConfig);
     const result = getFilterConfig('price');
     const expected = {
       attrCode: 'price',
@@ -20,6 +45,7 @@ describe('FiltersConfig', () => {
   });
 
   it('getFilterConfig with a partially configured attribute', () => {
+    config.mockReturnValueOnce(defaultFiltersConfig);
     const result = getFilterConfig('size');
     const expected = {
       attrCode: 'size',
@@ -30,6 +56,7 @@ describe('FiltersConfig', () => {
   });
 
   it('getFilterConfig with a not-configured attribute (default)', () => {
+    config.mockReturnValueOnce(defaultFiltersConfig);
     const result = getFilterConfig('ANYTHING');
     const expected = {
       attrCode: 'ANYTHING',
@@ -38,4 +65,11 @@ describe('FiltersConfig', () => {
     };
     expect(result).toEqual(expected);
   });
+
+  it('getDisabledFilters', () => {
+    config.mockReturnValueOnce(defaultFiltersConfig);
+    const result = getDisabledFilters('ANYTHING');
+    const expected = ['sale'];
+    expect(result).toEqual(expected);
+  });
 });
diff --git a/packages/theme/modules/catalog/category/config/config.ts b/packages/theme/modules/catalog/category/config/config.ts
new file mode 100644
index 000000000..376026c4e
--- /dev/null
+++ b/packages/theme/modules/catalog/category/config/config.ts
@@ -0,0 +1,49 @@
+import RendererTypesEnum from '~/modules/catalog/category/components/filters/renderer/RendererTypesEnum';
+import type { FilterConfigInterface } from '~/modules/catalog/category/config/FiltersConfig';
+
+export enum FilterTypeEnum {
+  RADIO = 'radio',
+  CHECKBOX = 'checkbox',
+  SWATCH_COLOR = 'swatch_color',
+}
+
+/**
+ * Override this to add/modify filters renderers and data
+ *
+ * @attrCode: Magento attribute code
+ * @type: internal filter type
+ * @component: filter renderer component
+ * @disabled: flag to disable filter on the front; disabled filter will be not rendered
+ */
+export default function config(): FilterConfigInterface[] {
+  return [
+    {
+      attrCode: 'price',
+      type: FilterTypeEnum.RADIO,
+      component: RendererTypesEnum.RADIO,
+    },
+    {
+      attrCode: 'size',
+    },
+    {
+      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,
+      component: RendererTypesEnum.YES_NO,
+    },
+    {
+      attrCode: 'sale',
+      type: FilterTypeEnum.RADIO,
+      component: RendererTypesEnum.YES_NO,
+    },
+  ];
+}
diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
index 70a5e2f8f..d096bd33f 100644
--- a/packages/theme/modules/catalog/pages/category.vue
+++ b/packages/theme/modules/catalog/pages/category.vue
@@ -37,160 +37,161 @@
           <SkeletonLoader />
         </div>
       </div>
-      <div v-else-if="isShowProducts">
-        <EmptyResults v-if="products.length === 0" />
-        <div class="products">
-          <transition-group
-            v-if="isCategoryGridView"
-            appear
-            class="products__grid"
-            name="products__slide"
-            tag="div"
+      <div
+        v-else-if="isShowProducts"
+        class="products"
+      >
+        <CategoryEmptyResults v-if="products.length === 0" />
+        <transition-group
+          v-if="isCategoryGridView"
+          appear
+          class="products__grid"
+          name="products__slide"
+          tag="div"
+        >
+          <SfProductCard
+            v-for="(product, i) in products"
+            :key="getSlug(product)"
+            v-e2e="'category-product-card'"
+            image-tag="nuxt-img"
+            :image="getMagentoImage(getProductThumbnailImage(product))"
+            :image-height="imageSizes.productCard.height"
+            :image-width="imageSizes.productCard.width"
+            :is-added-to-cart="isInCart({ product })"
+            :is-in-wishlist="isInWishlist({ product })"
+            :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
+            :link="
+              localePath(
+                `/p/${getProductSku(product)}${getSlug(
+                  product,
+                  product.categories[0]
+                )}`
+              )
+            "
+            :regular-price="$fc(getPrice(product).regular)"
+            :reviews-count="getTotalReviews(product)"
+            :score-rating="getAverageRating(product)"
+            :show-add-to-cart-button="true"
+            :special-price="
+              getPrice(product).special && $fc(getPrice(product).special)
+            "
+            :style="{ '--index': i }"
+            :title="getName(product)"
+            :wishlist-icon="isAuthenticated ? 'heart' : ''"
+            class="products__product-card"
+            @click:wishlist="addItemToWishlist(product)"
+            @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
           >
-            <SfProductCard
-              v-for="(product, i) in products"
-              :key="getSlug(product)"
-              v-e2e="'category-product-card'"
-              image-tag="nuxt-img"
-              :image="getMagentoImage(getProductThumbnailImage(product))"
-              :image-height="imageSizes.productCard.height"
-              :image-width="imageSizes.productCard.width"
-              :is-added-to-cart="isInCart({ product })"
-              :is-in-wishlist="isInWishlist({ product })"
-              :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
-              :link="
-                localePath(
-                  `/p/${getProductSku(product)}${getSlug(
-                    product,
-                    product.categories[0]
-                  )}`
-                )
-              "
-              :regular-price="$fc(getPrice(product).regular)"
-              :reviews-count="getTotalReviews(product)"
-              :score-rating="getAverageRating(product)"
-              :show-add-to-cart-button="true"
-              :special-price="
-                getPrice(product).special && $fc(getPrice(product).special)
-              "
-              :style="{ '--index': i }"
-              :title="getName(product)"
-              :wishlist-icon="isAuthenticated ? 'heart' : ''"
-              class="products__product-card"
-              @click:wishlist="addItemToWishlist(product)"
-              @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-            >
-              <template #price>
-                <SfPrice
-                  :class="{ 'display-none': !isPriceLoaded || !$fc(getPrice(product).regular) }"
-                  class="sf-product-card__price"
-                  :regular="$fc(getPrice(product).regular)"
-                  :special="getPrice(product).special && $fc(getPrice(product).special)"
-                />
-              </template>
-            </SfProductCard>
-          </transition-group>
-          <transition-group
-            v-else
-            appear
-            class="products__list"
-            name="products__slide"
-            tag="div"
+            <template #price>
+              <SfPrice
+                :class="{ 'display-none': !isPriceLoaded || !$fc(getPrice(product).regular) }"
+                class="sf-product-card__price"
+                :regular="$fc(getPrice(product).regular)"
+                :special="getPrice(product).special && $fc(getPrice(product).special)"
+              />
+            </template>
+          </SfProductCard>
+        </transition-group>
+        <transition-group
+          v-else
+          appear
+          class="products__list"
+          name="products__slide"
+          tag="div"
+        >
+          <SfProductCardHorizontal
+            v-for="(product, i) in products"
+            :key="getSlug(product)"
+            image-tag="nuxt-img"
+            :description="getDescription(product)"
+            :image="getMagentoImage(getProductThumbnailImage(product))"
+            :image-height="imageSizes.productCardHorizontal.height"
+            :image-width="imageSizes.productCardHorizontal.width"
+            :is-in-wishlist="isInWishlist({ product })"
+            :is-in-wishlist-icon="isAuthenticated ? '' : ''"
+            :link="
+              localePath(
+                `/p/${getProductSku(product)}${getSlug(
+                  product,
+                  product.categories[0]
+                )}`
+              )
+            "
+            :regular-price="$fc(getPrice(product).regular)"
+            :reviews-count="getTotalReviews(product)"
+            :score-rating="getAverageRating(product)"
+            :special-price="
+              getPrice(product).special && $fc(getPrice(product).special)
+            "
+            :style="{ '--index': i }"
+            :title="getName(product)"
+            :wishlist-icon="isAuthenticated ? '' : ''"
+            class="products__product-card-horizontal"
+            @click:add-to-cart="addItemToCart({ product, quantity: $event })"
+            @click:wishlist="addItemToWishlist(product)"
           >
-            <SfProductCardHorizontal
-              v-for="(product, i) in products"
-              :key="getSlug(product)"
-              image-tag="nuxt-img"
-              :description="getDescription(product)"
-              :image="getMagentoImage(getProductThumbnailImage(product))"
-              :image-height="imageSizes.productCardHorizontal.height"
-              :image-width="imageSizes.productCardHorizontal.width"
-              :is-in-wishlist="isInWishlist({ product })"
-              :is-in-wishlist-icon="isAuthenticated ? '' : ''"
-              :link="
-                localePath(
-                  `/p/${getProductSku(product)}${getSlug(
-                    product,
-                    product.categories[0]
-                  )}`
-                )
-              "
-              :regular-price="$fc(getPrice(product).regular)"
-              :reviews-count="getTotalReviews(product)"
-              :score-rating="getAverageRating(product)"
-              :special-price="
-                getPrice(product).special && $fc(getPrice(product).special)
-              "
-              :style="{ '--index': i }"
-              :title="getName(product)"
-              :wishlist-icon="isAuthenticated ? '' : ''"
-              class="products__product-card-horizontal"
-              @click:add-to-cart="addItemToCart({ product, quantity: $event })"
-              @click:wishlist="addItemToWishlist(product)"
-            >
-              <template #configuration>
-                <SfProperty
-                  class="desktop-only"
-                  name="Size"
-                  style="margin: 0 0 1rem 0"
-                  value="XS"
-                />
-                <SfProperty
-                  class="desktop-only"
-                  name="Color"
-                  value="white"
-                />
-              </template>
-              <template #actions>
-                <SfButton
-                  v-if="isAuthenticated"
-                  class="sf-button--text products__product-card-horizontal__add-to-wishlist"
-                  @click="addItemToWishlist(product)"
-                >
-                  {{
-                    isInWishlist({ product })
-                      ? $t('Remove from Wishlist')
-                      : $t('Save for later')
-                  }}
-                </SfButton>
-              </template>
-            </SfProductCardHorizontal>
-          </transition-group>
-          <div class="products__display-opt">
-            <LazyHydrate on-interaction>
-              <SfPagination
-                v-show="pagination.totalPages > 1"
-                :current="pagination.currentPage"
-                :total="pagination.totalPages"
-                :visible="5"
-                class="products__pagination"
+            <template #configuration>
+              <SfProperty
+                class="desktop-only"
+                name="Size"
+                style="margin: 0 0 1rem 0"
+                value="XS"
               />
-            </LazyHydrate>
-
-            <div
+              <SfProperty
+                class="desktop-only"
+                name="Color"
+                value="white"
+              />
+            </template>
+            <template #actions>
+              <SfButton
+                v-if="isAuthenticated"
+                class="sf-button--text products__product-card-horizontal__add-to-wishlist"
+                @click="addItemToWishlist(product)"
+              >
+                {{
+                  isInWishlist({ product })
+                    ? $t('Remove from Wishlist')
+                    : $t('Save for later')
+                }}
+              </SfButton>
+            </template>
+          </SfProductCardHorizontal>
+        </transition-group>
+        <div class="products__display-opt">
+          <LazyHydrate on-interaction>
+            <SfPagination
               v-show="pagination.totalPages > 1"
-              class="products__show-on-page"
-            >
-              <span class="products__show-on-page__label">{{
-                $t('Show')
-              }}</span>
-              <LazyHydrate on-interaction>
-                <SfSelect
-                  :value="pagination.itemsPerPage.toString()"
-                  class="products__items-per-page"
-                  @input="changeItemsPerPage"
+              :current="pagination.currentPage"
+              :total="pagination.totalPages"
+              :visible="5"
+              class="products__pagination"
+            />
+          </LazyHydrate>
+
+          <div
+            v-show="pagination.totalPages > 1"
+            class="products__show-on-page"
+          >
+            <span class="products__show-on-page__label">{{
+              $t('Show')
+            }}</span>
+            <LazyHydrate on-interaction>
+              <SfSelect
+                :value="pagination.itemsPerPage.toString()"
+                class="products__items-per-page"
+                @input="changeItemsPerPage"
+              >
+                <SfSelectOption
+                  v-for="option in pagination.pageOptions"
+                  :key="option"
+                  :value="option"
+                  class="products__items-per-page__option"
                 >
-                  <SfSelectOption
-                    v-for="option in pagination.pageOptions"
-                    :key="option"
-                    :value="option"
-                    class="products__items-per-page__option"
-                  >
-                    {{ option }}
-                  </SfSelectOption>
-                </SfSelect>
-              </LazyHydrate>
-            </div>
+                  {{ option }}
+                </SfSelectOption>
+              </SfSelect>
+            </LazyHydrate>
           </div>
         </div>
       </div>
@@ -198,14 +199,14 @@
       <CategoryFilters
         v-if="isShowProducts"
         :is-visible="isFilterSidebarOpen"
-        :facets="facets"
+        :cat-uid="routeData.entity_uid"
         @close="toggleFilterSidebar"
       />
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import LazyHydrate from 'vue-lazy-hydration';
 import {
   SfButton,
@@ -232,24 +233,24 @@ import {
   useUiHelpers,
   useUiState,
 } from '~/composables';
-import { useUrlResolver } from '~/composables/useUrlResolver.ts';
+import { useUrlResolver } from '~/composables/useUrlResolver';
 import cacheControl from '~/helpers/cacheControl';
 import { useAddToCart } from '~/helpers/cart/addToCart';
-import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent.ts';
-import { usePrice } from '~/modules/catalog/pricing/usePrice.ts';
-import SkeletonLoader from '~/components/SkeletonLoader';
-import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar';
-import { getFilterableAttributes } from '~/modules/catalog/category/config/FiltersConfig';
+import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent';
+import { usePrice } from '~/modules/catalog/pricing/usePrice';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar.vue';
+import { EntityUrl, ProductInterface } from '~/modules/GraphQL/types';
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
   name: 'CategoryPage',
   components: {
-    CategoryFilters: () => import('~/modules/catalog/category/components/filters/CategoryFilters'),
+    CategoryFilters: () => import('~/modules/catalog/category/components/filters/CategoryFilters.vue'),
     SkeletonLoader,
     CategoryNavbar,
-    CmsContent: () => import('~/modules/catalog/category/components/cms/CmsContent'),
-    CategorySidebar: () => import('~/modules/catalog/category/components/sidebar/CategorySidebar'),
-    EmptyResults: () => import('~/modules/catalog/category/components/EmptyResults'),
+    CmsContent: () => import('~/modules/catalog/category/components/cms/CmsContent.vue'),
+    CategorySidebar: () => import('~/modules/catalog/category/components/sidebar/CategorySidebar.vue'),
+    CategoryEmptyResults: () => import('~/modules/catalog/category/components/CategoryEmptyResults.vue'),
     SfPrice,
     SfButton,
     SfProductCard,
@@ -271,12 +272,12 @@ export default defineComponent({
     const cmsContent = ref('');
     const isShowCms = ref(false);
     const isShowProducts = ref(false);
-    const products = ssrRef([]);
+    const products = ssrRef<ProductInterface[]>([]);
     const sortBy = ref({});
     const facets = ref([]);
     const pagination = ref({});
 
-    const { path, search: resolveUrl } = useUrlResolver();
+    const { search: resolveUrl } = useUrlResolver();
     const { isAuthenticated } = useUser();
     const {
       toggleFilterSidebar,
@@ -289,8 +290,8 @@ export default defineComponent({
       addItem: addItemToWishlistBase,
       isInWishlist,
       removeItem: removeItemFromWishlist,
-    } = useWishlist('GlobalWishlist');
-    const { result, search } = useFacet(`facetId:${path}`);
+    } = useWishlist();
+    const { result, search } = useFacet();
     const { addItemToCart, isInCart } = useAddToCart();
 
     const addItemToWishlist = async (product) => {
@@ -307,20 +308,20 @@ export default defineComponent({
       });
     };
 
-    useFetch(async () => {
-      const routeData = await resolveUrl();
-      const content = await getContentData(routeData?.id);
+    const routeData = ref<EntityUrl>({});
 
+    useFetch(async () => {
+      routeData.value = await resolveUrl();
+      const content = await getContentData(routeData.value?.id);
       cmsContent.value = content?.cmsBlock?.content ?? '';
       isShowCms.value = content.isShowCms;
       isShowProducts.value = content.isShowProducts;
 
-      await searchCategoryProduct(routeData?.entity_uid);
+      await searchCategoryProduct(routeData.value?.entity_uid);
       products.value = facetGetters.getProducts(result.value) ?? [];
       sortBy.value = facetGetters.getSortOptions(result.value);
       facets.value = facetGetters.getGrouped(
         result.value,
-        getFilterableAttributes(),
       );
       pagination.value = facetGetters.getPagination(result.value);
       const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
@@ -380,6 +381,7 @@ export default defineComponent({
       isShowCms,
       isShowProducts,
       cmsContent,
+      routeData,
     };
   },
 });
diff --git a/packages/theme/tsconfig.json b/packages/theme/tsconfig.json
index d744f2c64..37e4700de 100644
--- a/packages/theme/tsconfig.json
+++ b/packages/theme/tsconfig.json
@@ -2,7 +2,7 @@
   "compilerOptions": {
     "declaration": true,
     "target": "ES2019",
-    "module": "ES2015",
+    "module": "ES2020",
     "moduleResolution": "node",
     "lib": [
       "ES2019",

From 9fc5a34535802f284f912b9fd7b3e1a22b77590a Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Fri, 8 Apr 2022 19:16:02 +0200
Subject: [PATCH 3/4] refactor: update category page after merge develop

---
 .../theme/modules/catalog/pages/category.vue  | 45 +++++++++----------
 1 file changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
index 8e00385bf..dca5e7a2f 100644
--- a/packages/theme/modules/catalog/pages/category.vue
+++ b/packages/theme/modules/catalog/pages/category.vue
@@ -42,7 +42,7 @@
         </div>
       </div>
       <div v-else-if="isShowProducts">
-        <EmptyResults v-if="products.length === 0" />
+        <CategoryEmptyResults v-if="products.length === 0" />
         <div class="products">
           <transition-group
             v-if="isCategoryGridView"
@@ -202,14 +202,14 @@
       <CategoryFilters
         v-if="isShowProducts"
         :is-visible="isFilterSidebarOpen"
-        :facets="facets"
+        :cat-uid="routeData.entity_uid"
         @close="toggleFilterSidebar"
       />
     </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import LazyHydrate from 'vue-lazy-hydration';
 import {
   SfButton,
@@ -236,28 +236,27 @@ import {
   useUiHelpers,
   useUiState,
 } from '~/composables';
-import { useUrlResolver } from '~/composables/useUrlResolver.ts';
+import { useUrlResolver } from '~/composables/useUrlResolver';
 import cacheControl from '~/helpers/cacheControl';
 import { useAddToCart } from '~/helpers/cart/addToCart';
-import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent.ts';
-import { usePrice } from '~/modules/catalog/pricing/usePrice.ts';
-import { getFilterableAttributes } from '~/modules/catalog/category/config/FiltersConfig';
-import SkeletonLoader from '~/components/SkeletonLoader';
-import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar';
+import { useCategoryContent } from '~/modules/catalog/category/components/cms/useCategoryContent';
+import { usePrice } from '~/modules/catalog/pricing/usePrice';
+import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
+import CategoryNavbar from '~/modules/catalog/category/components/navbar/CategoryNavbar.vue';
 import CategoryBreadcrumbs from '../category/components/breadcrumbs/CategoryBreadcrumbs.vue';
 import { useCategoryLogic } from '../category/helpers';
-
+import type { ProductInterface, EntityUrl } from '~/modules/GraphQL/types';
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
   name: 'CategoryPage',
   components: {
-    CategoryFilters: () => import('~/modules/catalog/category/components/filters/CategoryFilters'),
+    CategoryEmptyResults: () => import('~/modules/catalog/category/components/CategoryEmptyResults.vue'),
+    CategoryFilters: () => import('~/modules/catalog/category/components/filters/CategoryFilters.vue'),
     SkeletonLoader,
     CategoryNavbar,
     CategoryBreadcrumbs,
-    CmsContent: () => import('~/modules/catalog/category/components/cms/CmsContent'),
-    CategorySidebar: () => import('~/modules/catalog/category/components/sidebar/CategorySidebar'),
-    EmptyResults: () => import('~/modules/catalog/category/components/EmptyResults'),
+    CmsContent: () => import('~/modules/catalog/category/components/cms/CmsContent.vue'),
+    CategorySidebar: () => import('~/modules/catalog/category/components/sidebar/CategorySidebar.vue'),
     SfPrice,
     SfButton,
     SfProductCard,
@@ -279,12 +278,12 @@ export default defineComponent({
     const cmsContent = ref('');
     const isShowCms = ref(false);
     const isShowProducts = ref(false);
-    const products = ssrRef([]);
+    const products = ssrRef<ProductInterface[]>([]);
     const sortBy = ref({});
     const facets = ref([]);
     const pagination = ref({});
 
-    const { path, search: resolveUrl } = useUrlResolver();
+    const { search: resolveUrl } = useUrlResolver();
     const { isAuthenticated } = useUser();
     const {
       toggleFilterSidebar,
@@ -297,8 +296,8 @@ export default defineComponent({
       addItem: addItemToWishlistBase,
       isInWishlist,
       removeItem: removeItemFromWishlist,
-    } = useWishlist('GlobalWishlist');
-    const { result, search } = useFacet(`facetId:${path}`);
+    } = useWishlist();
+    const { result, search } = useFacet();
     const { addItemToCart, isInCart } = useAddToCart();
 
     const addItemToWishlist = async (product) => {
@@ -316,21 +315,20 @@ export default defineComponent({
     };
 
     const { categoryAncestors, isCategoryTreeLoaded, loadCategoryTree } = useCategoryLogic();
-
+    const routeData = ref<EntityUrl>({});
     useFetch(async () => {
-      const routeData = await resolveUrl();
-      const content = await getContentData(routeData?.id);
+      routeData.value = await resolveUrl();
+      const content = await getContentData(routeData.value?.id);
 
       cmsContent.value = content?.cmsBlock?.content ?? '';
       isShowCms.value = content.isShowCms;
       isShowProducts.value = content.isShowProducts;
 
-      await searchCategoryProduct(routeData?.entity_uid);
+      await searchCategoryProduct(routeData.value?.entity_uid);
       products.value = facetGetters.getProducts(result.value) ?? [];
       sortBy.value = facetGetters.getSortOptions(result.value);
       facets.value = facetGetters.getGrouped(
         result.value,
-        getFilterableAttributes(),
       );
       pagination.value = facetGetters.getPagination(result.value);
       const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
@@ -395,6 +393,7 @@ export default defineComponent({
       isShowProducts,
       cmsContent,
       categoryAncestors,
+      routeData,
     };
   },
 });

From 8bf6cf1ac2fb8b3245dc01050f3e53415ec3de25 Mon Sep 17 00:00:00 2001
From: Bartosz Herba <bherba@vuestorefront.io>
Date: Fri, 8 Apr 2022 21:41:47 +0200
Subject: [PATCH 4/4] refactor: on filters/sorting/pagination change only
 products will be reloaded

---
 packages/theme/composables/types.ts           |  10 +-
 .../theme/composables/useUiHelpers/index.ts   | 167 +++++++--
 .../composables/useWishlist/useWishlist.ts    |   4 +-
 packages/theme/getters/types.d.ts             |   4 +-
 .../components/filters/CategoryFilters.vue    |  14 +-
 .../components/navbar/CategoryNavbar.vue      |  10 +-
 .../theme/modules/catalog/pages/category.vue  | 334 +++++++++---------
 7 files changed, 325 insertions(+), 218 deletions(-)

diff --git a/packages/theme/composables/types.ts b/packages/theme/composables/types.ts
index a47aba624..606f726d8 100644
--- a/packages/theme/composables/types.ts
+++ b/packages/theme/composables/types.ts
@@ -236,11 +236,11 @@ export interface AgnosticSort {
 }
 
 export interface AgnosticPagination {
-  currentPage: number;
-  totalPages: number;
-  totalItems: number;
-  itemsPerPage: number;
-  pageOptions: number[];
+  currentPage?: number;
+  totalPages?: number;
+  totalItems?: number;
+  itemsPerPage?: number;
+  pageOptions?: number[];
 }
 
 export interface AgnosticAddress {
diff --git a/packages/theme/composables/useUiHelpers/index.ts b/packages/theme/composables/useUiHelpers/index.ts
index dec3746fe..f8927f2f4 100644
--- a/packages/theme/composables/useUiHelpers/index.ts
+++ b/packages/theme/composables/useUiHelpers/index.ts
@@ -16,55 +16,151 @@ const reduceFilters = (query) => (prev, curr: string) => {
 const useUiHelpers = () => {
   const route = useRoute();
   const router = useRouter();
-  const { query } = route.value;
+  let { query } = route.value;
 
-  const getFiltersDataFromUrl = (onlyFilters) => Object.keys(query)
-    .filter((f) => (onlyFilters ? !nonFilters.has(f) : nonFilters.has(f)))
-  // eslint-disable-next-line unicorn/prefer-object-from-entries
-    .reduce(reduceFilters(query), {});
+  const resolveQuery = () => {
+    if (typeof window !== 'undefined') {
+      query = router.resolve((window.location.pathname + window.location.search).slice(1)).route.query;
+    }
 
-  const getFacetsFromURL = () => ({
-    filters: getFiltersDataFromUrl(true),
-    itemsPerPage: Number.parseInt(query.itemsPerPage as string, 10) || 10,
-    page: Number.parseInt(query.page as string, 10) || 1,
-    sort: query.sort as string || '',
-    term: query.term as string,
-  });
+    return query;
+  };
+
+  const getFiltersDataFromUrl = (onlyFilters = false) => {
+    const currentQuery = resolveQuery();
+    return Object.keys(currentQuery)
+      .filter((f) => (onlyFilters ? !nonFilters.has(f) : f))
+      // eslint-disable-next-line unicorn/prefer-object-from-entries
+      .reduce(reduceFilters(currentQuery), {});
+  };
+
+  const getFacetsFromURL = () => {
+    const currentQuery = resolveQuery();
+
+    return {
+      filters: getFiltersDataFromUrl(true),
+      itemsPerPage: Number.parseInt(currentQuery.itemsPerPage as string, 10) || 10,
+      page: Number.parseInt(currentQuery.page as string, 10) || 1,
+      sort: currentQuery.sort as string || '',
+      term: currentQuery.term as string,
+    };
+  };
 
   const changeSearchTerm = (term: string) => term;
 
-  const getSearchTermFromUrl = () => ({
-    page: Number.parseInt(query.page as string, 10) || 1,
-    sort: query.sort || '',
-    filters: getFiltersDataFromUrl(true),
-    itemsPerPage: Number.parseInt(query.itemsPerPage as string, 10) || 10,
-    term: query.term,
-  });
+  const getSearchTermFromUrl = () => {
+    const currentQuery = resolveQuery();
+
+    return {
+      page: Number.parseInt(currentQuery.page as string, 10) || 1,
+      sort: currentQuery.sort || '',
+      filters: getFiltersDataFromUrl(true),
+      itemsPerPage: Number.parseInt(currentQuery.itemsPerPage as string, 10) || 10,
+      term: currentQuery.term,
+    };
+  };
 
   const getCatLink = (category: Category): string => `/c/${category.url_path}${category.url_suffix || ''}`;
 
   const getAgnosticCatLink = (category: CategoryTreeInterface): string => `/c${category.slug}`;
 
-  const changeSorting = async (sort: string) => {
-    await router.push({ query: { ...query, sort } });
+  /**
+   * Force push for a backward compatibility in other places, should be removed
+   *
+   * @param sort
+   * @param forcePush
+   */
+  const changeSorting = async (sort: string, forcePush = true) => {
+    if (forcePush) {
+      await router.push({ query: { ...query, sort } });
+    } else {
+      const routeData = router.resolve({
+        query: {
+          ...getFiltersDataFromUrl(),
+          sort,
+        },
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
   };
 
-  const changeFilters = async (filters: any) => {
-    await router.push({
-      query: {
-        ...getFiltersDataFromUrl(false),
-        ...filters,
-      },
-    });
+  /**
+   * Force push for a backward compatibility in other places, should be removed
+   *
+   * @param filters
+   * @param forcePush
+   */
+  const changeFilters = async (filters: any, forcePush = true) => {
+    if (forcePush) {
+      await router.push({
+        query: {
+          ...getFiltersDataFromUrl(false),
+          ...filters,
+        },
+      });
+    } else {
+      const routeData = router.resolve({
+        query: {
+          ...getFiltersDataFromUrl(),
+          ...filters,
+        },
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
   };
 
-  const changeItemsPerPage = async (itemsPerPage: number) => {
-    await router.push({
-      query: {
-        ...getFiltersDataFromUrl(false),
-        itemsPerPage,
-      },
-    });
+  const clearFilters = async (forcePush = true) => {
+    if (forcePush) {
+      await router.push({
+        query: {},
+      });
+    } else {
+      const routeData = router.resolve({
+        query: {},
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
+  };
+
+  /**
+   * Force push for a backward compatibility in other places, should be removed
+   *
+   * @param itemsPerPage
+   * @param forcePush
+   */
+  const changeItemsPerPage = async (itemsPerPage: number, forcePush = true) => {
+    if (forcePush) {
+      await router.push({
+        query: {
+          ...getFiltersDataFromUrl(false),
+          itemsPerPage,
+        },
+      });
+    } else {
+      const routeData = router.resolve({
+        query: {
+          ...getFiltersDataFromUrl(),
+          itemsPerPage,
+        },
+      });
+      window.history.pushState(
+        {},
+        null,
+        routeData.href,
+      );
+    }
   };
 
   const setTermForUrl = async (term: string) => {
@@ -87,6 +183,7 @@ const useUiHelpers = () => {
     changeSorting,
     changeFilters,
     changeItemsPerPage,
+    clearFilters,
     setTermForUrl,
     isFacetColor,
     isFacetCheckbox,
diff --git a/packages/theme/composables/useWishlist/useWishlist.ts b/packages/theme/composables/useWishlist/useWishlist.ts
index cde40014b..b7aab7ece 100644
--- a/packages/theme/composables/useWishlist/useWishlist.ts
+++ b/packages/theme/composables/useWishlist/useWishlist.ts
@@ -1,7 +1,7 @@
 import { Ref } from '@nuxtjs/composition-api';
 import { ComposableFunctionArgs } from '~/composables/types';
 import {
-  Maybe, Scalars, WishlistItem, WishlistItems,
+  Maybe, ProductInterface, Scalars, WishlistItem, WishlistItems,
 } from '~/modules/GraphQL/types';
 
 export interface Wishlist {
@@ -32,7 +32,7 @@ export interface UseWishlistErrors {
 export type UseWishlist = {
   wishlist: Ref<Wishlist>,
   loadItemsCount(params: ComposableFunctionArgs<{}>): Promise<number | null>;
-  isInWishlist: (params: { product: any }) => boolean;
+  isInWishlist: (params: { product: ProductInterface }) => boolean;
   addItem: (
     params: ComposableFunctionArgs<{
       product: any; // TODO: add product intrface
diff --git a/packages/theme/getters/types.d.ts b/packages/theme/getters/types.d.ts
index 1f589d001..c96eddca0 100644
--- a/packages/theme/getters/types.d.ts
+++ b/packages/theme/getters/types.d.ts
@@ -2,7 +2,7 @@ import { Country } from '~/modules/GraphQL/types';
 import {
   AgnosticAttribute, Countries, AgnosticPrice, AgnosticTotals,
   AgnosticCoupon, AgnosticDiscount, AgnosticCategoryTree, AgnosticBreadcrumb,
-  GroupedFacetInterface, AgnosticSort, AgnosticMediaGalleryItem,
+  GroupedFacetInterface, AgnosticSort, AgnosticMediaGalleryItem, AgnosticPagination, AgnosticFacetSearchParams, FacetInterface,
 } from '~/composables/types';
 
 export interface AddressGetter {
@@ -64,7 +64,7 @@ export interface ForgotPasswordGetters<FORGOT_PASSWORD_RESULT> {
 }
 
 export interface FacetsGetters<SEARCH_DATA, RESULTS, CRITERIA = any> {
-  getAll: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => AgnosticFacet[];
+  getAll: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => FacetInterface[];
   getGrouped: (searchData: FacetSearchResult<SEARCH_DATA>, criteria?: CRITERIA) => GroupedFacetInterface[];
   getCategoryTree: (searchData: FacetSearchResult<SEARCH_DATA>) => AgnosticCategoryTree;
   getSortOptions: (searchData: FacetSearchResult<SEARCH_DATA>) => AgnosticSort;
diff --git a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
index 3af0c281a..a8fb0765d 100644
--- a/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
+++ b/packages/theme/modules/catalog/category/components/filters/CategoryFilters.vue
@@ -95,7 +95,7 @@ export interface UseFiltersProviderInterface {
 }
 
 export default defineComponent({
-  name: 'CategoryFiltersSidebar',
+  name: 'CategoryFilters',
   components: {
     SelectedFilters,
     CheckboxType: () => import('~/modules/catalog/category/components/filters/renderer/CheckboxType.vue'),
@@ -120,24 +120,28 @@ export default defineComponent({
     },
   },
   setup({ catUid }, { emit }) {
-    const { changeFilters } = useUiHelpers();
+    const { changeFilters, clearFilters } = useUiHelpers();
     const {
       selectedFilters, selectFilter, removeFilter, isFilterSelected,
     } = useFilters();
 
     const doApplyFilters = () => {
-      changeFilters(selectedFilters.value);
+      changeFilters(selectedFilters.value, false);
+      emit('reloadProducts');
       emit('close');
     };
 
     const doRemoveFilter = ({ id, value }: { id: string, value: string }) => {
       removeFilter(id, value);
-      changeFilters(selectedFilters.value);
+      changeFilters(selectedFilters.value, false);
+      emit('reloadProducts');
       emit('close');
     };
 
     const doClearFilters = () => {
-      changeFilters({});
+      clearFilters(false);
+      selectedFilters.value = {};
+      emit('reloadProducts');
       emit('close');
     };
 
diff --git a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
index 62c30be02..f79d847ec 100644
--- a/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
+++ b/packages/theme/modules/catalog/category/components/navbar/CategoryNavbar.vue
@@ -26,7 +26,7 @@
         <SfSelect
           :value="sortBy.selected"
           class="navbar__select"
-          @input="changeSorting"
+          @input="doChangeSorting"
         >
           <SfSelectOption
             v-for="option in sortBy.options"
@@ -101,14 +101,18 @@ export default defineComponent({
       default: () => {},
     },
   },
-  setup() {
+  setup(_, { emit }) {
     const {
       toggleFilterSidebar, changeToCategoryListView, changeToCategoryGridView, isCategoryGridView,
     } = useUiState();
     const uiHelpers = useUiHelpers();
-
+    const doChangeSorting = (sort: string) => {
+      uiHelpers.changeSorting(sort, false);
+      emit('reloadProducts');
+    };
     return {
       toggleFilterSidebar,
+      doChangeSorting,
       ...uiHelpers,
       changeToCategoryListView,
       changeToCategoryGridView,
diff --git a/packages/theme/modules/catalog/pages/category.vue b/packages/theme/modules/catalog/pages/category.vue
index dca5e7a2f..dd99155f4 100644
--- a/packages/theme/modules/catalog/pages/category.vue
+++ b/packages/theme/modules/catalog/pages/category.vue
@@ -8,23 +8,13 @@
       v-bind="{ categoryAncestors }"
       class="breadcrumbs"
     />
-    <SkeletonLoader
-      v-if="$fetchState.pending"
-      height="75px"
-    />
     <CategoryNavbar
-      v-else-if="isShowProducts"
       :sort-by="sortBy"
       :pagination="pagination"
+      @reloadProducts="fetch"
     />
     <div class="main section">
-      <SkeletonLoader
-        v-if="$fetchState.pending"
-        class="sidebar desktop-only"
-        height="500px"
-      />
       <CategorySidebar
-        v-else-if="isShowProducts"
         class="sidebar desktop-only"
       />
       <div
@@ -32,7 +22,7 @@
         class="products products__grid"
       >
         <div
-          v-for="n in 10"
+          v-for="n in productsSkeletons"
           :key="n"
           class="sf-product-card products__product-card"
         >
@@ -41,169 +31,170 @@
           <SkeletonLoader />
         </div>
       </div>
-      <div v-else-if="isShowProducts">
+      <div
+        v-else-if="isShowProducts"
+        class="products"
+      >
         <CategoryEmptyResults v-if="products.length === 0" />
-        <div class="products">
-          <transition-group
-            v-if="isCategoryGridView"
-            appear
-            class="products__grid"
-            name="products__slide"
-            tag="div"
+        <transition-group
+          v-if="isCategoryGridView"
+          appear
+          class="products__grid"
+          name="products__slide"
+          tag="div"
+        >
+          <SfProductCard
+            v-for="(product, i) in products"
+            :key="getSlug(product)"
+            v-e2e="'category-product-card'"
+            image-tag="nuxt-img"
+            :image="getMagentoImage(getProductThumbnailImage(product))"
+            :image-height="imageSizes.productCard.height"
+            :image-width="imageSizes.productCard.width"
+            :is-added-to-cart="isInCart({ product })"
+            :is-in-wishlist="isInWishlist({ product })"
+            :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
+            :link="
+              localePath(
+                `/p/${getProductSku(product)}${getSlug(
+                  product,
+                  product.categories[0]
+                )}`
+              )
+            "
+            :regular-price="$fc(getPrice(product).regular)"
+            :reviews-count="getTotalReviews(product)"
+            :score-rating="getAverageRating(product)"
+            :show-add-to-cart-button="true"
+            :special-price="
+              getPrice(product).special && $fc(getPrice(product).special)
+            "
+            :style="{ '--index': i }"
+            :title="getName(product)"
+            :wishlist-icon="isAuthenticated ? 'heart' : ''"
+            class="products__product-card"
+            @click:wishlist="addItemToWishlist(product)"
+            @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
           >
-            <SfProductCard
-              v-for="(product, i) in products"
-              :key="getSlug(product)"
-              v-e2e="'category-product-card'"
-              image-tag="nuxt-img"
-              :image="getMagentoImage(getProductThumbnailImage(product))"
-              :image-height="imageSizes.productCard.height"
-              :image-width="imageSizes.productCard.width"
-              :is-added-to-cart="isInCart({ product })"
-              :is-in-wishlist="isInWishlist({ product })"
-              :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
-              :link="
-                localePath(
-                  `/p/${getProductSku(product)}${getSlug(
-                    product,
-                    product.categories[0]
-                  )}`
-                )
-              "
-              :regular-price="$fc(getPrice(product).regular)"
-              :reviews-count="getTotalReviews(product)"
-              :score-rating="getAverageRating(product)"
-              :show-add-to-cart-button="true"
-              :special-price="
-                getPrice(product).special && $fc(getPrice(product).special)
-              "
-              :style="{ '--index': i }"
-              :title="getName(product)"
-              :wishlist-icon="isAuthenticated ? 'heart' : ''"
-              class="products__product-card"
-              @click:wishlist="addItemToWishlist(product)"
-              @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-            >
-              <template #price>
-                <SfPrice
-                  :class="{ 'display-none': !isPriceLoaded || !$fc(getPrice(product).regular) }"
-                  class="sf-product-card__price"
-                  :regular="$fc(getPrice(product).regular)"
-                  :special="getPrice(product).special && $fc(getPrice(product).special)"
-                />
-              </template>
-            </SfProductCard>
-          </transition-group>
-          <transition-group
-            v-else
-            appear
-            class="products__list"
-            name="products__slide"
-            tag="div"
+            <template #price>
+              <SfPrice
+                :class="{ 'display-none': !isPriceLoaded || !$fc(getPrice(product).regular) }"
+                class="sf-product-card__price"
+                :regular="$fc(getPrice(product).regular)"
+                :special="getPrice(product).special && $fc(getPrice(product).special)"
+              />
+            </template>
+          </SfProductCard>
+        </transition-group>
+        <transition-group
+          v-else
+          appear
+          class="products__list"
+          name="products__slide"
+          tag="div"
+        >
+          <SfProductCardHorizontal
+            v-for="(product, i) in products"
+            :key="getSlug(product)"
+            image-tag="nuxt-img"
+            :description="getDescription(product)"
+            :image="getMagentoImage(getProductThumbnailImage(product))"
+            :image-height="imageSizes.productCardHorizontal.height"
+            :image-width="imageSizes.productCardHorizontal.width"
+            :is-in-wishlist="isInWishlist({ product })"
+            :is-in-wishlist-icon="isAuthenticated ? '' : ''"
+            :link="
+              localePath(
+                `/p/${getProductSku(product)}${getSlug(
+                  product,
+                  product.categories[0]
+                )}`
+              )
+            "
+            :regular-price="$fc(getPrice(product).regular)"
+            :reviews-count="getTotalReviews(product)"
+            :score-rating="getAverageRating(product)"
+            :special-price="
+              getPrice(product).special && $fc(getPrice(product).special)
+            "
+            :style="{ '--index': i }"
+            :title="getName(product)"
+            :wishlist-icon="isAuthenticated ? '' : ''"
+            class="products__product-card-horizontal"
+            @click:add-to-cart="addItemToCart({ product, quantity: $event })"
+            @click:wishlist="addItemToWishlist(product)"
           >
-            <SfProductCardHorizontal
-              v-for="(product, i) in products"
-              :key="getSlug(product)"
-              image-tag="nuxt-img"
-              :description="getDescription(product)"
-              :image="getMagentoImage(getProductThumbnailImage(product))"
-              :image-height="imageSizes.productCardHorizontal.height"
-              :image-width="imageSizes.productCardHorizontal.width"
-              :is-in-wishlist="isInWishlist({ product })"
-              :is-in-wishlist-icon="isAuthenticated ? '' : ''"
-              :link="
-                localePath(
-                  `/p/${getProductSku(product)}${getSlug(
-                    product,
-                    product.categories[0]
-                  )}`
-                )
-              "
-              :regular-price="$fc(getPrice(product).regular)"
-              :reviews-count="getTotalReviews(product)"
-              :score-rating="getAverageRating(product)"
-              :special-price="
-                getPrice(product).special && $fc(getPrice(product).special)
-              "
-              :style="{ '--index': i }"
-              :title="getName(product)"
-              :wishlist-icon="isAuthenticated ? '' : ''"
-              class="products__product-card-horizontal"
-              @click:add-to-cart="addItemToCart({ product, quantity: $event })"
-              @click:wishlist="addItemToWishlist(product)"
-            >
-              <template #configuration>
-                <SfProperty
-                  class="desktop-only"
-                  name="Size"
-                  style="margin: 0 0 1rem 0"
-                  value="XS"
-                />
-                <SfProperty
-                  class="desktop-only"
-                  name="Color"
-                  value="white"
-                />
-              </template>
-              <template #actions>
-                <SfButton
-                  v-if="isAuthenticated"
-                  class="sf-button--text products__product-card-horizontal__add-to-wishlist"
-                  @click="addItemToWishlist(product)"
-                >
-                  {{
-                    isInWishlist({ product })
-                      ? $t('Remove from Wishlist')
-                      : $t('Save for later')
-                  }}
-                </SfButton>
-              </template>
-            </SfProductCardHorizontal>
-          </transition-group>
-          <div class="products__display-opt">
-            <LazyHydrate on-interaction>
-              <SfPagination
-                v-show="pagination.totalPages > 1"
-                :current="pagination.currentPage"
-                :total="pagination.totalPages"
-                :visible="5"
-                class="products__pagination"
+            <template #configuration>
+              <SfProperty
+                class="desktop-only"
+                name="Size"
+                style="margin: 0 0 1rem 0"
+                value="XS"
               />
-            </LazyHydrate>
-
-            <div
+              <SfProperty
+                class="desktop-only"
+                name="Color"
+                value="white"
+              />
+            </template>
+            <template #actions>
+              <SfButton
+                v-if="isAuthenticated"
+                class="sf-button--text products__product-card-horizontal__add-to-wishlist"
+                @click="addItemToWishlist(product)"
+              >
+                {{
+                  isInWishlist({ product })
+                    ? $t('Remove from Wishlist')
+                    : $t('Save for later')
+                }}
+              </SfButton>
+            </template>
+          </SfProductCardHorizontal>
+        </transition-group>
+        <div class="products__display-opt">
+          <LazyHydrate on-interaction>
+            <SfPagination
               v-show="pagination.totalPages > 1"
-              class="products__show-on-page"
-            >
-              <span class="products__show-on-page__label">{{
-                $t('Show')
-              }}</span>
-              <LazyHydrate on-interaction>
-                <SfSelect
-                  :value="pagination.itemsPerPage.toString()"
-                  class="products__items-per-page"
-                  @input="changeItemsPerPage"
+              :current="pagination.currentPage"
+              :total="pagination.totalPages"
+              :visible="5"
+              class="products__pagination"
+            />
+          </LazyHydrate>
+
+          <div
+            v-show="pagination.totalPages > 1"
+            class="products__show-on-page"
+          >
+            <span class="products__show-on-page__label">{{
+              $t('Show')
+            }}</span>
+            <LazyHydrate on-interaction>
+              <SfSelect
+                :value="pagination.itemsPerPage.toString()"
+                class="products__items-per-page"
+                @input="doChangeItemsPerPage"
+              >
+                <SfSelectOption
+                  v-for="option in pagination.pageOptions"
+                  :key="option"
+                  :value="option"
+                  class="products__items-per-page__option"
                 >
-                  <SfSelectOption
-                    v-for="option in pagination.pageOptions"
-                    :key="option"
-                    :value="option"
-                    class="products__items-per-page__option"
-                  >
-                    {{ option }}
-                  </SfSelectOption>
-                </SfSelect>
-              </LazyHydrate>
-            </div>
+                  {{ option }}
+                </SfSelectOption>
+              </SfSelect>
+            </LazyHydrate>
           </div>
         </div>
       </div>
-
       <CategoryFilters
         v-if="isShowProducts"
         :is-visible="isFilterSidebarOpen"
         :cat-uid="routeData.entity_uid"
         @close="toggleFilterSidebar"
+        @reloadProducts="fetch"
       />
     </div>
   </div>
@@ -221,6 +212,7 @@ import {
   SfPrice,
 } from '@storefront-ui/vue';
 import {
+  computed,
   defineComponent, onMounted, ref, ssrRef, useFetch,
 } from '@nuxtjs/composition-api';
 import { CacheTagPrefix, useCache } from '@vue-storefront/cache';
@@ -236,6 +228,8 @@ import {
   useUiHelpers,
   useUiState,
 } from '~/composables';
+
+import { AgnosticPagination } from '~/composables/types';
 import { useUrlResolver } from '~/composables/useUrlResolver';
 import cacheControl from '~/helpers/cacheControl';
 import { useAddToCart } from '~/helpers/cart/addToCart';
@@ -281,7 +275,7 @@ export default defineComponent({
     const products = ssrRef<ProductInterface[]>([]);
     const sortBy = ref({});
     const facets = ref([]);
-    const pagination = ref({});
+    const pagination = ref<AgnosticPagination>({});
 
     const { search: resolveUrl } = useUrlResolver();
     const { isAuthenticated } = useUser();
@@ -316,7 +310,8 @@ export default defineComponent({
 
     const { categoryAncestors, isCategoryTreeLoaded, loadCategoryTree } = useCategoryLogic();
     const routeData = ref<EntityUrl>({});
-    useFetch(async () => {
+
+    const { fetch } = useFetch(async () => {
       routeData.value = await resolveUrl();
       const content = await getContentData(routeData.value?.id);
 
@@ -351,18 +346,22 @@ export default defineComponent({
       const { getPricesBySku } = usePrice();
       if (products.value.length > 0) {
         const skus = products.value.map((item) => item.sku);
-        const priceData = await getPricesBySku(skus);
+        const priceData = await getPricesBySku(skus, pagination.value.itemsPerPage);
         products.value = products.value.map((product) => {
           const modifiedProduct = { ...product };
-          modifiedProduct.price_range = priceData.items.find((item) => item.sku === product.sku).price_range;
+          modifiedProduct.price_range = priceData.items.find((item) => item.sku === product.sku)?.price_range;
           return modifiedProduct;
         });
       }
       isPriceLoaded.value = true;
     });
 
+    const doChangeItemsPerPage = (itemsPerPage: number) => {
+      uiHelpers.changeItemsPerPage(itemsPerPage, false);
+      fetch();
+    };
     const { getMagentoImage, imageSizes } = useImage();
-
+    const productsSkeletons = computed(() => (products.value.length > 0 ? products.value.length : 10));
     return {
       isPriceLoaded,
       getTotalReviews,
@@ -394,6 +393,9 @@ export default defineComponent({
       cmsContent,
       categoryAncestors,
       routeData,
+      doChangeItemsPerPage,
+      fetch,
+      productsSkeletons,
     };
   },
 });