Item-count doesn't display after routing with next/link

[rowin1125]

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:

https://user-images.githubusercontent.com/39522856/109028671-56631880-76c2-11eb-893a-80d41cf484f4.mov

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:

https://user-images.githubusercontent.com/39522856/109029487-2e27e980-76c3-11eb-9471-f632e7edb3c6.mov

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.

[colbyfayock]

hey @rowin1125 i reached out to Snipcart to se if this is resolved, but im wondering if not, if it makes sense to trigger it on router change, similar to this:

https://github.com/vercel/next.js/blob/canary/examples/with-google-analytics/pages/_app.js#L8

the downside is you would need to maintain only firing it on certain pages or allow it on all pages, if that's a concern. i can give this a try if theres no update on this

[rowin1125]

@colbyfayock I could implement this, but the problem is that the rest of the Snipcart application just works fine, only the amount isn't working correct. To reinitialise the whole Snipcart application twice isn't really pretty tbh, but I would assume this should work.

[colbyfayock]

yeah you're right - trying to see what i can find out

[colbyfayock]

here's a possible approach: https://gist.github.com/couellet/7351f7f4dec371d0565d6d58a25575bc

[rowin1125]

Yea looks good to me, nicely done 👏. However this will enforce me to build a context with these values to let multiple components consume the data. For the time being this is relatively ok, but would be nice to have this behaviour out of the box from Snipcart.

[colbyfayock]

@rowin1125 Snipcart also just released an update to their script. it sounds like that should fix the issue

https://docs.snipcart.com/v3/setup/installation

[jdalley]

Just an update here in case anyone else is running into it - this is still happening in version 3.2. The workaround @colbyfayock mentioned is the only thing I'm finding works.

[couellet]

It's actually an issue when the element with the snipcart-items-count gets re-rendered. It seems to happen quite often on sites built with Next. This is why I did the workaround @colbyfayock linked here.

We don't have an official fix for this yet, so using our SDK + a component is the way to go as of now.