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

Rate this post

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

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...