Kako dodati klepetalnik Asyntai AI v 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: Pridobite svojo vdelovalno kodo

Najprej pojdite na svojo Nadzorno ploščo Asyntai in se pomaknite navzdol do razdelka "Vdelovalna koda". Kopirajte svojo edinstveno vdelovalno kodo, ki bo videti takole:

Korak 2: Dodajte v predlogo postavitve Twig (priporočeno)

Sylius je zgrajen na Symfony in uporablja mehanizem predlog Twig. Priporoceni pristop je prepisati predlogo postavitve trgovine za vključitev klepetalnika na vseh straneh trgovine.

1. V svojem projektu Sylius pojdite v imenik templates/bundles/SyliusShopBundle/ (ustvarite ga, če ne obstaja)
2. Ustvarite ali uredite datoteko layout.html.twig za prepis privzete postavitve trgovine
3. Če datoteka že obstaja, poišcite {% block javascripts %} blok
4. Dodajte vdelano kodo Asyntai z razširitvijo 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. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem klepetalnika z nadzorne plošče
6. Shranite datoteko

Alternativni način 1: Uporaba dogodkov predlog Sylius

Sylius zagotavlja zmogljiv sistem dogodkov predlog, ki vam omogoča vstavljanje vsebine v določene dele postavitve brez prepisovanja celotnih predlog. To lahko uporabite za dodajanje pripomocka klepetalnika v podrocje noge.

1. Ustvarite novo datoteko predloge na templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig z naslednjo vsebino:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registrirajte dogodek predloge v svoji konfiguracijski datoteki 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. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika
4. Počistite predpomnilnik Symfony (glejte korak 3 spodaj)

Alternativni način 2: Uporaba Webpack Encore

Če vaš projekt Sylius uporablja Webpack Encore za upravljanje sredstev, lahko integrirate skripto klepetalnika prek svojega cevovoda za gradnjo JavaScript.

1. Ustvarite novo datoteko JavaScript na assets/shop/js/asyntai-chatbot.js z naslednjo vsebino:
   (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. Uvozite to datoteko v vstopno tocko trgovine (npr. assets/shop/entry.js ali assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Ponovno zgradite svoja sredstva z zagonom:
   yarn encore dev

   Ali za produkcijo:

   yarn encore production
4. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika

Alternativni način 3: Uporaba svežnja Sonata Block

Če vaša namestitev Sylius uporablja sveženj Sonata Block (privzeto vključen v nekaterih konfiguracijah Sylius), lahko ustvarite storitev blokov po meri za upodabljanje pripomocka klepetalnika.

1. Ustvarite nov razred storitve blokov v svojem projektu, na primer 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. Ustvarite predlogo 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 storitev blokov v svojem config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Umestite blok v kontekst noge prek skrbništva Sonata ali z dodajanjem v konfiguracijo postavitve
5. Zamenjajte YOUR_WIDGET_ID s svojim dejanskim ID-jem gradnika

Korak 3: Počistite predpomnilnik in preverite

Po izvedbi sprememb morate pocistiti predpomnilnik Symfony in preveriti namestitev:

1. Počistite predpomnilnik Symfony z zagonom naslednjega ukaza iz korena projekta:
   bin/console cache:clear
2. Če ste v produkcijskem okolju, predpomnilnik tudi ogrejte:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Odprite svojo živo trgovino v novem zavihku brskalnika
4. V spodnjem desnem kotu bi morali videti gumb klepetalnika
5. Kliknite ga, da preverite, ali se pravilno odpre in deluje