Cách Thêm Chatbot AI Asyntai vào Bagisto

Hướng dẫn từng bước cho nền tảng thương mại điện tử Bagisto

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: Thêm vào Mẫu Bố cục Blade (Khuyến nghị)

Bagisto sử dụng mẫu Laravel Blade. Cách tiếp cận được khuyến nghị là thêm mã nhúng trực tiếp vào tệp bố cục cửa hàng:

Mở tệp bố cục cửa hàng:
- Nguồn gói: packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
- Phiên bản đã xuất bản: resources/views/vendor/shop/layouts/master.blade.php (nếu bạn đã xuất bản các view)
Tìm thẻ đóng </body>
Thêm mã nhúng ngay trước </body>, sau @stack('scripts'):

@stack('scripts')
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>

Mẹo: Nếu bạn đã xuất bản view vendor, hãy chỉnh sửa phiên bản đã xuất bản trong resources/views/vendor/shop/. Nếu không, hãy xuất bản chúng trước bằng php artisan vendor:publish --tag=shop-views để tránh mất thay đổi trong quá trình cập nhật gói.

Phương pháp Thay thế 1: Sử dụng @push('scripts') trong View

Trong bất kỳ view hoặc thành phần Blade nào, bạn có thể sử dụng ngăn xếp scripts để chèn tập lệnh chatbot:

@push('scripts')
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
@endpush

Lưu ý: Phương pháp này yêu cầu @stack('scripts') có mặt trong tệp bố cục chính. Nó được bao gồm mặc định trong bố cục của Bagisto.

Phương pháp Thay thế 2: Sử dụng Service Provider

Bạn có thể sử dụng service provider để cung cấp tập lệnh cho tất cả view theo chương trình. Tạo service provider tùy chỉnh hoặc sử dụng AppServiceProvider:

public function boot()
{
    view()->composer('shop::layouts.master', function ($view) {
        // The script will be available in the layout
    });
}

Hoặc tạo thành phần Blade hiển thị thẻ script và bao gồm nó trong bố cục của bạn.

Mẹo: Cách tiếp cận service provider hữu ích nếu bạn muốn tải chatbot có điều kiện dựa trên giá trị cấu hình hoặc cài đặt môi trường.

Phương pháp Thay thế 3: Sử dụng Hệ thống Sự kiện Bagisto

Bagisto kích hoạt sự kiện view tại các điểm khác nhau trong bố cục. Bạn có thể lắng nghe bagisto.shop.layout.body.after để chèn tập lệnh chatbot:

Event::listen('bagisto.shop.layout.body.after', function($viewRenderEventManager) {
    $viewRenderEventManager->addTemplate('shop::partials.asyntai-widget');
});

Sau đó tạo mẫu partial tại packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php (hoặc tương đương đã xuất bản) với mã nhúng của bạn:

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

Lưu ý: Cách tiếp cận hệ thống sự kiện giữ các thay đổi của bạn theo module và tách biệt khỏi tệp bố cục cốt lõi, giúp dễ quản lý hơn trong quá trình nâng cấp Bagisto.

Bước 3: Xóa Bộ nhớ đệm và Xác minh

Sau khi thêm mã nhúng, xóa bộ nhớ đệm ứng dụng để đảm bảo các thay đổi có hiệu lực:

php artisan cache:clear && php artisan view:clear

Truy cập cửa hàng Bagisto của bạn 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 trò chuyện ở góc dưới bên phải. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác.

Không thấy tiện ích? Đảm bảo bạn đã chạy cả php artisan cache:clear và php artisan view:clear. 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 trực tiếp nguồn gói, xác minh rằng không có view đã xuất bản nào ghi đè thay đổi của bạn. Kiểm tra mã nhúng được đặt đúng trước thẻ đóng </body>.