Comment ajouter le chatbot IA Asyntai à Bagisto

Guide étape par étape pour la plateforme e-commerce Bagisto

Plateforme :

Étape 1 : Obtenir votre code d'intégration

Tout d'abord, rendez-vous sur votre Tableau de bord Asyntai et faites défiler jusqu'à la section « Code d'intégration ». Copiez votre code d'intégration unique qui ressemblera à ceci :

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

Note : Le code ci-dessus n'est qu'un exemple. Vous devez copier votre propre code d'intégration depuis votre Tableau de bord car il contient votre identifiant de widget personnel.

Étape 2 : Ajouter au modèle de mise en page Blade (recommandé)

Bagisto utilise les modèles Laravel Blade. L'approche recommandée consiste à ajouter le code d'intégration directement dans le fichier de mise en page de la boutique :

Ouvrez le fichier de mise en page de la boutique :
- Source du package : packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
- Version publiée : resources/views/vendor/shop/layouts/master.blade.php (si vous avez publié les vues)
Trouvez la balise fermante </body>
Ajoutez le code d'intégration juste avant </body>, après @stack('scripts') :

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

Astuce : Si vous avez publié les vues vendor, modifiez la version publiée dans resources/views/vendor/shop/. Sinon, publiez-les d'abord avec php artisan vendor:publish --tag=shop-views pour éviter de perdre vos modifications lors des mises à jour de paquets.

Méthode alternative 1 : Utilisation de @push('scripts') dans une vue

Dans n'importe quelle vue ou composant Blade, vous pouvez utiliser la pile scripts pour injecter le script du chatbot :

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

Note : Cette méthode nécessite que @stack('scripts') soit présent dans le fichier de mise en page principal. Il est inclus par défaut dans la mise en page de Bagisto.

Méthode alternative 2 : Utilisation d'un Service Provider

Vous pouvez utiliser un fournisseur de services pour rendre le script disponible dans toutes les vues de manière programmatique. Créez un fournisseur de services personnalisé ou utilisez AppServiceProvider :

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

Ou créez un composant Blade qui génère la balise script et incluez-le dans votre mise en page.

Astuce : L'approche par fournisseur de services est utile si vous souhaitez charger le chatbot de manière conditionnelle en fonction des valeurs de configuration ou des paramètres d'environnement.

Méthode alternative 3 : Utilisation du système d'événements Bagisto

Bagisto déclenche des événements de vue à différents points de la mise en page. Vous pouvez écouter bagisto.shop.layout.body.after pour injecter le script du chatbot :

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

Puis créez le template partiel dans packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php (ou l'équivalent publié) avec votre code d'intégration :

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

Note : L'approche par système d'événements garde vos modifications modulaires et séparées des fichiers de mise en page principaux, ce qui facilite la gestion lors des mises à jour de Bagisto.

Étape 3 : Vider le cache et vérifier

Après avoir ajouté le code d'intégration, videz le cache de l'application pour que vos modifications prennent effet :

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

Visitez votre boutique Bagisto dans un nouvel onglet de navigateur ou en fenêtre de navigation privée. Vous devriez voir le bouton du widget de chat dans le coin inférieur droit. Cliquez dessus pour vous assurer qu'il s'ouvre et fonctionne correctement.

Vous ne voyez pas le widget ? Assurez-vous d'avoir exécuté à la fois php artisan cache:clear et php artisan view:clear. Essayez également de vider le cache de votre navigateur ou de consulter le site dans une fenêtre de navigation privée. Si vous avez modifié directement la source du package, vérifiez qu'aucune vue publiée ne remplace vos modifications. Vérifiez que votre code d'intégration est correctement placé avant la balise fermante </body>.