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:


Step 1

Install extension:

> vim Gemfile

gem 'solidus_i18n', '~> 2.0'
gem 'rails-i18n', '~> 5.1'
gem 'kaminari-i18n', '~> 0.5.0'
> bundle

Step 2
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. 


> vim Gemfile
gem 'routing-filter', '~> 0.6.0'
> bundle

> vim config/routes.rb
Rails.application.routes.draw do
  filter :locale
  mount Spree::Core::Engine, at: '/'

Configure routing-fitler in config/initializers/locale_filter.rb (optional):


> touch config/initializers/locale_filter.rb
# Do not include the default locale in the URL
RoutingFilter::Locale.include_default_locale = false


Step 3
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)


Step 4
Adding restrict of available locales:

add to the following (notice that some locales have hyphens, you can write them as follow)

> vim config/environments/production.rb
config.i18n.available_locales = ['es-MX', :en]

> vim config/environments/development.rb
config.i18n.available_locales = ['es-MX', :en]

> vim /config/application.rb
module AppNameHere
  class Application < Rails::Application
    config.to_prepare do
      # Load application's model / class decorators
      Dir.glob(File.join(File.dirname(__FILE__), "../app/**/*_decorator*.rb")) do |c|
        Rails.configuration.cache_classes ? require(c) : load(c)

      # Load application's view overrides
      Dir.glob(File.join(File.dirname(__FILE__), "../app/overrides/*.rb")) do |c|
        Rails.configuration.cache_classes ? require(c) : load(c)
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.i18n.available_locales = ['es-MX', :en]

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.


Step 5
Add the code to switch languages on the front-end of the site:

> vim app/views/spree/shared/_main_nav_bar.html.erb
add to navigation language selectors:
        <% if I18n.locale.to_s == 'es-MX' %>
          <%= link_to image_tag('icons/flag_of_the_us.png'), spree.root_path(locale: 'en'), class: "flag-icon" %>
        <% end %>
        <% if I18n.locale.to_s == 'en' %>
          <%= link_to image_tag('icons/flag_of_mexico.png'), spree.root_path(locale: 'es-MX'), class: "flag-icon" %>
        <% end %>

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:

> vim /app/views/spree/shared/_main_nav_bar.html.erb:

 <div class="col-md-4 nopadding nav-mainleft">
    <ul class="nav navbar-nav custom-nav-body" id="main-nav-bar">
      <li><%= link_to Spree.t(:shop), '/products', :class => 'custom-header-links' %></li>
      <li><%= link_to Spree.t(:collection), '/collection', :class => 'custom-header-links' %></li>
      <li><%= link_to Spree.t(:about), '/about', :class => 'custom-header-links' %></li>


> vim config/locales/es-MX.yml

    sign_up: Registro
    shop: Comprar
    collection: Colección
    about: Historia

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):

> vim app/views/spree/shared/_footer.html.erb
<%= render 'spree/shared/locale_selector' %>


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:

> vim app/views/spree/checkout/edit.html.erb

<%= javascript_include_tag 'jquery.validate/localization/messages_' + I18n.locale.to_s.downcase.gsub('-', ''), skip_pipeline: true %>