Hướng dẫn tạo website hai ngôn ngữ

Đăng bởi Nguyen Thanh Tung

Bài viết ngày hôm nay mình sẽ hướng dẫn cho các bạn các tạo ra một website hai ngôn ngữ một cách đơn giản và nhanh chóng.

Bước 1: Hoàn thiện website tiếng Việt.
Ở bươc này đòi hỏi các bạn phải có một trang tiếng Việt hoàn chỉnh từ giao diện đến phần setting.

Bước 2: Xây dựng giao diện website.
Đầu tiên ở phần Layouts các bạn tạo thêm một layout mới, tên thì các bạn đặt sao để các bạn dể phân biệt là được ở ví dụ này thì mình đặt tên là en.liquid 


Hình 1: Minh họa các đặt tên layout.

Tiếp theo các bạn vào file en.liquid vừa tạo các bạn chuyển đổi các phần hiển thị tiếng Việt thành tiếng Anh.
Tương tự đối với phần Giao diện và phần Snippets, những phần cần hiển thị bên trang tiếng Anh các bạn đều tạo thêm 1 file tương tự rồi sau đó điều chỉnh lại sao cho hợp lý, ở ví dụ này các file hiển thị trên trang tiếng Anh mình sẽ thêm "en" vào sau tên mỗi file.


Hình 2: Minh họa các đặt tên các phần còn lại.


Một lưu ý ở phần này trong phần Giao diện những giao diện nào mà các bạn muốn hiển thị bên trang tiếng Anh bắt buộc các bạn phải thêm phần "{% layout 'en' %}", đây là phần Layout các bạn đã tạo ở trên.

Hình 3: Minh họa thêm phần layout.


Để thực hiện website hai ngôn ngữ các bạn cần chú ý hai lưu ý sau đây.
Trước tiên các bạn cần phải apply theme hiện tại lên làm theme chính vì chỉ có theme chính mới có thể thay đổi được trang product và trang collection. 
Đối với trang collection các bạn muốn hiển thị collection nào ở bên trang tiếng Anh thì bước tạo collection các bạn phải chọn lại collection ở cuối trang.

Hình 4: Minh họa tạo collection.


Tương tự đối với trang product. 

Hình 5: Minh họa tạo product.


Các bạn cần lưu ý ở file setting các bạn cũng phải tạo setting riêng cho trang tiếng Anh, để nội dung hiển thị ở hai bên không bị trùng lặp hoặc bị sai khi khách hàng thay đổi dữ liệu.

Hình 6: Minh họa tạo settings.


Như vậy là đã xong, việc còn lại của các bạn là tạo ra một link để có thể link đến trang tiếng Anh. 
Lưu ý để xem được trang tiếng Anh các bạn phải thêm đoạn "?view=en" vào cuối link trang tiếng Việt. Với 'en' là tên layout các bạn đã tạo ở bước 1.
Chúc các bạn thành công!...
Link demo:  http://timtay.myharavan.com/?view=en

Bạn là lập trình viên? Gia nhập gia đình haravan Chi tiết ›