Як додати ШI-чатбот Asyntai до Bagisto

Покрокова інструкція для платформи електронної комерції Bagisto

Платформа:

Крок 1: Отримайте код для вставки

Спочатку перейдiть до вашої Панелi керування Asyntai та прокрутiть вниз до роздiлу "Код для вставки". Скопiюйте унiкальний код для вставки, який виглядатиме так:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примітка: Код вище є лише прикладом. Ви повиннi скопiювати власний унiкальний код для вставки з вашої Панелi керування, оскiльки вiн мiстить ваш особистий ID вiджета.

Крок 2: Додайте до шаблону Blade (Рекомендовано)

Bagisto використовує шаблони Laravel Blade. Рекомендований пiдхiд - додати код для вставки безпосередньо до файлу макету магазину:

Відкрийте файл макету магазину:
- Джерело пакету: packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php
- Опублiкована версiя: resources/views/vendor/shop/layouts/master.blade.php (якщо ви опублiкували представлення)
Знайдіть закриваючий тег </body>
Додайте код для вставки безпосередньо перед </body>, пiсля @stack('scripts'):

@stack('scripts')
<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
</body>

Порада: Якщо ви опублiкували представлення постачальника, вiдредагуйте опублiковану версiю в resources/views/vendor/shop/. Iнакше спочатку опублiкуйте їх за допомогою php artisan vendor:publish --tag=shop-views, щоб уникнути втрати змiн пiд час оновлення пакетiв.

Альтернативний метод 1: Використання @push('scripts') у представленні

У будь-якому представленнi Blade або компонентi ви можете використовувати стек скриптiв для вставки скрипту чатбота:

@push('scripts')
    <script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>
@endpush

Примітка: Цей метод вимагає наявностi @stack('scripts') у головному файлi макету. Вiн включений за замовчуванням у макетi Bagisto.

Альтернативний метод 2: Використання Service Provider

Ви можете використовувати service provider для програмного забезпечення доступностi скрипту у всiх представленнях. Створiть користувацький service provider або використовуйте AppServiceProvider:

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

Або створiть компонент Blade, який вiдображає тег скрипту, та включiть його у ваш макет.

Порада: Пiдхiд з service provider корисний, якщо ви хочете умовно завантажувати чатбот на основi значень конфiгурацiї або налаштувань середовища.

Альтернативний метод 3: Використання системи подій Bagisto

Bagisto запускає подiї представлень у рiзних точках макету. Ви можете прослуховувати bagisto.shop.layout.body.after для вставки скрипту чатбота:

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

Потiм створiть частковий шаблон у packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php (або опублiкований еквiвалент) з вашим кодом для вставки:

<script>(function(){var l=function(){var s=document.createElement("script");s.src="https://widget.asyntai.com/static/js/chat-widget.js";s.async=true;s.setAttribute("data-asyntai-id","YOUR_WIDGET_ID");document.head.appendChild(s)};if(document.readyState==="complete"){l()}else{window.addEventListener("load",l)}})();</script>

Примітка: Пiдхiд з системою подiй зберiгає вашi змiни модульними та окремими вiд основних файлiв макету, що полегшує управлiння пiд час оновлень Bagisto.

Крок 3: Очистіть кеш та перевірте

Пiсля додавання коду для вставки очистiть кеш додатку, щоб змiни набули чинностi:

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

Вiдвiдайте ваш магазин Bagisto у новiй вкладцi браузера або вiкнi iнкогнiто. Ви повиннi побачити кнопку вiджета чату в правому нижньому кутi. Натиснiть на неї, щоб переконатися, що вона вiдкривається та працює правильно.

Не бачите віджет? Переконайтеся, що ви виконали як php artisan cache:clear, так i php artisan view:clear. Також спробуйте очистити кеш браузера або переглянути у вiкнi iнкогнiто. Якщо ви редагували безпосередньо джерело пакету, перевiрте, що опублiкованi представлення не перевизначають вашi змiни. Переконайтеся, що код для вставки розмiщено правильно перед закриваючим тегом </body>.