Hướng dẫn tuỳ biến đa ngôn ngữ trên giao diện Shopify

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Share vì hữu ích

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é.

Share vì hữu ích

About Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

View all posts by Khôi 'Pro' Nguyễn →

Trả lời