So fügen Sie den Asyntai AI Chatbot zu Sylius hinzu

Plattform:

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

Schritt 1: Ihren Einbettungscode erhalten

Gehen Sie zunächst zu Ihrem Asyntai Dashboard und scrollen Sie zum Abschnitt "Einbettungscode". Kopieren Sie Ihren einzigartigen Einbettungscode, der so aussieht:

Schritt 2: Zur Twig-Layout-Vorlage hinzufügen (empfohlen)

Sylius basiert auf Symfony und verwendet die Twig-Template-Engine. Der empfohlene Ansatz ist, die Shop-Layout-Vorlage zu überschreiben, um den Chatbot auf allen Storefront-Seiten einzubinden.

1. Navigieren Sie in Ihrem Sylius-Projekt zum Verzeichnis templates/bundles/SyliusShopBundle/ (erstellen Sie es, falls es nicht existiert)
2. Erstellen oder bearbeiten Sie die Datei layout.html.twig, um das Standard-Shop-Layout zu überschreiben
3. Wenn die Datei bereits existiert, finden Sie den {% block javascripts %} Block
4. Fügen Sie den Asyntai-Einbettungscode hinzu, indem Sie den JavaScript-Block erweitern:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID aus dem Dashboard
6. Speichern Sie die Datei

Alternative Methode 1: Sylius Template-Events verwenden

Sylius bietet ein leistungsfähiges Template-Event-System, mit dem Sie Inhalte in bestimmte Teile des Layouts einfügen können, ohne ganze Vorlagen zu überschreiben. Sie können dies verwenden, um das Chatbot-Widget im Footer-Bereich hinzuzufügen.

1. Erstellen Sie eine neue Vorlagendatei unter templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig mit folgendem Inhalt:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registrieren Sie das Template-Event in Ihrer Konfigurationsdatei 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. Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID
4. Leeren Sie den Symfony-Cache (siehe Schritt 3 unten)

Alternative Methode 2: Webpack Encore verwenden

Wenn Ihr Sylius-Projekt Webpack Encore für die Asset-Verwaltung verwendet, können Sie das Chatbot-Skript über Ihre JavaScript-Build-Pipeline integrieren.

1. Erstellen Sie eine neue JavaScript-Datei unter assets/shop/js/asyntai-chatbot.js mit folgendem Inhalt:
   (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. Importieren Sie diese Datei in Ihren Shop-Einstiegspunkt (z. B. assets/shop/entry.js oder assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Bauen Sie Ihre Assets neu, indem Sie Folgendes ausführen:
   yarn encore dev

   Oder für die Produktion:

   yarn encore production
4. Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID

Alternative Methode 3: Sonata Block Bundle verwenden

Wenn Ihre Sylius-Installation das Sonata Block Bundle verwendet (standardmäßig in einigen Sylius-Konfigurationen enthalten), können Sie einen benutzerdefinierten Block-Service erstellen, um das Chatbot-Widget zu rendern.

1. Erstellen Sie eine neue Block-Service-Klasse in Ihrem Projekt, zum Beispiel 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. Erstellen Sie die Block-Vorlage unter 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. Registrieren Sie den Block-Service in Ihrer config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Platzieren Sie den Block in Ihrem Footer-Kontext über den Sonata-Adminbereich oder indem Sie ihn zu Ihrer Layout-Konfiguration hinzufügen
5. Ersetzen Sie YOUR_WIDGET_ID durch Ihre tatsächliche Widget-ID

Schritt 3: Cache leeren und überprüfen

Nachdem Sie Ihre Änderungen vorgenommen haben, müssen Sie den Symfony-Cache leeren und die Installation überprüfen:

1. Leeren Sie den Symfony-Cache, indem Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts ausführen:
   bin/console cache:clear
2. Wenn Sie sich in einer Produktionsumgebung befinden, wärmen Sie auch den Cache auf:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Besuchen Sie Ihren Sylius-Storefront in einem neuen Browser-Tab oder Inkognito-Fenster
4. Sie sollten den Chat-Widget-Button in der unteren rechten Ecke sehen
5. Klicken Sie darauf, um sicherzustellen, dass es korrekt öffnet und funktioniert