OpenCartにAsyntai AIチャットボットを追加する方法

OpenCartウェブサイトのステップバイステップガイド

埋め込みコードの取得

プラットフォーム:

ステップ1：埋め込みコードを取得する

まず、Asyntaiダッシュボードに移動し、「埋め込みコード」セクションまでスクロールしてください。次のような固有の埋め込みコードをコピーしてください：

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

注意: 上記のコードは一例です。個人のウィジェットIDが含まれているため、ダッシュボードから固有の埋め込みコードをコピーしてください。

ステップ2：フッターテンプレートを編集（推奨）

チャットボットを追加する最も簡単な方法は、テーマのフッターテンプレートを編集することです：

FTPまたはファイルマネージャーでOpenCartファイルにアクセスしてください
テーマのフッターテンプレートに移動してください：
- OpenCart 3.x/4.x： catalog/view/theme/YOUR_THEME/template/common/footer.twig
- OpenCart 2.x： catalog/view/theme/YOUR_THEME/template/common/footer.tpl
フッターファイルを編集用に開いてください
</body>閉じタグを見つけます
</body>タグの直前にAsyntaiの埋め込みコードを貼り付けます
ファイルを保存します
OpenCartキャッシュをクリアしてください：ダッシュボード → 青い歯車アイコン（右上） → 更新またはsystem/storage/cache/の内容を削除

ヒント: デフォルトテーマを使用している場合、パスはcatalog/view/theme/default/template/common/footer.twigになります。テンプレートファイルを編集する前に必ずバックアップを作成してください。

代替方法：テーマのカスタムコードオプションを使用

Many modern OpenCart themes include a built-in option for custom code:

OpenCart管理パネルにログインしてください
Extensions → Themes（またはExtensions → Extensions → Themes）に移動してください
アクティブなテーマのEditをクリックしてください
"Custom Code"、"Footer Scripts"、または"Custom JavaScript"セクションを探してください
Asyntaiの埋め込みコードを貼り付けます
「保存」をクリックしてください
キャッシュをクリアしてください

注意: すべてのテーマにこのオプションがあるわけではありません。テーマにカスタムコードフィールドがない場合は、テンプレート編集方式を使用するか、エクステンションをインストールしてください。

代替方法：カスタムコードエクステンションを使用

OpenCart Marketplaceから無料のエクステンションをインストールして、カスタムスクリプトを追加できます：

OpenCart Marketplaceにアクセスしてください
"Custom Script"、"Header Footer Scripts\"、または"Custom Code"を検索してください
適切なエクステンションをダウンロードしてインストールしてください
管理パネルでExtensions → Extensions → Modulesに移動してください
カスタムコードモジュールを見つけてインストールしてください
モジュールを設定し、フッターセクションにAsyntai埋め込みコードを貼り付けてください
保存してキャッシュをクリアしてください

重要: コアファイルの編集よりもエクステンションの使用が推奨されます。エクステンションはOpenCartの更新後も維持されます。人気のエクステンションには、マーケットプレイスで入手可能な"Custom Script in Header & Footer"などがあります。

代替方法：addScriptメソッドを使用（開発者向け）

開発者向けに、OpenCart 3.x/4.xはスクリプトを追加するプログラム的な方法を提供しています：

catalog/controller/common/footer.phpを開いてください
$data['scripts'] = $this->document->getScripts('footer');の前に以下の行を追加してください：
$this->document->addScript('https://asyntai.com/static/js/chat-widget.js', 'footer');
data属性については、footer.twigを変更して手動で含めるか、スクリプトループの後にインラインJavaScriptを追加する必要があります

注意: data属性でウィジェットが正しく動作するためには、addScriptメソッドがカスタム属性を直接サポートしていないため、テンプレート方式の方がシンプルです。

ステップ3：インストールの確認

変更を保存してキャッシュをクリアした後、新しいブラウザタブまたはシークレットウィンドウでストアにアクセスしてください。右下にチャットウィジェットボタンが表示されるはずです。クリックして正しく開き、正常に動作することを確認してください。

ウィジェットが表示されませんか？ OpenCartのキャッシュをクリアしてください。管理パネルで右上の青い歯車アイコンをクリックし、更新ボタンをクリックしてください。また、ブラウザのキャッシュをクリアするか、シークレットウィンドウで表示してみてください。間違ったテンプレートファイルを変更した場合は、テーマが編集したファイルを使用していることを確認してください。