Kako dodati Asyntai AI chatbot na 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

Korak 1: Nabavite svoj kod za ugradnju

Prvo idite na svoju Asyntai nadzornu ploču i pomaknite se prema dolje do odjeljka "Kod za ugradnju". Kopirajte svoj jedinstveni kod za ugradnju koji će izgledati ovako:

Korak 2: Dodajte u Twig predložak rasporeda (Preporučeno)

Sylius je izgraden na Symfonyju i koristi Twig sustav predlozaka. Preporuceni pristup je nadjacavanje predloska rasporeda trgovine za ukljucivanje chatbota na svim stranicama trgovine.

1. U svom Sylius projektu navigirajte do direktorija templates/bundles/SyliusShopBundle/ (izradite ga ako ne postoji)
2. Izradite ili uredite datoteku layout.html.twig za nadjacavanje zadanog rasporeda trgovine
3. Ako datoteka već postoji, pronađite {% block javascripts %} blok
4. Dodajte Asyntai ugradni kod prosirivanjem bloka javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta s nadzorne ploce
6. Spremite datoteku

Alternativna metoda 1: Korištenje Sylius događaja predložaka

Sylius pruza mocni sustav dogadaja predlozaka koji vam omogucuje ubacivanje sadrzaja u specificne dijelove rasporeda bez nadjacavanja cijelih predlozaka. Mozete ga koristiti za dodavanje chatbot widgeta u podrucje podnozja.

1. Izradite novu datoteku predloska na templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig sa sljedecim sadrzajem:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registrirajte dogadaj predloska u svojoj konfiguracijskoj datoteci 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. Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta
4. Očistite Symfony predmemoriju (pogledajte Korak 3 ispod)

Alternativna metoda 2: Korištenje Webpack Encorea

Ako vas Sylius projekt koristi Webpack Encore za upravljanje resursima, mozete integrirati skriptu chatbota putem vaseg JavaScript cjevovoda za izgradnju.

1. Izradite novu JavaScript datoteku na assets/shop/js/asyntai-chatbot.js sa sljedecim sadrzajem:
   (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. Uvezite ovu datoteku u ulaznu tocku trgovine (npr. assets/shop/entry.js ili assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Ponovno izgradite resurse pokretanjem:
   yarn encore dev

   Ili za produkciju:

   yarn encore production
4. Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta

Alternativna metoda 3: Korištenje Sonata Block Bundlea

Ako vasa Sylius instalacija koristi Sonata Block Bundle (ukljucen prema zadanim postavkama u nekim Sylius konfiguracijama), mozete izraditi prilagodenu uslugu bloka za prikazivanje chatbot widgeta.

1. Izradite novu klasu usluge bloka u svom projektu, na primjer 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. Izradite predlozak bloka na 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. Registrirajte uslugu bloka u svom config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Postavite blok u kontekst podnozja putem Sonata admina ili dodavanjem u konfiguraciju rasporeda
5. Zamijenite YOUR_WIDGET_ID svojim stvarnim ID-jem widgeta

Korak 3: Očistite predmemoriju i provjerite

Nakon izmjena trebate ocistiti Symfony predmemoriju i provjeriti instalaciju:

1. Ocistite Symfony predmemoriju pokretanjem sljedece naredbe iz korijena projekta:
   bin/console cache:clear
2. Ako ste u produkcijskom okruženju, također zagrijte predmemoriju:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Otvorite svoju živu trgovinu u novoj kartici preglednika
4. Trebali biste vidjeti gumb chat widgeta u donjem desnom kutu
5. Kliknite ga kako biste provjerili otvara li se i radi li ispravno