Ako pridať Asyntai AI Chatbot do Sylius

Platforma:

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

Krok 1: Získajte svoj vkladací kód

Najprv prejdite na svoj Asyntai Dashboard a prejdite nadol k sekcii „Vkladací kód“. Skopírujte svoj jedinečný vkladací kód, ktorý bude vyzerať takto:

Krok 2: Pridanie do šablóny rozloženia Twig (Odporúčané)

Sylius je postavený na Symfony a používa šablónovací engine Twig. Odporúčaný prístup je prepísať šablónu rozloženia obchodu, aby zahŕňala chatbota na všetkých stránkach obchodu.

1. Vo vašom projekte Sylius prejdite do adresára templates/bundles/SyliusShopBundle/ (vytvorte ho, ak neexistuje)
2. Vytvorte alebo upravte súbor layout.html.twig na prepísanie predvoleného rozloženia obchodu
3. Ak súbor už existuje, nájdite {% block javascripts %} blok
4. Pridajte vkladací kód Asyntai rozšírením bloku javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Nahradte YOUR_WIDGET_ID vasim skutocnym ID widgetu z dashboardu
6. Uložte súbor

Alternatívna metóda 1: Pomocou udalostí šablón Sylius

Sylius poskytuje výkonný systém udalostí šablón, ktorý vám umožňuje vkladať obsah do konkrétnych častí rozloženia bez prepisovania celých šablón. Môžete ho použiť na pridanie chatového widgetu do oblasti pätičky.

1. Vytvorte nový súbor šablóny na templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig s nasledujúcim obsahom:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Zaregistrujte udalosť šablóny v konfiguračnom súbore 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. Nahraďte YOUR_WIDGET_ID vaším skutočným ID widgetu
4. Vymažte vyrovnávaciu pamäť Symfony (pozri Krok 3 nižšie)

Alternatívna metóda 2: Pomocou Webpack Encore

Ak váš projekt Sylius používa Webpack Encore na správu aktív, môžete integrovať skript chatbota cez váš JavaScript build pipeline.

1. Vytvorte nový JavaScript súbor na assets/shop/js/asyntai-chatbot.js s nasledujúcim obsahom:
   (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. Importujte tento súbor do vstupného bodu vášho obchodu (napr. assets/shop/entry.js alebo assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Znovu zostavte svoje assety spustením:
   yarn encore dev

   Alebo pre produkciu:

   yarn encore production
4. Nahraďte YOUR_WIDGET_ID vaším skutočným ID widgetu

Alternatívna metóda 3: Pomocou Sonata Block Bundle

Ak vaša inštalácia Sylius používa Sonata Block Bundle (predvolene zahrnuté v niektorých konfiguráciách Sylius), môžete vytvoriť vlastnú blokovú službu na vykreslenie chatového widgetu.

1. Vytvorte novú triedu blokovej služby vo vašom projekte, napríklad 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. Vytvorte šablónu bloku na 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. Zaregistrujte blokovú službu v config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Umiestnite blok do kontextu pätičky cez administráciu Sonata alebo pridaním do konfigurácie rozloženia
5. Nahraďte YOUR_WIDGET_ID vaším skutočným ID widgetu

Krok 3: Vymazanie vyrovnávacej pamäte a overenie

Po vykonaní zmien musíte vymazať vyrovnávaciu pamäť Symfony a overiť inštaláciu:

1. Vymažte vyrovnávaciu pamäť Symfony spustením nasledujúceho príkazu z koreňa vášho projektu:
   bin/console cache:clear
2. Ak ste v produkčnom prostredí, tiež zahrejte vyrovnávaciu pamäť:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Navštívte obchod Sylius v novej záložke prehliadača alebo v okne inkognito
4. Mali by ste vidieť tlačidlo chatového widgetu v pravom dolnom rohu
5. Kliknite naň, aby ste sa uistili, že sa otvára a funguje správne