Πώς να προσθέσετε το AI Chatbot Asyntai στο SilverStripe

Οδηγός βήμα-βήμα για το SilverStripe CMS

Πλατφόρμα:

Βήμα 1: Αποκτήστε τον Κωδικό Ενσωμάτωσής σας

Πρώτα, μεταβείτε στον Πίνακα Ελέγχου Asyntai και κάντε κύλιση προς τα κάτω στην ενότητα «Κωδικός Ενσωμάτωσης». Αντιγράψτε τον μοναδικό κωδικό ενσωμάτωσής σας που θα μοιάζει ως εξής:

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

Σημείωση: Ο παραπάνω κώδικας είναι απλώς ένα παράδειγμα. Πρέπει να αντιγράψετε τον δικό σας μοναδικό κωδικό ενσωμάτωσης από τον Πίνακα Ελέγχου σας, καθώς περιέχει το προσωπικό σας αναγνωριστικό widget.

Βήμα 2: Προσθήκη στο πρότυπο SilverStripe (Συνιστάται)

Ο απλούστερος τρόπος για να προσθέσετε το chatbot στον ιστότοπο SilverStripe σας είναι να επεξεργαστείτε απευθείας το κύριο αρχείο προτύπου του θέματός σας:

Ανοίξτε το αρχείο προτύπου του θέματός σας (π.χ. themes/yourtheme/templates/Page.ss)
Προσθέστε τον κώδικα ενσωμάτωσης ακριβώς πριν την ετικέτα κλεισίματος </body>:

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

Αποθηκεύστε το αρχείο και εκκαθαρίστε την cache του SilverStripe προσθέτοντας ?flush=1 στο URL του ιστότοπού σας

Συμβουλή: Το SilverStripe χρησιμοποιεί αρχεία προτύπου .ss με σύστημα κληρονομικότητας προτύπων. Τοποθετώντας το script στο βασικό πρότυπο Page.ss διασφαλίζεται ότι το chatbot εμφανίζεται σε κάθε σελίδα του ιστότοπού σας. Αν το θέμα σας χρησιμοποιεί φάκελο Includes, μπορείτε επίσης να τοποθετήσετε το script σε ένα κοινό αρχείο include.

Εναλλακτική Μέθοδος 1: Χρήση κλάσης Requirements στον Controller

Το SilverStripe παρέχει μια κλάση Requirements για τη διαχείριση εξαρτήσεων JavaScript και CSS μέσω προγραμματισμού. Αυτή είναι η συνιστώμενη προσέγγιση για προγραμματιστές:

Ανοίξτε το app/src/PageController.php (ή το αρχείο controller σελίδας σας)
Στη μέθοδο init(), χρησιμοποιήστε Requirements::customScript() για δυναμική φόρτωση του widget:

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);
    }
}

Αποθηκεύστε το αρχείο και εκκαθαρίστε την cache επισκεπτόμενοι το yourdomain.com?flush=1

Σημείωση: Η κλάση Requirements είναι ο τυπικός τρόπος SilverStripe για την ενσωμάτωση scripts και stylesheets. Η χρήση της Requirements::customScript() παράγει ενσωματωμένη JavaScript. Αυτή η μέθοδος διασφαλίζει ότι το widget φορτώνεται σε κάθε σελίδα που διαχειρίζεται ο PageController σας.

Εναλλακτική Μέθοδος 2: Χρήση Requirements στο πρότυπο

Μπορείτε επίσης να χρησιμοποιήσετε τη σύνταξη προτύπου του SilverStripe για να απαιτήσετε αρχεία JavaScript απευθείας στο πρότυπο .ss σας:

Ανοίξτε το αρχείο προτύπου του θέματός σας (π.χ. themes/yourtheme/templates/Page.ss)
Προσθέστε τα παρακάτω κοντά στο κάτω μέρος του προτύπου, πριν το </body>:

<% 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>

Συμβουλή: Η σύνταξη <% require %> είναι ο τρόπος SilverStripe σε επίπεδο προτύπου για ενσωμάτωση αρχείων. Σημειώστε ότι αυτή η μέθοδος δεν υποστηρίζει εγγενώς προσθήκη προσαρμοσμένων χαρακτηριστικών δεδομένων στην ετικέτα script, επομένως προσθέτουμε ένα μικρό τμήμα αρχικοποίησης για τον ορισμό του αναγνωριστικού widget.

Εναλλακτική Μέθοδος 3: Χρήση SilverStripe Config (YAML)

Για μια προσέγγιση βασισμένη σε ρυθμίσεις, μπορείτε να χρησιμοποιήσετε τη ρύθμιση YAML του SilverStripe για να προσθέσετε καθολικές απαιτήσεις:

Ανοίξτε ή δημιουργήστε το αρχείο app/_config/app.yml
Προσθέστε ρυθμίσεις για ενσωμάτωση του widget μέσω προσαρμοσμένης επέκτασης ή ρύθμισης controller:

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

Δημιουργήστε το αρχείο επέκτασης 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);
        ");
    }
}

Εφαρμόστε την επέκταση στον PageController σας στο app/_config/app.yml:

PageController:
  extensions:
    - App\Extensions\AsyntaiChatbotExtension

Εκτελέστε ?flush=1 για ανακατασκευή της cache ρυθμίσεων

Σημείωση: Η χρήση ρύθμισης YAML και επεκτάσεων είναι η πιο αρθρωτή προσέγγιση SilverStripe. Διατηρεί την ενσωμάτωση του chatbot σας ξεχωριστή από τη λογική του κύριου controller σας και διευκολύνει την ενεργοποίηση ή απενεργοποίησή του χωρίς αλλαγή κώδικα.

Βήμα 3: Επαληθεύστε την Εγκατάσταση

Αφού προσθέσετε τον κώδικα και εκκαθαρίσετε την cache του SilverStripe, ανοίξτε τον ιστότοπό σας σε νέα καρτέλα προγράμματος περιήγησης. Θα πρέπει να δείτε το κουμπί του chat widget στην κάτω δεξιά γωνία. Κάντε κλικ για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά.

Δεν βλέπετε το widget; Βεβαιωθείτε ότι εκκαθαρίσατε την cache προσθέτοντας ?flush=1 στο URL του ιστότοπού σας. Ελέγξτε ότι αντικαταστήσατε το YOUR_WIDGET_ID με το πραγματικό αναγνωριστικό widget από τον πίνακα ελέγχου. Εκκαθαρίστε την cache του προγράμματος περιήγησης ή προβάλετε σε λειτουργία ανώνυμης περιήγησης. Ανοίξτε την κονσόλα του προγράμματος περιήγησης (F12) για έλεγχο σφαλμάτων JavaScript. Αν χρησιμοποιείτε την κλάση Requirements, επαληθεύστε ότι η μέθοδος init() του PageController σας καλείται σωστά.