Как добавить ИИ-чат-бот Asyntai в 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. Добавьте код вставки Asyntai, расширив блок javascripts:
   {% 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. Создайте новый JavaScript-файл по пути assets/shop/js/asyntai-chatbot.js со следующим содержимым:
   (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. Нажмите на нее, чтобы убедиться, что она открывается и работает корректно