From 96fca4b9bb841eeceeac727adce91b6067dfb80a Mon Sep 17 00:00:00 2001 From: Kevin Gorjan Date: Thu, 17 Feb 2022 11:23:03 +0100 Subject: [PATCH 1/2] fix(theme): added radio-button filter for mobile --- packages/theme/pages/Category.vue | 45 ++++++++++++++++++++----------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue index d32679f2a..ce1602e2d 100644 --- a/packages/theme/pages/Category.vue +++ b/packages/theme/pages/Category.vue @@ -338,7 +338,7 @@ :label="`${option.id}${option.count ? ` (${option.count})` : ''}`" :value="option.value" :selected="isFilterSelected(facet, option)" - name="priceFilter" + name="filter__price" @change="() => selectFilter(facet, option)" /> @@ -364,14 +364,27 @@ :header="facet.label" class="filters__accordion-item" > - +
+ +
+
+ +
@@ -511,10 +524,8 @@ export default defineComponent({ )); const breadcrumbs = computed(() => facetGetters.getBreadcrumbs(result.value)); - const sortBy = computed(() => facetGetters.getSortOptions(result.value)); const facets = computed(() => facetGetters.getGrouped(result.value, magentoConfig.facets.available)); - const pagination = computed(() => facetGetters.getPagination(result.value)); const activeCategory = computed(() => { @@ -554,8 +565,14 @@ export default defineComponent({ const isFilterSelected = (facet, option) => { if (facet.id === 'price') { - return selectedFilters.value[facet.id]; + console.log( + selectedFilters.value[facet.id], + option.value, + selectedFilters.value[facet.id] === option.value + ) + return selectedFilters.value[facet.id] || ''; } + return (selectedFilters.value[facet.id] || []).includes(option.value); }; @@ -573,7 +590,6 @@ export default defineComponent({ selectedFilters.value[facet.id] = selectedFilters.value[ facet.id ]?.filter((f) => f !== option.value); - return; } @@ -582,7 +598,6 @@ export default defineComponent({ const applyFilters = (filters) => { toggleFilterSidebar(); - if (filters) { selectedFilters.value = filters; } @@ -623,7 +638,7 @@ export default defineComponent({ if (routeData?.value) { if (facets.value && facets.value.length > 0) { - selectedFilters.value = facets.value?.reduce( + selectedFilters.value = facets.value?.map( (prev, curr) => (curr.id === 'price' ? { ...prev, From c377cc6663318df18850a8a18f5b39e785e3e297 Mon Sep 17 00:00:00 2001 From: Kevin Gorjan Date: Wed, 23 Feb 2022 11:57:28 +0100 Subject: [PATCH 2/2] fix(theme): refactored how the selected filters values are set --- packages/theme/pages/Category.vue | 61 +++++++++++++++---------------- 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/packages/theme/pages/Category.vue b/packages/theme/pages/Category.vue index 8fa11c1b4..633c3ee00 100644 --- a/packages/theme/pages/Category.vue +++ b/packages/theme/pages/Category.vue @@ -4,6 +4,7 @@ class="breadcrumbs desktop-only" :breadcrumbs="breadcrumbs" /> +
@@ -57,8 +58,8 @@ {{ $t('Products found') }} {{ pagination.totalItems }} {{ pagination.totalItems }} {{ - $t('Items') - }} + $t('Items') + }}
@@ -257,7 +258,7 @@ class="sf-button--text products__product-card-horizontal__add-to-wishlist" @click="addItemToWishlist(product)" > - {{ isInWishlist({product}) ? $t('Remove from Wishlist') : $t('Save for later') }} + {{ isInWishlist({ product }) ? $t('Remove from Wishlist') : $t('Save for later') }} @@ -512,12 +513,6 @@ export default defineComponent({ isInCart, } = useAddToCart(); - const selectedFilters = ref(Object.fromEntries( - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - (magentoConfig.facets.available) - .map((curr) => [curr, (curr === 'price' ? '' : [])]), - )); - const products = computed(() => facetGetters.getProducts(result.value)); const categoryTree = computed(() => categoryGetters.getCategoryTree( @@ -568,19 +563,16 @@ export default defineComponent({ const isFilterSelected = (facet, option) => { if (facet.id === 'price') { - console.log( - selectedFilters.value[facet.id], - option.value, - selectedFilters.value[facet.id] === option.value - ) 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; } @@ -592,12 +584,13 @@ export default defineComponent({ if (selectedFilters.value[facet.id].find((f) => f === option.value)) { selectedFilters.value[facet.id] = selectedFilters.value[ facet.id - ]?.filter((f) => f !== option.value); + ]?.filter((f) => f !== option.value); return; } selectedFilters.value[facet.id].push(option.value); }; + /* eslint-enable */ const applyFilters = (filters) => { toggleFilterSidebar(); @@ -627,8 +620,29 @@ export default defineComponent({ }); }; + const getSelectedFilterValues = () => { + let selectedFilterValues = Object.fromEntries( + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + (magentoConfig.facets.available) + .map((curr) => [curr, (curr === 'price' ? '' : [])]), + ); + const filters = uiHelpers.getFacetsFromURL().filters; + + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + Object.keys(filters).forEach((filter) => { + if (filter === 'price') { + selectedFilterValues[filter] = filters[filter][0]; + } else { + selectedFilterValues[filter] = filters[filter]; + } + }); + return selectedFilterValues; + } + const isProductsLoading = ref(false); const isCategoriesLoading = ref(false); + const selectedFilters = ref(getSelectedFilterValues()); + onSSR(async () => { isProductsLoading.value = true; isCategoriesLoading.value = true; @@ -640,22 +654,7 @@ export default defineComponent({ isCategoriesLoading.value = false; if (routeData?.value) { - if (facets.value && facets.value.length > 0) { - selectedFilters.value = facets.value?.map( - (prev, curr) => (curr.id === 'price' - ? { - ...prev, - [curr.id]: curr.options.find((o) => o.selected)?.value, - } - : { - ...prev, - [curr.id]: curr.options - ?.filter((o) => o.selected) - ?.map((o) => o.value), - }), - {}, - ); - } + selectedFilters.value = getSelectedFilterValues(); await searchCategoryProduct(); isProductsLoading.value = false;