Hướng dẫn sử dụng Ae Review Pro trên Sapo

Hướng dẫn cấu hình ứng dụng Ae Review Pro để hiển thị đánh giá sản phẩm trên website của bạn.

Kích hoạt và chọn Theme

Bước 1: Kích hoạt Theme

1. Truy cập vào App Admin → Thiết kế
2. Chọn Mẫu thiết kế mong muốn từ danh sách có sẵn
3. Bật trạng thái Kích hoạt ở góc phải màn hình
4. Nhấn Lưu để áp dụng

Lưu ý quan trọng

Chỉ có một theme được kích hoạt tại một thời điểm. Khi bạn kích hoạt theme mới, theme cũ sẽ tự động bị vô hiệu hóa.

Bước 2: Xem trước Theme

Trước khi áp dụng, bạn có thể:

• Chuyển sang tab Preview để xem trước giao diện
• Kiểm tra cách hiển thị trên các thiết bị khác nhau
• Đảm bảo theme phù hợp với website của bạn

Trang kích hoạt theme

Cấu hình Nội dung (Content)

Sau khi chọn theme, bạn có thể tùy chỉnh các nội dung hiển thị:

Nội dung văn bản (Text)

Truy cập Thiết kế → Nội dung để chỉnh sửa:

Ghi chú

Sử dụng ngôn ngữ thân thiện và rõ ràng để khuyến khích người dùng để lại đánh giá.

Trang cấu hình nội dung

Cấu hình Màu sắc (Colors)

Truy cập cấu hình màu

1. Vào Thiết kế → Màu sắc
2. Nhấn nút Reset mẫu mặc định nếu muốn quay lại màu gốc

Các màu có thể tùy chỉnh

Theme hỗ trợ tùy chỉnh màu cho theme. Ví dụ:

--aer-primary (Màu chính)

• Mặc định: rgba(128, 187, 53, 1) (xanh lá)
• Công dụng: Màu nút "Gửi đánh giá", màu sao đánh giá, các element nhấn mạnh
• Ví dụ tùy chỉnh:
  • Xanh dương: rgba(37, 99, 235, 1)
  • Đỏ: rgba(239, 68, 68, 1)
  • Cam: rgba(249, 115, 22, 1)

Color Picker

Ứng dụng cung cấp color picker trực quan:

• Chọn màu từ bảng màu gradient
• Điều chỉnh độ sáng/tối bằng slider dọc
• Tự động convert sang định dạng rgba()

Trang cấu hình màu sắc

Lưu ý khi chọn màu

Đảm bảo độ tương phản

• Màu chính và màu chữ phải có độ tương phản đủ cao (tối thiểu 4.5:1)
• Test màu trên cả nền sáng và nền tối
• Kiểm tra khả năng đọc trên mobile

Gợi ý phối màu

• Màu chính đậm → Sử dụng cho CTA, highlight
• Màu chính nhạt (alpha 0.1-0.15) → Background hover, chip, badge
• Màu viền nhẹ → Border input, card để tạo cảm giác tinh tế

Custom Code (Nâng cao)

Dành cho người dùng có kiến thức CSS/JavaScript muốn tùy chỉnh sâu hơn.

Trang cấu hình custom code

Custom CSS

Vào Thiết kế → Custom code → Custom CSS

Ví dụ 1: Làm đậm điểm đánh giá

.aer-rating-value {
	font-weight: bold !important;
}

Ví dụ 2: Thay đổi style nút "Gửi đánh giá mới"

.aer-btn-new-review {
	font-style: italic;
	border-radius: 8px;
	padding: 12px 24px;
}

Ví dụ 3: Tùy chỉnh card đánh giá

.aer-review-card {
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.2s ease;
}

.aer-review-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

Ví dụ 4: Thay đổi màu sao đánh giá

.aer-star-filled {
	color: #fbbf24 !important; /* Màu vàng */
}

.aer-star-empty {
	color: #d1d5db !important; /* Màu xám */
}

Custom JavaScript

Vào Thiết kế → Custom code → Custom JS

Chỉ dành cho người có kinh nghiệm

Custom JavaScript có thể ảnh hưởng đến hoạt động của ứng dụng. Hãy test kỹ trước khi áp dụng trên production.

Ví dụ 1: Log sự kiện khi người dùng submit review

window.addEventListener("aer:review:submit", function (event) {
	console.log("Review submitted:", event.detail);

	// Tích hợp với analytics
	gtag("event", "review_submit", {
		product_id: event.detail.productId,
		rating: event.detail.rating,
	});
});

Ví dụ 2: Thêm animation khi load review

document.addEventListener("DOMContentLoaded", function () {
	const reviews = document.querySelectorAll(".aer-review-card");

	reviews.forEach((review, index) => {
		review.style.opacity = "0";
		review.style.transform = "translateY(20px)";

		setTimeout(() => {
			review.style.transition = "all 0.5s ease";
			review.style.opacity = "1";
			review.style.transform = "translateY(0)";
		}, index * 100);
	});
});

Ví dụ 3: Tự động focus vào form khi click "Viết đánh giá"

const reviewButton = document.querySelector(".aer-btn-new-review");
const reviewForm = document.querySelector(".aer-review-form");

if (reviewButton && reviewForm) {
	reviewButton.addEventListener("click", function () {
		setTimeout(() => {
			const firstInput = reviewForm.querySelector("input, textarea");
			if (firstInput) firstInput.focus();
		}, 300);
	});
}

Ví dụ 4: Validation tùy chỉnh

window.aerCustomValidation = function (formData) {
	// Kiểm tra email domain
	const email = formData.email;
	const blockedDomains = ["tempmail.com", "guerrillamail.com"];

	const domain = email.split("@")[1];
	if (blockedDomains.includes(domain)) {
		alert("Vui lòng sử dụng email thật để gửi đánh giá");
		return false;
	}

	// Kiểm tra độ dài nội dung
	if (formData.content.length < 20) {
		alert("Vui lòng viết đánh giá chi tiết hơn (tối thiểu 20 ký tự)");
		return false;
	}

	return true;
};

JavaScript Events

Ứng dụng trigger các custom events mà bạn có thể listen:

Event	Khi nào trigger	Data
aer:review:submit	Khi submit đánh giá thành công	{productId, rating, content}
aer:review:loaded	Khi load xong danh sách đánh giá	{reviews, total}
aer:form:open	Khi mở form viết đánh giá	{productId}
aer:form:close	Khi đóng form	-

Best Practices

Về thiết kế

1. Giữ màu sắc đồng nhất với brand identity của bạn
2. Test trên nhiều thiết bị (desktop, tablet, mobile)
3. Đảm bảo accessibility: độ tương phản, font size hợp lý
4. Sử dụng màu nhẹ nhàng cho background, màu nổi bật cho CTA

Về custom code

1. Luôn test trên staging trước khi áp dụng production
2. Comment code để dễ maintain sau này
3. Sử dụng !important một cách tiết kiệm trong CSS
4. Tránh override quá nhiều style mặc định
5. Backup code trước khi thay đổi lớn

Về performance

1. Hạn chế JavaScript phức tạp có thể làm chậm trang
2. Tối ưu CSS selector (tránh selector quá sâu)
3. Lazy load hình ảnh đánh giá nếu có nhiều review
4. Minify code trước khi deploy nếu code dài

Khắc phục sự cố

Theme không hiển thị sau khi kích hoạt

• Xóa cache trình duyệt
• Kiểm tra theme đã được Lưu chưa
• Đảm bảo không có theme nào khác đang active

Màu sắc không thay đổi

• Kiểm tra định dạng rgba() có đúng không
• Clear cache và hard refresh (Ctrl + Shift + R)
• Kiểm tra custom CSS có override màu không

Custom code không hoạt động

• Mở Console (F12) kiểm tra lỗi JavaScript
• Validate CSS syntax tại CSS Validator
• Đảm bảo selector CSS chính xác
• Kiểm tra thứ tự load của script

---

Nếu cần hỗ trợ thêm về cấu hình theme, vui lòng liên hệ support@aecomtech.vn