Cách thêm Chatbot AI Asyntai vào OpenCart

Hướng dẫn từng bước cho trang web OpenCart

Nền tảng:

Bước 1: Lấy Mã Nhúng của Bạn

Đầu tiên, đi đến Bảng điều khiển Asyntai và cuộn xuống phần "Mã Nhúng". Sao chép mã nhúng duy nhất của bạn sẽ trông như thế này:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Lưu ý: Mã ở trên chỉ là ví dụ. Bạn phải sao chép mã nhúng duy nhất của riêng mình từ Bảng điều khiển vì nó chứa ID tiện ích cá nhân của bạn.

Bước 2: Chỉnh sửa mẫu chân trang (Khuyến nghị)

Cách đơn giản nhất để thêm chatbot là chỉnh sửa mẫu chân trang của giao diện:

Truy cập các tệp OpenCart qua FTP hoặc trình quản lý tệp
Chuyển đến mẫu chân trang của giao diện:
- OpenCart 3.x/4.x: catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x: catalog/view/theme/YOUR_THEME/template/common/footer.tpl
Mở tệp chân trang để chỉnh sửa
Tìm thẻ đóng </body>
Dán mã nhúng Asyntai ngay trước thẻ </body>
Lưu tệp
Xóa bộ nhớ đệm OpenCart: Bảng điều khiển → Biểu tượng bánh răng xanh (góc trên bên phải) → Làm mới hoặc xóa nội dung của system/storage/cache/

Mẹo: Nếu bạn đang sử dụng giao diện mặc định, đường dẫn sẽ là catalog/view/theme/default/template/common/footer.twig. Luôn tạo bản sao lưu trước khi chỉnh sửa các tệp mẫu.

Thay thế: Sử dụng tùy chọn Mã tùy chỉnh của giao diện

Many modern OpenCart themes include a built-in option for custom code:

Đăng nhập vào Bảng quản trị OpenCart
Vào Tiện mở rộng → Giao diện (hoặc Tiện mở rộng → Tiện mở rộng → Giao diện)
Nhấp Chỉnh sửa trên giao diện đang hoạt động
Tìm phần "Mã tùy chỉnh", "Script chân trang", hoặc "JavaScript tùy chỉnh"
Dán mã nhúng Asyntai của bạn
Nhấp "Save"
Xóa bộ nhớ đệm

Lưu ý: Không phải tất cả giao diện đều có tùy chọn này. Nếu giao diện của bạn không có các trường mã tùy chỉnh, hãy sử dụng phương pháp chỉnh sửa mẫu hoặc cài đặt tiện mở rộng.

Thay thế: Sử dụng tiện mở rộng Mã tùy chỉnh

Bạn có thể cài đặt tiện mở rộng miễn phí từ OpenCart Marketplace để thêm script tùy chỉnh:

Vào OpenCart Marketplace
Tìm "Custom Script", "Header Footer Scripts", hoặc "Custom Code"
Tải và cài đặt tiện mở rộng phù hợp
Trong bảng quản trị, vào Tiện mở rộng → Tiện mở rộng → Module
Tìm và cài đặt module mã tùy chỉnh
Cấu hình module và dán mã nhúng Asyntai vào phần chân trang
Lưu và xóa bộ nhớ đệm

Quan trọng: Sử dụng tiện mở rộng được khuyến nghị hơn là chỉnh sửa các tệp lõi, vì chúng vẫn tồn tại sau khi cập nhật OpenCart. Các tiện mở rộng phổ biến bao gồm "Custom Script in Header & Footer" có sẵn trên marketplace.

Thay thế: Sử dụng phương thức addScript (Dành cho nhà phát triển)

Dành cho nhà phát triển, OpenCart 3.x/4.x cung cấp cách lập trình để thêm script:

Mở catalog/controller/common/footer.php
Thêm dòng sau trước $data['scripts'] = $this->document->getScripts('footer');:
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
Đối với thuộc tính data, bạn sẽ cần chỉnh sửa footer.twig để thêm thủ công, hoặc thêm JavaScript inline sau vòng lặp script

Lưu ý: Để tiện ích hoạt động đúng với thuộc tính data, phương pháp mẫu đơn giản hơn vì phương thức addScript không hỗ trợ thuộc tính tùy chỉnh trực tiếp.

Bước 3: Xác minh Cài đặt

Sau khi lưu các thay đổi và xóa bộ nhớ đệm, hãy truy cập cửa hàng trong tab trình duyệt mới hoặc cửa sổ ẩn danh. Bạn sẽ thấy nút tiện ích chat ở góc dưới bên phải. Nhấp vào để đảm bảo nó mở và hoạt động đúng.

Không thấy tiện ích? Hãy đảm bảo xóa bộ nhớ đệm OpenCart. Vào bảng quản trị, nhấp biểu tượng bánh răng xanh ở góc trên bên phải và nhấp các nút làm mới. Cũng thử xóa bộ nhớ đệm trình duyệt hoặc xem trong cửa sổ ẩn danh. Nếu bạn chỉnh sửa sai tệp mẫu, hãy kiểm tra xem giao diện có đang sử dụng tệp bạn đã chỉnh sửa không.