Translations aren't updating unless JS is changed

If the store language is changed, some of the values, e.g. 'Buy Now' on the product page, and 'Your Cart is empty' in the AJAX sidebar don't update.

If you look into the frontend JS (timber.js) when a language is changed, the values in here, e.g:

$addToCartText.html({{ 'products.product.add_to_cart' | t | json }});

Are not updated either, so will be set at the previous language.

The temp fix I am using is dragging the 'timber.productPage' into theme.liquid, with some liquid that only fires it on the product page.

[cshold]

My assumption here is that since the JS file hasn't changed it's using an old cached version. As soon as you make a change to that file the values should update.

Hey Carson,

The JS being cached seems to be the issue, is there any way of forcing a refresh of the cache?

I setup this demo store over a week ago, and it still bringing in the old language selection:

https://timber-language-test.myshopify.com/

You'll see the site is in French, but the "Your cart is currently empty." in the cart drawer is in English.

[cshold]

If you add a few extra lines in the JS file and save it you should be good to go as the CDN will serve up the new version.

Yeah, editing the JS works a treat.

We're just putting the finishing touches to a new theme, so in the production version of that, we'll need to leave any translation values in the theme.liquid (with the product page values just being pulled in on the product page), as this is refreshed each time the page is loaded.

[cshold]

Yup, great idea to move them outside of the main JS bundle to avoid this error. We've started doing the same for an JS-used variables in our new themes too. Best of luck on finishing off the new theme.

[NathanPJF]

@weareeight A potential solution is to move your translation strings as data attributes in the HTML wrapping your cart in theme.liquid. Then your JS asset will read from the DOM, instead of explicit strings in the JS file itself.

<div class="cart__container" data-empty="{{ 'general.cart.cart_empty' | t | json }}" data-checkout="{{ 'general.cart.proceed_to_checkout' | t | json }}">
  ... 
</div>