Hur du lägger till Asyntai AI-chattbot i Sylius

Plattform:

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

Steg 1: Hämta din inbäddningskod

Gå först till din Asyntai-instrumentpanel och scrolla ner till avsnittet "Inbäddningskod". Kopiera din unika inbäddningskod som ser ut så här:

Steg 2: Lägg till i Twig-layoutmallen (rekommenderas)

Sylius är byggt på Symfony och använder Twig som mallmotor. Det rekommenderade tillvägagångssättet är att åsidosätta butikens layoutmall för att inkludera chattboten på alla butikssidor.

1. I ditt Sylius-projekt, navigera till katalogen templates/bundles/SyliusShopBundle/ (skapa den om den inte finns)
2. Skapa eller redigera filen layout.html.twig för att åsidosätta standardbutikslayouten
3. Om filen redan finns, hitta {% block javascripts %} block
4. Lägg till Asyntai-inbäddningskoden genom att utöka javascripts-blocket:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID från instrumentpanelen
6. Spara filen

Alternativ metod 1: Använda Sylius-mallhändelser

Sylius tillhandahåller ett kraftfullt mallhändelsesystem som låter dig injicera innehåll i specifika delar av layouten utan att åsidosätta hela mallar. Du kan använda detta för att lägga till chattbot-widgeten i sidfotens område.

1. Skapa en ny mallfil på templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig med följande innehåll:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registrera mallhändelsen i din konfigurationsfil 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. Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID
4. Rensa Symfony-cachen (se steg 3 nedan)

Alternativ metod 2: Använda Webpack Encore

Om ditt Sylius-projekt använder Webpack Encore för tillgångshantering kan du integrera chattbot-skriptet via din JavaScript-byggpipeline.

1. Skapa en ny JavaScript-fil på assets/shop/js/asyntai-chatbot.js med följande innehåll:
   (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. Importera den här filen i din butiks startpunkt (t.ex. assets/shop/entry.js eller assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Bygg om dina tillgångar genom att köra:
   yarn encore dev

   Eller för produktion:

   yarn encore production
4. Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID

Alternativ metod 3: Använda Sonata Block Bundle

Om din Sylius-installation använder Sonata Block Bundle (ingår som standard i vissa Sylius-konfigurationer) kan du skapa en anpassad blocktjänst för att rendera chattbot-widgeten.

1. Skapa en ny blockserviceklass i ditt projekt, till exempel 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. Skapa blockmallfilen på 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. Registrera blocktjänsten i din config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Placera blocket i din sidfotskontext via Sonata-administratören eller genom att lägga till det i din layoutkonfiguration
5. Ersätt YOUR_WIDGET_ID med ditt faktiska widget-ID

Steg 3: Rensa cache och verifiera

Efter att du har gjort dina ändringar måste du rensa Symfony-cachen och verifiera installationen:

1. Rensa Symfony-cachen genom att köra följande kommando från din projektrot:
   bin/console cache:clear
2. Om du befinner dig i en produktionsmiljö, värm även upp cachen:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Besök din Sylius-butik i en ny webbläsarflik eller inkognitofönster
4. Du bör se chattwidgetknappen i det nedre högra hörnet
5. Klicka på den för att kontrollera att den öppnas och fungerar korrekt