From 9364eb6099e1c9cb56723674ebf8efce0263c619 Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 14:54:56 +0200 Subject: [PATCH 1/9] #2810 * provide changelog message * Move bottomVisible to core helper * remove bottomVisible from Category * Add new Module order-history --- CHANGELOG.md | 1 + core/helpers/index.ts | 8 +++ core/pages/Category.js | 11 +--- src/modules/index.ts | 4 +- .../order-history/components/UserOrders.ts | 50 +++++++++++++++++++ src/modules/order-history/index.ts | 6 +++ .../core/blocks/MyAccount/MyOrders.vue | 4 +- 7 files changed, 72 insertions(+), 12 deletions(-) create mode 100644 src/modules/order-history/components/UserOrders.ts create mode 100644 src/modules/order-history/index.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 269582e923..4f457bf949 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added back to top functionality - @vishal-7037 (#2866) - Button for filters acceptance added with new styles for clear filters button - @965750 (#2811) - Added "Clear wishlist" button - @aniamusial (#2806) +- Added new Module order-history this provides the pagination via lazy laod @hackbard (#2810) ### Fixed - Products removed from the cart are no longer add back on the conectivity return - @pkarw (#2898) diff --git a/core/helpers/index.ts b/core/helpers/index.ts index e1e5203b67..c508d9b562 100644 --- a/core/helpers/index.ts +++ b/core/helpers/index.ts @@ -171,3 +171,11 @@ export const processURLAddress = (url: string = '') => { if (url.startsWith('/')) return `${config.api.url}${url}` return url } + +export function bottomVisible () { + const scrollY = window.scrollY + const visible = window.innerHeight + const pageHeight = document.documentElement.scrollHeight + const bottomOfPage = visible + scrollY >= pageHeight + return bottomOfPage || pageHeight < visible +} diff --git a/core/pages/Category.js b/core/pages/Category.js index 0bd6fc18f8..a938545721 100644 --- a/core/pages/Category.js +++ b/core/pages/Category.js @@ -5,7 +5,7 @@ import config from 'config' import i18n from '@vue-storefront/i18n' import store from '@vue-storefront/core/store' import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus' -import { baseFilterProductsQuery, buildFilterProductsQuery, isServer } from '@vue-storefront/core/helpers' +import { baseFilterProductsQuery, buildFilterProductsQuery, isServer, bottomVisible } from '@vue-storefront/core/helpers' import { htmlDecode } from '@vue-storefront/core/filters/html-decode' import { currentStoreView, localizedRoute } from '@vue-storefront/core/lib/multistore' import Composite from '@vue-storefront/core/mixins/composite' @@ -138,7 +138,7 @@ export default { } if (!isServer && this.lazyLoadProductsOnscroll) { window.addEventListener('scroll', () => { - this.bottom = this.bottomVisible() + this.bottom = bottomVisible() }, {passive: true}) } }, @@ -156,13 +156,6 @@ export default { }, methods: { ...mapActions('category', ['mergeSearchOptions']), - bottomVisible () { - const scrollY = window.scrollY - const visible = window.innerHeight - const pageHeight = document.documentElement.scrollHeight - const bottomOfPage = visible + scrollY >= pageHeight - return bottomOfPage || pageHeight < visible - }, pullMoreProducts () { if (typeof navigator !== 'undefined' && !navigator.onLine) return let current = this.getCurrentCategoryProductQuery.current + this.getCurrentCategoryProductQuery.perPage diff --git a/src/modules/index.ts b/src/modules/index.ts index 3c76298a52..395dd1d3a9 100644 --- a/src/modules/index.ts +++ b/src/modules/index.ts @@ -24,6 +24,7 @@ import { PaymentCashOnDelivery } from './payment-cash-on-delivery'; import { RawOutputExample } from './raw-output-example' import { Magento2CMS } from './magento-2-cms' import { InstantCheckout } from './instant-checkout' +import { OrderHistory } from './order-history' // import { Example } from './module-template' @@ -76,6 +77,7 @@ export const registerModules: VueStorefrontModule[] = [ RawOutputExample, AmpRenderer, InstantCheckout, - Url + Url, + OrderHistory // Example ] diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts new file mode 100644 index 0000000000..e8b611e35c --- /dev/null +++ b/src/modules/order-history/components/UserOrders.ts @@ -0,0 +1,50 @@ +import { isServer, bottomVisible } from '@vue-storefront/core/helpers' +import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder' + +export default { + name: 'UserOrders', + mixins: [MyOrder], + data () { + return { + pagination: { + perPage: 10, + current: 0, + enabled: false + }, + bottom: false, + lazyLoadOrdersOnscroll: true + } + }, + watch: { + bottom (bottom) { + if (bottom) { + ++this.pagination.current + } + } + }, + beforeMount () { + if (!isServer && this.lazyLoadOrdersOnscroll) { + window.addEventListener('scroll', () => { + this.bottom = bottomVisible() + }, {passive: true}) + } + }, + computed: { + ordersHistory () { + let items = [] + items = this.$store.state.user.orders_history.items + if (!isServer && this.lazyLoadOrdersOnscroll) { + items = this.paginate(items, this.pagination.perPage, this.pagination.current) + } + return items + }, + isHistoryEmpty () { + return this.$store.state.user.orders_history.items.length < 1 + } + }, + methods: { + paginate (array, page_size, page_number) { + return array.slice(0, (page_number + 1) * page_size); + } + } +} diff --git a/src/modules/order-history/index.ts b/src/modules/order-history/index.ts new file mode 100644 index 0000000000..d7c3bd3774 --- /dev/null +++ b/src/modules/order-history/index.ts @@ -0,0 +1,6 @@ +import { createModule } from '@vue-storefront/core/lib/module' + +const KEY = 'order-history' +export const OrderHistory = createModule({ + key: KEY +}) diff --git a/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue b/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue index 608a448876..85cab4ff6b 100644 --- a/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue +++ b/src/themes/default/components/core/blocks/MyAccount/MyOrders.vue @@ -55,10 +55,10 @@ From e4d7b2ee40a91bfbfcc0a068f370ca432e7dad3a Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 16:16:16 +0200 Subject: [PATCH 2/9] #2810 add check to helper if we are on server side and return true as default --- core/helpers/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/helpers/index.ts b/core/helpers/index.ts index c508d9b562..9952130c57 100644 --- a/core/helpers/index.ts +++ b/core/helpers/index.ts @@ -173,9 +173,13 @@ export const processURLAddress = (url: string = '') => { } export function bottomVisible () { + if (isServer) { + return true + } const scrollY = window.scrollY const visible = window.innerHeight const pageHeight = document.documentElement.scrollHeight const bottomOfPage = visible + scrollY >= pageHeight + return bottomOfPage || pageHeight < visible } From 02f7b48597ecf63810ea8668cd85a0d721344646 Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 16:18:52 +0200 Subject: [PATCH 3/9] #2810 in case that we don't want a recrusion we set the default value to false --- core/helpers/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/helpers/index.ts b/core/helpers/index.ts index 9952130c57..bf0c857218 100644 --- a/core/helpers/index.ts +++ b/core/helpers/index.ts @@ -174,12 +174,12 @@ export const processURLAddress = (url: string = '') => { export function bottomVisible () { if (isServer) { - return true + return false } const scrollY = window.scrollY const visible = window.innerHeight const pageHeight = document.documentElement.scrollHeight const bottomOfPage = visible + scrollY >= pageHeight - + return bottomOfPage || pageHeight < visible } From 4fc31111395cf74468185bf6aa326fd1fc8c3698 Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 16:34:16 +0200 Subject: [PATCH 4/9] #2810 fix using the wrong import; using store getters for orders history items --- core/modules/order/components/UserOrders.ts | 6 ++++-- core/modules/user/store/getters.ts | 3 +++ src/modules/order-history/components/UserOrders.ts | 11 ++++------- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/core/modules/order/components/UserOrders.ts b/core/modules/order/components/UserOrders.ts index edd40cbb5c..d0a73898d1 100644 --- a/core/modules/order/components/UserOrders.ts +++ b/core/modules/order/components/UserOrders.ts @@ -1,3 +1,4 @@ +import { mapGetters } from 'vuex'; /** * Component responsible for displaying user orders. Requires User module. @@ -6,13 +7,14 @@ export const UserOrders = { name: 'UserOrders', computed: { ordersHistory () { - return this.$store.state.user.orders_history.items + return this.ordersHistoryItems() }, isHistoryEmpty () { - return this.$store.state.user.orders_history.items.length < 1 + return this.ordersHistoryItems().length < 1 } }, methods: { + ...mapGetters('user', ['ordersHistoryItems']), remakeOrder (products) { products.forEach(item => { this.$store.dispatch('product/single', { options: { sku: item.sku }, setCurrentProduct: false, selectDefaultVariant: false }).then((product) => { diff --git a/core/modules/user/store/getters.ts b/core/modules/user/store/getters.ts index 2444b05323..1aa25e80a3 100644 --- a/core/modules/user/store/getters.ts +++ b/core/modules/user/store/getters.ts @@ -9,6 +9,9 @@ const getters: GetterTree = { isLocalDataLoaded: state => state.local_data_loaded, getUserToken (state) { return state.token + }, + ordersHistoryItems (state) { + return state.orders_history.items } } diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts index e8b611e35c..dedb4c657e 100644 --- a/src/modules/order-history/components/UserOrders.ts +++ b/src/modules/order-history/components/UserOrders.ts @@ -1,9 +1,10 @@ import { isServer, bottomVisible } from '@vue-storefront/core/helpers' -import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder' +import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders' +import { mapGetters } from 'vuex'; export default { name: 'UserOrders', - mixins: [MyOrder], + mixins: [MyOrders], data () { return { pagination: { @@ -31,15 +32,11 @@ export default { }, computed: { ordersHistory () { - let items = [] - items = this.$store.state.user.orders_history.items + let items = this.ordersHistoryItems() if (!isServer && this.lazyLoadOrdersOnscroll) { items = this.paginate(items, this.pagination.perPage, this.pagination.current) } return items - }, - isHistoryEmpty () { - return this.$store.state.user.orders_history.items.length < 1 } }, methods: { From 7f3c5200ceecfaed697c6d6605d5db012f143734 Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 17:03:56 +0200 Subject: [PATCH 5/9] #2810 * Added bottomHelper * Use bottomHelper in core pages Category and order history user Orders --- core/helpers/index.ts | 8 +++++++ core/pages/Category.js | 15 +++++-------- .../order-history/components/UserOrders.ts | 22 ++++++++----------- 3 files changed, 23 insertions(+), 22 deletions(-) diff --git a/core/helpers/index.ts b/core/helpers/index.ts index bf0c857218..b1e828820e 100644 --- a/core/helpers/index.ts +++ b/core/helpers/index.ts @@ -183,3 +183,11 @@ export function bottomVisible () { return bottomOfPage || pageHeight < visible } + +export const bottomHelper = Vue.observable({ + isBottom: false +}) + +!isServer && window.addEventListener('scroll', () => { + bottomHelper.isBottom = bottomVisible() +}, {passive: true}) diff --git a/core/pages/Category.js b/core/pages/Category.js index a938545721..c9584a4e16 100644 --- a/core/pages/Category.js +++ b/core/pages/Category.js @@ -5,7 +5,7 @@ import config from 'config' import i18n from '@vue-storefront/i18n' import store from '@vue-storefront/core/store' import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus' -import { baseFilterProductsQuery, buildFilterProductsQuery, isServer, bottomVisible } from '@vue-storefront/core/helpers' +import { baseFilterProductsQuery, buildFilterProductsQuery, isServer, bottomHelper } from '@vue-storefront/core/helpers' import { htmlDecode } from '@vue-storefront/core/filters/html-decode' import { currentStoreView, localizedRoute } from '@vue-storefront/core/lib/multistore' import Composite from '@vue-storefront/core/mixins/composite' @@ -22,7 +22,6 @@ export default { current: 0, enabled: false }, - bottom: false, lazyLoadProductsOnscroll: true } }, @@ -57,11 +56,14 @@ export default { }, breadcrumbs () { return this.getCategoryBreadcrumbs + }, + isBottom () { + return bottomHelper.isBottom } }, watch: { - bottom (bottom) { - if (bottom) { + isBottom (isBottom) { + if (isBottom) { this.pullMoreProducts() } } @@ -136,11 +138,6 @@ export default { this.$bus.$on('user-after-loggedin', this.onUserPricesRefreshed) this.$bus.$on('user-after-logout', this.onUserPricesRefreshed) } - if (!isServer && this.lazyLoadProductsOnscroll) { - window.addEventListener('scroll', () => { - this.bottom = bottomVisible() - }, {passive: true}) - } }, beforeDestroy () { this.$bus.$off('list-change-sort', this.onSortOrderChanged) diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts index dedb4c657e..c96ebf5f4f 100644 --- a/src/modules/order-history/components/UserOrders.ts +++ b/src/modules/order-history/components/UserOrders.ts @@ -1,4 +1,4 @@ -import { isServer, bottomVisible } from '@vue-storefront/core/helpers' +import { bottomHelper } from '@vue-storefront/core/helpers' import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders' import { mapGetters } from 'vuex'; @@ -12,31 +12,27 @@ export default { current: 0, enabled: false }, - bottom: false, - lazyLoadOrdersOnscroll: true + lazyLoadOrdersOnScroll: true } }, watch: { - bottom (bottom) { - if (bottom) { + isBottom (newState) { + if (newState) { ++this.pagination.current } } }, - beforeMount () { - if (!isServer && this.lazyLoadOrdersOnscroll) { - window.addEventListener('scroll', () => { - this.bottom = bottomVisible() - }, {passive: true}) - } - }, + computed: { ordersHistory () { let items = this.ordersHistoryItems() - if (!isServer && this.lazyLoadOrdersOnscroll) { + if (this.lazyLoadOrdersOnScroll) { items = this.paginate(items, this.pagination.perPage, this.pagination.current) } return items + }, + isBottom () { + return bottomHelper.isBottom } }, methods: { From f6b58e79bbe6f86e0d77767be36436cbc81381b2 Mon Sep 17 00:00:00 2001 From: Benjamin Klein Date: Fri, 24 May 2019 17:23:31 +0200 Subject: [PATCH 6/9] #2810 remove trailing whitespace --- core/helpers/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/helpers/index.ts b/core/helpers/index.ts index b1e828820e..2cd15dfdca 100644 --- a/core/helpers/index.ts +++ b/core/helpers/index.ts @@ -188,6 +188,6 @@ export const bottomHelper = Vue.observable({ isBottom: false }) -!isServer && window.addEventListener('scroll', () => { +!isServer && window.addEventListener('scroll', () => { bottomHelper.isBottom = bottomVisible() }, {passive: true}) From 540eb91f7ce0fab9a3fa9ada4fb7deccf89059c8 Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Mon, 27 May 2019 10:19:03 +0200 Subject: [PATCH 7/9] add onBottomScroll mixin --- core/helpers/index.ts | 10 +--------- core/mixins/onBottomScroll.js | 19 +++++++++++++++++++ core/pages/Category.js | 18 ++++++------------ .../order-history/components/UserOrders.ts | 18 +++++------------- 4 files changed, 31 insertions(+), 34 deletions(-) create mode 100644 core/mixins/onBottomScroll.js diff --git a/core/helpers/index.ts b/core/helpers/index.ts index 2cd15dfdca..ccea2ee98d 100644 --- a/core/helpers/index.ts +++ b/core/helpers/index.ts @@ -172,7 +172,7 @@ export const processURLAddress = (url: string = '') => { return url } -export function bottomVisible () { +export const isBottomVisible = () => { if (isServer) { return false } @@ -183,11 +183,3 @@ export function bottomVisible () { return bottomOfPage || pageHeight < visible } - -export const bottomHelper = Vue.observable({ - isBottom: false -}) - -!isServer && window.addEventListener('scroll', () => { - bottomHelper.isBottom = bottomVisible() -}, {passive: true}) diff --git a/core/mixins/onBottomScroll.js b/core/mixins/onBottomScroll.js new file mode 100644 index 0000000000..f0fc26810e --- /dev/null +++ b/core/mixins/onBottomScroll.js @@ -0,0 +1,19 @@ +import { isBottomVisible } from '@vue-storefront/core/helpers' + +/** + * By implementing this mixin add "onBottomScroll" mthod in component. + * It will be invoked when view reach the bottom. + */ +export default { + mounted () { + const scrollHandler = () => { + if (isBottomVisible()) { + this.onBottomScroll() + } + } + document.addEventListener('scroll', scrollHandler) + this.$once('hook:destroyed', () => { + document.removeEventListener('scroll', scrollHandler) + }) + } +} diff --git a/core/pages/Category.js b/core/pages/Category.js index c9584a4e16..38ac365b4d 100644 --- a/core/pages/Category.js +++ b/core/pages/Category.js @@ -5,16 +5,17 @@ import config from 'config' import i18n from '@vue-storefront/i18n' import store from '@vue-storefront/core/store' import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus' -import { baseFilterProductsQuery, buildFilterProductsQuery, isServer, bottomHelper } from '@vue-storefront/core/helpers' +import { baseFilterProductsQuery, buildFilterProductsQuery, isServer } from '@vue-storefront/core/helpers' import { htmlDecode } from '@vue-storefront/core/filters/html-decode' import { currentStoreView, localizedRoute } from '@vue-storefront/core/lib/multistore' import Composite from '@vue-storefront/core/mixins/composite' import { Logger } from '@vue-storefront/core/lib/logger' import { mapGetters, mapActions } from 'vuex' +import onBottomScroll from '@vue-storefront/core/mixins/onBottomScroll' export default { name: 'Category', - mixins: [Composite], + mixins: [Composite, onBottomScroll], data () { return { pagination: { @@ -56,16 +57,6 @@ export default { }, breadcrumbs () { return this.getCategoryBreadcrumbs - }, - isBottom () { - return bottomHelper.isBottom - } - }, - watch: { - isBottom (isBottom) { - if (isBottom) { - this.pullMoreProducts() - } } }, preAsyncData ({ store, route }) { @@ -153,6 +144,9 @@ export default { }, methods: { ...mapActions('category', ['mergeSearchOptions']), + onBottomScroll () { + this.pullMoreProducts() + }, pullMoreProducts () { if (typeof navigator !== 'undefined' && !navigator.onLine) return let current = this.getCurrentCategoryProductQuery.current + this.getCurrentCategoryProductQuery.perPage diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts index c96ebf5f4f..84a982e049 100644 --- a/src/modules/order-history/components/UserOrders.ts +++ b/src/modules/order-history/components/UserOrders.ts @@ -1,10 +1,10 @@ -import { bottomHelper } from '@vue-storefront/core/helpers' import MyOrders from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrders' import { mapGetters } from 'vuex'; +import onBottomScroll from '@vue-storefront/core/mixins/onBottomScroll' export default { name: 'UserOrders', - mixins: [MyOrders], + mixins: [MyOrders, onBottomScroll], data () { return { pagination: { @@ -15,14 +15,6 @@ export default { lazyLoadOrdersOnScroll: true } }, - watch: { - isBottom (newState) { - if (newState) { - ++this.pagination.current - } - } - }, - computed: { ordersHistory () { let items = this.ordersHistoryItems() @@ -30,14 +22,14 @@ export default { items = this.paginate(items, this.pagination.perPage, this.pagination.current) } return items - }, - isBottom () { - return bottomHelper.isBottom } }, methods: { paginate (array, page_size, page_number) { return array.slice(0, (page_number + 1) * page_size); + }, + onBottomScroll () { + ++this.pagination.current } } } From 429cab72fd723cde583ffd0c48e3724df74db03c Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Mon, 27 May 2019 10:25:36 +0200 Subject: [PATCH 8/9] rename vuex getter --- core/modules/order/components/UserOrders.ts | 6 +++--- core/modules/user/store/getters.ts | 2 +- src/modules/order-history/components/UserOrders.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/core/modules/order/components/UserOrders.ts b/core/modules/order/components/UserOrders.ts index d0a73898d1..cda0cd44c8 100644 --- a/core/modules/order/components/UserOrders.ts +++ b/core/modules/order/components/UserOrders.ts @@ -7,14 +7,14 @@ export const UserOrders = { name: 'UserOrders', computed: { ordersHistory () { - return this.ordersHistoryItems() + return this.getOrdersHistory }, isHistoryEmpty () { - return this.ordersHistoryItems().length < 1 + return this.getOrdersHistory.length < 1 } }, methods: { - ...mapGetters('user', ['ordersHistoryItems']), + ...mapGetters('user', ['getOrdersHistory']), remakeOrder (products) { products.forEach(item => { this.$store.dispatch('product/single', { options: { sku: item.sku }, setCurrentProduct: false, selectDefaultVariant: false }).then((product) => { diff --git a/core/modules/user/store/getters.ts b/core/modules/user/store/getters.ts index 1aa25e80a3..2e1c597f56 100644 --- a/core/modules/user/store/getters.ts +++ b/core/modules/user/store/getters.ts @@ -10,7 +10,7 @@ const getters: GetterTree = { getUserToken (state) { return state.token }, - ordersHistoryItems (state) { + getOrdersHistory (state) { return state.orders_history.items } } diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts index 84a982e049..64357e3da3 100644 --- a/src/modules/order-history/components/UserOrders.ts +++ b/src/modules/order-history/components/UserOrders.ts @@ -17,7 +17,7 @@ export default { }, computed: { ordersHistory () { - let items = this.ordersHistoryItems() + let items = this.getOrdersHistory if (this.lazyLoadOrdersOnScroll) { items = this.paginate(items, this.pagination.perPage, this.pagination.current) } From 89c1303e01f250952743ed0a9c3fdf1b2e7becd0 Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Mon, 27 May 2019 11:08:25 +0200 Subject: [PATCH 9/9] improve pagination --- core/modules/order/components/UserOrders.ts | 2 +- core/modules/user/store/getters.ts | 2 +- src/modules/order-history/components/UserOrders.ts | 7 ++----- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/core/modules/order/components/UserOrders.ts b/core/modules/order/components/UserOrders.ts index cda0cd44c8..b2f97ac353 100644 --- a/core/modules/order/components/UserOrders.ts +++ b/core/modules/order/components/UserOrders.ts @@ -6,6 +6,7 @@ import { mapGetters } from 'vuex'; export const UserOrders = { name: 'UserOrders', computed: { + ...mapGetters('user', ['getOrdersHistory']), ordersHistory () { return this.getOrdersHistory }, @@ -14,7 +15,6 @@ export const UserOrders = { } }, methods: { - ...mapGetters('user', ['getOrdersHistory']), remakeOrder (products) { products.forEach(item => { this.$store.dispatch('product/single', { options: { sku: item.sku }, setCurrentProduct: false, selectDefaultVariant: false }).then((product) => { diff --git a/core/modules/user/store/getters.ts b/core/modules/user/store/getters.ts index 2e1c597f56..a02d7d1f80 100644 --- a/core/modules/user/store/getters.ts +++ b/core/modules/user/store/getters.ts @@ -11,7 +11,7 @@ const getters: GetterTree = { return state.token }, getOrdersHistory (state) { - return state.orders_history.items + return state.orders_history ? state.orders_history.items : [] } } diff --git a/src/modules/order-history/components/UserOrders.ts b/src/modules/order-history/components/UserOrders.ts index 64357e3da3..bf9850b20b 100644 --- a/src/modules/order-history/components/UserOrders.ts +++ b/src/modules/order-history/components/UserOrders.ts @@ -9,7 +9,7 @@ export default { return { pagination: { perPage: 10, - current: 0, + current: 1, enabled: false }, lazyLoadOrdersOnScroll: true @@ -19,15 +19,12 @@ export default { ordersHistory () { let items = this.getOrdersHistory if (this.lazyLoadOrdersOnScroll) { - items = this.paginate(items, this.pagination.perPage, this.pagination.current) + items = items.slice(0, (this.pagination.perPage + 1) * this.pagination.current) } return items } }, methods: { - paginate (array, page_size, page_number) { - return array.slice(0, (page_number + 1) * page_size); - }, onBottomScroll () { ++this.pagination.current }