Localisation

[gavinballard]

Hey @stewartknapman, I've been working on some i18n / l16n stuff for the next version of Bootstrap for Shopify. What I've done so far is available here: https://github.com/discolabs/shopify.i18n.js.

If you have similar thoughts / plans for Bootstrapify, I'd be happy to work together.

[elyobo]

It looks like you've got your own localisation thing going on with __localize.liquid and settings/localization.yml. Shopify now supports their own theme localisation; are you planning to keep going your own way with this or cut over to the Shopify implementation?

[stewartknapman]

@elyobo we are going to strip out our localisation stuff in favour of Shopify's more recent translation work, we just haven't had time to do it yet. This issue was to remind me to do that.

@gavinballard I haven't had a proper look your repo yet but how does that differ from Shopify's translation stuff and what would be the benefit?

[elyobo]

@stewartknapman awesome

[elyobo]

It looks like the work by @gavinballard allows dynamic translation on the front end, while the Shopify stuff is all static - the store language gets set on the back end and that's that. Much more useful for multi-language stores.

[gavinballard]

@stewartknapman @elyobo At the moment, Shopify's i18n feature allows theme designers to add a range of translations to their themes, but it's up to the store owner to select one for use when rendering the Liquid templates, meaning visitors to the store have only a single language presented to them.

The library I've been playing with lets the visitor dynamically set the language to use. The idea is to mark up a control to change the language, something like this:

<select data-change="locale">
  <option value="en">English (US)</option>
  <option value="sv">Swedish</option>
</select>

The library adds a listener on $('[data-change="locale"]').change() and when it changes, makes an Ajax request to pull in the JSON translation file for that language. It then updates any elements marked up with data-translate attributes across the DOM, and stores the language preference in a cookie so that the same language is presented on subsequent page visits.

It draws from some of the ideas from the work Caroline Schnapp did for currencies here - I've also extended that work so that shopify.i18n.js works with selecting a currency as well.

The caveats of the work I've done so far are:

1. Requires jQuery;
2. Requires the language .json files to be copied from locales into assets so they're accessible via Ajax;
3. Doesn't support all of the filters of Shopify's in-built translation stuff (things like pluralisation);
4. Not thoroughly tested.

Wouldn't expect 1 to change. 2 can only change on Shopify's end (I believe this might change and they may make JSON files in the locales directory accessible to themes).

3 and 4 are up to me (and anyone else who wants to contribute). I'm expecting to get a lot more work on this library done when I'm in the process of developing Bootstrap for Shopify 4, which is just waiting for some spare time and the release of Bootstrap 4 :).

[elyobo]

Sounds great. It's not something that I personally need right now, but this would be a very useful feature for plenty of sites, so possibly worth building in during this migration @stewartknapman? The implementation is unobtrusive and won't do anything if the user doesn't enable @gavinballard's plugin.

With regards to your demo @gavinballard, I can see that you've got the markup in your page but I can't see anything with which to switch the language to actually test it.

[gavinballard]

@elyobo Are you seeing this in the navbar?

@stewartknapman Happy to work to integrate this in to Bootstrapify if you're interested; won't be until I have the time to work on Bootstrap for Shopify though, which could be a couple of months away. In any case, any questions / suggestions, shoot :).

[stewartknapman]

@gavinballard Rad. Christmas miracles aside at this point I'm not expecting to tackle this task this side of new years, so that suits me fine.

[gavinballard]

@stewartknapman :+1:

Have a great Christmas :). :santa:

[elyobo]

@gavinballard Yes, yes I am. Must have been crazy before.

[stewartknapman]

@stewartknapman note to self: https://s3.amazonaws.com/shopify-perf/i18n-beta/ShopifyThemeInternationalizationDocumentation.pdf