Fix sync cart between tabs

CHANGELOG.md

@@ -19,6 +19,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)
 - Add currentRoute to url module and return cached requests - @gibkigonzo (pr#4077, issue#4066)
 
 ## [1.11.1] - 2020.02.05

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
 }

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
+}

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

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(() => {

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()

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 () {

src/themes/default/components/core/blocks/Header/MicrocartIcon.vue

@@ -21,14 +21,13 @@
 <script>
 import { mapGetters, mapActions } from 'vuex'
 import MicrocartIcon from '@vue-storefront/core/compatibility/components/blocks/Header/MicrocartIcon'
+import {syncCartWhenLocalStorageChange} from '@vue-storefront/core/modules/cart/helpers'
 
 export default {
-  // mixins: [MicrocartIcon],
   mounted () {
-    document.addEventListener('visibilitychange', () => {
-      if (!document.hidden) {
-        this.$store.dispatch('cart/load')
-      }
+    syncCartWhenLocalStorageChange.addEventListener()
+    this.$once('hook:beforeDestroy', () => {
+      syncCartWhenLocalStorageChange.removeEventListener()
     })
   },
   computed: {