Agile Web Development Using Rails 6/

...

/

Translating Checkout

Translating Checkout

Learn to translate the checkout page

We'll cover the following...

Adding translation for order page

Now we’re entering the home stretch. The new order page is next:

Press + to interact
<section class="depot_form">
  <h1><%= t('.legend') %></h1>
  <%= render 'form', order: @order %>
</section>
<%= javascript_pack_tag("pay_type") %>

Here’s the form that’s used on this page:

Press + to interact
<%= form_with(model: order, local: true) do |form| %>
  <% if order.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(order.errors.count, "error") %>
      prohibited this order from being saved:</h2>
      <ul>
        <% order.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= form.label :name, t('.name') %>
    <%= form.text_field :name, size: 40 %>
  </div>
  <div class="field">
    <%= form.label :address, t('.address_html') %>
    <%= form.text_area :address, rows: 3, cols: 40 %>
  </div>
  <div class="field">
    <%= form.label :email, t('.email') %>
    <%= form.email_field :email, size: 40 %>
  </div>
  <div id='pay-type-component'></div>
  <div class="actions">
    <%= form.submit t('.submit') %>
  </div>
<% end %>

That covers the form elements that Rails is rendering, but what about the React-rendered payment details we added in Adding Fields Dynamically to a Form? Recall that, we had to create the HTML form elements inside React components, mimicking what Rails form helpers would do.

Since React is rendering our payment details components, not Rails, we need to make our translations available to React. This means they must be available in JavaScript. Happily, the i18n-js library will do just that.

This library will make a copy of our translations as a JavaScript object and provide an object called I18n that allows us to access them. Our React components will use that to provide localized strings for the dynamic form we created earlier. First, we’ll add it to our Gemfile:

Press + to interact
gem 'i18n-js'

Getting i18n-js to work requires a bit of configuration, so let’s do that ...