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

Nền tảng:

Sylius

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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:

Bước 2: Thêm vào mẫu bố cục Twig (Khuyến nghị)

Sylius được xây dựng trên Symfony và sử dụng công cụ tạo mẫu Twig. Cách tiếp cận được khuyến nghị là ghi đè mẫu bố cục cửa hàng để bao gồm chatbot trên tất cả các trang cửa hàng.

1. Trong dự án Sylius của bạn, điều hướng đến thư mục templates/bundles/SyliusShopBundle/ (tạo nó nếu chưa tồn tại)
2. Tạo hoặc chỉnh sửa tệp layout.html.twig để ghi đè bố cục cửa hàng mặc định
3. Nếu tệp đã tồn tại, hãy tìm {% block javascripts %} khối
4. Thêm mã nhúng Asyntai bằng cách mở rộng khối javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế từ bảng điều khiển
6. Lưu tệp

Phương pháp thay thế 1: Sử dụng Sự kiện mẫu Sylius

Sylius cung cấp một hệ thống sự kiện mẫu mạnh mẽ cho phép bạn chèn nội dung vào các phần cụ thể của bố cục mà không cần ghi đè toàn bộ mẫu. Bạn có thể sử dụng điều này để thêm widget chatbot vào khu vực chân trang.

1. Tạo một tệp mẫu mới tại templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig với nội dung sau:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Đăng ký sự kiện mẫu trong tệp cấu hình config/packages/sylius_ui.yaml của bạn:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn
4. Xóa bộ nhớ đệm Symfony (xem Bước 3 bên dưới)

Phương pháp thay thế 2: Sử dụng Webpack Encore

Nếu dự án Sylius của bạn sử dụng Webpack Encore để quản lý tài nguyên, bạn có thể tích hợp kịch bản chatbot thông qua quy trình xây dựng JavaScript của bạn.

1. Tạo một tệp JavaScript mới tại assets/shop/js/asyntai-chatbot.js với nội dung sau:
   (function() {
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    document.body.appendChild(script);
})();
2. Nhập tệp này trong điểm vào cửa hàng của bạn (ví dụ: assets/shop/entry.js hoặc assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Xây dựng lại tài nguyên của bạn bằng cách chạy:
   yarn encore dev

   Hoặc cho môi trường sản xuất:

   yarn encore production
4. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn

Phương pháp thay thế 3: Sử dụng Sonata Block Bundle

Nếu bản cài đặt Sylius của bạn sử dụng Sonata Block Bundle (bao gồm theo mặc định trong một số cấu hình Sylius), bạn có thể tạo một dịch vụ khối tùy chỉnh để hiển thị widget chatbot.

1. Tạo một lớp dịch vụ khối mới trong dự án của bạn, ví dụ src/Block/AsyntaiChatbotBlockService.php:
   <?php

namespace App\Block;

use Sonata\BlockBundle\Block\BlockContextInterface;
use Sonata\BlockBundle\Block\Service\AbstractBlockService;
use Symfony\Component\HttpFoundation\Response;

class AsyntaiChatbotBlockService extends AbstractBlockService
{
    public function execute(BlockContextInterface $blockContext, Response $response = null): Response
    {
        return $this->renderResponse('block/asyntai_chatbot.html.twig', [
            'block' => $blockContext->getBlock(),
        ], $response);
    }
}
2. Tạo mẫu khối tại templates/block/asyntai_chatbot.html.twig:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Đăng ký dịch vụ khối trong config/services.yaml của bạn:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Đặt khối trong ngữ cảnh chân trang thông qua trang quản trị Sonata hoặc bằng cách thêm nó vào cấu hình bố cục của bạn
5. Thay thế YOUR_WIDGET_ID bằng ID tiện ích thực tế của bạn

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

Sau khi thực hiện các thay đổi, bạn cần xóa bộ nhớ đệm Symfony và xác minh việc cài đặt:

1. Xóa bộ nhớ đệm Symfony bằng cách chạy lệnh sau từ thư mục gốc dự án của bạn:
   bin/console cache:clear
2. Nếu bạn đang ở môi trường sản xuất, hãy khởi động bộ nhớ đệm:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Truy cập cửa hàng Sylius của bạn trong một tab trình duyệt mới hoặc cửa sổ ẩn danh
4. Bạn sẽ thấy nút tiện ích trò chuyện ở góc dưới bên phải
5. Nhấp vào nó để đảm bảo nó mở và hoạt động chính xác