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

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

プラットフォーム:

The Easy Way: Install the Asyntai Extension

We publish a free extension on the OpenCart Marketplace. It puts the chatbot on your storefront and connects your account, and there is no code to copy and no template to edit. It works on OpenCart 3.x and 4.x.

Download Asyntai - AI Chatbot from the OpenCart Marketplace
In your admin panel, go to Extensions → Installer and upload the ZIP file
Go to Extensions → Extensions, choose Modules in the list, find Asyntai AI Chatbot and press the green install button
Press edit, then press Connect to Asyntai. A window opens where you sign in or create an account.

That is all. The chatbot is live on your storefront when the window closes.

Your products, prices and stock

When you connect, the extension also lets Asyntai read your catalogue. Your assistant then answers with the price you charge today and tells shoppers what is in stock, instead of repeating whatever your pages said when they were last read.

Asyntai reads your products through a read-only address on your own store. Every request is signed, and the reply carries the prices a shopper would actually pay, with your tax rules already applied. You can switch this off at any time on the extension's settings screen.

Updating from version 1.0.0? OpenCart clears a module's settings when you uninstall it, so press Connect to Asyntai once after the update. From this version on, updates keep your connection.

Or Add the Code Yourself

Prefer not to install an extension? The rest of this page shows how to add the chatbot by hand. You will not get the catalogue reading this way.

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

First, go to your Asyntai Dashboard and scroll down to the "Embed Code" section. Copy your unique embed code which will look like this:

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

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

Step 2: Edit Footer Template

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

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になります。テンプレートファイルを編集する前に必ずバックアップを作成してください。

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

多くのモダンなOpenCartテーマには、カスタムコード用の組み込みオプションが含まれています：

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

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

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

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

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

ドキュメント