Totals localstorage sync

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added states.json in core/i18n/resource (#4531)
 - Added phone validation helper (#4980)
 - Configurable enabling min & max price aggregations
+- Storing totals in localStorage to sync it between tabs ([#4733](https://github.com/vuestorefront/vue-storefront/issues/4733))
 
 ### Fixed
 

core/modules/cart/helpers/index.ts

@@ -1,4 +1,5 @@
 import { cartCacheHandlerFactory } from './cartCacheHandler'
+import { totalsCacheHandlerFactory } from './totalsCacheHandler'
 import optimizeProduct from './optimizeProduct'
 import prepareProductsToAdd from './prepareProductsToAdd'
 import productChecksum from './productChecksum'
@@ -19,6 +20,7 @@ import * as syncCartWhenLocalStorageChange from './syncCartWhenLocalStorageChang
 
 export {
   cartCacheHandlerFactory,
+  totalsCacheHandlerFactory,
   optimizeProduct,
   prepareProductsToAdd,
   productChecksum,

core/modules/cart/helpers/syncCartWhenLocalStorageChange.ts

@@ -1,9 +1,11 @@
 import rootStore from '@vue-storefront/core/store';
 
 function getItemsFromStorage ({ key }) {
+  const value = JSON.parse(localStorage[key])
   if (key === 'shop/cart/current-cart') {
-    const storedItems = JSON.parse(localStorage[key])
-    rootStore.dispatch('cart/syncCartWhenLocalStorageChange', { items: storedItems })
+    rootStore.dispatch('cart/syncCartWhenLocalStorageChange', { items: value })
+  } else if (key === 'shop/cart/current-totals') {
+    rootStore.dispatch('cart/syncTotalsWhenLocalStorageChange', value)
   }
 }
 

core/modules/cart/helpers/totalsCacheHandler.ts

@@ -0,0 +1,19 @@
+import * as types from '../store/mutation-types'
+import { Logger } from '@vue-storefront/core/lib/logger'
+
+import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
+
+export const totalsCacheHandlerFactory = (mutation, state) => {
+  const type = mutation.type;
+
+  if (
+    type.endsWith(types.CART_UPD_TOTALS)
+  ) {
+    return StorageManager.get('cart').setItem('current-totals', {
+      platformTotalSegments: state.cart.platformTotalSegments,
+      platformTotals: state.cart.platformTotals
+    }).catch((reason) => {
+      Logger.error(reason)()
+    })
+  }
+}

core/modules/cart/index.ts

@@ -1,6 +1,6 @@
 import { StorefrontModule } from '@vue-storefront/core/lib/modules'
 import { cartStore } from './store'
-import { cartCacheHandlerFactory } from './helpers';
+import { cartCacheHandlerFactory, totalsCacheHandlerFactory } from './helpers';
 import { isServer } from '@vue-storefront/core/helpers'
 import Vue from 'vue'
 import { StorageManager } from '@vue-storefront/core/lib/storage-manager'
@@ -12,4 +12,5 @@ export const CartModule: StorefrontModule = function ({ store }) {
 
   if (!isServer) store.dispatch('cart/load')
   store.subscribe(cartCacheHandlerFactory(Vue))
+  store.subscribe(totalsCacheHandlerFactory);
 }

core/modules/cart/store/actions/totalsActions.ts

@@ -10,6 +10,9 @@ import {
 import EventBus from '@vue-storefront/core/compatibility/plugins/event-bus'
 
 const totalsActions = {
+  async syncTotalsWhenLocalStorageChange ({ commit }, payload) {
+    commit(types.CART_UPD_TOTALS, payload)
+  },
   async getTotals (context, { addressInformation, hasShippingInformation }) {
     if (hasShippingInformation) {
       return CartService.setShippingInfo(addressInformation)