Skip to content

Commit c87ad06

Browse files
odranoelBRodranoelBR
authored
Merge pull request #3 from vuestorefront-community/dev
Release 1.3.0
2 parents 291120f + 7a5bd26 commit c87ad06

File tree

10 files changed

+438
-238
lines changed

10 files changed

+438
-238
lines changed

‎assets/css/category.scss

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
#category {
2+
box-sizing: border-box;
3+
@include for-desktop {
4+
max-width: 1240px;
5+
margin: 0 auto;
6+
}
7+
}
8+
.main {
9+
&.section {
10+
padding: var(--spacer-xs);
11+
@include for-desktop {
12+
padding: 0;
13+
}
14+
}
15+
}
16+
.breadcrumbs {
17+
margin: var(--spacer-base) auto var(--spacer-lg);
18+
text-transform: capitalize;
19+
}
20+
21+
.sort-by {
22+
flex: unset;
23+
width: 11.875rem;
24+
}
25+
.main {
26+
display: flex;
27+
}
28+
29+
.sidebar {
30+
flex: 0 0 15%;
31+
padding: var(--spacer-sm);
32+
border: 1px solid var(--c-light);
33+
border-width: 0 1px 0 0;
34+
}
35+
.list {
36+
--menu-item-font-size: var(--font-size--sm);
37+
&__item {
38+
&:not(:last-of-type) {
39+
--list-item-margin: 0 0 var(--spacer-sm) 0;
40+
}
41+
42+
.nuxt-link-exact-active {
43+
text-decoration: underline;
44+
}
45+
}
46+
}
47+
.products {
48+
box-sizing: border-box;
49+
flex: 1;
50+
margin: 0;
51+
&__grid {
52+
justify-content: space-between;
53+
@include for-desktop {
54+
justify-content: flex-start;
55+
}
56+
}
57+
&__grid,
58+
&__list {
59+
display: flex;
60+
flex-wrap: wrap;
61+
}
62+
&__product-card {
63+
--product-card-title-margin: var(--spacer-base) 0 0 0;
64+
--product-card-title-font-weight: var(--font-weight--medium);
65+
--product-card-title-margin: var(--spacer-xs) 0 0 0;
66+
flex: 1 1 50%;
67+
@include for-desktop {
68+
--product-card-title-font-weight: var(--font-weight--normal);
69+
--product-card-add-button-bottom: var(--spacer-base);
70+
--product-card-title-margin: var(--spacer-sm) 0 0 0;
71+
}
72+
}
73+
&__product-card-horizontal {
74+
flex: 0 0 100%;
75+
}
76+
&__slide-enter {
77+
opacity: 0;
78+
transform: scale(0.5);
79+
}
80+
&__slide-enter-active {
81+
transition: all 0.2s ease;
82+
transition-delay: calc(0.1s * var(--index));
83+
}
84+
@include for-desktop {
85+
&__grid {
86+
margin: var(--spacer-sm) 0 0 var(--spacer-sm);
87+
}
88+
&__pagination {
89+
display: flex;
90+
justify-content: flex-start;
91+
margin: var(--spacer-xl) 0 0 0;
92+
}
93+
&__product-card-horizontal {
94+
margin: var(--spacer-lg) 0;
95+
}
96+
&__product-card {
97+
flex: 1 1 25%;
98+
}
99+
&__list {
100+
margin: 0 0 0 var(--spacer-sm);
101+
}
102+
}
103+
&__show-on-page {
104+
display: flex;
105+
justify-content: flex-end;
106+
align-items: baseline;
107+
&__label {
108+
font-family: var(--font-family--secondary);
109+
font-size: var(--font-size--sm);
110+
}
111+
}
112+
}
113+
.loading {
114+
margin: var(--spacer-3xl) auto;
115+
@include for-desktop {
116+
margin-top: 6.25rem;
117+
}
118+
}
119+
::v-deep .sf-sidebar__aside {
120+
--sidebar-z-index: 3;
121+
}
122+
123+
.before-results {
124+
box-sizing: border-box;
125+
padding: var(--spacer-lg) var(--spacer-sm) var(--spacer-2xl);
126+
width: 100%;
127+
text-align: center;
128+
@include for-desktop {
129+
padding: 0;
130+
}
131+
&__picture {
132+
--image-width: 230px;
133+
margin-top: var(--spacer-2xl);
134+
@include for-desktop {
135+
--image-width: 18.75rem;
136+
margin-top: var(--spacer-base);
137+
}
138+
}
139+
&__paragraph {
140+
font-family: var(--font-family--primary);
141+
font-weight: var(--font-weight--normal);
142+
font-size: var(--font-size--base);
143+
color: var(--c-text-muted);
144+
margin: 0;
145+
@include for-desktop {
146+
font-size: var(--font-size--lg);
147+
}
148+
&:first-of-type {
149+
margin: var(--spacer-xl) auto var(--spacer-xs);
150+
}
151+
}
152+
&__button {
153+
margin: var(--spacer-xl) auto;
154+
width: 100%;
155+
}
156+
}

‎assets/css/mobileMenuSideBar.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.mobileMenu {
2+
--sidebar-z-index: 3;
3+
--overlay-z-index: 3;
4+
--sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0
5+
var(--spacer-base);
6+
--sidebar-content-padding: var(--spacer-lg) var(--spacer-base);
7+
}
8+
9+
.heading {
10+
&__wrapper {
11+
--heading-title-color: var(--c-link);
12+
--heading-title-font-weight: var(--font-weight--semibold);
13+
display: flex;
14+
justify-content: space-between;
15+
}
16+
}
17+
18+
.sidebar-bottom {
19+
margin: auto 0 0 0;
20+
}
21+
22+
::v-deep .sf-list .sf-list__item {
23+
padding: 10px 0;
24+
}

‎components/AppHeader.vue

+29-30
Original file line numberDiff line numberDiff line change
@@ -120,8 +120,8 @@ import {
120120
SfOverlay,
121121
SfBadge,
122122
SfHeader
123-
} from "@storefront-ui/vue";
124-
import { useUiState } from "~/composables";
123+
} from '@storefront-ui/vue';
124+
import { useUiState } from '~/composables';
125125
import {
126126
useCart,
127127
useWishlist,
@@ -130,16 +130,16 @@ import {
130130
categoryGetters,
131131
useCategory,
132132
useFacet
133-
} from "@vue-storefront/odoo";
134-
import { clickOutside } from "@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js";
135-
import { computed, ref, watch } from "@nuxtjs/composition-api";
136-
import { onSSR } from "@vue-storefront/core";
137-
import { useUiHelpers } from "~/composables";
138-
import LocaleSelector from "./LocaleSelector";
139-
import SearchResults from "~/components/SearchResults";
133+
} from '@vue-storefront/odoo';
134+
import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
135+
import { computed, ref, watch } from '@nuxtjs/composition-api';
136+
import { onSSR } from '@vue-storefront/core';
137+
import { useUiHelpers } from '~/composables';
138+
import LocaleSelector from './LocaleSelector';
139+
import SearchResults from '~/components/SearchResults';
140140
141-
import debounce from "lodash.debounce";
142-
import { mapMobileObserver } from "@storefront-ui/vue/src/utilities/mobile-observer.js";
141+
import debounce from 'lodash.debounce';
142+
import { mapMobileObserver } from '@storefront-ui/vue/src/utilities/mobile-observer.js';
143143
export default {
144144
components: {
145145
SfHeader,
@@ -160,20 +160,15 @@ export default {
160160
const isSearchOpen = ref(false);
161161
162162
const { changeSearchTerm } = useUiHelpers();
163-
const {
164-
toggleCartSidebar,
165-
toggleWishlistSidebar,
166-
toggleLoginModal
167-
} = useUiState();
163+
const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } =
164+
useUiState();
168165
169166
const { load: loadUser, isAuthenticated } = useUser();
170167
const { load: loadCart, cart } = useCart();
171168
const { load: loadWishlist, wishlist } = useWishlist();
172-
const { search: searchProductApi, result } = useFacet("AppHeader:Search");
173-
const {
174-
categories: topCategories,
175-
search: searchTopCategoryApi
176-
} = useCategory("AppHeader:TopCategories");
169+
const { search: searchProductApi, result } = useFacet('AppHeader:Search');
170+
const { categories: topCategories, search: searchTopCategoryApi } =
171+
useCategory('AppHeader:TopCategories');
177172
178173
const isMobile = computed(() => mapMobileObserver().isMobile.get());
179174
@@ -182,7 +177,7 @@ export default {
182177
return count ? count.toString() : null;
183178
});
184179
const accountIcon = computed(() =>
185-
isAuthenticated.value ? "profile_fill" : "profile"
180+
isAuthenticated.value ? 'profile_fill' : 'profile'
186181
);
187182
188183
const removeSearchResults = () => {
@@ -191,46 +186,50 @@ export default {
191186
192187
const closeSearch = () => {
193188
if (!isSearchOpen.value) return;
194-
term.value = "";
189+
term.value = '';
195190
isSearchOpen.value = false;
196191
};
197192
198-
const handleSearch = debounce(async paramValue => {
193+
const handleSearch = debounce(async (paramValue) => {
199194
if (!paramValue.target) {
200195
term.value = paramValue;
201196
} else {
202197
term.value = paramValue.target.value;
203198
}
204199
if (term.value.length < 2) return;
205200
206-
await searchProductApi({ search: term.value, pageSize: 12 });
201+
await searchProductApi({
202+
search: term.value,
203+
pageSize: 12,
204+
fetchCategory: true
205+
});
207206
208207
formatedResult.value = {
209208
products: result?.value?.data?.products,
210209
categories: result?.value?.data?.categories
211-
.filter(category => category.childs === null)
212-
.map(category => categoryGetters.getTree(category))
210+
.filter((category) => category.childs === null)
211+
.map((category) => categoryGetters.getTree(category))
213212
};
214213
}, 100);
215214
const closeOrFocusSearchBar = () => {
216215
if (isMobile.value) {
217216
return closeSearch();
218217
}
219-
term.value = "";
218+
term.value = '';
220219
return searchBarRef.value.$el.children[0].focus();
221220
};
222221
// TODO: https://github.com/DivanteLtd/vue-storefront/issues/4927
223222
const handleAccountClick = async () => {
224223
if (isAuthenticated.value) {
225-
return root.$router.push("/my-account");
224+
return root.$router.push('/my-account');
226225
}
227226
228227
toggleLoginModal();
229228
};
230229
231230
const filteredTopCategories = computed(() =>
232231
topCategories.value.filter(
233-
cat => cat.name === "WOMEN" || cat.name === "MEN"
232+
(cat) => cat.name === 'WOMEN' || cat.name === 'MEN'
234233
)
235234
);
236235

0 commit comments

Comments
 (0)