Πώς να προσθέσετε το AI Chatbot 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 και κάντε κύλιση προς τα κάτω στην ενότητα «Κωδικός Ενσωμάτωσης». Αντιγράψτε τον μοναδικό κωδικό ενσωμάτωσής σας που θα μοιάζει ως εξής:

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

Το Sylius είναι χτισμένο πάνω σε Symfony και χρησιμοποιεί τη μηχανή templating Twig. Η συνιστώμενη προσέγγιση είναι να παρακάμψετε το πρότυπο διάταξης καταστήματος για να συμπεριλάβετε το chatbot σε όλες τις σελίδες του καταστήματος.

1. Στο έργο Sylius σας, μεταβείτε στον κατάλογο templates/bundles/SyliusShopBundle/ (δημιουργήστε τον αν δεν υπάρχει)
2. Δημιουργήστε ή επεξεργαστείτε το αρχείο layout.html.twig για παράκαμψη της προεπιλεγμένης διάταξης καταστήματος
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

Το Sylius παρέχει ένα ισχυρό σύστημα συμβάντων προτύπου που σας επιτρέπει να εισάγετε περιεχόμενο σε συγκεκριμένα τμήματα της διάταξης χωρίς παράκαμψη ολόκληρων προτύπων. Μπορείτε να το χρησιμοποιήσετε για να προσθέσετε το chat widget στην περιοχή υποσέλιδου.

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. Καταχωρήστε το συμβάν προτύπου στο αρχείο ρύθμισης 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. Εκκαθαρίστε την cache του Symfony (βλέπε Βήμα 3 παρακάτω)

Εναλλακτική Μέθοδος 2: Χρήση Webpack Encore

Αν το έργο Sylius σας χρησιμοποιεί Webpack Encore για διαχείριση assets, μπορείτε να ενσωματώσετε το script του chatbot μέσω της αλυσίδας κατασκευής JavaScript.

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. Εισαγάγετε αυτό το αρχείο στο σημείο εισόδου του καταστήματός σας (π.χ. assets/shop/entry.js ή assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Ανακατασκευάστε τα assets σας εκτελώντας:
   yarn encore dev

   Ή για παραγωγή:

   yarn encore production
4. Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας

Εναλλακτική Μέθοδος 3: Χρήση Sonata Block Bundle

Αν η εγκατάσταση Sylius σας χρησιμοποιεί το Sonata Block Bundle (συμπεριλαμβάνεται εξ ορισμού σε ορισμένες ρυθμίσεις Sylius), μπορείτε να δημιουργήσετε μια προσαρμοσμένη υπηρεσία block για απόδοση του chat widget.

1. Δημιουργήστε μια νέα κλάση υπηρεσίας block στο έργο σας, για παράδειγμα 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 στο 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 στο config/services.yaml σας:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Τοποθετήστε το block στο πλαίσιο υποσέλιδου μέσω του διαχειριστή Sonata ή προσθέτοντάς το στη ρύθμιση διάταξής σας
5. Αντικαταστήστε το YOUR_WIDGET_ID με το πραγματικό widget ID σας

Βήμα 3: Εκκαθάριση Προσωρινής Μνήμης και Επαλήθευση

Αφού κάνετε τις αλλαγές σας, πρέπει να εκκαθαρίσετε την cache του Symfony και να επαληθεύσετε την εγκατάσταση:

1. Εκκαθαρίστε την cache του Symfony εκτελώντας την παρακάτω εντολή από τη ρίζα του έργου σας:
   bin/console cache:clear
2. Αν βρίσκεστε σε περιβάλλον παραγωγής, θερμάνετε επίσης την cache:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Επισκεφθείτε τη βιτρίνα του Sylius σας σε μια νέα καρτέλα προγράμματος περιήγησης ή σε παράθυρο ανώνυμης περιήγησης
4. Θα πρέπει να δείτε το κουμπί chat widget στην κάτω δεξιά γωνία
5. Κάντε κλικ σε αυτό για να βεβαιωθείτε ότι ανοίγει και λειτουργεί σωστά