Skip to content

Commit f9ac5af

Browse files
bartoszherbabartoszherba
committed
fix: m2-717. total price and discount calculation
1 parent 1742f45 commit f9ac5af

File tree

8 files changed

+129
-76
lines changed

8 files changed

+129
-76
lines changed

‎packages/theme/components/AppHeader.vue‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,15 @@
8686
</template>
8787
<template #search>
8888
<SearchBar
89-
:is-search-open="isSearchOpen"
90-
@set-is-open="isSearchOpen = $event"
91-
@set-search-results="productSearchResults = $event"
89+
@SearchBar:toggle="isSearchOpen = $event"
90+
@SearchBar:result="result = $event"
9291
/>
9392
</template>
9493
</SfHeader>
9594
<SearchResults
9695
v-if="isSearchOpen"
9796
:visible="isSearchOpen"
98-
:search-results="productSearchResults"
97+
:result="result"
9998
/>
10099
<SfOverlay :visible="isSearchOpen" />
101100
</div>
@@ -116,16 +115,16 @@ import {
116115
useFetch,
117116
} from '@nuxtjs/composition-api';
118117
import HeaderNavigation from '~/components/Header/Navigation/HeaderNavigation.vue';
119-
import { useCategory } from '~/modules/catalog/category/composables/useCategory';
118+
import useCategory from '~/modules/catalog/category/composables/useCategory';
120119
import {
121120
useUiHelpers,
122121
useUiState,
123122
} from '~/composables';
124-
import { useCart } from '~/modules/checkout/composables/useCart';
125-
import { useWishlist } from '~/modules/wishlist/composables/useWishlist';
123+
import useCart from '~/modules/checkout/composables/useCart';
124+
import useWishlist from '~/modules/wishlist/composables/useWishlist';
126125
import { useUser } from '~/modules/customer/composables/useUser';
127126
import { useWishlistStore } from '~/modules/wishlist/store/wishlistStore';
128-
import type { CategoryTree, ProductInterface } from '~/modules/GraphQL/types';
127+
import type { CategoryTree } from '~/modules/GraphQL/types';
129128
import CurrencySelector from '~/components/CurrencySelector.vue';
130129
import HeaderLogo from '~/components/HeaderLogo.vue';
131130
import SvgImage from '~/components/General/SvgImage.vue';
@@ -157,10 +156,9 @@ export default defineComponent({
157156
const { loadItemsCount: loadWishlistItemsCount } = useWishlist();
158157
const { categories: categoryList, load: categoriesListLoad } = useCategory();
159158
160-
const isSearchOpen = ref(false);
161-
const productSearchResults = ref<ProductInterface[] | null>(null);
162-
163159
const wishlistStore = useWishlistStore();
160+
const isSearchOpen = ref(false);
161+
const result = ref(null);
164162
const wishlistItemsQty = computed(() => wishlistStore.wishlist?.items_count ?? 0);
165163
166164
const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
@@ -198,7 +196,7 @@ export default defineComponent({
198196
handleAccountClick,
199197
isAuthenticated,
200198
isSearchOpen,
201-
productSearchResults,
199+
result,
202200
setTermForUrl,
203201
toggleCartSidebar,
204202
toggleWishlistSidebar,

‎packages/theme/components/CartSidebar.vue‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -202,15 +202,37 @@
202202
<transition name="sf-fade">
203203
<div v-if="totalItems">
204204
<SfProperty
205-
:name="$t('Subtotal price')"
206-
class="sf-property--full-width sf-property--large my-cart__total-price"
205+
v-if="totals.subtotal !== totals.total"
206+
:name="$t('Subtotal')"
207+
class="sf-property--full-width sf-property--small"
207208
>
208209
<template #value>
209210
<SfPrice
210211
:regular="$fc(totals.subtotal)"
211-
:special="
212-
totals.subtotal <= totals.special ? '' : $fc(totals.special)
213-
"
212+
class="my-cart__subtotal-price"
213+
/>
214+
</template>
215+
</SfProperty>
216+
<SfProperty
217+
v-if="discount"
218+
:name="$t('Discount')"
219+
class="sf-property--full-width sf-property--small"
220+
>
221+
<template #value>
222+
<SfPrice
223+
:regular="$fc(discount)"
224+
class="my-cart__discount"
225+
/>
226+
</template>
227+
</SfProperty>
228+
<hr class="sf-divider">
229+
<SfProperty
230+
:name="$t('Order Total')"
231+
class="sf-property--full-width sf-property--large my-cart__total-price"
232+
>
233+
<template #value>
234+
<SfPrice
235+
:regular="$fc(totals.total)"
214236
/>
215237
</template>
216238
</SfProperty>
@@ -322,6 +344,7 @@ export default defineComponent({
322344
},
323345
})));
324346
const totals = computed(() => cartGetters.getTotals(cart.value));
347+
const discount = computed(() => -cartGetters.getDiscountAmount(cart.value));
325348
const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
326349
const getAttributes = (product: ConfigurableCartItem) => product.configurable_options || [];
327350
const getBundles = (product: BundleCartItem) => product.bundle_options?.map((b) => b.values).flat() || [];
@@ -393,6 +416,7 @@ export default defineComponent({
393416
isInStock,
394417
imageSizes,
395418
getMagentoImage,
419+
discount,
396420
};
397421
},
398422
});
@@ -451,10 +475,14 @@ export default defineComponent({
451475
margin: 0;
452476
}
453477
478+
&__subtotal, &__discount {
479+
--price-font-weight: var(--font-weight--light);
480+
}
481+
454482
&__total-price {
455-
--price-font-size: var(--font-size--xl);
483+
--price-font-size: var(--font-size--lg);
456484
--price-font-weight: var(--font-weight--medium);
457-
margin: 0 0 var(--spacer-base) 0;
485+
margin: var(--spacer-base) 0 var(--spacer-base) 0;
458486
}
459487
}
460488

‎packages/theme/components/Checkout/CartPreview.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
<SfProperty
2222
v-if="hasDiscounts"
2323
:name="$t('Discount')"
24-
:value="$fc(discountsAmount)"
24+
:value="$fc(discount)"
2525
class="sf-property--full-width sf-property--small property"
2626
/>
2727
<SfProperty
@@ -92,17 +92,13 @@ export default defineComponent({
9292
const products = computed(() => cartGetters.getItems(cart.value));
9393
const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
9494
const totals = computed(() => cartGetters.getTotals(cart.value));
95-
const discounts = computed(() => cartGetters.getDiscounts(cart.value));
96-
const hasDiscounts = computed(() => discounts.value.length > 0);
97-
const discountsAmount = computed(
98-
() => -1 * discounts.value.reduce((a, el) => el.value + a, 0),
99-
);
95+
const discount = computed(() => -cartGetters.getDiscountAmount(cart.value));
96+
const hasDiscounts = computed(() => Math.abs(discount.value) > 0);
10097
const selectedShippingMethod = computed(() => cartGetters.getSelectedShippingMethod(cart.value));
10198
10299
return {
103100
cart,
104-
discounts,
105-
discountsAmount,
101+
discount,
106102
hasDiscounts,
107103
totalItems,
108104
listIsHidden,

‎packages/theme/components/Header/SearchBar/SearchBar.vue‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,7 @@ import {
5656
import debounce from 'lodash.debounce';
5757
import { clickOutside } from '~/utilities/directives/click-outside/click-outside-directive';
5858
import SvgImage from '~/components/General/SvgImage.vue';
59-
import { useProduct } from '~/modules/catalog/product/composables/useProduct';
60-
import { Products } from '~/modules/GraphQL/types';
59+
import { useFacet } from '~/modules/catalog/category/composables/useFacet';
6160
6261
export default defineComponent({
6362
name: 'SearchBar',
@@ -68,10 +67,6 @@ export default defineComponent({
6867
},
6968
directives: { clickOutside },
7069
props: {
71-
isSearchOpen: {
72-
type: Boolean,
73-
default: false,
74-
},
7570
itemsPerPage: {
7671
type: Number,
7772
default: 12,
@@ -81,34 +76,41 @@ export default defineComponent({
8176
default: 3,
8277
},
8378
},
84-
emits: ['set-is-open', 'set-search-results'],
85-
setup(props, { emit }) {
79+
setup({ itemsPerPage, minTermLen }, { emit }) {
8680
const term = ref('');
81+
const isSearchOpen = ref(false);
82+
const result = ref(null);
83+
8784
const route = useRoute();
8885
89-
const { getProductList } = useProduct();
86+
const {
87+
result: searchResult,
88+
search: productsSearch,
89+
} = useFacet();
9090
9191
const showSearch = () => {
92-
if (!props.isSearchOpen) {
93-
emit('set-is-open', true);
92+
if (!isSearchOpen.value) {
93+
isSearchOpen.value = true;
94+
emit('SearchBar:toggle', true);
9495
if (document) {
9596
document.body.classList.add('no-scroll');
9697
}
9798
}
9899
};
99100
100101
const hideSearch = () => {
101-
if (props.isSearchOpen) {
102-
emit('set-is-open', false);
103-
emit('set-search-results', null);
102+
if (isSearchOpen.value) {
103+
isSearchOpen.value = false;
104+
emit('SearchBar:toggle', false);
105+
emit('SearchBar:result', {});
104106
if (document) {
105107
document.body.classList.remove('no-scroll');
106108
}
107109
}
108110
};
109111
110112
const toggleSearch = () => {
111-
if (props.isSearchOpen) {
113+
if (isSearchOpen.value) {
112114
hideSearch();
113115
} else {
114116
showSearch();
@@ -117,10 +119,10 @@ export default defineComponent({
117119
118120
const closeSearch = (event: MouseEvent) => {
119121
if (document) {
120-
const searchResultsEl = document.querySelector('.search');
122+
const searchResultsEl = document.querySelectorAll('.search');
121123
const closeTriggerElement = event.target as HTMLElement;
122124
123-
if (!searchResultsEl?.contains(closeTriggerElement)) {
125+
if (!searchResultsEl[0]?.contains(closeTriggerElement)) {
124126
hideSearch();
125127
term.value = '';
126128
}
@@ -130,17 +132,20 @@ export default defineComponent({
130132
}
131133
};
132134
133-
const handleSearch = debounce(async (searchTerm: string) => {
134-
term.value = searchTerm;
135-
if (term.value.length < props.minTermLen) return;
135+
const handleSearch = debounce(async (paramValue) => {
136+
term.value = !paramValue.target ? paramValue : paramValue.target.value;
137+
if (term.value.length < minTermLen) return;
138+
139+
await productsSearch({
140+
itemsPerPage,
141+
term: term.value,
142+
});
136143
137-
// M2-579
138-
const productList : Products = await getProductList({
139-
pageSize: props.itemsPerPage,
140-
search: term.value,
141-
}) as unknown as Products;
144+
result.value = {
145+
products: searchResult.value?.data?.items,
146+
};
142147
143-
emit('set-search-results', productList!.items);
148+
emit('SearchBar:result', result.value);
144149
}, 1000);
145150
146151
watch(route, () => {
@@ -154,6 +159,7 @@ export default defineComponent({
154159
hideSearch,
155160
toggleSearch,
156161
handleSearch,
162+
isSearchOpen,
157163
term,
158164
};
159165
},

0 commit comments

Comments
 (0)