Jak přidat Asyntai AI chatbota 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ískejte svůj vkládací kód

Nejprve přejděte na svůj Asyntai Dashboard a přejděte dolů k sekci „Embed Code". Zkopírujte svůj unikátní kód pro vložení, který bude vypadat takto:

Krok 2: Přidání do šablony Twig layoutu (doporučeno)

Sylius je postaven na Symfony a používá šablonovací engine Twig. Doporučený přístup je přepsat šablonu layoutu obchodu pro zahrnutí chatbota na všech stránkách obchodu.

1. Ve svém projektu Sylius přejděte do adresáře templates/bundles/SyliusShopBundle/ (vytvořte jej, pokud neexistuje)
2. Vytvořte nebo upravte soubor layout.html.twig pro přepsání výchozího layoutu obchodu
3. Pokud soubor již existuje, najděte {% block javascripts %} block
4. Přidejte vložený kód Asyntai rozšíření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. Nahraďte YOUR_WIDGET_ID skutečným ID widgetu z dashboardu
6. Uložte soubor

Alternativní metoda 1: Použití událostí šablon Sylius

Sylius poskytuje výkonný systém událostí šablon, který umožňuje vkládat obsah do specifických částí layoutu bez přepisování celých šablon. Můžete jej použít k přidání widgetu chatbota do oblasti zápatí.

1. Vytvořte nový soubor šablony na templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig s následujícím obsahem:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Zaregistrujte událost šablony ve svém konfiguračním souboru 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 svým skutečným ID widgetu
4. Vymažte mezipaměť Symfony (viz Krok 3 níže)

Alternativní metoda 2: Použití Webpack Encore

Pokud váš projekt Sylius používá Webpack Encore pro správu souborů, můžete integrovat skript chatbota prostřednictvím svého JavaScript build pipeline.

1. Vytvořte nový soubor JavaScript na assets/shop/js/asyntai-chatbot.js s následujícím obsahem:
   (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 soubor ve vstupním bodu svého obchodu (např. assets/shop/entry.js nebo assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Přestavte své soubory spuštěním:
   yarn encore dev

   Nebo pro produkci:

   yarn encore production
4. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu

Alternativní metoda 3: Použití Sonata Block Bundle

Pokud vaše instalace Sylius používá Sonata Block Bundle (zahrnut ve výchozím nastavení v některých konfiguracích Sylius), můžete vytvořit vlastní blokovou službu pro vykreslení widgetu chatbota.

1. Vytvořte novou třídu blokové služby ve svém projektu, napří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. Vytvořte šablonu 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 blokovou službu ve svém config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Umístěte blok do kontextu zápatí prostřednictvím administrace Sonata nebo přidáním do konfigurace layoutu
5. Nahraďte YOUR_WIDGET_ID svým skutečným ID widgetu

Krok 3: Vymažte mezipaměť a ověřte

Po provedení změn je třeba vymazat mezipaměť Symfony a ověřit instalaci:

1. Vymažte mezipaměť Symfony spuštěním následujícího příkazu z kořenového adresáře projektu:
   bin/console cache:clear
2. Pokud jste v produkčním prostředí, také zahřejte mezipaměť:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Otevřete svůj web v nové záložce prohlížeče nebo v anonymním okně
4. Měli byste vidět tlačítko chatovacího widgetu v pravém dolním rohu
5. Klikněte na něj a ověřte, že se správně otevírá a funguje