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:

The Easy Way: Install the Asyntai Extension

We publish a free extension on the OpenCart Marketplace. It puts the chatbot on your storefront and connects your account, and there is no code to copy and no template to edit. It works on OpenCart 3.x and 4.x.

Download Asyntai - AI Chatbot from the OpenCart Marketplace
In your admin panel, go to Extensions → Installer and upload the ZIP file
Go to Extensions → Extensions, choose Modules in the list, find Asyntai AI Chatbot and press the green install button
Press edit, then press Connect to Asyntai. A window opens where you sign in or create an account.

That is all. The chatbot is live on your storefront when the window closes.

Your products, prices and stock

When you connect, the extension also lets Asyntai read your catalogue. Your assistant then answers with the price you charge today and tells shoppers what is in stock, instead of repeating whatever your pages said when they were last read.

Asyntai reads your products through a read-only address on your own store. Every request is signed, and the reply carries the prices a shopper would actually pay, with your tax rules already applied. You can switch this off at any time on the extension's settings screen.

Updating from version 1.0.0? OpenCart clears a module's settings when you uninstall it, so press Connect to Asyntai once after the update. From this version on, updates keep your connection.

Or Add the Code Yourself

Prefer not to install an extension? The rest of this page shows how to add the chatbot by hand. You will not get the catalogue reading this way.

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</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.

Step 2: Edit Footer Template

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

Nhiều giao diện OpenCart hiện đại có tùy chọn tích hợp sẵn để thêm mã tùy chỉnh:

Đă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:

Go to the 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.

Tài liệu