Im facing an issue where the element with class snipcart-items-count isn't updated after we route from 1 page to another with the Link component from nextjs.

In this video you can see how I route from the homepage to a dynamic product page. During this route the count isn't set again:

It tried to see if the snipcart.initialized event was triggered after routing, however this was not the case. Only after a reload this would trigger again and display the correct value.

Most of the other functionality seem to work just fine. If I add a new product to the cart the value actually will update and display correctly:

I created a Github repo for this issue which you can find here:

• https://github.com/rowin1125/snipcart-next-issue

Really curious what is wrong here and if i made a mistake or this is a bug from Snipcart.

Hello!

I've been facing a browser navigation issue with the Snipcart script in a NextJS project. I created a minimal reproduction fork here: https://github.com/talhaguy/next-snipcart-store. The issue is as follows:

Replication Steps

1. Go to home page
2. Click on FAQ page link in nav
3. Once FAQ page is loaded, press browser back button

Expected
Page should go back again.

Actual
Page visually remains on the same one. The URL does change though.

After some debugging, I noticed the history state object is a little different on the landing page with and without Snipcart.

history.state with Snipcart:

history.state without Snipcart:

I created a branch in the reproduction repo with a fix by replacing the landing page history state: https://github.com/talhaguy/next-snipcart-store/tree/fix. I am using the NextJS router to accomplish this:

// _app.js

import { useEffect } from 'react';
import { useRouter } from 'next/router'

function useResetHistory() {
  const router = useRouter()

  useEffect(() => {
    document.addEventListener("snipcart.ready", () => {
      Snipcart.events.on('snipcart.initialized', (snipcartState) => {
        router.replace(router.pathname)
      });
    });
  }, [])
}

function MyApp({ Component, pageProps }) {
  useResetHistory()

  return <Component {...pageProps} />
}

export default MyApp

Although it does seem to be working fine now, it feels hacky. Is there a better way to handle this? Is this truly a conflict between NextJS routing and Snipcart routing?

Thank you,
Muhammad Talha