Slik legger du til Asyntai AI-chatbot 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

Trinn 1: Hent innbyggingskoden din

Gå først til Asyntai-dashbordet ditt og bla ned til «Innbyggingskode»-seksjonen. Kopier din unike innbyggingskode som vil se slik ut:

Trinn 2: Legg til i Twig-oppsettmal (anbefalt)

Sylius er bygget på Symfony og bruker Twig-malmotoren. Den anbefalte tilnærmingen er å overstyre butikkoppsettmalen for å inkludere chatboten på alle butikksider.

1. I Sylius-prosjektet ditt, naviger til templates/bundles/SyliusShopBundle/-katalogen (opprett den hvis den ikke finnes)
2. Opprett eller rediger filen layout.html.twig for å overstyre standard butikkoppsett
3. Hvis filen allerede finnes, finn {% block javascripts %} blokken
4. Legg til Asyntai-innbyggingskoden ved å utvide 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. Erstatt YOUR_WIDGET_ID med din faktiske widget-ID fra dashbordet
6. Lagre filen

Alternativ metode 1: Bruk av Sylius-malhendelser

Sylius tilbyr et kraftig malhendelsessystem som lar deg injisere innhold i spesifikke deler av oppsettet uten å overstyre hele maler. Du kan bruke dette til å legge til chatbot-widgeten i bunntekstområdet.

1. Opprett en ny malfil på templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig med følgende innhold:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registrer malhendelsen i konfigurasjonsfilen 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. Erstatt YOUR_WIDGET_ID med din faktiske widget-ID
4. Tøm Symfony-bufferen (se trinn 3 nedenfor)

Alternativ metode 2: Bruk av Webpack Encore

Hvis Sylius-prosjektet ditt bruker Webpack Encore for ressursadministrasjon, kan du integrere chatbot-skriptet gjennom JavaScript-byggepipelinen din.

1. Opprett en ny JavaScript-fil på assets/shop/js/asyntai-chatbot.js med følgende innhold:
   (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 filen i butikkens inngangspunkt (f.eks. assets/shop/entry.js eller assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Gjenoppbygg ressursene dine ved å kjøre:
   yarn encore dev

   Eller for produksjon:

   yarn encore production
4. Erstatt YOUR_WIDGET_ID med din faktiske widget-ID

Alternativ metode 3: Bruk av Sonata Block Bundle

Hvis Sylius-installasjonen din bruker Sonata Block Bundle (inkludert som standard i noen Sylius-konfigurasjoner), kan du opprette en egendefinert blokktjeneste for å gjengi chatbot-widgeten.

1. Opprett en ny blokktjenesteklasse i prosjektet ditt, 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. Opprett blokkmalen 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 blokktjenesten i config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Plasser blokken i bunntekstkonteksten gjennom Sonata-admin eller ved å legge den til i oppsettkonfigurasjonen
5. Erstatt YOUR_WIDGET_ID med din faktiske widget-ID

Trinn 3: Tøm hurtigbuffer og bekreft

Etter at du har gjort endringene dine, må du tømme Symfony-bufferen og verifisere installasjonen:

1. Tøm Symfony-bufferen ved å kjøre følgende kommando fra prosjektroten:
   bin/console cache:clear
2. Hvis du er i et produksjonsmiljø, varm også opp bufferen:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Besøk Sylius-butikkfronten din i en ny nettleserfane eller inkognitovindu
4. Du bør se chat-widget-knappen i nedre høyre hjørne
5. Klikk på den for å sikre at den åpnes og fungerer korrekt