Come aggiungere il chatbot IA Asyntai a Sylius

Piattaforma:

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

Passaggio 1: ottieni il tuo codice di incorporamento

Per prima cosa, vai alla tua Dashboard Asyntai e scorri fino alla sezione "Codice di incorporamento". Copia il tuo codice di incorporamento univoco che apparirà così:

Passaggio 2: aggiungi al template di layout Twig (consigliato)

Sylius è costruito su Symfony e utilizza il motore di templating Twig. L'approccio consigliato è sovrascrivere il template di layout dello shop per includere il chatbot su tutte le pagine del negozio.

1. Nel tuo progetto Sylius, vai alla directory templates/bundles/SyliusShopBundle/ (creala se non esiste)
2. Crea o modifica il file layout.html.twig per sovrascrivere il layout predefinito dello shop
3. Se il file esiste già, trova il {% block javascripts %} blocco
4. Aggiungi il codice di incorporamento Asyntai estendendo il blocco javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Sostituisci YOUR_WIDGET_ID con l'ID widget effettivo dalla dashboard
6. Salva il file

Metodo alternativo 1: uso degli eventi template di Sylius

Sylius fornisce un potente sistema di eventi template che ti permette di iniettare contenuti in parti specifiche del layout senza sovrascrivere interi template. Puoi usarlo per aggiungere il widget chatbot nell'area del footer.

1. Crea un nuovo file di template in templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig con il seguente contenuto:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registra l'evento template nel tuo file di configurazione 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. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo
4. Svuota la cache di Symfony (vedi passaggio 3 di seguito)

Metodo alternativo 2: uso di Webpack Encore

Se il tuo progetto Sylius utilizza Webpack Encore per la gestione degli asset, puoi integrare lo script del chatbot attraverso la pipeline di build JavaScript.

1. Crea un nuovo file JavaScript in assets/shop/js/asyntai-chatbot.js con il seguente contenuto:
   (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. Importa questo file nel punto di ingresso del tuo shop (es., assets/shop/entry.js o assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Ricompila i tuoi asset eseguendo:
   yarn encore dev

   Oppure per la produzione:

   yarn encore production
4. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo

Metodo alternativo 3: uso del Sonata Block Bundle

Se la tua installazione Sylius utilizza il Sonata Block Bundle (incluso per impostazione predefinita in alcune configurazioni di Sylius), puoi creare un servizio di blocco personalizzato per renderizzare il widget chatbot.

1. Crea una nuova classe di servizio di blocco nel tuo progetto, ad esempio 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. Crea il template del blocco in 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. Registra il servizio di blocco nel tuo config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Posiziona il blocco nel contesto del footer tramite l'amministrazione Sonata o aggiungendolo alla configurazione del layout
5. Sostituisci YOUR_WIDGET_ID con il tuo ID widget effettivo

Passaggio 3: Svuota la cache e verifica

Dopo aver apportato le modifiche, devi svuotare la cache di Symfony e verificare l'installazione:

1. Svuota la cache di Symfony eseguendo il seguente comando dalla root del tuo progetto:
   bin/console cache:clear
2. Se sei in un ambiente di produzione, effettua anche il riscaldamento della cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Visita il tuo storefront Sylius in una nuova scheda del browser o in una finestra di navigazione in incognito
4. Dovresti vedere il pulsante del widget chat nell'angolo in basso a destra della tua pagina
5. Cliccaci sopra per assicurarti che si apra e funzioni correttamente