如何将 Asyntai AI 聊天机器人添加到 Sylius

平台：

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

步骤1：获取您的嵌入代码

首先，前往您的 Asyntai 仪表板并向下滚动到"嵌入代码"部分。复制您的专属嵌入代码，格式如下：

第 2 步：添加到 Twig 布局模板（推荐）

Sylius 基于 Symfony 构建，使用 Twig 模板引擎。推荐的方法是覆盖商店布局模板，以在所有店面页面上包含聊天机器人。

1. 在您的 Sylius 项目中，导航到 templates/bundles/SyliusShopBundle/ 目录（如果不存在则创建）
2. 创建或编辑文件 layout.html.twig 以覆盖默认的商店布局
3. 如果文件已存在，找到 {% block javascripts %} 代码块
4. 通过扩展 javascripts 代码块添加 Asyntai 嵌入代码：
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. 将 YOUR_WIDGET_ID 替换为仪表板中的实际小部件 ID
6. 保存文件

替代方法 1：使用 Sylius 模板事件

Sylius 提供了强大的模板事件系统，允许您在不覆盖整个模板的情况下将内容注入到布局的特定部分。您可以使用此功能将聊天机器人小部件添加到页脚区域。

1. 在 templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig 创建新模板文件，内容如下：
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. 在 config/packages/sylius_ui.yaml 配置文件中注册模板事件：
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID
4. 清除 Symfony 缓存（见下方第 3 步）

替代方法 2：使用 Webpack Encore

如果您的 Sylius 项目使用 Webpack Encore 进行资源管理，您可以通过 JavaScript 构建管道集成聊天机器人脚本。

1. 在 assets/shop/js/asyntai-chatbot.js 创建新的 JavaScript 文件，内容如下：
   (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. 在商店入口点文件中导入此文件（例如 assets/shop/entry.js 或 assets/shop/js/app.js）：
   import './js/asyntai-chatbot';
3. 运行以下命令重新构建资源：
   yarn encore dev

   或用于生产环境：

   yarn encore production
4. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID

替代方法 3：使用 Sonata Block Bundle

如果您的 Sylius 安装使用 Sonata Block Bundle（在某些 Sylius 配置中默认包含），您可以创建自定义块服务来渲染聊天机器人小部件。

1. 在项目中创建新的块服务类，例如 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. 在 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. 在 config/services.yaml 中注册块服务：
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. 通过 Sonata 管理后台或将其添加到布局配置中，将块放置在页脚上下文中
5. 将 YOUR_WIDGET_ID 替换为您的实际小部件 ID

步骤3：清除缓存并验证

完成更改后，您需要清除 Symfony 缓存并验证安装：

1. 从项目根目录运行以下命令清除 Symfony 缓存：
   bin/console cache:clear
2. 如果在生产环境中，还需预热缓存：
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. 在新的浏览器标签页或无痕窗口中访问您的 Sylius 店面
4. 您应该在右下角看到聊天小部件按钮
5. 点击它以确保其正常打开和运行