Cara Menambahkan Chatbot AI Asyntai ke Sylius

Platform:

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

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

Langkah 2: Tambahkan ke Template Layout Twig (Direkomendasikan)

Sylius dibangun di atas Symfony dan menggunakan mesin templating Twig. Pendekatan yang direkomendasikan adalah menimpa template layout toko untuk menyertakan chatbot di semua halaman etalase.

1. Di proyek Sylius Anda, navigasi ke direktori templates/bundles/SyliusShopBundle/ (buat jika belum ada)
2. Buat atau edit file layout.html.twig untuk menimpa layout toko bawaan
3. Jika file sudah ada, temukan {% block javascripts %} blok
4. Tambahkan kode embed Asyntai dengan memperluas blok javascripts:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya dari dashboard
6. Simpan file

Metode Alternatif 1: Menggunakan Event Template Sylius

Sylius menyediakan sistem event template yang kuat yang memungkinkan Anda menyuntikkan konten ke bagian tertentu dari layout tanpa menimpa seluruh template. Anda dapat menggunakan ini untuk menambahkan widget chatbot ke area footer.

1. Buat file template baru di templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig dengan konten berikut:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Daftarkan event template di file konfigurasi config/packages/sylius_ui.yaml Anda:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
4. Bersihkan cache Symfony (lihat Langkah 3 di bawah)

Metode Alternatif 2: Menggunakan Webpack Encore

Jika proyek Sylius Anda menggunakan Webpack Encore untuk manajemen aset, Anda dapat mengintegrasikan skrip chatbot melalui pipeline build JavaScript Anda.

1. Buat file JavaScript baru di assets/shop/js/asyntai-chatbot.js dengan konten berikut:
   (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. Impor file ini di titik masuk toko Anda (misalnya, assets/shop/entry.js atau assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Bangun ulang aset Anda dengan menjalankan:
   yarn encore dev

   Atau untuk produksi:

   yarn encore production
4. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya

Metode Alternatif 3: Menggunakan Sonata Block Bundle

Jika instalasi Sylius Anda menggunakan Sonata Block Bundle (disertakan secara default di beberapa konfigurasi Sylius), Anda dapat membuat layanan blok kustom untuk merender widget chatbot.

1. Buat kelas layanan blok baru di proyek Anda, misalnya 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. Buat template blok di 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. Daftarkan layanan blok di config/services.yaml Anda:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Tempatkan blok di konteks footer Anda melalui admin Sonata atau dengan menambahkannya ke konfigurasi layout Anda
5. Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya

Langkah 3: Bersihkan Cache dan Verifikasi

Setelah membuat perubahan, Anda perlu membersihkan cache Symfony dan memverifikasi instalasi:

1. Bersihkan cache Symfony dengan menjalankan perintah berikut dari root proyek Anda:
   bin/console cache:clear
2. Jika Anda berada di lingkungan produksi, juga lakukan pemanasan cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Kunjungi etalase Sylius Anda di tab browser baru atau jendela penyamaran
4. Anda seharusnya melihat tombol widget obrolan di pojok kanan bawah
5. Klik untuk memastikan widget terbuka dan berfungsi dengan benar