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

プラットフォーム:

Sylius

HTML/Custom WordPress Shopify WooCommerce BigCommerce Ecwid Wix Squarespace Webflow Weebly HubSpot Tilda Adobe Experience Manager Duda Google Sites Bludit Plesk Concrete CMS Docusaurus Hugo Kentico Volusion Craft CMS Contentful Strapi Joomla Drupal Magento Blogger Bitrix TYPO3 PrestaShop OpenCart Ghost Statamic Umbraco Moodle SilverStripe Grav October CMS ProcessWire Sanity ExpressionEngine Sylius Backdrop CMS MODX Bagisto PayloadCMS e107 CrafterCMS Kirby MedusaCMS DatoCMS GoDaddy Framer Bubble Carrd Jimdo Strikingly Kajabi Teachable Thinkific ClickFunnels Hostinger Unbounce Leadpages Systeme.io Instapage

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

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

ステップ2：Twigレイアウトテンプレートに追加する（推奨）

SyliusはSymfony上に構築されており、Twigテンプレートエンジンを使用しています。推奨されるアプローチは、ショップレイアウトテンプレートをオーバーライドして、すべてのストアフロントページにチャットボットを含めることです。

1. Syliusプロジェクトで、templates/bundles/SyliusShopBundle/ディレクトリに移動します（存在しない場合は作成します）
2. layout.html.twigファイルを作成または編集して、デフォルトのショップレイアウトをオーバーライドします
3. ファイルがすでに存在する場合は、以下を見つけます {% block javascripts %} ブロック
4. JavaScriptブロックを拡張してAsyntaiの埋め込みコードを追加します：
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. YOUR_WIDGET_IDをダッシュボードから取得した実際のウィジェットIDに置き換えてください
6. ファイルを保存します

代替方法1：Syliusテンプレートイベントを使用する

Syliusは、テンプレート全体をオーバーライドすることなく、レイアウトの特定の部分にコンテンツを挿入できる強力なテンプレートイベントシステムを提供しています。これを使用して、フッターエリアにチャットボットウィジェットを追加できます。

1. 以下の内容でtemplates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twigに新しいテンプレートファイルを作成します：
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. config/packages/sylius_ui.yaml設定ファイルにテンプレートイベントを登録します：
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください
4. Symfonyキャッシュをクリアします（下記のステップ3を参照）

代替方法2：Webpack Encoreを使用する

SyliusプロジェクトがアセットマネジメントにWebpack Encoreを使用している場合、JavaScriptビルドパイプラインを通じてチャットボットスクリプトを統合できます。

1. 以下の内容でassets/shop/js/asyntai-chatbot.jsに新しいJavaScriptファイルを作成します：
   (function() {
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    document.body.appendChild(script);
})();
2. ショップのエントリーポイント（例：assets/shop/entry.jsまたはassets/shop/js/app.js）でこのファイルをインポートします：
   import './js/asyntai-chatbot';
3. 以下を実行してアセットを再ビルドします：
   yarn encore dev

   または本番環境用：

   yarn encore production
4. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください

代替方法3：Sonata Block Bundleを使用する

SyliusのインストールがSonata Block Bundle（一部のSylius構成ではデフォルトで含まれています）を使用している場合、カスタムブロックサービスを作成してチャットボットウィジェットをレンダリングできます。

1. プロジェクトに新しいブロックサービスクラスを作成します。例：src/Block/AsyntaiChatbotBlockService.php：
   <?php

namespace App\Block;

use Sonata\BlockBundle\Block\BlockContextInterface;
use Sonata\BlockBundle\Block\Service\AbstractBlockService;
use Symfony\Component\HttpFoundation\Response;

class AsyntaiChatbotBlockService extends AbstractBlockService
{
    public function execute(BlockContextInterface $blockContext, Response $response = null): Response
    {
        return $this->renderResponse('block/asyntai_chatbot.html.twig', [
            'block' => $blockContext->getBlock(),
        ], $response);
    }
}
2. templates/block/asyntai_chatbot.html.twigにブロックテンプレートを作成します：
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. config/services.yamlにブロックサービスを登録します：
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Sonata管理画面またはレイアウト設定に追加して、フッターコンテキストにブロックを配置します
5. YOUR_WIDGET_IDを実際のウィジェットIDに置き換えてください

ステップ3：キャッシュをクリアして確認する

変更を行った後、Symfonyキャッシュをクリアしてインストールを確認する必要があります：

1. プロジェクトルートから以下のコマンドを実行して、Symfonyキャッシュをクリアします：
   bin/console cache:clear
2. 本番環境の場合は、キャッシュのウォームアップも行います：
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. 新しいブラウザタブまたはシークレットウィンドウでウェブサイトを開きます
4. 右下にチャットウィジェットボタンが表示されるはずです
5. クリックして正しく開いて動作することを確認してください