Cómo añadir el chatbot de IA de Asyntai a Sylius

Plataforma:

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

Paso 1: Obtén su código de inserción

Primero, ve a tu Panel de control de Asyntai y desplázate hasta la sección "Código de inserción". Copia tu código de inserción único que se verá así:

Paso 2: Añadir a la plantilla de layout Twig (Recomendado)

Sylius está construido sobre Symfony y usa el motor de plantillas Twig. El enfoque recomendado es sobrescribir la plantilla de layout de la tienda para incluir el chatbot en todas las páginas del storefront.

1. En su proyecto Sylius, navegue al directorio templates/bundles/SyliusShopBundle/ (crealo si no existe)
2. Cree o edita el archivo layout.html.twig para sobrescribir el layout predeterminado de la tienda
3. Si el archivo ya existe, encuentra el {% block javascripts %} bloque
4. Agrega el código de incrustación de Asyntai extendiendo el bloque javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Reemplace YOUR_WIDGET_ID con su ID de widget real del panel de control
6. Guarde el archivo

Método alternativo 1: Usar eventos de plantilla de Sylius

Sylius proporciona un potente sistema de eventos de plantilla que le permite inyectar contenido en partes específicas del layout sin sobrescribir plantillas completas. Puede usar esto para agregar el widget del chatbot al area de pie de página.

1. Cree un nuevo archivo de plantilla en templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig con el siguiente contenido:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registra el evento de plantilla en su archivo de configuración 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. Reemplaza YOUR_WIDGET_ID con su ID de widget real
4. Limpie la caché de Symfony (consulte el Paso 3 a continuación)

Método alternativo 2: Usar Webpack Encore

Si su proyecto Sylius usa Webpack Encore para la gestión de recursos, puede integrar el script del chatbot a través de su pipeline de compilación de JavaScript.

1. Cree un nuevo archivo JavaScript en assets/shop/js/asyntai-chatbot.js con el siguiente contenido:
   (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 este archivo en su punto de entrada de la tienda (por ejemplo, assets/shop/entry.js o assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Reconstruya sus assets ejecutando:
   yarn encore dev

   O para producción:

   yarn encore production
4. Reemplaza YOUR_WIDGET_ID con su ID de widget real

Método alternativo 3: Usar Sonata Block Bundle

Si su instalación de Sylius usa el Sonata Block Bundle (incluido por defecto en algunas configuraciones de Sylius), puede crear un servicio de bloque personalizado para renderizar el widget del chatbot.

1. Cree una nueva clase de servicio de bloque en su proyecto, por ejemplo 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. Cree la plantilla del bloque en 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 el servicio de bloque en tu config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Coloque el bloque en su contexto de pie de página a traves del admin de Sonata o agregandolo a la configuración de su layout
5. Reemplaza YOUR_WIDGET_ID con su ID de widget real

Paso 3: Limpiar caché y verificar

Después de realizar sus cambios, necesita vaciar la cache de Symfony y verificar la instalación:

1. Vacíe la caché de Symfony ejecutando el siguiente comando desde la raíz de su proyecto:
   bin/console cache:clear
2. Si está en un entorno de producción, también precaliente la caché:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Visita tu tienda de Sylius en una nueva pestaña del navegador o ventana de incógnito
4. Deberías ver el botón del widget de chat en la esquina inferior derecha
5. Haz clic en él para asegurarte de que se abre y funciona correctamente