Cara Menambah 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 Kod Benam Anda

Pertama, pergi ke Papan Pemuka Asyntai anda dan tatal ke bawah ke bahagian "Kod Benam". Salin kod benam unik anda yang akan kelihatan seperti ini:

Langkah 2: Tambah ke Templat Layout Twig (Disyorkan)

Sylius dibina di atas Symfony dan menggunakan enjin templat Twig. Pendekatan yang disyorkan adalah mengatasi templat layout kedai untuk menyertakan chatbot pada semua halaman etalase.

1. Dalam projek Sylius anda, navigasi ke direktori templates/bundles/SyliusShopBundle/ (cipta jika ia belum wujud)
2. Cipta atau edit fail layout.html.twig untuk mengatasi layout kedai lalai
3. Jika fail sudah wujud, cari {% block javascripts %} blok
4. Tambah kod benam Asyntai dengan melanjutkan 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. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda dari papan pemuka
6. Simpan fail

Kaedah Alternatif 1: Menggunakan Acara Templat Sylius

Sylius menyediakan sistem acara templat yang berkuasa yang membolehkan anda menyuntik kandungan ke bahagian tertentu layout tanpa mengatasi keseluruhan templat. Anda boleh menggunakan ini untuk menambah widget chatbot ke kawasan footer.

1. Cipta fail templat baharu di templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig dengan kandungan berikut:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Daftarkan acara templat dalam fail 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. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda
4. Kosongkan cache Symfony (lihat Langkah 3 di bawah)

Kaedah Alternatif 2: Menggunakan Webpack Encore

Jika projek Sylius anda menggunakan Webpack Encore untuk pengurusan aset, anda boleh mengintegrasikan skrip chatbot melalui saluran pembinaan JavaScript anda.

1. Cipta fail JavaScript baharu di assets/shop/js/asyntai-chatbot.js dengan kandungan 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. Import fail ini dalam titik masuk kedai anda (contohnya, assets/shop/entry.js atau assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Bina semula aset anda dengan menjalankan:
   yarn encore dev

   Atau untuk pengeluaran:

   yarn encore production
4. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda

Kaedah Alternatif 3: Menggunakan Sonata Block Bundle

Jika pemasangan Sylius anda menggunakan Sonata Block Bundle (disertakan secara lalai dalam sesetengah konfigurasi Sylius), anda boleh mencipta perkhidmatan blok tersuai untuk memaparkan widget chatbot.

1. Cipta kelas perkhidmatan blok baharu dalam projek anda, contohnya 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. Cipta templat 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 perkhidmatan blok dalam config/services.yaml anda:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Letakkan blok dalam konteks footer anda melalui admin Sonata atau dengan menambahkannya ke konfigurasi layout anda
5. Gantikan YOUR_WIDGET_ID dengan ID widget sebenar anda

Langkah 3: Kosongkan Cache dan Sahkan

Selepas membuat perubahan anda, anda perlu mengosongkan cache Symfony dan mengesahkan pemasangan:

1. Kosongkan cache Symfony dengan menjalankan arahan berikut dari akar projek anda:
   bin/console cache:clear
2. Jika anda berada dalam persekitaran pengeluaran, juga panaskan cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Lawati etalase Sylius anda dalam tab pelayar baharu atau tetingkap inkognito
4. Anda sepatutnya melihat butang widget sembang di sudut kanan bawah
5. Klik padanya untuk memastikan ia terbuka dan berfungsi dengan betul