burger icon in white
Translation for support on your Solidus custom eCommerce application usingsolidus_i18n

Translation for support on your Solidus custom eCommerce application usingsolidus_i18n

This tutorial is about how to set up the solidus_i18n extension for international eCommerce websites. At BRADIENT, we frequently receive requests from clients to design, develop, and deploy custom eCommerce websites that are accessible to international customers, not just those in the Los Angeles area.

One way to make your eCommerce website accessible to a global audience is to use the solidus_i18n extension, a repository created by the Solidus community specifically for this purpose. This extension allows you to easily translate your eCommerce application into a single custom language other than English, providing locale and multilingual/bilingual support for your store.

To add multilingual/bilingual support to your website using solidus_i18n, follow these steps:

  1. Install the solidus_i18n extension using the Solidus extension installation guide.
  2. Set up your store's default language and configure additional languages as needed.
  3. Translate the necessary text and content on your website using the provided translation tools.
  4. Test the translation functionality to ensure it is working correctly.

By following these steps, you can easily add multilingual/bilingual support to your eCommerce website using the solidus_i18n extension. This will allow you to reach a wider audience and expand your business globally.

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: Coleccion
    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.erbadd:<%= 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 %>

DONE

Start a conversation with us now

Fill out the form below and we will contact you shortly.

BRADIENT Web Design Los Angeles Logo
BRADIENT
555 West 5th Street, 35th Floor
Los Angeles, CA 90013

Tel: (844) 454-4218