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: {