BagistoにAsyntai AIチャットボットを追加する方法
Bagisto Eコマースプラットフォーム向けステップバイステップガイド
ステップ1:埋め込みコードを取得する
まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
注記: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。
ステップ2:Bladeレイアウトテンプレートに追加する(推奨)
BagistoはLaravel Bladeテンプレートを使用しています。推奨される方法は、ショップのレイアウトファイルに直接埋め込みコードを追加することです:
- ショップのレイアウトファイルを開きます:
- パッケージソース:
packages/Webkul/Shop/src/Resources/views/layouts/master.blade.php - 公開バージョン:
resources/views/vendor/shop/layouts/master.blade.php(ビューを公開済みの場合)
- パッケージソース:
</body>閉じタグを見つけます@stack('scripts')の後、</body>の直前に埋め込みコードを追加します:
@stack('scripts')
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
ヒント: ベンダービューを公開済みの場合は、resources/views/vendor/shop/の公開バージョンを編集してください。公開していない場合は、パッケージ更新時に変更が失われないよう、まずphp artisan vendor:publish --tag=shop-viewsで公開してください。
代替方法1:ビューで@push('scripts')を使用する
任意のBladeビューまたはコンポーネントで、scriptsスタックを使用してチャットボットスクリプトを挿入できます:
@push('scripts')
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
@endpush
注記: この方法には、マスターレイアウトファイルに@stack('scripts')が存在する必要があります。Bagistoのレイアウトにはデフォルトで含まれています。
代替方法2:サービスプロバイダーを使用する
サービスプロバイダーを使用して、プログラム的にすべてのビューでスクリプトを利用可能にできます。カスタムサービスプロバイダーを作成するか、AppServiceProviderを使用してください:
public function boot()
{
view()->composer('shop::layouts.master', function ($view) {
// The script will be available in the layout
});
}
またはスクリプトタグをレンダリングするBladeコンポーネントを作成し、レイアウトに含めてください。
ヒント: サービスプロバイダー方式は、設定値や環境設定に基づいてチャットボットを条件付きで読み込みたい場合に便利です。
代替方法3:Bagistoイベントシステムを使用する
Bagistoはレイアウトの様々なポイントでビューイベントを発火します。bagisto.shop.layout.body.afterをリッスンしてチャットボットスクリプトを挿入できます:
Event::listen('bagisto.shop.layout.body.after', function($viewRenderEventManager) {
$viewRenderEventManager->addTemplate('shop::partials.asyntai-widget');
});
次に、packages/Webkul/Shop/src/Resources/views/partials/asyntai-widget.blade.php(または公開済みの同等ファイル)に埋め込みコードを含むパーシャルテンプレートを作成します:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
注記: イベントシステム方式により、変更がモジュール化されコアレイアウトファイルと分離されるため、Bagistoのアップグレード時に管理しやすくなります。
ステップ3:キャッシュをクリアして確認する
埋め込みコードを追加した後、変更を反映させるためにアプリケーションキャッシュをクリアしてください:
php artisan cache:clear && php artisan view:clear
新しいブラウザタブまたはシークレットウィンドウでBagistoストアにアクセスしてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開いて動作することを確認してください。
ウィジェットが表示されませんか? php artisan cache:clearとphp artisan view:clearの両方を実行したことを確認してください。また、ブラウザキャッシュのクリアやシークレットウィンドウでの表示もお試しください。パッケージソースを直接編集した場合は、公開済みのビューが変更を上書きしていないか確認してください。埋め込みコードが</body>閉じタグの直前に正しく配置されていることを確認してください。
Weebly