Како додати 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 код за уградњу проширивањем 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. Замените YOUR_WIDGET_ID стварним ИД-ом виџета са контролне табле
6. Сачувајте фајл

Алтернативна метода 1: Коришћење Sylius Template Events

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 стварним ИД-ом виџета
4. Очистите Symfony кеш (погледајте Корак 3 испод)

Алтернативна метода 2: Коришћење Webpack Encore

Ако ваш Sylius пројекат користи Webpack Encore за управљање средствима, можете интегрисати скрипту чатбота кроз ваш JavaScript build pipeline.

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. Увезите овај фајл у вашу shop улазну тачку (нпр. assets/shop/entry.js или assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Поново изградите ваша средства покретањем:
   yarn encore dev

   Или за продукцију:

   yarn encore production
4. Замените YOUR_WIDGET_ID стварним ИД-ом виџета

Алтернативна метода 3: Коришћење Sonata Block Bundle

Ако ваша Sylius инсталација користи Sonata Block Bundle (укључен подразумевано у неким Sylius конфигурацијама), можете креирати прилагођени block service за рендеровање виџета чатбота.

1. Креирајте нову block service класу у вашем пројекту, на пример 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. Региструјте block service у вашем 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 стварним ИД-ом виџета

Корак 3: Обришите кеш и верификујте

Након извршавања промена, потребно је да очистите Symfony кеш и потврдите инсталацију:

1. Очистите Symfony кеш покретањем следеће команде из основног директоријума вашег пројекта:
   bin/console cache:clear
2. Ако сте у продукцијском окружењу, такође загрејте кеш:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Отворите свој веб-сајт у новој картици претраживача или инкогнито прозору
4. Требало би да видите дугме виџета за ћаскање у доњем десном углу
5. Кликните на њега да бисте се уверили да се отвара и исправно ради