Ae multilanguage - Aecomapp.com - Ứng dụng trên nền tảng Sapo

Giới thiệu về aecomapp

Chúng tôi rất vui và cảm ơn đã tin tưởng sử dụng ứng dụng Ae Đa ngôn ngữ hỗ trợ kinh doanh của bạn!

Aecomapp - Với những thành viên nhiều kinh nghiệm phát triển website Thương mại điện tử, mục tiêu tạo ra những ứng dụng hỗ trợ cho kinh doanh online trên web đạt hiệu quả cao nhất.

Aecomapp sẽ thực hiện hóa, biến những ý tưởng kinh doanh của bạn thành hiện thực! Bạn có vấn đề khó khăn cần hỗ trợ tư vấn, gửi liên lạc cho chúng tôi biết, chúng tôi sẽ hỗ trợ hoặc đưa bạn những đề xuất giúp bạn giải quyết vấn đề. Ngoài ra, bạn có thể tìm thấy nhiều ứng dụng Sapo tốt khác hỗ trợ trên aecomapp.com: Quản lý order, Quản lý bán sỉ, Đăng nhập Facebook, ... hỗ trợ trên nền tảng Sapo

Giới thiệu về ứng dụng Ae Đa ngôn ngữ

Ngày tạo: 12/06/2016
Cập nhật: 30/10/2016
Phát triển: aecomapp.com
Email: support@aecomapp.com

Ae đa ngôn ngữ là ứng dụng hỗ trợ dịch tất cả văn bản hiển thị trên website của bạn sang các ngôn ngữ khác trêntrên nền tảng Sapo. Không giới hạn số lượng theme, không giới hạn số lượng ngôn ngữ. Công cụ hỗ trợ mạnh mẽ, trực quan không đòi hỏi bạn phải biết lập trình. Giúp website của bạn tiếp cận được với khách hàng nước ngoài dễ dàng trên ngôn ngữ của họ, tăng doanh thu với ứng dụng này.

I- Cài đặt

1. Cài ứng dụng vào shop của bạn

Các bước thực hiện:
Bước 1: Sử dụng link này chuyển tới màn hình đăng nhập
Bước 2: Nhập tên shop của bạn.
Ví dụ tên shop của bạn trên thanh địa chỉ là: http://myshop.mysapo.net/ . Chỉ cần nhập "myshop"
Bước 3: Click button Login.
Bước 4: Đăng nhập và xác nhập cấp quyền sử dụng cho app.
+ Trường hợp bạn chưa đăng nhập vào Admin của Shop, sau bước 3 sẽ chuyển tới màn hình dăng nhập vào admin shop: + Sau khi đăng nhập xong sẽ chuyển tới màn hình xác nhập cung cấp quyền cho app: + Click button "Cài đặt" để hoàn tất việc cấp quyền cho ứng dụng và chuyển sang màn hình quản trị mặc định của app.

2. Cài đặt Ngôn ngữ

Cài đặt ngôn ngữ, phần này sẽ cung cấp các chức năng sau
2.1 Thêm mới ngôn ngữ:
Bước 1: Click vào button "thêm ngôn ngữ".
Bước 2: Click chọn ngôn ngữ bạn muốn thêm cho shop.
2.2 Sắp xếp thứ tự hiển thị ngôn ngữ:
Bước 1: Click chuột trái và di chuyển chuột lên - xuống để thay đổi thứ tự ngôn ngữ.
Bước 2: Click vào button "lưu thứ tự sắp xếp". 2.3 Đặt ngôn ngữ mặc định:
Bạn chỉ cần Click vào ô "mặc định" của ngôn ngữ mình chọn là ok.
2.4 Click vào button "ĐỒNG BỘ" để lưu và đồng bộ các cấu hình lên shop của bạn.

3. Thiết lập vị trí

Bước 1: Click chuột trái vào ô chọn vị trí.
Bước 2: Giữ chuột trái và di chuyển tới vùng chọn mà bạn muốn đặt vị trí.
+ Nhấp bỏ chuột hệ thống sẽ tự động lưu và đồng bộ vào trang.

II- Cách dịch ngôn ngữ

1. Dịch sản phẩm

Các bước thực hiện:
Bước 1: Click vào ô mục "Sản phẩm".
Bước 2: Sửa tên sản phẩm bằng ngôn ngữ mà bạn đã chọn.
+ Click vào ô "save" để lưu lại.
+ Click vào ô "Xem" để kiểm tra.
Bước 3: Kiểm tra xem ngôn ngữ đúng như thiết lập.
+ Kiểm tra danh mục sản phẩm đúng với thiết lập.

2. Dịch Bộ sưu tập

Các bước thực hiện:
Bước 1: Click vào ô mục "Bộ sưu tập".
Bước 2: Xuất hiện khung nội dung cần chỉnh sửa.
+ Click vào từng mục để chỉnh sửa.
Bước 3:Chuyển sang ngôn ngữ mà bạn đã chọn.
+ Sau khi thiết lập xong bạn nhấn vào "save" để lưu lại.

3. Dịch Trang nội dung

Thực hiện như sau:
Bước 1: Click vào ô "Trang nội dung".

Bước 2: Thiết lập nội dung.
+ Lưu và kiểm tra.

4. Dịch Danh mục blog

Các bước như sau:
Bước 1: Click vào ô "Danh mục Blog".

Bước 2: Chỉnh sửa ngôn ngữ.
+ Lưu và kiểm tra.

5. Dịch Bài viết

Thực hiện như sau:
Bước 1: Click vào ô "Blog".
Bước 2: Chỉnh sửa ngôn ngữ.
+ Lưu và kiểm tra.

6. Dịch Văn bản tĩnh

+ Phần này sẽ dịch tất cả các văn bản còn lại.
+ Các bước thực hiện:
6.1 Trường hợp 1: Dịch văn bản tự động và dịch giống hoàn toàn.
Bước 1: Click vào link tổng hợp.
+ Mở ra cửa sổ giao diện shop ở chế độ tìm tự động văn bản text.
+ Click vào nội dung cần dịch.
+ Chuột phải vào nội dung cần chọn.
Sau khi click sẽ xuất hiện khung nội dung để bạn dịch.
+ Khi dịch bạn chú ý có 2 kiểu dịch:
- Kiểu 1: Dịch đúng hoàn toàn: Xem ví dụ dưới đây.
+ Chuột phải vào nội dung, xuất hiện mục nội dung cần dịch.
+ Dịch xong lưu lại và kiểm tra.
- Kiểu 2: Dịch gần đúng: xem ví dụ dưới đây.
+ Click và chuột phải vào text sẽ xuất hiện nội dung cần dịch.
+ Sau khi thiết lập lưu lại và kiểm tra.
+ Với văn bản không lấy tự động được thì bạn chọn vào mục "Nhập mới".
+ Thiết lập ngôn ngữ như các nội dung khác.
+ Lưu và kiểm tra.
+ Nếu các bạn muốn chỉnh sửa các nội dung mà mình đã tạo thì làm như sau:
+ Đây là hình ảnh các văn bản tĩnh đã được dịch thành công.

III- Tùy chỉnh css

Phần này dành riêng cho các bạn biết lập trình.

Bước 1: Bạn click chuột vào menu bên trái "Tùy chỉnh css".
Bước 2: Viết code mà bạn muốn chỉnh sửa.
Bước 3: Click button Save (không cần click button Đồng bộ, app sẽ tự động đồng bộ).

Sau khi Save kết thúc, thấy được các phần thay đổi ở shop của bạn.

IV- Một số trường hợp nâng cáo khác

(Phần này dành riêng cho bạn biết lập trình.)

1. Dịch cho phần màn hình Popup - quickview

Ví dụ mặc định quickview hiện thị ở tiếng Việt, cần dịch sang ngôn ngữ khác, có 2 thông tin dịch:
1- Các text tĩnh -> lấy theo selector #1 2- Tên và mô tả sản phẩm -> lấy theo selector #2

Chi tiết trong ảnh:

Kết quả:

Cách thực hiện:
Thêm mới function sau vào trong javascript code của trang sử dụng popup quickview:
Function này sẽ gọi api về Aecomapp lấy thông tin sản phẩm theo ngôn ngữ hiện tại, trong đó:
+ {product}: là object product trong theme VD url sẽ là: https://aelang.aecomapp.com/fronts/getProduct?p=31987241&l=us&shop={tên shop}.mysapo.net

function getTranProduct(product) {
	$.ajax({
		url: "https://aelang.aecomapp.com/fronts/getProduct?p=" + product.id + "&l=" + currentLang + "&shop=" + Bizweb.store,
		type: "GET",
		success: function(response) {
			// Thay đổi tên và title sản phẩm trong link
			$("#quick-view-product .qwp-name>a").html(response[product.id].name);
			$("#quick-view-product .qwp-name>a").attr("title", response[product.id].name);

			// Thay đổi mô tả sản phẩm
			$("#quick-view-product .product-description>div").html(response[product.id].content);
		}
	});
}

Copy đoạn code sau thêm vào cuối cùng của function gọi Quickview:

Bizweb.getProduct(producthandle,function(product) {
	// Code setup quickiew
	// 



	// Copy vào cuối:
	Aecomapp.tran(".quick-view-product *");
	getTranProduct(product);

});

Chi tiết:

Ví dụ mặc định popup-cart hiện thị ở tiếng Việt, cần dịch sang ngôn ngữ khác, tương tự có 2 thông tin dịch:
1- Các text tĩnh 2- Tên và mô tả sản phẩm các sản phẩm trong cart

Cách thực hiện:
1- Phần dịch text tĩnh, copy đặt vào trong function gọi

Aecomapp.tran(".top-cart-content *");

Thêm vào cuối function:

2- Gọi ajax lấy bản dịch cho 1 hoặc tất cả id có trong cart:

// Gọi function này ở cuối function trong phần trên, sau khi render popup cart thành công
Aecomapp.getTranProductCart = function(cart) {
	if (cart) {
		let listId = "";
		let sep = "";

		for (const [key, item] of Object.entries(cart.items)) {
			listId += sep + item.product_id;
			sep = ",";
		}

		$.ajax({
			url: "https://aelang.aecomapp.com/fronts/getProduct?p=" + listId + "&l=" + currentLang + "&shop=" + Bizweb.store,
			type: "GET",
			dataType:"Json",
			success: function(response) {
				// Duyệt, thay thế title và content của sản phẩm theo id
				for (const [key, item] of Object.entries(response)) {
					$("[data-ae=" + key + "]").text(item.name);
					$("[data-ae=" + key + "]").attr("title", item.name);
				}
			}
		});
	}
}

Kết quả của api trả về:

Copy function vào cuối function render cart:

Aecomapp.getTranProductCart(cart);

V- Dịch trang thanh toán

Ngôn ngữ ở tranh thanh toán sẽ hiển thị như ngôn ngữ Khách hàng đã chọn khi vào website, ví dụ hiển thị tiếng Anh
Các bước thực hiện:
Bước 1: Đăng nhập vào app Đa ngôn ngữ, click vào menu "Trang thanh toán"
Ở trang này lần đầu tiên vào sẽ dịch sẵn 2 ngôn ngữ: tiếng Anh và tiếng Việt; bạn có thể double click lên từng văn bản để sửa hoặc click button "Tạo mới" để dịch thêm các từ mới

Bước 2: Thêm code cài đặt vào trang checkout:
Click button "Cài đặt"
Copy code và chuyển sang admin shop của bạn, vào phần cấu hình Thêm code vào phần "Nội dung chân trang thanh toán" hoàn tất cài đặt

Sau bước này bạn trang checkout ngoài website của bạn đã sẵn sàng hiển thị đúng ngôn ngữ.
Trang thanh toán bây giờ không còn rào cản về ngôn ngữ. Khách hàng sẽ dễ dàng sử dụng theo ngôn ngữ tốt nhất!

Liên hệ

Cám ơn đã đọc tài liệu này!

Theo dõi chúng tôi trên trang facebook để biết được tin tức và cập nhập mới nhất!
Nếu bạn có bất kỳ câu hỏi hay cần hỗ trợ gì, đừng ngại liên hệ với chúng tôi.

Website: https://www.aecomapp.com
Facebook: https://www.facebook.com/aecomapp/
Email: support@aecomapp.com
Phone: (+84) 0911-359-966
Skype: nguyentu_v

Hoặc nhập vào mẫu form dưới đây:

Mục lục

[Tutorial] Tài liệu hướng dẫn sử dụng ứng dụng Ae Đa ngôn ngữ - Sapo