Skip to content

Commit 55339ce

Browse files
bartoszherbabartoszherba
committed
refactor: move desktop category filters from SfSidebar to the main layout column
M2-425
1 parent e2b9bf9 commit 55339ce

File tree

10 files changed

+384
-481
lines changed

10 files changed

+384
-481
lines changed

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,10 @@
5757
margin: var(--spacer-xs) 0 0 0;
5858
}
5959
}
60+
.heading__title {
61+
border: 1px solid var(--c-light);
62+
border-width: 1px 0 0 0;
63+
padding: var(--spacer-xs) 0;
64+
font-weight: normal;
65+
margin-bottom: var(--spacer-sm);
66+
}

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

Lines changed: 83 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
11
<template>
2-
<SfSidebar
3-
:visible="isVisible"
4-
class="sidebar-filters"
5-
title="Filters"
6-
@close="$emit('close')"
7-
>
8-
<div class="filters desktop-only">
2+
<div>
3+
<h4 class="heading__title h4 desktop-only">
4+
{{ $t('Filters') }}
5+
</h4>
6+
<div v-if="isLoading">
7+
<div
8+
v-for="n in 3"
9+
:key="n"
10+
>
11+
<SkeletonLoader
12+
class="filters__title sf-heading--left sf-heading"
13+
height="20px"
14+
width="85%"
15+
/>
16+
<SkeletonLoader width="50%" />
17+
<SkeletonLoader
18+
width="62%"
19+
/>
20+
<SkeletonLoader
21+
width="40%"
22+
height="10px"
23+
/>
24+
</div>
25+
</div>
26+
<div
27+
v-else
28+
class="filters desktop-only"
29+
>
930
<SelectedFilters
1031
@removeFilter="doRemoveFilter($event)"
1132
/>
@@ -26,30 +47,6 @@
2647
@selectFilter="selectFilter(filter, $event)"
2748
/>
2849
</div>
29-
</div>
30-
<SfAccordion class="filters smartphone-only">
31-
<SelectedFilters
32-
@removeFilter="doRemoveFilter($event)"
33-
/>
34-
<hr class="sf-divider">
35-
<div
36-
v-for="(filter, i) in filters"
37-
:key="i"
38-
>
39-
<SfAccordionItem
40-
:key="`filter-title-${filter.attribute_code}`"
41-
:header="filter.label"
42-
class="filters__accordion-item"
43-
>
44-
<component
45-
:is="getFilterConfig(filter.attribute_code).component"
46-
:filter="filter"
47-
@selectFilter="selectFilter(filter, $event)"
48-
/>
49-
</SfAccordionItem>
50-
</div>
51-
</SfAccordion>
52-
<template #content-bottom>
5350
<div class="filters__buttons">
5451
<SfButton
5552
class="sf-button--full-width"
@@ -64,8 +61,53 @@
6461
{{ $t('Clear all') }}
6562
</SfButton>
6663
</div>
67-
</template>
68-
</SfSidebar>
64+
</div>
65+
<SfSidebar
66+
:visible="isVisible"
67+
class="sidebar-filters smartphone-only"
68+
title="Filters"
69+
@close="$emit('close')"
70+
>
71+
<SfAccordion class="filters smartphone-only">
72+
<SelectedFilters
73+
@removeFilter="doRemoveFilter($event)"
74+
/>
75+
<hr class="sf-divider">
76+
<div
77+
v-for="(filter, i) in filters"
78+
:key="i"
79+
>
80+
<SfAccordionItem
81+
:key="`filter-title-${filter.attribute_code}`"
82+
:header="filter.label"
83+
class="filters__accordion-item"
84+
>
85+
<component
86+
:is="getFilterConfig(filter.attribute_code).component"
87+
:filter="filter"
88+
@selectFilter="selectFilter(filter, $event)"
89+
/>
90+
</SfAccordionItem>
91+
</div>
92+
</SfAccordion>
93+
<template #content-bottom>
94+
<div class="filters__buttons">
95+
<SfButton
96+
class="sf-button--full-width"
97+
@click="doApplyFilters"
98+
>
99+
{{ $t('Done') }}
100+
</SfButton>
101+
<SfButton
102+
class="sf-button--full-width filters__button-clear"
103+
@click="doClearFilters"
104+
>
105+
{{ $t('Clear all') }}
106+
</SfButton>
107+
</div>
108+
</template>
109+
</SfSidebar>
110+
</div>
69111
</template>
70112
<script lang="ts">
71113
import {
@@ -80,6 +122,7 @@ import {
80122
SfSidebar,
81123
} from '@storefront-ui/vue';
82124
125+
import SkeletonLoader from '~/components/SkeletonLoader/index.vue';
83126
import { useUiHelpers } from '~/composables';
84127
import { useFilters } from './useFilters';
85128
import { getFilterConfig, getDisabledFilters } from '~/modules/catalog/category/config/FiltersConfig';
@@ -98,6 +141,7 @@ export default defineComponent({
98141
name: 'CategoryFilters',
99142
components: {
100143
SelectedFilters,
144+
SkeletonLoader,
101145
CheckboxType: () => import('~/modules/catalog/category/components/filters/renderer/CheckboxType.vue'),
102146
SwatchColorType: () => import('~/modules/catalog/category/components/filters/renderer/SwatchColorType.vue'),
103147
RadioType: () => import('~/modules/catalog/category/components/filters/renderer/RadioType.vue'),
@@ -127,6 +171,9 @@ export default defineComponent({
127171
128172
const doApplyFilters = () => {
129173
changeFilters(selectedFilters.value, false);
174+
if (window?.scroll) {
175+
window.scroll(0, 0);
176+
}
130177
emit('reloadProducts');
131178
emit('close');
132179
};
@@ -146,10 +193,11 @@ export default defineComponent({
146193
};
147194
148195
const filters = ref<Aggregation[]>([]);
149-
196+
const isLoading = ref(true);
150197
onMounted(async () => {
151198
const loadedFilters = await getProductFilterByCategoryCommand.execute({ eq: catUid });
152199
filters.value = loadedFilters.filter((filter) => !getDisabledFilters().includes(filter.attribute_code));
200+
isLoading.value = false;
153201
});
154202
155203
provide('UseFiltersProvider', { isFilterSelected, selectedFilters, filters });
@@ -162,6 +210,7 @@ export default defineComponent({
162210
getFilterConfig,
163211
selectedFilters,
164212
filters,
213+
isLoading,
165214
};
166215
},
167216
});

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

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,27 @@
11
<template>
2-
<div>
3-
<div class="sf-heading filters__title">
4-
<h2 class="sf-heading__title h2">
5-
{{ $t('Filters') }}
6-
</h2>
7-
</div>
8-
<div class="selected-filters-wrapper">
9-
<SfBadge
10-
v-for="(filter, key) in removableFilters"
11-
:key="key"
12-
class="selected-filter"
2+
<div class="selected-filters-wrapper">
3+
<SfBadge
4+
v-for="(filter, key) in removableFilters"
5+
:key="key"
6+
class="selected-filter"
7+
>
8+
<a
9+
href="#"
10+
class="selected-filter__remove"
11+
@click.prevent="$emit('removeFilter', {id: filter.id, value: filter.value})"
1312
>
14-
<a
15-
href="#"
16-
class="selected-filter__remove"
17-
@click.prevent="$emit('removeFilter', {id: filter.id, value: filter.value})"
18-
>
19-
<SfIcon
20-
class="sf-cross__icon"
21-
icon="cross"
22-
size="20px"
23-
color="white"
24-
viewBox="0 0 24 12"
25-
/>
26-
</a>
27-
<span class="selected-filter__label">
28-
{{ filter.label }}
29-
</span>
30-
</SfBadge>
31-
</div>
13+
<SfIcon
14+
class="sf-cross__icon"
15+
icon="cross"
16+
size="20px"
17+
color="white"
18+
viewBox="0 0 24 12"
19+
/>
20+
</a>
21+
<span class="selected-filter__label">
22+
{{ filter.label }}
23+
</span>
24+
</SfBadge>
3225
</div>
3326
</template>
3427
<script lang="ts">

0 commit comments

Comments
 (0)