Jak dodać chatbota Asyntai AI 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: Pobierz swój kod osadzania

Najpierw przejdź do swojego Panelu Asyntai i przewiń w dół do sekcji "Kod osadzania". Skopiuj swój unikalny kod osadzania, który będzie wyglądał tak:

Krok 2: Dodaj do szablonu układu Twig (zalecane)

Sylius jest zbudowany na Symfony i używa silnika szablonów Twig. Zalecanym podejsciem jest nadpisanie szablonu ukladu sklepu w celu dolaczenia chatbota na wszystkich stronach sklepu.

1. W swoim projekcie Sylius przejdź do katalogu templates/bundles/SyliusShopBundle/ (utwórz go, jeśli nie istnieje)
2. Utwórz lub edytuj plik layout.html.twig, aby nadpisać domyślny uklad sklepu
3. Jeśli plik już istnieje, znajdź {% block javascripts %} blok
4. Dodaj kod osadzania Asyntai, rozszerzajac blok javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Zamien YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu z panelu sterowania
6. Zapisz plik

Metoda alternatywna 1: Użycie zdarzeń szablonów Sylius

Sylius udostępnia potezny system zdarzeń szablonów, który pozwala wstrzykiwac treść do określonych części ukladu bez nadpisywania calych szablonów. Możesz tego użyć, aby dodać widget chatbota do obszaru stopki.

1. Utwórz nowy plik szablonu w templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig z nastepujaca trescia:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Zarejestruj zdarzenie szablonu w pliku konfiguracyjnym 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. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu
4. Wyczyść pamięć podręczną Symfony (patrz krok 3 poniżej)

Metoda alternatywna 2: Użycie Webpack Encore

Jeśli Twój projekt Sylius używa Webpack Encore do zarządzania zasobami, możesz zintegrowac skrypt chatbota przez pipeline budowania JavaScript.

1. Utwórz nowy plik JavaScript w assets/shop/js/asyntai-chatbot.js z nastepujaca trescia:
   (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. Zaimportuj ten plik w punkcie wejscia sklepu (np. assets/shop/entry.js lub assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Przebuduj zasoby, uruchamiając:
   yarn encore dev

   Lub dla środowiska produkcyjnego:

   yarn encore production
4. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu

Metoda alternatywna 3: Użycie Sonata Block Bundle

Jeśli Twoja instalacja Sylius używa Sonata Block Bundle (dolaczonego domyślnie w niektorych konfiguracjach Sylius), możesz utworzyć niestandardowa usługę bloku do renderowania widgetu chatbota.

1. Utwórz nowa klase usługi bloku w swoim projekcie, na przykład 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. Utwórz szablon bloku w 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. Zarejestruj usługę bloku w pliku config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Umieść blok w kontekście stopki przez panel administracyjny Sonata lub dodając go do konfiguracji układu
5. Zamień YOUR_WIDGET_ID na rzeczywisty identyfikator widgetu

Krok 3: Wyczyść pamięć podręczną i zweryfikuj

Po dokonaniu zmian musisz wyczyścić pamięć podręczną Symfony i zweryfikować instalację:

1. Wyczyść pamięć podręczna Symfony, uruchamiajac nastepujace polecenie z katalogu głównego projektu:
   bin/console cache:clear
2. Jeśli jesteś w środowisku produkcyjnym, rozgrzej również pamięć podręczną:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Odwiedź sklep Sylius w nowej karcie przeglądarki lub w oknie incognito
4. Powinieneś zobaczyć przycisk widgetu czatu w prawym dolnym rogu
5. Kliknij go, aby upewnić się, że otwiera się i działa prawidłowo