From 73dd65d67d06c121792c0140e21fdc3fbf92c22b Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Tue, 19 Mar 2019 22:16:48 +0100 Subject: [PATCH 1/9] update development with sw script --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6413ae9b40..bf5aaa006b 100755 --- a/package.json +++ b/package.json @@ -31,7 +31,7 @@ "all": "cross-env NODE_ENV=development node ./core/scripts/all", "cache": "node ./core/scripts/cache", "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" ts-node ./core/scripts/entry.ts", - "dev:sw": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && ts-node ./core/scripts/entry", + "dev:sw": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" yarn build:sw && yarn dev", "dev:inspect": "cross-env TS_NODE_PROJECT=\"tsconfig-build.json\" node --inspect -r ts-node/register ./core/scripts/entry", "build:sw": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.sw.config.ts --mode production --progress --hide-modules", "build:client": "cross-env NODE_ENV=production TS_NODE_PROJECT=\"tsconfig-build.json\" webpack --config ./core/build/webpack.prod.client.config.ts --mode production --progress --hide-modules", From 394c501d179f7dbe57ea5d03874031d21aa985df Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Tue, 19 Mar 2019 22:17:48 +0100 Subject: [PATCH 2/9] test loading products with cache --- core/modules/catalog/store/category/actions.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/core/modules/catalog/store/category/actions.ts b/core/modules/catalog/store/category/actions.ts index 1001698730..ddbdfdf55f 100644 --- a/core/modules/catalog/store/category/actions.ts +++ b/core/modules/catalog/store/category/actions.ts @@ -204,6 +204,9 @@ const actions: ActionTree = { Logger.log('Using two stage caching for performance optimization - executing first stage product pre-fetching')() } else { prefetchGroupProducts = true + // TODO Test include i exclude as null + includeFields = null + excludeFields = null if (rootStore.state.twoStageCachingDisabled) { Logger.log('Two stage caching is disabled runtime because of no performance gain')() } else { From aa3ab556cd5c5905227907a3f841b27ad0f6282a Mon Sep 17 00:00:00 2001 From: Patryk Tomczyk <13100280+patzick@users.noreply.github.com> Date: Tue, 19 Mar 2019 22:19:56 +0100 Subject: [PATCH 3/9] category asyncData with async await --- core/pages/Category.js | 74 ++++++++++++++---------------------------- 1 file changed, 25 insertions(+), 49 deletions(-) diff --git a/core/pages/Category.js b/core/pages/Category.js index 3f60418266..085360665c 100644 --- a/core/pages/Category.js +++ b/core/pages/Category.js @@ -81,58 +81,34 @@ export default { append: false }) }, - asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data - return new Promise((resolve, reject) => { - Logger.info('Entering asyncData in Category Page (core)')() + async asyncData ({ store, route, context }) { // this is for SSR purposes to prefetch data + Logger.info('Entering asyncData in Category Page (core)')() + try { if (context) context.output.cacheTags.add(`category`) const defaultFilters = store.state.config.products.defaultFilters - store.dispatch('category/list', { level: store.state.config.entities.category.categoriesDynamicPrefetch && store.state.config.entities.category.categoriesDynamicPrefetchLevel ? store.state.config.entities.category.categoriesDynamicPrefetchLevel : null, includeFields: store.state.config.entities.optimize && Vue.prototype.$isServer ? store.state.config.entities.category.includeFields : null }).then((categories) => { - store.dispatch('attribute/list', { // load filter attributes for this specific category - filterValues: defaultFilters, // TODO: assign specific filters/ attribute codes dynamicaly to specific categories - includeFields: store.state.config.entities.optimize && Vue.prototype.$isServer ? store.state.config.entities.attribute.includeFields : null - }).catch(err => { - Logger.error(err)() - reject(err) - }).then((attrs) => { - store.dispatch('category/single', { key: store.state.config.products.useMagentoUrlKeys ? 'url_key' : 'slug', value: route.params.slug }).then((parentCategory) => { - let query = store.getters['category/getCurrentCategoryProductQuery'] - if (!query.searchProductQuery) { - store.dispatch('category/mergeSearchOptions', { - searchProductQuery: baseFilterProductsQuery(parentCategory, defaultFilters) - }) - } - store.dispatch('category/products', query).then((subloaders) => { - if (subloaders) { - Promise.all(subloaders).then((results) => { - EventBus.$emitFilter('category-after-load', { store: store, route: route }).then((results) => { - return resolve() - }).catch((err) => { - Logger.error(err)() - return resolve() - }) - }).catch(err => { - Logger.error(err)() - reject(err) - }) - } else { - const err = new Error('Category query returned empty result') - Logger.error(err)() - reject(err) - } - }).catch(err => { - Logger.error(err)() - reject(err) - }) - }).catch(err => { - Logger.error(err)() - reject(err) - }) - }) - }).catch(err => { - Logger.error(err)() - reject(err) + await store.dispatch('category/list', { level: store.state.config.entities.category.categoriesDynamicPrefetch && store.state.config.entities.category.categoriesDynamicPrefetchLevel ? store.state.config.entities.category.categoriesDynamicPrefetchLevel : null, includeFields: store.state.config.entities.optimize && Vue.prototype.$isServer ? store.state.config.entities.category.includeFields : null }) + await store.dispatch('attribute/list', { // load filter attributes for this specific category + filterValues: defaultFilters, // TODO: assign specific filters/ attribute codes dynamicaly to specific categories + includeFields: store.state.config.entities.optimize && Vue.prototype.$isServer ? store.state.config.entities.attribute.includeFields : null }) - }) + const parentCategory = await store.dispatch('category/single', { key: store.state.config.products.useMagentoUrlKeys ? 'url_key' : 'slug', value: route.params.slug }) + let query = store.getters['category/getCurrentCategoryProductQuery'] + if (!query.searchProductQuery) { + store.dispatch('category/mergeSearchOptions', { + searchProductQuery: baseFilterProductsQuery(parentCategory, defaultFilters) + }) + } + const subloaders = await store.dispatch('category/products', query) + if (subloaders) { + await Promise.all(subloaders) + await EventBus.$emitFilter('category-after-load', { store: store, route: route }) + } else { + throw new Error('Category query returned empty result') + } + } catch (err) { + Logger.error(err)() + throw err + } }, beforeMount () { this.$bus.$on('filter-changed-category', this.onFilterChanged) From 2f1b2cb6b77f614e8981e87d96df986c8b672798 Mon Sep 17 00:00:00 2001 From: patzick Date: Tue, 19 Mar 2019 22:57:10 +0100 Subject: [PATCH 4/9] Fix #2543 - different criteria for cached products on category page --- core/modules/catalog/store/category/actions.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/core/modules/catalog/store/category/actions.ts b/core/modules/catalog/store/category/actions.ts index ddbdfdf55f..68d1196d08 100644 --- a/core/modules/catalog/store/category/actions.ts +++ b/core/modules/catalog/store/category/actions.ts @@ -333,7 +333,10 @@ const actions: ActionTree = { size: perPage, excludeFields: null, includeFields: null, - updateState: false // not update the product listing - this request is only for caching + configuration: configuration, + sort: sort, + updateState: false, // not update the product listing - this request is only for caching + prefetchGroupProducts: prefetchGroupProducts }).catch((err) => { Logger.info("Problem with second stage caching - couldn't store the data", 'category')() Logger.info(err, 'category')() From 0dfa0fa5ae6f66bbe83988fe9e26b82c1d22208b Mon Sep 17 00:00:00 2001 From: patzick Date: Tue, 19 Mar 2019 22:59:34 +0100 Subject: [PATCH 5/9] Revert test changes --- core/modules/catalog/store/category/actions.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/core/modules/catalog/store/category/actions.ts b/core/modules/catalog/store/category/actions.ts index 68d1196d08..d3a3e4a486 100644 --- a/core/modules/catalog/store/category/actions.ts +++ b/core/modules/catalog/store/category/actions.ts @@ -204,9 +204,6 @@ const actions: ActionTree = { Logger.log('Using two stage caching for performance optimization - executing first stage product pre-fetching')() } else { prefetchGroupProducts = true - // TODO Test include i exclude as null - includeFields = null - excludeFields = null if (rootStore.state.twoStageCachingDisabled) { Logger.log('Two stage caching is disabled runtime because of no performance gain')() } else { From 9ba3d4ea67707417110e2ec99e58a41a1e915631 Mon Sep 17 00:00:00 2001 From: patzick Date: Tue, 19 Mar 2019 23:59:07 +0100 Subject: [PATCH 6/9] #1698 - invoke offline cache for category products on SSR render --- core/pages/Category.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/core/pages/Category.js b/core/pages/Category.js index 085360665c..2d06788c1a 100644 --- a/core/pages/Category.js +++ b/core/pages/Category.js @@ -4,7 +4,7 @@ import toString from 'lodash-es/toString' 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 } 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' @@ -110,6 +110,23 @@ export default { throw err } }, + async beforeRouteEnter (to, from, next) { + if (!isServer && !from.name) { // Loading category products to cache on SSR render + next(vm => { + const defaultFilters = store.state.config.products.defaultFilters + let parentCategory = store.getters['category/getCurrentCategory'] + let query = store.getters['category/getCurrentCategoryProductQuery'] + if (!query.searchProductQuery) { + store.dispatch('category/mergeSearchOptions', { + searchProductQuery: baseFilterProductsQuery(parentCategory, defaultFilters) + }) + } + store.dispatch('category/products', query) + }) + } else { + next() + } + }, beforeMount () { this.$bus.$on('filter-changed-category', this.onFilterChanged) this.$bus.$on('list-change-sort', this.onSortOrderChanged) From fa803aab069942967ba62e827cf1ffd997dab8aa Mon Sep 17 00:00:00 2001 From: patzick Date: Wed, 20 Mar 2019 00:00:14 +0100 Subject: [PATCH 7/9] Fix #2569 - do not invoke fetching more products in offline mode --- core/pages/Category.js | 1 + 1 file changed, 1 insertion(+) diff --git a/core/pages/Category.js b/core/pages/Category.js index 2d06788c1a..5ef3e16ba3 100644 --- a/core/pages/Category.js +++ b/core/pages/Category.js @@ -158,6 +158,7 @@ export default { return bottomOfPage || pageHeight < visible }, pullMoreProducts () { + if (typeof navigator !== 'undefined' && !navigator.onLine) return let current = this.getCurrentCategoryProductQuery.current + this.getCurrentCategoryProductQuery.perPage this.mergeSearchOptions({ append: true, From e59bd712a8b2fc5c434a8120258596fe08c7c20c Mon Sep 17 00:00:00 2001 From: patzick Date: Wed, 20 Mar 2019 00:14:25 +0100 Subject: [PATCH 8/9] Load homepage new products to cache for offline use --- src/themes/default/pages/Home.vue | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/src/themes/default/pages/Home.vue b/src/themes/default/pages/Home.vue index 8aa2a5482a..0ba6fb3ec1 100755 --- a/src/themes/default/pages/Home.vue +++ b/src/themes/default/pages/Home.vue @@ -30,6 +30,7 @@ From 0a98f5e61b202c8e57e3427a4b543f5b67f44c41 Mon Sep 17 00:00:00 2001 From: patzick Date: Wed, 20 Mar 2019 00:38:27 +0100 Subject: [PATCH 9/9] update changelog --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b70b2f7f25..fd8fe32d31 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [1.8.4] - UNRELEASED + +### Added + +### Fixed +- Problem with incomplete category products load for offline use - @patzick (#2543) +- Category products view crash on scrolling down in offline mode - @patzick (#2569) + +### Changed / Improved +- Category and Homepage products are now cached for offline use on SSR entry - @patzick (@1698) + ## [1.8.3] - 2019.03.03 ### Added