vuestorefront#2810

* Added bottomHelper * Use bottomHelper in core pages Category and order history user Orders
Hackbard · May 24, 2019 · 7f3c520 · 7f3c520
1 parent 4fc3111
commit 7f3c520
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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: {