Как да добавите 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. Добавете Asyntai кода за вграждане, като разширите блока за JavaScript-и:
   {% 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. Заменете YOUR_WIDGET_ID с вашия действителен ID на уиджета от таблото за управление
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. Отворете уебсайта си в нов таб на браузъра или в режим инкогнито
4. Трябва да видите бутона на чат уиджета в долния десен ъгъл
5. Натиснете го, за да се уверите, че се отваря и работи правилно