Cum să adăugați Chatbot-ul AI Asyntai în Sylius

Platformă:

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

Pasul 1: Obțineți codul de încorporare

Mai întâi, accesați Tabloul de bord Asyntai și derulați în jos până la secțiunea "Cod de încorporare". Copiați codul unic de încorporare care va arăta astfel:

Pasul 2: Adăugați în șablonul Twig Layout (Recomandat)

Sylius este construit pe Symfony și utilizează motorul de șabloane Twig. Abordarea recomandată este să suprascrieți șablonul de layout al magazinului pentru a include chatbotul pe toate paginile vitrinei.

1. În proiectul dvs. Sylius, navigați la directorul templates/bundles/SyliusShopBundle/ (creați-l dacă nu există)
2. Creați sau editați fișierul layout.html.twig pentru a suprascrie layout-ul implicit al magazinului
3. Dacă fișierul există deja, găsiți {% block javascripts %} blocul
4. Adăugați codul de integrare Asyntai prin extinderea blocului javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului din tabloul de bord
6. Salvați fișierul

Metoda alternativă 1: Utilizarea evenimentelor de șablon Sylius

Sylius oferă un sistem puternic de evenimente de șablon care vă permite să injectați conținut în părți specifice ale layout-ului fără a suprascrie șabloane întregi. Puteți folosi acest lucru pentru a adăuga widgetul chatbot în zona footer.

1. Creați un fișier de șablon nou la templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig cu următorul conținut:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Înregistrați evenimentul de șablon în fișierul de configurare 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. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.
4. Goliți memoria cache Symfony (vezi Pasul 3 mai jos)

Metoda alternativă 2: Utilizarea Webpack Encore

Dacă proiectul dvs. Sylius utilizează Webpack Encore pentru gestionarea activelor, puteți integra scriptul chatbotului prin pipeline-ul de compilare JavaScript.

1. Creați un fișier JavaScript nou la assets/shop/js/asyntai-chatbot.js cu următorul conținut:
   (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. Importați acest fișier în punctul de intrare al magazinului (de ex., assets/shop/entry.js sau assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Recompilați activele rulând:
   yarn encore dev

   Sau pentru producție:

   yarn encore production
4. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.

Metoda alternativă 3: Utilizarea Sonata Block Bundle

Dacă instalarea dvs. Sylius utilizează Sonata Block Bundle (inclus implicit în unele configurații Sylius), puteți crea un serviciu de bloc personalizat pentru a randa widgetul chatbot.

1. Creați o nouă clasă de serviciu de bloc în proiectul dvs., de exemplu 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. Creați șablonul de bloc la 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. Înregistrați serviciul de bloc în config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Plasați blocul în contextul footer-ului prin interfața Sonata admin sau adăugându-l la configurația layout-ului
5. Înlocuiți YOUR_WIDGET_ID cu ID-ul real al widget-ului dvs.

Pasul 3: Goliți memoria cache și verificați

După efectuarea modificărilor, trebuie să goliți memoria cache Symfony și să verificați instalarea:

1. Goliți memoria cache Symfony rulând următoarea comandă din rădăcina proiectului:
   bin/console cache:clear
2. Dacă sunteți într-un mediu de producție, încălziți și memoria cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Deschideți vitrina live într-o filă nouă de browser
4. Ar trebui să vedeți butonul widgetului de chat în colțul din dreapta jos
5. Faceți clic pe el pentru a vă asigura că se deschide și funcționează corect