Sync the cart's items between tabs

[Mattijs]

If a customer opens multiple tabs, I want them to be able to seamlessly transition between them and the cart to always show the actual items. At the moment a refresh is required which isn't optimal for the user experience.

[Mattijs]

I achieved this by doing the following:

import useWindowFocus from "use-window-focus"
import useLocalStorage from "use-local-storage-state"

const windowFocused = useWindowFocus()
const [cartStorage] = useLocalStorage("react-use-cart", null)

useEffect(() => {
  if (!windowFocused && cartStorage?.items) setItems(cartStorage.items)
}, [cartStorage])

[Jamie Barton]

Nice!

Perhaps we could add this to the library?

[Mattijs]

@notrab Yeah sure, I think that would be a great idea.

I updated my snippet to work a bit nicer with Next.js

EDIT: Ideally it would keep everything in sync. The items, metadata etc

[Jamie Barton]

@mattjis is this something you'd like to create a PR for?