Hoe voegt u de Asyntai AI-chatbot toe aan 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

Stap 1: Uw insluitcode ophalen

Ga eerst naar uw Asyntai Dashboard en scroll naar het gedeelte "Insluitcode". Kopieer uw unieke insluitcode die er als volgt uitziet:

Stap 2: Toevoegen aan Twig-layouttemplate (aanbevolen)

Sylius is gebouwd op Symfony en gebruikt de Twig-template-engine. De aanbevolen aanpak is het overschrijven van de shop-layouttemplate om de chatbot op alle winkelpagina's op te nemen.

1. Navigeer in uw Sylius-project naar de map templates/bundles/SyliusShopBundle/ (maak deze aan als deze niet bestaat)
2. Maak of bewerk het bestand layout.html.twig om de standaard shop-layout te overschrijven
3. Als het bestand al bestaat, zoek dan het {% block javascripts %} blok
4. Voeg de Asyntai-insluitcode toe door het javascripts-blok uit te breiden:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Vervang YOUR_WIDGET_ID door uw daadwerkelijke widget-ID uit het dashboard
6. Sla het bestand op

Alternatieve methode 1: Sylius Template Events gebruiken

Sylius biedt een krachtig template-eventsysteem waarmee u inhoud kunt injecteren in specifieke delen van de layout zonder volledige templates te overschrijven. U kunt dit gebruiken om de chatbot-widget aan het voettekstgebied toe te voegen.

1. Maak een nieuw templatebestand aan op templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig met de volgende inhoud:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Registreer het template-event in uw configuratiebestand 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. Vervang YOUR_WIDGET_ID door uw werkelijke widget-ID
4. Wis de Symfony-cache (zie Stap 3 hieronder)

Alternatieve methode 2: Webpack Encore gebruiken

Als uw Sylius-project Webpack Encore gebruikt voor assetbeheer, kunt u het chatbotscript integreren via uw JavaScript-buildpipeline.

1. Maak een nieuw JavaScript-bestand aan op assets/shop/js/asyntai-chatbot.js met de volgende inhoud:
   (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. Importeer dit bestand in uw shop-ingangspunt (bijv. assets/shop/entry.js of assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Bouw uw assets opnieuw op door het volgende uit te voeren:
   yarn encore dev

   Of voor productie:

   yarn encore production
4. Vervang YOUR_WIDGET_ID door uw werkelijke widget-ID

Alternatieve methode 3: Sonata Block Bundle gebruiken

Als uw Sylius-installatie de Sonata Block Bundle gebruikt (standaard opgenomen in sommige Sylius-configuraties), kunt u een aangepaste blokservice maken om de chatbot-widget weer te geven.

1. Maak een nieuwe blokserviceklasse aan in uw project, bijvoorbeeld 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. Maak de bloktemplate aan op 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. Registreer de blokservice in uw config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Plaats het blok in uw voettekstcontext via de Sonata-admin of door het toe te voegen aan uw layoutconfiguratie
5. Vervang YOUR_WIDGET_ID door uw werkelijke widget-ID

Stap 3: Cache wissen en verifiëren

Na het aanbrengen van uw wijzigingen moet u de Symfony-cache wissen en de installatie verifiëren:

1. Wis de Symfony-cache door de volgende opdracht uit te voeren vanuit uw projecthoofdmap:
   bin/console cache:clear
2. Als u zich in een productieomgeving bevindt, warm dan ook de cache op:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Bezoek uw Sylius-webwinkel in een nieuw browsertabblad of incognitovenster
4. U zou de chatwidgetknop in de rechteronderhoek moeten zien
5. Klik erop om te controleren of deze correct opent en werkt