วิธีเพิ่มแชทบอท AI Asyntai ไปยัง 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 ของคุณและเลื่อนลงไปที่ส่วน "Embed Code" คัดลอกโค้ดฝังตัวเฉพาะของคุณซึ่งจะมีลักษณะดังนี้:

ขั้นตอนที่ 2: เพิ่มไปยังเทมเพลต Twig Layout (แนะนำ)

Sylius สร้างบน Symfony และใช้ Twig templating engine วิธีที่แนะนำคือ override เทมเพลต shop layout เพื่อรวมแชทบอทในทุกหน้าร้านค้า

1. ในโปรเจกต์ Sylius ของคุณ นำทางไปยังไดเรกทอรี templates/bundles/SyliusShopBundle/ (สร้างหากยังไม่มี)
2. สร้างหรือแก้ไขไฟล์ layout.html.twig เพื่อ override shop layout เริ่มต้น
3. หากไฟล์มีอยู่แล้ว ให้ค้นหา {% block javascripts %} block
4. เพิ่มโค้ดฝังตัว Asyntai โดยขยาย javascripts block:
   {% 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 ด้วย widget ID จริงของคุณจากแดชบอร์ด
6. บันทึกไฟล์

วิธีทางเลือกที่ 1: การใช้ Sylius Template Events

Sylius มีระบบ template event ที่ทรงพลังที่ช่วยให้คุณฉีดเนื้อหาเข้าไปในส่วนเฉพาะของ layout โดยไม่ต้อง override เทมเพลตทั้งหมด คุณสามารถใช้สิ่งนี้เพื่อเพิ่มวิดเจ็ตแชทบอทไปยังพื้นที่ส่วนท้าย

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. ลงทะเบียน template event ในไฟล์การกำหนดค่า 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 ด้วย widget ID จริงของคุณ
4. ล้างแคช Symfony (ดูขั้นตอนที่ 3 ด้านล่าง)

วิธีทางเลือกที่ 2: การใช้ Webpack Encore

หากโปรเจกต์ Sylius ของคุณใช้ Webpack Encore สำหรับการจัดการ assets คุณสามารถรวมสคริปต์แชทบอทผ่าน JavaScript build pipeline ของคุณ

1. สร้างไฟล์ JavaScript ใหม่ที่ assets/shop/js/asyntai-chatbot.js พร้อมเนื้อหาต่อไปนี้:
   (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. import ไฟล์นี้ใน shop entry point ของคุณ (เช่น assets/shop/entry.js หรือ assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. สร้าง assets ใหม่โดยรัน:
   yarn encore dev

   หรือสำหรับ production:

   yarn encore production
4. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ

วิธีทางเลือกที่ 3: การใช้ Sonata Block Bundle

หากการติดตั้ง Sylius ของคุณใช้ Sonata Block Bundle (รวมมาเป็นค่าเริ่มต้นในการกำหนดค่า Sylius บางแบบ) คุณสามารถสร้าง custom block service เพื่อแสดงผลวิดเจ็ตแชทบอท

1. สร้าง block service class ใหม่ในโปรเจกต์ของคุณ ตัวอย่างเช่น 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. สร้าง block template ที่ 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. ลงทะเบียน block service ใน config/services.yaml ของคุณ:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. วาง block ในบริบทส่วนท้ายผ่าน Sonata admin หรือโดยเพิ่มไปยังการกำหนดค่า layout ของคุณ
5. แทนที่ YOUR_WIDGET_ID ด้วย widget ID จริงของคุณ

ขั้นตอนที่ 3: ล้างแคชและยืนยัน

หลังจากทำการเปลี่ยนแปลงแล้ว คุณต้องล้างแคช Symfony และตรวจสอบการติดตั้ง:

1. ล้างแคช Symfony โดยรันคำสั่งต่อไปนี้จากรากของโปรเจกต์:
   bin/console cache:clear
2. หากคุณอยู่ในสภาพแวดล้อม production ให้ warm up แคชด้วย:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. เปิดหน้าร้าน Sylius ของคุณในแท็บเบราว์เซอร์ใหม่หรือหน้าต่างไม่ระบุตัวตน
4. คุณควรเห็นปุ่มวิดเจ็ตแชทที่มุมล่างขวา
5. คลิกเพื่อให้แน่ใจว่าเปิดและทำงานได้อย่างถูกต้อง