Az Asyntai AI Chatbot hozzáadása a SilverStripe-hoz

Lépésről lépésre útmutató a SilverStripe CMS-hez

Platform:

1. lépés: Szerezze be a beágyazási kódját

Először lépjen az Asyntai Irányítópultra és görgessen le a „Beágyazási kód" szekcióhoz. Másolja le az egyedi beágyazási kódját, amely így fog kinézni:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Megjegyzés: A fenti kód csak egy példa. Le kell másolnia saját egyedi beágyazási kódját az Irányítópultról, mivel az tartalmazza személyes widget-azonosítóját.

2. lépés: Hozzáadás a SilverStripe sablonhoz (ajánlott)

A chatbot SilverStripe webhelyhez való hozzáadásának legegyszerűbb módja a témája fő sablonfájljának közvetlen szerkesztése:

Nyissa meg a témájának sablonfájlját (pl. themes/yourtheme/templates/Page.ss)
Adja hozzá a beágyazó kódot közvetlenül a záró </body> tag elé:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Mentse el a fájlt, és ürítse a SilverStripe gyorsítótárát a ?flush=1 hozzáfűzésével az oldal URL-jéhez

Tipp: A SilverStripe .ss sablonfájlokat használ sablon öröklési rendszerrel. A szkript alap Page.ss sablonba való elhelyezése biztosítja, hogy a chatbot a webhely minden oldalán megjelenjen. Ha a témája Includes mappát használ, a szkriptet egy megosztott include fájlba is elhelyezheti.

Alternatív módszer 1: Requirements osztály használata a vezérlőben

A SilverStripe biztosít egy Requirements osztályt a JavaScript és CSS függőségek programozott kezeléséhez. Ez a fejlesztők számára ajánlott megközelítés:

Nyissa meg az app/src/PageController.php fájlt (vagy a lapvezérlő fájlját)
Az init() metódusban a Requirements::customScript() metódussal töltse be dinamikusan a widgetet:

use SilverStripe\View\Requirements;

class PageController extends \SilverStripe\CMS\Controllers\ContentController
{
    protected function init()
    {
        parent::init();
        Requirements::customScript(<<<JS
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        JS);
    }
}

Mentse el a fájlt, és ürítse a gyorsítótárat a yourdomain.com?flush=1 oldal megtekintésével

Megjegyzés: A Requirements osztály a SilverStripe-szabványos módja a szkriptek és stíluslapok hozzáadásának. A Requirements::customScript() használata inline JavaScriptet ad ki. Ez a módszer biztosítja, hogy a widget betöltődjön a PageController által kezelt összes oldalon.

Alternatív módszer 2: Requirements használata sablonban

A SilverStripe sablon szintaxisával közvetlenül a .ss sablonban is megkövetelheti a JavaScript fájlokat:

Nyissa meg a témájának sablonfájlját (pl. themes/yourtheme/templates/Page.ss)
Adja hozzá a következőt a sablon aljához, a </body> elé:

<% require javascript("https://asyntai.com/static/js/chat-widget.js") %>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var scripts = document.querySelectorAll('script[src*="chat-widget.js"]');
        scripts.forEach(function(s) {
            s.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
        });
    });
</script>
</body>

Tipp: A <% require %> szintaxis a SilverStripe sablon szintű módja az elemek hozzáadásának. Megjegyzendő, hogy ez a módszer alapértelmezés szerint nem támogatja egyéni adatattribútumok hozzáadását a script taghoz, ezért egy kis inicializáló kódot adunk hozzá a widget azonosítójának beállításához.

Alternatív módszer 3: SilverStripe konfiguráció használata (YAML)

Konfigurációvezérelt megközelítéshez a SilverStripe YAML konfigurációját használhatja globális követelmények hozzáadásához:

Nyissa meg vagy hozza létre az app/_config/app.yml fájlt
Adjon hozzá konfigurációt a widget hozzáadásához egyéni kiterjesztésen vagy vezérlő beállításon keresztül:

# app/_config/app.yml
---
Name: asyntai-chatbot
After: '#rootroutes'
---
SilverStripe\Core\Injector\Injector:
  AsyntaiChatbotExtension:
    class: App\Extensions\AsyntaiChatbotExtension

Hozza létre a kiterjesztési fájlt: app/src/Extensions/AsyntaiChatbotExtension.php:

namespace App\Extensions;

use SilverStripe\Core\Extension;
use SilverStripe\View\Requirements;

class AsyntaiChatbotExtension extends Extension
{
    public function onAfterInit()
    {
        Requirements::customScript("
            var script = document.createElement('script');
            script.src = 'https://asyntai.com/static/js/chat-widget.js';
            script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
            script.async = true;
            document.head.appendChild(script);
        ");
    }
}

Alkalmazza a kiterjesztést a PageController-re az app/_config/app.yml fájlban:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Futtassa a ?flush=1 parancsot a konfigurációs gyorsítótár újraépítéséhez

Megjegyzés: A YAML konfiguráció és kiterjesztések használata a legmodulálisabb SilverStripe megközelítés. A chatbot integrációt elkülöníti a fő vezérlőlogikától, és kód módosítása nélkül könnyen engedélyezhető vagy letiltható.

3. lépés: Telepítés ellenőrzése

A kód hozzáadása és a SilverStripe gyorsítótár ürítése után nyissa meg weboldalát egy új böngészőlapon. A jobb alsó sarokban meg kell jelennie a chat widget gombnak. Kattintson rá, hogy megbizonyosodjon arról, hogy megnyílik és megfelelően működik.

Nem látja a widgetet? Győződjön meg róla, hogy ürítette a gyorsítótárat a ?flush=1 hozzáfűzésével az oldal URL-jéhez. Ellenőrizze, hogy a YOUR_WIDGET_ID értéket lecserélte az irányítópultról származó tényleges widget-azonosítójára. Törölje a böngészőgyorsítótárat, vagy tekintse meg inkognító módban. Nyissa meg a böngésző konzolját (F12), és ellenőrizze a JavaScript hibákat. Ha a Requirements osztályt használja, ellenőrizze, hogy a PageController init() metódusa megfelelően meghívásra kerül-e.