This Solidus tutorial is on how to setup solidus_i18n extension for your international ecommerce websites. In our day to day at BRADIENT we design, developed, built and deployed custom eCommerce websites for client in the Los Angeles area, and some of our request are usually a client would like to offer their product globally to all international clients not just their Los Angeles based online shoppers.
To achieve this, you can use an excellent repository built by the Solidus community it's called "solidus_i18n". It's an easy-to-use extension for translating your e-commerce application to a single custom language other than English by providing locale, multilingual/bilingual support on your ecommerce store.
Here are the step to adding multilingual/bilingual support to your website:
Add locale on the URL (Locale in URL):
I suggest skipping this part but if you like to add a local to your domain URL representing the language or country you can follow the step below.
Configure routing-fitler in config/initializers/locale_filter.rb (optional):
Copy an already done translation of your site in a different language (not all of the files are entirely done, you might have to translate them based on the language) they are in a .yml format.
Locate the list of language YML files here:
Copy the locale you need to the path example (you can also override the English version if you like to change the descriptions or remove text):
Adding restrict of available locales:
add to the following (notice that some locales have hyphens, you can write them as follow)
Add the code to switch languages on the front-end of the site:
Make sure to add a flag icon to your images path example:
That's it! now when you click on the flag icon you can switch between languages.
Translating the Navigation:
example of translation being used:
You can also add the locale selector to the footer:
Include this in the footer preferably to render locale selector of countries (based on the restrict availability of locale):
ISSUES and ERRORS:
There are some errors you might encounter when checking with a language that is missing a translation for example on the user's checkout flow. In my case, the "Region" was missing a translation; you can fix this by adding the below or making sure that all of the fields in your "es.yml" have a translation available:
A second error message was on checkout. The "jquery.validate" file. Fix this by adding: