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

Guía paso a paso para la plataforma de e-commerce Bagisto

Plataforma:

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í:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: El código anterior es solo un ejemplo. Debe copiar su propio código de inserción único desde su Panel de control ya que contiene su ID de widget personal.

Paso 2: Añadir a la plantilla de diseño Blade (Recomendado)

Bagisto usa plantillas Laravel Blade. El enfoque recomendado es añadir el código de inserción directamente al archivo de diseño de la tienda:

Abra el archivo de diseño de la tienda:
- Fuente del paquete: packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
- Versión publicada: resources/views/vendor/shop/layouts/master.blade.php (si has publicado las vistas)
Encuentra la etiqueta de cierre </body>
Añada el código de inserción justo antes de </body>, después de @stack('scripts'):

@stack('scripts')
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>

Consejo: Si has publicado las vistas del proveedor, edita la versión publicada en resources/views/vendor/shop/. De lo contrario, publícalas primero con php artisan vendor:publish --tag=shop-views para evitar perder cambios durante las actualizaciones del paquete.

Método alternativo 1: Usando @push('scripts') en una vista

En cualquier vista o componente Blade, puede usar la pila de scripts para inyectar el script del chatbot:

@push('scripts')
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
@endpush

Nota: Este método requiere que @stack('scripts') esté presente en el archivo de diseño maestro. Está incluido por defecto en el diseño de Bagisto.

Método alternativo 2: Usando un proveedor de servicios

Puede usar un proveedor de servicios para hacer el script disponible en todas las vistas programáticamente. Cree un proveedor de servicios personalizado o use AppServiceProvider:

public function boot()
{
    view()->composer('shop::layouts.master', function ($view) {
        // The script will be available in the layout
    });
}

O cree un componente Blade que renderice la etiqueta script e inclúyelo en su diseño.

Consejo: El enfoque del proveedor de servicios es útil si quiere cargar el chatbot condicionalmente basándote en valores de configuración o ajustes del entorno.

Método alternativo 3: Usando el sistema de eventos de Bagisto

Bagisto dispara eventos de vista en varios puntos del diseño. Puede escuchar bagisto.shop.layout.body.after para inyectar el script del chatbot:

Event::listen('bagisto.shop.layout.body.after', function($viewRenderEventManager) {
    $viewRenderEventManager->addTemplate('shop::partials.asyntai-widget');
});

Luego cree la plantilla parcial en packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php (o el equivalente publicado) con su código de inserción:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: El enfoque del sistema de eventos mantiene sus cambios modulares y separados de los archivos de diseño principales, facilitando la gestión durante las actualizaciones de Bagisto.

Paso 3: Limpiar caché y verificar

Después de añadir el código de inserción, limpia la caché de la aplicación para asegurar que sus cambios surtan efecto:

php artisan cache:clear && php artisan view:clear

Visite su tienda Bagisto en una nueva pestaña del navegador o ventana de incógnito. Deberías ver el botón del widget de chat en la esquina inferior derecha. Haga clic en él para asegurarte de que se abra y funciona correctamente.

¿No ves el widget? Asegúrese de haber ejecutado tanto php artisan cache:clear como php artisan view:clear. También intenta limpiar la caché de su navegador o ver en una ventana de incógnito. Si editaste la fuente del paquete directamente, verifique que no haya vistas publicadas sobrescribiendo sus cambios. Compruebe que su código de inserción esté colocado correctamente antes de la etiqueta de cierre </body>.