Nền tảng thương mại điện tử Shopify cung cấp tính năng đa ngôn ngữ giúp bạn tiếp cận nhiều khách hàng hơn. Bạn có biết cách sử dụng nó khi phát triển giao diện Shopify không?
Tài liệu hỗ trợ
Đầu tiên, bạn hãy xem qua Tài liệu hướng dẫn chính thức từ Shopify. Code Tốt sẽ cùng điểm qua các thông tin giúp bạn đọc hiểu dễ hơn.
Ngoài ra, một tài liệu khác cũng khá quan trọng nếu bạn quan tâm.
Cấu trúc thư mục
Khi bạn tải theme về máy của mình, thông thường cấu trúc sẽ có 1 thư mục locales
chứa file gốc en.default.json
để bạn có thể copy lại và dịch đa ngôn ngữ (ngó qua source của theme Timber trên Github bạn sẽ thấy).
Tất nhiên, nó sẽ có định dạng JSON, và bạn không mất quá lâu để làm quen đâu.
Hướng dẫn thực hiện cập nhật file en.default.json
Chuỗi dịch đơn giản trong Shopify
Nếu bạn có chuỗi string mới cần thêm vào thành 1 line bên trong cụm ngoặc {}
đầu tiên:
"for_farmers": { "hero": { "title": "For Farmers", "description": "One-third of American farmers are over retirement age; only 6% are under age 35." } }
Sau đó, trong templates hoặc snippets folder, bạn có thể sửa file .liquid bất kì và thêm đoạn này vào là có thể hiển thị ra nhé:
{{ 'for_farmers.hero.title' | t }} {{ 'for_farmers.hero.description' | t }}
Chuỗi dịch chứa các giá trị tuỳ biến
Ngoài ra, bạn cũng lưu ý trường hợp dịch cả một cụm từ chứa các dữ liệu dynamic, ví dụ:
"blogs": { "article": { "author_on_date_html": "Posted by {{ author }} on {{ date }}" } }
Ta sẽ cần update trong file liquid như sau:
{{ 'blogs.article.author_on_date_html' | t: author: article.author, date: article.published_at }}
Tức là cú pháp sẽ bao gồm:
{{ string_name | t: (giải thích lần lượt từng giá trị sẽ được gán biến gì)}}
Chuỗi dịch cần format trước khi hiển thị
Nhưng sẽ có trường hợp bạn cần format trước khi apply giá trị, tức là bạn tạo 1 giá trị mới tên là date
để gán nó vào:
{% capture new_date_value %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %} {{ 'blogs.article.author_on_date_html' | t: author: article.author, date: new_date_value }}
Bạn thấy không, Shopify không quá khó phải không nào.
Khi nào bạn nên dịch các đoạn string trong giao diện Shopify?
Thường những đoạn text hard-core, nôm na nó là cụm từ không cần thay đổi và cố định, chẳng hạn như đoạn text “Top Posts” hay “Latest Posts” hay “Popular Products”.
Tránh: Tách chuỗi quá nhỏ và rời rạc
Mà như ta thấy trường hợp số 3 thì ta không cần tách thành các chuỗi quá nhỏ vì có thể gây khó khăn cho người dịch, ví dụ:
{ "blogs": { "posted_by": "Posted by", "on": "on" } }
Tạo file ngôn ngữ mới
Trong thư mục locales/
, bạn có thể copy file en.default.json thành file vi-VN.json
để dịch sang tiếng Việt.
Kết luận
Lập trình Shopify và cung cấp khả năng tự dịch sẵn có trong giao diện Shopify là cách rất chuyên nghiệp giúp những khách hàng sử dụng giao diện có thể tự đóng gói và phát hành bản dịch sang các ngôn ngữ khác, tránh việc sửa lỗi font unicode dẫn tới break giao diện. Bạn hãy lưu ý và làm theo guide hướng dẫn của Code Tốt để đảm bảo chất lượng nhé.

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.