Sylius에 Asyntai AI 챗봇을 추가하는 방법

플랫폼:

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. javascripts 블록을 확장하여 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. 새 브라우저 탭이나 시크릿 창에서 Sylius 스토어를 방문하세요
4. 오른쪽 하단에 채팅 위젯 버튼이 표시되어야 합니다
5. 클릭하여 올바르게 열리고 작동하는지 확인하세요