Iteration K4: Adding a Locale Switcher

We’ve completed the task, but we need to advertise its availability more. We spy some unused area in the top-right side of the layout, so we add a form immediately before the image_tag:

The form_tag specifies the path to the store as the page to be redisplayed when the form is submitted. A class attribute lets us associate the form with some CSS.

The select_tag is used to define the input field for this form—namely, locale. It’s an options list based on the LANGUAGES array we set up in the configuration file, with the default being the current locale (also made available via the I18n module). We also set up an onchange event handler, which submits this form whenever the value changes. This works only if JavaScript is enabled, but it’s handy. For cases where JavaScript is not enabled, we’ve also put a submit_tag in so there is a button the user can press to switch locales.

That said, since we don’t need the submit button if JavaScript is enabled, it might be nice to hide it. The simplest way to do that is to write some JavaScript to do the hiding. If JavaScript is disabled, the JavaScript won’t execute, and the button remains to allow those users to submit the form. You’ll notice we included an id on the submit_tag in the code above. This allows us to locate that exact submit button in JavaScript. Once we’ve located it, we can set its style.display to "none", which is the programmatic way of setting the CSS display property to none. We’ll add this code into a new file called app/assets/javascripts/locale_switcher.js:

This code won’t be used by default, since it’s a new JavaScript pack (which we discussed in ​Updating Our Development Environment for Webpack​), and all packs must be included explicitly in our views. Since we added the locale switcher to our main application layout, it’s on every view, so we also want the new locale_switcher pack on every view, too. We can make that happen by adding an additional call to javascript_pack_tag in app/views/layouts/application.html.erb, like so:

Next, we modify the store controller to redirect to the store path for a given locale if the :set_locale form is used:

Finally, we add a bit of CSS:

For the actual selector, see the following screenshot. We can now switch back and forth between languages with a single mouse click.

At this point, we can place orders in two languages, and our thoughts turn to deployment. But because it’s been a busy day, it’s time to put down our tools and relax. We’ll start on deployment in the morning.

What We Just Did

By the end of this iteration, we’ve done the following:

• We set the default locale for our application and provided means for the user to select an alternative locale.

• We created translation files for text fields, currency amounts, errors, and model names.

• We altered layouts and views to call out to the I18n module by way of the t helper to translate textual portions of the interface.

Playtime

Here’s some stuff to try on your own:

• Add a locale column to the products database, and adjust the index view to select only the products that match the locale. Adjust the products view so that you can view, enter, and alter this new column. Enter a few products in each locale and test the resulting application.

• Determine the current exchange rate between U.S. dollars and euros, and localize the currency display to display euros when ES_es is selected.

• Translate the Order::PAYMENT_TYPES shown in the drop-down. You’ll need to keep the option value (which is sent to the server) the same. Change only what’s displayed.