From 7d3e56d4b0da958de9afc0b2fb4d953aaa8b82f1 Mon Sep 17 00:00:00 2001
From: pkarw <pkarwatka@divante.pl>
Date: Fri, 27 Apr 2018 10:50:50 +0200
Subject: [PATCH 1/5] Pagination issue fixed for infinite scroll

---
 core/pages/Category.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/core/pages/Category.vue b/core/pages/Category.vue
index 2dcb0da05e..cbda310c2b 100644
--- a/core/pages/Category.vue
+++ b/core/pages/Category.vue
@@ -46,6 +46,7 @@ function buildFilterQr () {
 }
 
 function filterChanged (filterOption) { // slection of product variant on product page
+  this.pagination.current = 0
   if (this.filters.chosen[filterOption.attribute_code] && ((_.toString(filterOption.id) === _.toString(this.filters.chosen[filterOption.attribute_code].id)) || filterOption.id === this.filters.chosen[filterOption.attribute_code].id)) { // for price filter it's a string
     delete this.filters.chosen[filterOption.attribute_code]
   } else {

From 4291dd9ece2e1e90fc192b025c4cbcd8a1d7793e Mon Sep 17 00:00:00 2001
From: pkarw <pkarwatka@divante.pl>
Date: Fri, 27 Apr 2018 22:40:22 +0200
Subject: [PATCH 2/5] Category page refactor

---
 core/pages/Category.vue                  | 273 ++---------------------
 core/store/helpers/index.js              |  74 ++++++
 core/store/modules/category/actions.js   | 135 ++++++++++-
 core/store/modules/category/mutations.js |   3 +-
 src/themes/default/pages/Category.vue    |   4 +-
 5 files changed, 235 insertions(+), 254 deletions(-)

diff --git a/core/pages/Category.vue b/core/pages/Category.vue
index cbda310c2b..0faef04223 100644
--- a/core/pages/Category.vue
+++ b/core/pages/Category.vue
@@ -5,233 +5,14 @@
 </template>
 
 <script>
-import builder from 'bodybuilder'
-
-import { breadCrumbRoutes } from '@vue-storefront/store/helpers'
 import config from 'config'
 import Sidebar from 'core/components/blocks/Category/Sidebar.vue'
 import ProductListing from 'core/components/ProductListing.vue'
 import Breadcrumbs from 'core/components/Breadcrumbs.vue'
-import { optionLabel } from '@vue-storefront/store/modules/attribute/helpers'
+import { baseFilterProductsQuery, buildFilterProductsQuery } from '@vue-storefront/store/helpers'
 import EventBus from 'core/plugins/event-bus'
 import Composite from 'core/mixins/composite'
 import _ from 'lodash'
-import i18n from 'core/lib/i18n'
-
-function buildFilterQr () {
-  let filterQr = baseFilterQuery(config.products.defaultFilters, this.$store.state.category.current)
-
-  let attrFilterBuilder = (filterQr, attrPostfix = '') => {
-    for (let code of Object.keys(this.filters.chosen)) {
-      const filter = this.filters.chosen[code]
-
-      if (filter.attribute_code !== 'price') {
-        filterQr = filterQr.andFilter('match', filter.attribute_code + attrPostfix, filter.id)
-      } else { // multi should be possible filter here?
-        const rangeqr = {}
-        if (filter.from) {
-          rangeqr['gte'] = filter.from
-        }
-        if (filter.to) {
-          rangeqr['lte'] = filter.to
-        }
-        filterQr = filterQr.andFilter('range', filter.attribute_code, rangeqr)
-      }
-    }
-    return filterQr
-  }
-  filterQr = filterQr.orFilter('bool', (b) => attrFilterBuilder(b).filter('match', 'type_id', 'simple'))
-    .orFilter('bool', (b) => attrFilterBuilder(b, '_options').filter('match', 'type_id', 'configurable'))
-  return filterQr
-}
-
-function filterChanged (filterOption) { // slection of product variant on product page
-  this.pagination.current = 0
-  if (this.filters.chosen[filterOption.attribute_code] && ((_.toString(filterOption.id) === _.toString(this.filters.chosen[filterOption.attribute_code].id)) || filterOption.id === this.filters.chosen[filterOption.attribute_code].id)) { // for price filter it's a string
-    delete this.filters.chosen[filterOption.attribute_code]
-  } else {
-    this.filters.chosen[filterOption.attribute_code] = filterOption
-  }
-
-  let filterQr = buildFilterQr.bind(this)()
-
-  const fsC = Object.assign({}, this.filters.chosen) // create a copy because it will be used asynchronously (take a look below)
-  filterData({ populateAggregations: false, searchProductQuery: filterQr, store: this.$store, route: this.$route, current: this.pagination.current, perPage: this.pagination.perPage, filters: config.products.defaultFilters, configuration: fsC }).then((res) => {
-  }) // because already aggregated
-}
-
-function baseFilterQuery (filters, parentCategory) { // TODO add aggregation of color_options and size_options fields
-  let searchProductQuery = builder().query('range', 'price', { 'gt': 0 }).andFilter('range', 'visibility', { 'gte': 2, 'lte': 4 }/** Magento visibility in search & categories */)
-
-  // add filters to query
-  for (let attrToFilter of filters) {
-    if (attrToFilter !== 'price') {
-      searchProductQuery = searchProductQuery.aggregation('terms', attrToFilter)
-      searchProductQuery = searchProductQuery.aggregation('terms', attrToFilter + '_options')
-    } else {
-      searchProductQuery = searchProductQuery.aggregation('terms', attrToFilter)
-      searchProductQuery.aggregation('range', 'price', {
-        ranges: [
-          { from: 0, to: 50 },
-          { from: 50, to: 100 },
-          { from: 100, to: 150 },
-          { from: 150 }
-        ]
-      })
-    }
-  }
-
-  let childCats = [parentCategory.id]
-  if (parentCategory.children_data) {
-    let recurCatFinderBuilder = (category) => {
-      if (!category) {
-        return
-      }
-
-      if (!category.children_data) {
-        return
-      }
-
-      for (let sc of category.children_data) {
-        if (sc && sc.id) {
-          childCats.push(sc.id)
-        }
-        recurCatFinderBuilder(sc)
-      }
-    }
-    recurCatFinderBuilder(parentCategory)
-  }
-  searchProductQuery = searchProductQuery.filter('terms', 'category.category_id', childCats)
-  return searchProductQuery
-}
-
-// TODO: Refactor - move this function to the Vuex store
-function filterData ({ populateAggregations = false, filters = [], searchProductQuery, store, route, current = 0, perPage = 50, includeFields = null, excludeFields = null, configuration = null, append = false }) {
-  store.state.product.current_query = {
-    populateAggregations,
-    filters,
-    current,
-    perPage,
-    includeFields,
-    excludeFields,
-    configuration,
-    append
-  }
-
-  if (config.entities.twoStageCaching && config.entities.optimize && !global.$VS.isSSR && !global.$VS.twoStageCachingDisabled) { // only client side, only when two stage caching enabled
-    includeFields = config.entities.productListWithChildren.includeFields // we need configurable_children for filters to work
-    excludeFields = config.entities.productListWithChildren.excludeFields
-    console.log('Using two stage caching for performance optimization - executing first stage product pre-fetching')
-  } else {
-    if (global.$VS.twoStageCachingDisabled) {
-      console.log('Two stage caching is disabled runtime because of no performance gain')
-    } else {
-      console.log('Two stage caching is disabled by the config')
-    }
-  }
-  let t0 = new Date().getTime()
-  let precachedQuery = searchProductQuery.build()
-  let productPromise = store.dispatch('product/list', {
-    query: precachedQuery,
-    start: current,
-    size: perPage,
-    excludeFields: excludeFields,
-    includeFields: includeFields,
-    configuration: configuration,
-    append: append
-  }).then(function (res) {
-    let t1 = new Date().getTime()
-    global.$VS.twoStageCachingDelta1 = t1 - t0
-
-    let subloaders = []
-    if (!res || (res.noresults)) {
-      EventBus.$emit('notification', {
-        type: 'warning',
-        message: i18n.t('No products synchronized for this category. Please come back while online!'),
-        action1: { label: i18n.t('OK'), action: 'close' }
-      })
-      if (!append) store.dispatch('product/reset')
-      store.state.product.list = { items: [] } // no products to show TODO: refactor to store.state.category.reset() and store.state.product.reset()
-      // store.state.category.filters = { color: [], size: [], price: [] }
-    } else {
-      if (populateAggregations === true) { // populate filter aggregates
-        for (let attrToFilter of filters) { // fill out the filter options
-          store.state.category.filters.available[attrToFilter] = []
-
-          let uniqueFilterValues = new Set()
-          if (attrToFilter !== 'price') {
-            if (res.aggregations['agg_terms_' + attrToFilter]) {
-              let buckets = res.aggregations['agg_terms_' + attrToFilter].buckets
-              if (res.aggregations['agg_terms_' + attrToFilter + '_options']) {
-                buckets = buckets.concat(res.aggregations['agg_terms_' + attrToFilter + '_options'].buckets)
-              }
-
-              for (let option of buckets) {
-                uniqueFilterValues.add(_.toString(option.key))
-              }
-            }
-
-            for (let key of uniqueFilterValues.values()) {
-              const label = optionLabel(store.state.attribute, { attributeKey: attrToFilter, optionId: key })
-              if (_.trim(label) !== '') { // is there any situation when label could be empty and we should still support it?
-                store.state.category.filters.available[attrToFilter].push({
-                  id: key,
-                  label: label
-                })
-              }
-            }
-          } else { // special case is range filter for prices
-            if (res.aggregations['agg_range_' + attrToFilter]) {
-              let index = 0
-              let count = res.aggregations['agg_range_' + attrToFilter].buckets.length
-              for (let option of res.aggregations['agg_range_' + attrToFilter].buckets) {
-                store.state.category.filters.available[attrToFilter].push({
-                  id: option.key,
-                  from: option.from,
-                  to: option.to,
-                  label: (index === 0 || (index === count - 1)) ? (option.to ? '< $' + option.to : '> $' + option.from) : '$' + option.from + (option.to ? ' - ' + option.to : '')// TODO: add better way for formatting, extract currency sign
-                })
-                index++
-              }
-            }
-          }
-        }
-      }
-    }
-    return subloaders
-  }).catch((err) => {
-    console.info(err)
-    EventBus.$emit('notification', {
-      type: 'warning',
-      message: i18n.t('No products synchronized for this category. Please come back while online!'),
-      action1: { label: i18n.t('OK'), action: 'close' }
-    })
-  })
-
-  if (config.entities.twoStageCaching && config.entities.optimize && !global.$VS.isSSR && !global.$VS.twoStageCachingDisabled) { // second stage - request for caching entities
-    console.log('Using two stage caching for performance optimization - executing second stage product caching') // TODO: in this case we can pre-fetch products in advance getting more products than set by pageSize
-    store.dispatch('product/list', {
-      query: precachedQuery,
-      start: current,
-      size: perPage,
-      excludeFields: null,
-      includeFields: null,
-      updateState: false // not update the product listing - this request is only for caching
-    }).catch((err) => {
-      console.info("Problem with second stage caching - couldn't store the data")
-      console.info(err)
-    }).then((res) => {
-      let t2 = new Date().getTime()
-      global.$VS.twoStageCachingDelta2 = t2 - t0
-      console.log('Using two stage caching for performance optimization - Time comparison stage1 vs stage2', global.$VS.twoStageCachingDelta1, global.$VS.twoStageCachingDelta2)
-      if (global.$VS.twoStageCachingDelta1 > global.$VS.twoStageCachingDelta2) { // two stage caching is not making any good
-        global.$VS.twoStageCachingDisabled = true
-        console.log('Disabling two stage caching')
-      }
-    })
-  }
-  return productPromise
-}
 
 export default {
   name: 'Category',
@@ -243,44 +24,36 @@ export default {
   },
   mixins: [Composite],
   methods: {
-    onFilterChanged (filterData) {
-      (filterChanged.bind(this))(filterData)
-    },
-    fetchData ({ store, route }) {
-      let self = this
-      let searchProductQuery = baseFilterQuery(config.products.defaultFilters, store.state.category.current)
-
-      if (self.category) { // fill breadcrumb data - TODO: extract it to a helper to be used on product page
-        this.$bus.$emit('current-category-changed', store.state.category.current_path)
-        store.dispatch('attribute/list', { // load filter attributes for this specific category
-          filterValues: config.products.defaultFilters// TODO: assign specific filters/ attribute codes dynamicaly to specific categories
-        })
+    onFilterChanged (filterOption) {
+      this.pagination.current = 0
+      if (this.filters.chosen[filterOption.attribute_code] && ((_.toString(filterOption.id) === _.toString(this.filters.chosen[filterOption.attribute_code].id)) || filterOption.id === this.filters.chosen[filterOption.attribute_code].id)) { // for price filter it's a string
+        delete this.filters.chosen[filterOption.attribute_code]
+      } else {
+        this.filters.chosen[filterOption.attribute_code] = filterOption
       }
-      return filterData({ searchProductQuery: searchProductQuery, populateAggregations: true, store: store, route: route, current: self.pagination.current, perPage: self.pagination.perPage, filters: config.products.defaultFilters })
-    },
-    filterData (query) {
-      query.searchProductQuery = buildFilterQr.bind(this)()
-      return filterData(query)
+
+      let filterQr = buildFilterProductsQuery(this.category, this.filters.chosen)
+
+      const fsC = Object.assign({}, this.filters.chosen) // create a copy because it will be used asynchronously (take a look below)
+      this.$store.dispatch('category/products', { populateAggregations: false, searchProductQuery: filterQr, route: this.$route, current: this.pagination.current, perPage: this.pagination.perPage, filters: config.products.defaultFilters, configuration: fsC }).then((res) => {
+      }) // because already aggregated
     },
-    validateRoute ({store, route}) {
+    validateRoute () {
       let self = this
-      if (store == null) {
-        store = self.$store
-      }
-      if (route == null) {
-        route = self.$route
-      }
+      let store = self.$store
+      let route = self.$route
+
       let slug = route.params.slug
       this.filters.chosen = {} // reset selected filters
       this.$bus.$emit('filter-reset')
 
       store.dispatch('category/single', { key: 'slug', value: slug }).then((category) => {
-        store.state.category.breadcrumbs.routes = breadCrumbRoutes(store.state.category.current_path)
-
-        if (!self.category) {
+        if (!category) {
           self.$router.push('/')
         } else {
-          self.fetchData({store: store, route: route})
+          let searchProductQuery = baseFilterProductsQuery(store.state.category.current, config.products.defaultFilters)
+          self.$bus.$emit('current-category-changed', store.state.category.current_path)
+          self.$store.dispatch('category/products', { searchProductQuery: searchProductQuery, populateAggregations: true, route: route, current: self.pagination.current, perPage: self.pagination.perPage, filters: config.products.defaultFilters })
           EventBus.$emitFilter('category-after-load', { store: store, route: route })
         }
       })
@@ -299,10 +72,8 @@ export default {
           includeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.attribute.includeFields : null
         }).then((attrs) => {
           store.dispatch('category/single', { key: 'slug', value: route.params.slug }).then((parentCategory) => {
-            filterData({ searchProductQuery: baseFilterQuery(defaultFilters, parentCategory), populateAggregations: true, store: store, route: route, current: 0, perPage: 50, filters: defaultFilters, includeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.productList.includeFields : null, excludeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.productList.excludeFields : null }).then((subloaders) => {
+            store.dispatch('category/products', { searchProductQuery: baseFilterProductsQuery(parentCategory, defaultFilters), populateAggregations: true, store: store, route: route, current: 0, perPage: 50, filters: defaultFilters, includeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.productList.includeFields : null, excludeFields: config.entities.optimize && global.$VS.isSSR ? config.entities.productList.excludeFields : null }).then((subloaders) => {
               Promise.all(subloaders).then((results) => {
-                store.state.category.breadcrumbs.routes = breadCrumbRoutes(store.state.category.current_path)
-
                 EventBus.$emitFilter('category-after-load', { store: store, route: route }).then((results) => {
                   return resolve()
                 }).catch((err) => {
diff --git a/core/store/helpers/index.js b/core/store/helpers/index.js
index 1324a79609..f229bf9f8e 100644
--- a/core/store/helpers/index.js
+++ b/core/store/helpers/index.js
@@ -1,3 +1,6 @@
+import builder from 'bodybuilder'
+import config from '../lib/config'
+
 /**
  * Create slugify -> "create-slugify" permalink  of text
  * @param {String} text
@@ -41,3 +44,74 @@ export function productThumbnailPath (product, ignoreConfig = false) {
   }
   return thumbnail
 }
+
+export function buildFilterProductsQuery (currentCategory, chosenFilters, defaultFilters = null) {
+  let filterQr = baseFilterProductsQuery(currentCategory, defaultFilters == null ? config.products.defaultFilters : defaultFilters)
+  let attrFilterBuilder = (filterQr, attrPostfix = '') => {
+    for (let code of Object.keys(chosenFilters)) {
+      const filter = chosenFilters[code]
+
+      if (filter.attribute_code !== 'price') {
+        filterQr = filterQr.andFilter('match', filter.attribute_code + attrPostfix, filter.id)
+      } else { // multi should be possible filter here?
+        const rangeqr = {}
+        if (filter.from) {
+          rangeqr['gte'] = filter.from
+        }
+        if (filter.to) {
+          rangeqr['lte'] = filter.to
+        }
+        filterQr = filterQr.andFilter('range', filter.attribute_code, rangeqr)
+      }
+    }
+    return filterQr
+  }
+  filterQr = filterQr.orFilter('bool', (b) => attrFilterBuilder(b).filter('match', 'type_id', 'simple'))
+    .orFilter('bool', (b) => attrFilterBuilder(b, '_options').filter('match', 'type_id', 'configurable'))
+  return filterQr
+}
+
+export function baseFilterProductsQuery (parentCategory, filters = []) { // TODO add aggregation of color_options and size_options fields
+  let searchProductQuery = builder().query('range', 'price', { 'gt': 0 }).andFilter('range', 'visibility', { 'gte': 2, 'lte': 4 }/** Magento visibility in search & categories */)
+
+  // add filters to query
+  for (let attrToFilter of filters) {
+    if (attrToFilter !== 'price') {
+      searchProductQuery = searchProductQuery.aggregation('terms', attrToFilter)
+      searchProductQuery = searchProductQuery.aggregation('terms', attrToFilter + '_options')
+    } else {
+      searchProductQuery = searchProductQuery.aggregation('terms', attrToFilter)
+      searchProductQuery.aggregation('range', 'price', {
+        ranges: [
+          { from: 0, to: 50 },
+          { from: 50, to: 100 },
+          { from: 100, to: 150 },
+          { from: 150 }
+        ]
+      })
+    }
+  }
+
+  let childCats = [parentCategory.id]
+  if (parentCategory.children_data) {
+    let recurCatFinderBuilder = (category) => {
+      if (!category) {
+        return
+      }
+
+      if (!category.children_data) {
+        return
+      }
+
+      for (let sc of category.children_data) {
+        if (sc && sc.id) {
+          childCats.push(sc.id)
+        }
+        recurCatFinderBuilder(sc)
+      }
+    }
+    recurCatFinderBuilder(parentCategory)
+  }
+  searchProductQuery = searchProductQuery.filter('terms', 'category.category_id', childCats)
+  return searchProductQuery
+}
diff --git a/core/store/modules/category/actions.js b/core/store/modules/category/actions.js
index 53e5503e8b..a6ecefc59d 100644
--- a/core/store/modules/category/actions.js
+++ b/core/store/modules/category/actions.js
@@ -2,8 +2,12 @@ import * as types from '../../mutation-types'
 import { quickSearchByQuery } from '../../lib/search'
 import { entityKeyName } from '../../lib/entities'
 import EventBus from '../../lib/event-bus'
-const bodybuilder = require('bodybuilder')
 import config from '../../lib/config'
+import rootStore from '../../'
+import bodybuilder from 'bodybuilder'
+import i18n from '../../lib/i18n'
+import _ from 'lodash'
+import { optionLabel } from '../attribute/helpers'
 
 export default {
   /**
@@ -128,5 +132,134 @@ export default {
         }
       }
     })
+  },
+  /**
+   * Filter category products
+   */
+  products (context, { populateAggregations = false, filters = [], searchProductQuery, current = 0, perPage = 50, includeFields = null, excludeFields = null, configuration = null, append = false }) {
+    rootStore.state.product.current_query = {
+      populateAggregations,
+      filters,
+      current,
+      perPage,
+      includeFields,
+      excludeFields,
+      configuration,
+      append
+    }
+
+    if (config.entities.twoStageCaching && config.entities.optimize && !global.$VS.isSSR && !global.$VS.twoStageCachingDisabled) { // only client side, only when two stage caching enabled
+      includeFields = config.entities.productListWithChildren.includeFields // we need configurable_children for filters to work
+      excludeFields = config.entities.productListWithChildren.excludeFields
+      console.log('Using two stage caching for performance optimization - executing first stage product pre-fetching')
+    } else {
+      if (global.$VS.twoStageCachingDisabled) {
+        console.log('Two stage caching is disabled runtime because of no performance gain')
+      } else {
+        console.log('Two stage caching is disabled by the config')
+      }
+    }
+    let t0 = new Date().getTime()
+    let precachedQuery = searchProductQuery.build()
+    let productPromise = rootStore.dispatch('product/list', {
+      query: precachedQuery,
+      start: current,
+      size: perPage,
+      excludeFields: excludeFields,
+      includeFields: includeFields,
+      configuration: configuration,
+      append: append
+    }).then(function (res) {
+      let t1 = new Date().getTime()
+      global.$VS.twoStageCachingDelta1 = t1 - t0
+
+      let subloaders = []
+      if (!res || (res.noresults)) {
+        EventBus.$emit('notification', {
+          type: 'warning',
+          message: i18n.t('No products synchronized for this category. Please come back while online!'),
+          action1: { label: i18n.t('OK'), action: 'close' }
+        })
+        if (!append) rootStore.dispatch('product/reset')
+        rootStore.state.product.list = { items: [] } // no products to show TODO: refactor to rootStore.state.category.reset() and rootStore.state.product.reset()
+        // rootStore.state.category.filters = { color: [], size: [], price: [] }
+      } else {
+        if (populateAggregations === true) { // populate filter aggregates
+          for (let attrToFilter of filters) { // fill out the filter options
+            rootStore.state.category.filters.available[attrToFilter] = []
+
+            let uniqueFilterValues = new Set()
+            if (attrToFilter !== 'price') {
+              if (res.aggregations['agg_terms_' + attrToFilter]) {
+                let buckets = res.aggregations['agg_terms_' + attrToFilter].buckets
+                if (res.aggregations['agg_terms_' + attrToFilter + '_options']) {
+                  buckets = buckets.concat(res.aggregations['agg_terms_' + attrToFilter + '_options'].buckets)
+                }
+
+                for (let option of buckets) {
+                  uniqueFilterValues.add(_.toString(option.key))
+                }
+              }
+
+              for (let key of uniqueFilterValues.values()) {
+                const label = optionLabel(rootStore.state.attribute, { attributeKey: attrToFilter, optionId: key })
+                if (_.trim(label) !== '') { // is there any situation when label could be empty and we should still support it?
+                  rootStore.state.category.filters.available[attrToFilter].push({
+                    id: key,
+                    label: label
+                  })
+                }
+              }
+            } else { // special case is range filter for prices
+              if (res.aggregations['agg_range_' + attrToFilter]) {
+                let index = 0
+                let count = res.aggregations['agg_range_' + attrToFilter].buckets.length
+                for (let option of res.aggregations['agg_range_' + attrToFilter].buckets) {
+                  rootStore.state.category.filters.available[attrToFilter].push({
+                    id: option.key,
+                    from: option.from,
+                    to: option.to,
+                    label: (index === 0 || (index === count - 1)) ? (option.to ? '< $' + option.to : '> $' + option.from) : '$' + option.from + (option.to ? ' - ' + option.to : '')// TODO: add better way for formatting, extract currency sign
+                  })
+                  index++
+                }
+              }
+            }
+          }
+        }
+      }
+      return subloaders
+    }).catch((err) => {
+      console.info(err)
+      EventBus.$emit('notification', {
+        type: 'warning',
+        message: i18n.t('No products synchronized for this category. Please come back while online!'),
+        action1: { label: i18n.t('OK'), action: 'close' }
+      })
+    })
+
+    if (config.entities.twoStageCaching && config.entities.optimize && !global.$VS.isSSR && !global.$VS.twoStageCachingDisabled) { // second stage - request for caching entities
+      console.log('Using two stage caching for performance optimization - executing second stage product caching') // TODO: in this case we can pre-fetch products in advance getting more products than set by pageSize
+      rootStore.dispatch('product/list', {
+        query: precachedQuery,
+        start: current,
+        size: perPage,
+        excludeFields: null,
+        includeFields: null,
+        updateState: false // not update the product listing - this request is only for caching
+      }).catch((err) => {
+        console.info("Problem with second stage caching - couldn't store the data")
+        console.info(err)
+      }).then((res) => {
+        let t2 = new Date().getTime()
+        global.$VS.twoStageCachingDelta2 = t2 - t0
+        console.log('Using two stage caching for performance optimization - Time comparison stage1 vs stage2', global.$VS.twoStageCachingDelta1, global.$VS.twoStageCachingDelta2)
+        if (global.$VS.twoStageCachingDelta1 > global.$VS.twoStageCachingDelta2) { // two stage caching is not making any good
+          global.$VS.twoStageCachingDisabled = true
+          console.log('Disabling two stage caching')
+        }
+      })
+    }
+    return productPromise
   }
 }
diff --git a/core/store/modules/category/mutations.js b/core/store/modules/category/mutations.js
index 66887e54c4..3cbe2d719f 100644
--- a/core/store/modules/category/mutations.js
+++ b/core/store/modules/category/mutations.js
@@ -1,5 +1,5 @@
 import * as types from '../../mutation-types'
-import { slugify } from '../../helpers'
+import { slugify, breadCrumbRoutes } from '../../helpers'
 import { entityKeyName } from '../../lib/entities'
 import EventBus from '../../lib/event-bus'
 
@@ -10,6 +10,7 @@ export default {
   },
   [types.CATEGORY_UPD_CURRENT_CATEGORY_PATH] (state, path) {
     state.current_path = path // TODO: store to cache
+    state.breadcrumbs.routes = breadCrumbRoutes(state.current_path)
   },
 
   [types.CATEGORY_UPD_CATEGORIES] (state, categories) {
diff --git a/src/themes/default/pages/Category.vue b/src/themes/default/pages/Category.vue
index 04b68eef56..4560497364 100644
--- a/src/themes/default/pages/Category.vue
+++ b/src/themes/default/pages/Category.vue
@@ -44,6 +44,7 @@ import { corePage } from 'core/lib/themes'
 import Sidebar from '../components/core/blocks/Category/Sidebar.vue'
 import ProductListing from '../components/core/ProductListing.vue'
 import Breadcrumbs from '../components/core/Breadcrumbs.vue'
+import { buildFilterProductsQuery } from '@vue-storefront/store/helpers'
 
 export default {
   components: {
@@ -81,7 +82,8 @@ export default {
       this.pagination.current = currentQuery.current
       this.pagination.perPage = currentQuery.perPage
       if (currentQuery.current <= this.productsTotal) {
-        this.filterData(currentQuery)
+        currentQuery.searchProductQuery = buildFilterProductsQuery(this.category, this.filters.chosen)
+        return this.$store.dispatch('category/products', currentQuery)
       }
     },
     openFilters () {

From 405923b4870e4127dd3d4c43c6e6917838b312a7 Mon Sep 17 00:00:00 2001
From: pkarw <pkarwatka@divante.pl>
Date: Fri, 27 Apr 2018 23:14:28 +0200
Subject: [PATCH 3/5] Product page refactor

---
 core/pages/Product.vue                | 175 +++++++-------------------
 core/store/modules/product/actions.js |  62 +++++++++
 2 files changed, 106 insertions(+), 131 deletions(-)

diff --git a/core/pages/Product.vue b/core/pages/Product.vue
index f4f87fd3dc..913ac17118 100644
--- a/core/pages/Product.vue
+++ b/core/pages/Product.vue
@@ -10,133 +10,8 @@ import AddToCart from 'core/components/AddToCart.vue'
 import EventBus from 'core/plugins/event-bus'
 import Composite from 'core/mixins/composite'
 import { mapGetters } from 'vuex'
-import config from 'config'
 import i18n from 'core/lib/i18n'
 
-/**
- * User selected specific color x size (or other attributes) variant
- */
-function filterChanged (filterOption) { // slection of product variant on product page
-  EventBus.$emit('product-before-configure', { filterOption: filterOption, configuration: this.configuration })
-
-  this.configuration[filterOption.attribute_code] = filterOption
-  this.$store.dispatch('product/configure', {
-    product: this.product,
-    configuration: this.configuration
-  }).then((selectedVariant) => {
-    if (!selectedVariant) {
-      this.$bus.$emit('notification', {
-        type: 'warning',
-        message: i18n.t('No such configuration for the product. Please do choose another combination of attributes.'),
-        action1: { label: i18n.t('OK'), action: 'close' }
-      })
-      return
-    }
-
-    // join selected variant object to the store
-    this.$store.dispatch('product/setCurrent', selectedVariant)
-      .catch(err => console.error({
-        info: 'Dispatch product/setCurrent in Product.vue',
-        err
-      }))
-
-    // // todo: activate below when vue-router create 'silent' url replace method
-    // // handle product url
-    // this.$router.replace({
-    //   name: 'product',
-    //   params: {
-    //     sku: selectedVariant.sku
-    //   }
-    // })
-  })
-    .catch(err => console.error({
-      info: 'Dispatch product/configure in Product.vue',
-      err
-    }))
-}
-
-/**
- * Load the product data
- */
-function fetchData (store, route) {
-  // pass both id and sku to render a product
-  const productSingleOptions = {
-    sku: route.params.parentSku,
-    childSku: route && route.params && route.params.childSku ? route.params.childSku : null
-  }
-  return store.dispatch('product/single', { options: productSingleOptions }).then((product) => {
-    let subloaders = []
-    if (product) {
-      subloaders.push(store.dispatch('product/setupBreadcrumbs', { product: product }))
-
-      subloaders.push(store.dispatch('attribute/list', { // load attributes to be shown on the product details
-        filterValues: [true],
-        filterField: 'is_user_defined',
-        includeFields: config.entities.optimize ? config.entities.attribute.includeFields : null
-      }))
-
-      subloaders.push(store.dispatch('product/setupVariants', { product: product }))
-      subloaders.push(store.dispatch('product/setupAssociated', { product: product }))
-
-      if (config.products.preventConfigurableChildrenDirectAccess) {
-        subloaders.push(store.dispatch('product/checkConfigurableParent', { product: product }))
-      }
-    } else { // error or redirect
-
-    }
-    return subloaders
-  })
-}
-
-/**
- * Load data required for this view
- */
-function loadData ({ store, route }) {
-  return new Promise((resolve, reject) => {
-    console.log('Entering loadData for Product root ' + new Date())
-    EventBus.$emit('product-before-load', { store: store, route: route })
-
-    store.dispatch('product/reset').then(() => {
-      fetchData(store, route).then((subpromises) => {
-        Promise.all(subpromises).then(subresults => {
-          EventBus.$emitFilter('product-after-load', { store: store, route: route }).then((results) => {
-            return resolve()
-          }).catch((err) => {
-            console.error(err)
-            return resolve()
-          })
-        }).catch(errs => {
-          console.error(errs)
-          return resolve()
-        })
-      }).catch(err => {
-        console.error(err)
-        reject(err)
-      })
-    })
-  })
-}
-
-function stateCheck () {
-  if (this.parentProduct && this.parentProduct.id !== this.product.id) {
-    console.log('Redirecting to parent, configurable product', this.parentProduct.sku)
-    this.$router.push({ name: 'product', params: { parentSku: this.parentProduct.sku, childSku: this.product.sku, slug: this.parentProduct.slug } })
-  }
-
-  if (this.wishlistCheck.isOnWishlist(this.product)) {
-    this.favorite.icon = 'favorite'
-    this.favorite.isFavorite = true
-  } else {
-    this.favorite.icon = 'favorite_border'
-    this.favorite.isFavorite = false
-  }
-  if (this.compareCheck.isOnCompare(this.product)) {
-    this.compare.isCompare = true
-  } else {
-    this.compare.isCompare = false
-  }
-}
-
 export default {
   name: 'Product',
   metaInfo () {
@@ -146,7 +21,8 @@ export default {
     }
   },
   asyncData ({ store, route }) { // this is for SSR purposes to prefetch data
-    return loadData({ store: store, route: route })
+    EventBus.$emit('product-before-load', { store: store, route: route })
+    return store.dispatch('product/fetchAsync', { parentSku: route.params.parentSku, childSku: route && route.params && route.params.childSku ? route.params.childSku : null })
   },
   mixins: [Composite],
   methods: {
@@ -154,11 +30,11 @@ export default {
       let inst = this
       if (!inst.loading) {
         inst.loading = true
-        loadData({ store: this.$store, route: this.$route }).then((res) => {
+        inst.$store.dispatch('product/fetchAsync', { parentSku: inst.$route.params.parentSku, childSku: inst.$route && inst.$route.params && inst.$route.params.childSku ? inst.$route.params.childSku : null }).then((res) => {
           inst.loading = false
           inst.defaultOfflineImage = inst.product.image
-          stateCheck.bind(this)()
-          this.$bus.$on('filter-changed-product', filterChanged.bind(this))
+          this.onStateCheck()
+          this.$bus.$on('filter-changed-product', this.onAfterFilterChanged)
         })
       } else {
         console.error('Error with loading = true in Product.vue; Reload page')
@@ -190,6 +66,25 @@ export default {
         })
       }
     },
+    onStateCheck () {
+      if (this.parentProduct && this.parentProduct.id !== this.product.id) {
+        console.log('Redirecting to parent, configurable product', this.parentProduct.sku)
+        this.$router.push({ name: 'product', params: { parentSku: this.parentProduct.sku, childSku: this.product.sku, slug: this.parentProduct.slug } })
+      }
+
+      if (this.wishlistCheck.isOnWishlist(this.product)) {
+        this.favorite.icon = 'favorite'
+        this.favorite.isFavorite = true
+      } else {
+        this.favorite.icon = 'favorite_border'
+        this.favorite.isFavorite = false
+      }
+      if (this.compareCheck.isOnCompare(this.product)) {
+        this.compare.isCompare = true
+      } else {
+        this.compare.isCompare = false
+      }
+    },
     onAfterPriceUpdate (product) {
       if (product.sku === this.product.sku) {
       // join selected variant object to the store
@@ -201,7 +96,25 @@ export default {
       }
     },
     onAfterFilterChanged (filterOption) {
-      (filterChanged.bind(this)(filterOption))
+      EventBus.$emit('product-before-configure', { filterOption: filterOption, configuration: this.configuration })
+      this.configuration[filterOption.attribute_code] = filterOption
+      this.$store.dispatch('product/configure', {
+        product: this.product,
+        configuration: this.configuration,
+        selectDefaultVariant: true
+      }).then((selectedVariant) => {
+        if (!selectedVariant) {
+          this.$bus.$emit('notification', {
+            type: 'warning',
+            message: i18n.t('No such configuration for the product. Please do choose another combination of attributes.'),
+            action1: { label: i18n.t('OK'), action: 'close' }
+          })
+          return
+        }
+      }).catch(err => console.error({
+        info: 'Dispatch product/configure in Product.vue',
+        err
+      }))
     }
   },
   watch: {
@@ -212,7 +125,7 @@ export default {
     this.$bus.$off('product-after-priceupdate', this.onAfterPriceUpdate)
   },
   beforeMount () {
-    stateCheck.bind(this)()
+    this.onStateCheck()
     this.$bus.$on('product-after-priceupdate', this.onAfterPriceUpdate)
     this.$bus.$on('filter-changed-product', this.onAfterFilterChanged)
   },
diff --git a/core/store/modules/product/actions.js b/core/store/modules/product/actions.js
index 65430c8ead..39fb666703 100644
--- a/core/store/modules/product/actions.js
+++ b/core/store/modules/product/actions.js
@@ -8,6 +8,7 @@ import { optionLabel } from '../attribute/helpers'
 import { quickSearchByQuery } from '../../lib/search'
 import EventBus from '../../lib/event-bus'
 import _ from 'lodash'
+import rootStore from '../../'
 
 export default {
   /**
@@ -379,5 +380,66 @@ export default {
    */
   related (context, { key = 'related-products', items }) {
     context.commit(types.CATALOG_UPD_RELATED, { key, items })
+  },
+
+  /**
+   * Load the product data
+   */
+  fetch (context, { parentSku, childSku = null }) {
+    // pass both id and sku to render a product
+    const productSingleOptions = {
+      sku: parentSku,
+      childSku: childSku
+    }
+    return context.dispatch('single', { options: productSingleOptions }).then((product) => {
+      let subloaders = []
+      if (product) {
+        subloaders.push(context.dispatch('setupBreadcrumbs', { product: product }))
+
+        subloaders.push(rootStore.dispatch('attribute/list', { // load attributes to be shown on the product details
+          filterValues: [true],
+          filterField: 'is_user_defined',
+          includeFields: config.entities.optimize ? config.entities.attribute.includeFields : null
+        }))
+
+        subloaders.push(context.dispatch('setupVariants', { product: product }))
+        subloaders.push(context.dispatch('setupAssociated', { product: product }))
+
+        if (config.products.preventConfigurableChildrenDirectAccess) {
+          subloaders.push(context.dispatch('checkConfigurableParent', { product: product }))
+        }
+      } else { // error or redirect
+
+      }
+      return subloaders
+    })
+  },
+  /**
+   * Load the product data - async version for asyncData()
+   */
+  fetchAsync (context, { parentSku, childSku = null, route = null }) {
+    return new Promise((resolve, reject) => {
+      console.log('Entering fetchAsync for Product root ' + new Date(), parentSku, childSku)
+      EventBus.$emit('product-before-load', { store: rootStore, route: route })
+      context.dispatch('reset').then(() => {
+        context.dispatch('fetch', { parentSku: parentSku, childSku: childSku }).then((subpromises) => {
+          Promise.all(subpromises).then(subresults => {
+            EventBus.$emitFilter('product-after-load', { store: rootStore, route: route }).then((results) => {
+              return resolve()
+            }).catch((err) => {
+              console.error(err)
+              return resolve()
+            })
+          }).catch(errs => {
+            console.error(errs)
+            return resolve()
+          })
+        }).catch(err => {
+          console.error(err)
+          reject(err)
+        })
+      })
+    })
   }
+
 }

From b29ee4f5c39bc4f321c7eae3599a32458a665ff3 Mon Sep 17 00:00:00 2001
From: pkarw <pkarwatka@divante.pl>
Date: Fri, 27 Apr 2018 23:29:45 +0200
Subject: [PATCH 4/5] Mixed in asyncData() override option (you can override
 the core components asyncData by setting this to false)

---
 config/default.json  | 3 +++
 core/client-entry.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/config/default.json b/config/default.json
index 3f3e3413cf..ee59880937 100644
--- a/config/default.json
+++ b/config/default.json
@@ -8,6 +8,9 @@
       "host": "localhost:8080/api/catalog",
       "index": "vue_storefront_catalog"
     },
+    "ssr": {
+      "executeMixedinAsyncData": true
+    },
     "entities": {
       "optimize": true,
       "twoStageCaching": true,
diff --git a/core/client-entry.js b/core/client-entry.js
index bb361b16aa..34b5d00640 100755
--- a/core/client-entry.js
+++ b/core/client-entry.js
@@ -25,7 +25,7 @@ router.onReady(() => {
       return next()
     }
     Promise.all(activated.map(c => { // TODO: update me for mixins support
-      const components = c.mixins ? Array.from(c.mixins) : []
+      const components = c.mixins && config.ssr.executeMixedinAsyncData ? Array.from(c.mixins) : []
       components.push(c)
       Promise.all(components.map(SubComponent => {
         if (SubComponent.asyncData) {

From ffc0f062a29197f3ae49c5b141d50e143e810188 Mon Sep 17 00:00:00 2001
From: pkarw <pkarwatka@divante.pl>
Date: Fri, 27 Apr 2018 23:58:31 +0200
Subject: [PATCH 5/5] Minor fixes

---
 core/components/ProductGallery.vue                    | 2 ++
 src/themes/default/components/core/ProductGallery.vue | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/core/components/ProductGallery.vue b/core/components/ProductGallery.vue
index 06accceb26..450e1d3838 100644
--- a/core/components/ProductGallery.vue
+++ b/core/components/ProductGallery.vue
@@ -46,6 +46,7 @@ export default {
       let option = this.configuration[config.products.galleryVariantsGroupAttribute].id
       let index = this.gallery.findIndex(obj => obj.id && Number(obj.id) === Number(option))
       this.navigate(index)
+      this.$forceUpdate()
     },
     toggleZoom () {
       this.isZoomOpen ? this.isZoomOpen = false : this.isZoomOpen = true
@@ -61,6 +62,7 @@ export default {
   mounted () {
     setTimeout(() => {
       this.selectVariant()
+      this.$forceUpdate()
     }, 0)
   }
 }
diff --git a/src/themes/default/components/core/ProductGallery.vue b/src/themes/default/components/core/ProductGallery.vue
index 90e873ec18..24897d69de 100644
--- a/src/themes/default/components/core/ProductGallery.vue
+++ b/src/themes/default/components/core/ProductGallery.vue
@@ -67,7 +67,7 @@ export default {
   },
   data () {
     return {
-      loaded: false
+      loaded: true
     }
   },
   methods: {