Як додати AI чат-бот 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: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

Крок 2: Додати до шаблону макета Twig (Рекомендовано)

Sylius побудований на Symfony та використовує шаблонізатор Twig. Рекомендований підхід - перевизначити шаблон макета магазину, щоб включити чат-бот на всі сторінки вітрини.

1. У вашому проекті Sylius перейдіть до директорії templates/bundles/SyliusShopBundle/ (створіть її, якщо вона не існує)
2. Створіть або відредагуйте файл layout.html.twig, щоб перевизначити макет магазину за замовчуванням
3. Якщо файл вже існує, знайдіть {% block javascripts %} блок
4. Додайте код вбудовування Asyntai, розширивши блок javascripts:
   {% block javascripts %} {{ parent() }} <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> {% endblock %}
5. Замiнiть YOUR_WIDGET_ID на фактичний ID вiджету з панелi керування
6. Збережіть файл

Альтернативний метод 1: Використання подій шаблонів Sylius

Sylius надає потужну систему подій шаблонів, яка дозволяє вставляти контент у певні частини макета без перевизначення цілих шаблонів. Ви можете використовувати це для додавання віджета чат-бота в область футера.

1. Створіть новий файл шаблону за адресою templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig з наступним вмістом:
   <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>
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

   Або для production:

   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>(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>
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. Якщо ви в середовищі production, також прогрійте кеш:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Відвідайте вітрину Sylius у новій вкладці браузера або у вікні інкогніто
4. Ви повинні побачити кнопку віджета чату в правому нижньому куті
5. Натисніть на нього, щоб переконатися, що він відкривається та працює коректно