Trong phần này chúng ta sẽ “dịch” một số chuỗi ra ngôn ngữ tiếng Việt.
Bây giờ chúng ta sửa lại file layout chính như sau:
<!DOCTYPE html>
<html>
<head>
<title>Books Store</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body id="store">
<div id="banner">
<%= image_tag("logo.png") %>
<%= @page_title || t('.title') %>
</div>
<div id="columns">
<div id="side">
<div id="cart">
<%= hide_cart_if(current_cart.line_items.empty?, :id => "cart") do %>
<%= render current_cart %>
<% end %>
</div>
<a href="#"><%= t('.home') %></a><br />
<a href="#"><%= t('.faq') %></a><br />
<a href="#"><%= t('.news') %></a><br />
<a href="#"><%= t('.contact') %></a><br />
<% if session[:user_id] %>
<br/>
<%= link_to 'Orders', '/orders' %><br />
<%= link_to 'Products', '/products' %><br />
<%= link_to 'Users', '/users' %><br />
<%= button_to 'Logout', '/logout', :method => :delete %>
<br/>
<% else %>
<br/>
<%= link_to 'Log In', login_path %><br />
<% end %>
</div>
<div id="main">
<%= yield %>
</div>
</div>
</body>
</html>
Ở đây chúng ta gọi hàm t() thay vì ghi các chuỗi cụ thể ra luôn. Hàm t() là hàm của module i18n, đây là tên viết tắt của hàm translate(), hàm này nhận vào tên khóa và lấy giá trị tương ứng trong file .yml ra để hiển thị.
Bây giờ chúng ta phải tạo các khóa đó, chúng ta có thể đặt các file .yml trong cùng thư mục với từng View, tức là các thư mục views/admin, views/carts…v.v hoặc đặt trong thư mục mặc định của Rails là config/locales, ở đây chúng ta sẽ dùng thư mục mặc định cho dễ tìm, chúng ta sửa lại file en.yml trong thư mục config/locales như sau:
en:
layouts:
application:
home: "Home"
title: "Books Store"
faq: "FAQ"
news: "News"
contact: "Contact"
Chúng ta phải khai báo khóa layout: và application: rồi mới tới các khóa kia.
Lưu ý là chúng ta dùng 2 kí tự cách để thụt đầu dòng chứ không dùng dấu Tab. Đây là cú pháp của ngôn ngữ YAML (.yml).
Với tiếng Việt thì chúng ta cũng làm tương tự là tạo file vi.yml trong thư mục config/locales như sau:
vi:
layouts:
application:
home: "Trang chủ"
title: "Books Store"
faq: "Hỏi đáp"
news: "Tin tức"
contact: "Liên hệ"
Bây giờ chúng ta có thể dùng URL http://localhost:3000/vi được rồi.
Bây giờ chúng ta sẽ “dịch” trang store/index và trang hiển thị giỏ hàng. Đầu tiên chúng ta định nghĩa các đoạn text như sau:
English:
en:
layouts:
application:
home: "Home"
title: "Books Store"
faq: "FAQ"
news: "News"
contact: "Contact"
store:
index:
title: "Products List"
add: "Add to Cart"
carts:
cart:
title: "Your cart"
empty_cart: "Empty cart"
checkout: "Checkout"
Tiếng Việt:
vi:
layouts:
application:
home: "Trang chủ"
title: "Books Store"
faq: "Hỏi đáp"
news: "Tin tức"
contact: "Liên hệ"
store:
index:
title: "Sản phẩm"
add: "Thêm vào giỏ hàng"
carts:
cart:
title: "Giỏ hàng"
empty_cart: "Xóa giỏ hàng"
checkout: "Thanh toán"
Tiếp theo chúng ta sửa file view index.html.erb trong thư mục app/views/store như sau:
<% if notice %>
<p id="notice"><%= notice %></p>
<% end %>
<h1><%= t('.title') %></h1>
<% @products.each do |product| %>
<div class="entry">
<%= image_tag(product.image_url) %>
<h3><%= product.title %></h3>
<%= sanitize(product.description) %>
<div class="price_line">
<span class="price"><%= number_to_currency(product.price) %></span>
<%= button_to t('.add'), line_items_path(:product_id => product),
:remote => true %>
</div>
</div>
<% end %>
Kế tiếp là file _cart.html.erb trong thư mục app/views/carts:
<h2><%= t('.title') %></h2>
<table>
<%= render cart.line_items %>
<tr class="total_line">
<td colspan="2">Total</td>
<td class="total_cell"><%= number_to_currency(cart.total_price) %></td>
</tr>
</table>
<%= button_to t('.checkout'), new_order_path, :method => :get %><br>
<%= button_to t('.empty_cart'),
cart,
:method => :delete,
data: {:confirm => 'Are you sure?' } %>
Bây giờ chúng ta sẽ “dịch” chuỗi hiển thị tiền từ USD sang VNĐ. Ở đây chúng ta chỉ hiển thị cho khác đi thôi chứ không chuyển đổi tỉ giá. Nếu muốn bạn có thể tự chuyển.
Để chuyển đổi tiền tệ thì chúng ta khai báo trong file .yml như sau:
English:
en:
.
.
.
number:
currency:
format:
unit: "$"
precision: 2
separator: "."
delimiter: ","
format: "%u%n"
Một số lưu ý như format là %u%n, thì trong đó %u là hiển thị kí tự tiền tệ, %n là số tiền, precision là số lượng chữ số sau phần thập phân, separator là kí tự ngăn cách giữa phần thập phân và phần đơn vị, delimiter là kí tự ngăn cách phần ngàn.
Tiếng Việt:
vi:
.
.
.
number:
currency:
format:
unit: đồng
precision: 3
separator: ","
delimiter: "."
format: "%n %u"
Hàm number_to_currency() sẽ tự động tìm các giá trị trong file .yml để hiển thị cho đúng.
