Sådan tilføjer du Asyntai AI-chatbot til Sylius

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

Trin 1: Hent din indlejringskode

Gå først til dit Asyntai Dashboard og rul ned til sektionen "Indlejringskode". Kopiér din unikke indlejringskode, der vil se sådan ud:

Trin 2: Tilføj til Twig-layoutskabelon (anbefalet)

Sylius er bygget på Symfony og bruger Twig-skabelonmotoren. Den anbefalede tilgang er at tilsidesætte butikkens layoutskabelon for at inkludere chatbotten på alle butikssidesider.

1. I dit Sylius-projekt skal du navigere til mappen templates/bundles/SyliusShopBundle/ (opret den, hvis den ikke eksisterer)
2. Opret eller rediger filen layout.html.twig for at tilsidesætte standardbutikkens layout
3. Hvis filen allerede eksisterer, skal du finde {% block javascripts %} blokken
4. Tilføj Asyntai-indlejringskoden ved at udvide javascripts-blokken:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Erstat YOUR_WIDGET_ID med dit faktiske widget-ID fra dashboardet
6. Gem filen

Alternativ metode 1: Brug af Sylius-skabelonbegivenheder

Sylius tilbyder et kraftfuldt skabelonbegivenhedssystem, der giver dig mulighed for at injicere indhold i specifikke dele af layoutet uden at tilsidesætte hele skabeloner. Du kan bruge dette til at tilføje chatbot-widgetten til sidefodsområdet.

1. Opret en ny skabelonfil på templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig med følgende indhold:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registrer skabelonbegivenheden i din config/packages/sylius_ui.yaml-konfigurationsfil:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Erstat YOUR_WIDGET_ID med dit faktiske widget-ID
4. Ryd Symfony-cachen (se trin 3 nedenfor)

Alternativ metode 2: Brug af Webpack Encore

Hvis dit Sylius-projekt bruger Webpack Encore til ressourcestyring, kan du integrere chatbot-scriptet via din JavaScript-byggepipeline.

1. Opret en ny JavaScript-fil på assets/shop/js/asyntai-chatbot.js med følgende indhold:
   (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. Importer denne fil i dit butiks-indgangspunkt (f.eks. assets/shop/entry.js eller assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Genopbyg dine ressourcer ved at køre:
   yarn encore dev

   Eller til produktion:

   yarn encore production
4. Erstat YOUR_WIDGET_ID med dit faktiske widget-ID

Alternativ metode 3: Brug af Sonata Block Bundle

Hvis din Sylius-installation bruger Sonata Block Bundle (inkluderet som standard i nogle Sylius-konfigurationer), kan du oprette en brugerdefineret blokservice til at rendere chatbot-widgetten.

1. Opret en ny blokserviceklasse i dit projekt, for eksempel 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. Opret blokskabelonen 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. Registrer blokservicen i din config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Placer blokken i din sidefodskontekst via Sonata-admin eller ved at tilføje den til din layoutkonfiguration
5. Erstat YOUR_WIDGET_ID med dit faktiske widget-ID

Trin 3: Ryd cache og verificér

Efter at have foretaget dine ændringer skal du rydde Symfony-cachen og bekræfte installationen:

1. Ryd Symfony-cachen ved at køre følgende kommando fra din projektrod:
   bin/console cache:clear
2. Hvis du er i et produktionsmiljø, skal du også varme cachen op:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Besøg din Sylius-butiksfront i en ny browserfane eller inkognitovindue
4. Du bør se chat-widget-knappen i nederste højre hjørne
5. Klik på den for at sikre, at den åbner og fungerer korrekt