Az Asyntai AI Chatbot hozzáadása a Sylius-hoz

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

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

2. lépés: Hozzáadás a Twig elrendezési sablonhoz (ajánlott)

A Sylius Symfonyre épül, és a Twig sablonrendszert használja. Az ajánlott megközelítés a bolt elrendezési sablon felülírása, hogy a chatbot az összes kirakatoldalon megjelenjen.

1. A Sylius projektben navigáljon a templates/bundles/SyliusShopBundle/ könyvtárhoz (ha nem létezik, hozza létre)
2. Hozza létre vagy szerkessze a layout.html.twig fájlt az alapértelmezett bolt elrendezés felülírásához
3. Ha a fájl már létezik, keresse meg a {% block javascripts %} blokkot
4. Adja hozzá az Asyntai beágyazó kódját a javascripts blokk kiterjesztésével:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
6. Mentse el a fájlt

Alternatív módszer 1: Sylius sablonesemények használata

A Sylius egy hatékony sablonesemény-rendszert biztosít, amely lehetővé teszi tartalom beillesztését az elrendezés meghatározott részeibe a teljes sablonok felülírása nélkül. Ezt felhasználhatja a chatbot widget lábléc területhez való hozzáadásához.

1. Hozzon létre egy új sablonfájlt itt: templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig a következő tartalommal:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Regisztrálja a sabloneseményt a config/packages/sylius_ui.yaml konfigurációs fájlban:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról
4. Ürítse a Symfony gyorsítótárát (lásd a 3. lépést alább)

Alternatív módszer 2: Webpack Encore használata

Ha a Sylius projektje Webpack Encore-t használ az eszközkezeléshez, a chatbot szkriptet a JavaScript build pipeline-on keresztül integrálhatja.

1. Hozzon létre egy új JavaScript fájlt itt: assets/shop/js/asyntai-chatbot.js a következő tartalommal:
   (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. Importálja ezt a fájlt a bolt belépési pontjában (pl. assets/shop/entry.js vagy assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Építse újra az eszközeit a következő parancs futtatásával:
   yarn encore dev

   Vagy éles környezethez:

   yarn encore production
4. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról

Alternatív módszer 3: Sonata Block Bundle használata

Ha a Sylius telepítése Sonata Block Bundle-t használ (egyes Sylius konfigurációkban alapértelmezetten megtalálható), létrehozhat egy egyéni blokkszolgáltatást a chatbot widget megjelenítéséhez.

1. Hozzon létre egy új blokkszolgáltatás osztályt a projektjében, például 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. Hozza létre a blokk sablont itt: 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. Regisztrálja a blokkszolgáltatást a config/services.yaml fájlban:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Helyezze a blokkot a lábléc kontextusba a Sonata adminon keresztül vagy az elrendezés konfigurációhoz való hozzáadással
5. Cserélje ki a YOUR_WIDGET_ID értékét a tényleges widget azonosítójára az irányítópultról

3. lépés: Gyorsítótár törlése és ellenőrzés

A módosítások elvégzése után törölnie kell a Symfony gyorsítótárát, és ellenőrizni a telepítést:

1. Ürítse a Symfony gyorsítótárát a következő parancs futtatásával a projekt gyökérkönyvtárából:
   bin/console cache:clear
2. Ha éles környezetben van, melegítse fel a gyorsítótárat is:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Nyissa meg weboldalát egy új böngészőlapon vagy inkognító ablakban
4. Látnia kell a chat widget gombot a jobb alsó sarokban
5. Kattintson rá, hogy megbizonyosodjon a helyes megnyitásról és működésről