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:
- Install the solidus_i18n extension using the Solidus extension installation guide.
- Set up your store's default language and configure additional languages as needed.
- Translate the necessary text and content on your website using the provided translation tools.
- 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'
> bundleStep 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: '/'
endConfigure 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.ymlStep 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
endStep 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.pngThat'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: HistoriaYou 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
Unlock your potential with our services
Fill out the form below and we will contact you shortly.
