From 6725025fc0ae1d208dc37fa2e3ef08b33ba71f67 Mon Sep 17 00:00:00 2001 From: Michal-Dziedzinski Date: Fri, 14 Feb 2020 11:22:20 +0100 Subject: [PATCH 1/4] Fix sync cart bwetween tabs --- CHANGELOG.md | 1 + .../cart/store/actions/synchronizeActions.ts | 3 +++ .../core/blocks/Header/MicrocartIcon.vue | 17 +++++++++++------ 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index db4def0992..6d7e6a9fba 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Fix possibility to add same SKU with different custom options to the cart - @Michal-Dziedzinski (#3595) - Fix `calculateProductTax` to find matching tax rules from ES for current product - @DylannCordel (#4056) - Set `totals` in products in cart always in reactive way - @psmyrek (#4079) +- Fix sync cart between tabs - @Michal-Dziedzinski (#3838) ## [1.11.1] - 2020.02.05 diff --git a/core/modules/cart/store/actions/synchronizeActions.ts b/core/modules/cart/store/actions/synchronizeActions.ts index 066ea70eb2..23d4fd9105 100644 --- a/core/modules/cart/store/actions/synchronizeActions.ts +++ b/core/modules/cart/store/actions/synchronizeActions.ts @@ -20,6 +20,9 @@ const synchronizeActions = { cartHooksExecutors.afterLoad(storedItems) }, + syncCartWhenLocalStorageChange ({commit}, {items}) { + commit(types.CART_LOAD_CART, items) + }, async synchronizeCart ({ commit, dispatch }, { forceClientState }) { const { synchronize, serverMergeByDefault } = config.cart if (!synchronize) return diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue index b4c0ff65f9..546bb2148f 100644 --- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue +++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue @@ -25,11 +25,7 @@ import MicrocartIcon from '@vue-storefront/core/compatibility/components/blocks/ export default { // mixins: [MicrocartIcon], mounted () { - document.addEventListener('visibilitychange', () => { - if (!document.hidden) { - this.$store.dispatch('cart/load') - } - }) + window.addEventListener('storage', this.getItemsFromStorage) }, computed: { ...mapGetters({ @@ -39,7 +35,16 @@ export default { methods: { ...mapActions({ openMicrocart: 'ui/toggleMicrocart' - }) + }), + getItemsFromStorage ({key}) { + if (key === 'shop/cart/current-cart') { + const storedItems = JSON.parse(localStorage[key]) + this.$store.dispatch('cart/syncCartWhenLocalStorageChange', {items: storedItems}) + } + } + }, + beforeDestroy () { + window.removeEventListener('storage', this.getItemsFromStorage) } } From 4b9841ef307a23ee055565a1faa236801eb76d8e Mon Sep 17 00:00:00 2001 From: Michal-Dziedzinski Date: Fri, 14 Feb 2020 16:37:02 +0100 Subject: [PATCH 2/4] Move functions to helper --- core/modules/cart/helpers/index.ts | 4 +++- .../helpers/syncCartWhenLocalStorageChange.ts | 21 +++++++++++++++++++ .../cart/test/unit/components/Product.spec.ts | 1 + core/modules/cart/test/unit/index.spec.ts | 1 + .../cart/test/unit/store/getters.spec.ts | 1 + .../core/blocks/Header/MicrocartIcon.vue | 10 ++++----- 6 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 core/modules/cart/helpers/syncCartWhenLocalStorageChange.ts diff --git a/core/modules/cart/helpers/index.ts b/core/modules/cart/helpers/index.ts index 49e97d1bd3..555b6e5a5e 100644 --- a/core/modules/cart/helpers/index.ts +++ b/core/modules/cart/helpers/index.ts @@ -15,6 +15,7 @@ import getProductOptions from './getProductOptions' import getProductConfiguration from './getProductConfiguration' import createOrderData from './createOrderData' import createShippingInfoData from './createShippingInfoData' +import * as syncCartWhenLocalStorageChange from './syncCartWhenLocalStorageChange' export { cartCacheHandlerFactory, @@ -33,5 +34,6 @@ export { getProductOptions, getProductConfiguration, createOrderData, - createShippingInfoData + createShippingInfoData, + syncCartWhenLocalStorageChange } diff --git a/core/modules/cart/helpers/syncCartWhenLocalStorageChange.ts b/core/modules/cart/helpers/syncCartWhenLocalStorageChange.ts new file mode 100644 index 0000000000..e8fa004461 --- /dev/null +++ b/core/modules/cart/helpers/syncCartWhenLocalStorageChange.ts @@ -0,0 +1,21 @@ +import rootStore from '@vue-storefront/core/store'; + +function getItemsFromStorage ({key}) { + if (key === 'shop/cart/current-cart') { + const storedItems = JSON.parse(localStorage[key]) + rootStore.dispatch('cart/syncCartWhenLocalStorageChange', {items: storedItems}) + } +} + +function addEventListener () { + window.addEventListener('storage', getItemsFromStorage) +} + +function removeEventListener () { + window.removeEventListener('storage', getItemsFromStorage) +} + +export { + addEventListener, + removeEventListener +} diff --git a/core/modules/cart/test/unit/components/Product.spec.ts b/core/modules/cart/test/unit/components/Product.spec.ts index 178a04164b..f15a942a2e 100644 --- a/core/modules/cart/test/unit/components/Product.spec.ts +++ b/core/modules/cart/test/unit/components/Product.spec.ts @@ -13,6 +13,7 @@ jest.mock('@vue-storefront/i18n', () => ({ t: jest.fn(str => str) })); jest.mock('@vue-storefront/core/app', () => jest.fn()) jest.mock('@vue-storefront/core/lib/multistore', () => jest.fn()) jest.mock('@vue-storefront/core/lib/storage-manager', () => jest.fn()) +jest.mock('@vue-storefront/core/store', () => ({})) describe('MicrocartProduct', () => { beforeEach(() => { diff --git a/core/modules/cart/test/unit/index.spec.ts b/core/modules/cart/test/unit/index.spec.ts index 4b00340d60..0e405fcc6e 100644 --- a/core/modules/cart/test/unit/index.spec.ts +++ b/core/modules/cart/test/unit/index.spec.ts @@ -7,6 +7,7 @@ jest.mock('@vue-storefront/core/helpers', () => ({ isServer: false })) jest.mock('@vue-storefront/core/lib/storage-manager', () => ({ initCacheStorage: jest.fn() })); jest.mock('@vue-storefront/i18n', () => ({ t: jest.fn(str => str) })); jest.mock('@vue-storefront/core/app', () => jest.fn()) +jest.mock('@vue-storefront/core/store', () => ({})) jest.mock('@vue-storefront/core/lib/multistore', () => ({ currentStoreView: jest.fn(), localizedRoute: jest.fn() diff --git a/core/modules/cart/test/unit/store/getters.spec.ts b/core/modules/cart/test/unit/store/getters.spec.ts index 166c6b69d6..3eb4517109 100644 --- a/core/modules/cart/test/unit/store/getters.spec.ts +++ b/core/modules/cart/test/unit/store/getters.spec.ts @@ -6,6 +6,7 @@ jest.mock('@vue-storefront/i18n', () => ({ t: jest.fn(str => str) })); jest.mock('@vue-storefront/core/lib/storage-manager', () => jest.fn()) jest.mock('@vue-storefront/core/app', () => jest.fn()) jest.mock('@vue-storefront/core/lib/multistore', () => jest.fn()) +jest.mock('@vue-storefront/core/store', () => ({})) jest.mock('@vue-storefront/core/helpers', () => ({ onlineHelper: { get isOnline () { diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue index 546bb2148f..50e94ac685 100644 --- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue +++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue @@ -21,11 +21,14 @@ From 7b021dfb214a0cd77abc44a92c75eaf2624b635f Mon Sep 17 00:00:00 2001 From: Michal-Dziedzinski Date: Mon, 17 Feb 2020 09:44:59 +0100 Subject: [PATCH 3/4] Remove Method from Microcarticon file --- .../components/core/blocks/Header/MicrocartIcon.vue | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue index 50e94ac685..116d0b8599 100644 --- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue +++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue @@ -38,13 +38,7 @@ export default { methods: { ...mapActions({ openMicrocart: 'ui/toggleMicrocart' - }), - getItemsFromStorage ({key}) { - if (key === 'shop/cart/current-cart') { - const storedItems = JSON.parse(localStorage[key]) - this.$store.dispatch('cart/syncCartWhenLocalStorageChange', {items: storedItems}) - } - } + }) } } From 1746b24316487a2437a574a3e75fd371e92e964d Mon Sep 17 00:00:00 2001 From: Michal-Dziedzinski Date: Mon, 17 Feb 2020 09:48:59 +0100 Subject: [PATCH 4/4] Change destoroyed to beforeDestroy hook --- .../default/components/core/blocks/Header/MicrocartIcon.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue index 116d0b8599..ebf078b19f 100644 --- a/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue +++ b/src/themes/default/components/core/blocks/Header/MicrocartIcon.vue @@ -26,7 +26,7 @@ import {syncCartWhenLocalStorageChange} from '@vue-storefront/core/modules/cart/ export default { mounted () { syncCartWhenLocalStorageChange.addEventListener() - this.$once('hook:destroyed', () => { + this.$once('hook:beforeDestroy', () => { syncCartWhenLocalStorageChange.removeEventListener() }) },