Customization doesn't re-render in NextJS/React

Support
#1

Hi,

I’m using a address-fields section within my <div id="snipcart"> to add a phone number field. I would like the label to be localized according to my current locale. Localization has been setup and is working using next-translate. However, it appears that the html inside that div is only considered on initial loading of the page, is that correct?

Since I’m switching the locale without doing a full-reload, the changed markup is not considered it seems.

Also, I think this is only during development, but I sometimes get a warning in the console that the Snipcart div has been removed from the page. I think it’s specific to HMR performing some updates while editing the code. Should I worry about this?

#2

Could you share an URL where we can reproduce the problem?

#3

That would be a bit difficult right now. But here’s a gist of it:

I can see that the component is re-rendered whenever the locale changes, but Snipcart doesn’t pick up the customizations from that apparently. Note that those changes do not cause the warning to appear, it’s only after saving changes to the code and a subsequent HMR reload that causes this.

#4

Hi @FabienF,

I’d recommend you try defining the templates inside a separate HTML file. This helps to avoid most conflicts with templating engines of frameworks such as Next.JS.

You’ll find instructions on how to achieve this in our documentation.

From there, you’ll be able to update the localization on any re-renders by sending the result of t('common:address.phoneNumber') directly to our localization API.

Let me know if that helps!

1 Like
#5

Hi @Michael thanks for the pointers, I was able to use the template as a separate HTML file and then set the translations through the localization API. It works perfectly!

1 Like
#6