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:
https://github.com/solidusio/solidus_i18n/

> vim Gemfile

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

 

example:
https://www.armani.com/de/
https://www.armani.com/mx/

 

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
add:
gem 'routing-filter', '~> 0.6.0'
> bundle

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

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

 

> touch config/initializers/locale_filter.rb
add:
# 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:

https://github.com/solidusio/solidus_i18n/tree/6a82f378e1a693c1fb460e56577110b38ce841cf/config/locales

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)

path:
config/locales/en.yml


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
add:
config.i18n.available_locales = ['es-MX', :en]

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

> vim /config/application.rb
add:
Bundler.require(*Rails.groups)
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)
      end

      # 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)
      end
    end
    # 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.
  end
end

 

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:
/app/assets/images/icons/flag_of_the_us.png

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:

add:
 <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>
        </ul>
  </div>

 

> vim config/locales/es-MX.yml

add: 
 spree:
    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
add:
<%= render 'spree/shared/locale_selector' %>

 

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:

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

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