Asyntai AI -chatbotin lisääminen Syliukseen

Alusta:

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

Vaihe 1: Hanki upotuskoodisi

Siirry ensin Asyntai-hallintapaneeliin ja vieritä alas "Upotuskoodi"-osioon. Kopioi yksilöllinen upotuskoodisi, joka näyttää tältä:

Vaihe 2: Lisää Twig-asettelumalliin (suositeltu)

Sylius on rakennettu Symfonyn päälle ja käyttää Twig-mallipohjamootoria. Suositeltu tapa on ylikirjoittaa kaupan asettelumalli chatbotin sisällyttämiseksi kaikille kauppasivuille.

1. Siirry Sylius-projektissasi templates/bundles/SyliusShopBundle/-hakemistoon (luo se tarvittaessa)
2. Luo tai muokkaa tiedostoa layout.html.twig ylikirjoittaaksesi kaupan oletusasettelun
3. Jos tiedosto on jo olemassa, etsi {% block javascripts %} lohko
4. Lisää Asyntai-upotuskoodi laajentamalla javascripts-lohkoa:
   {% block javascripts %} {{ parent() }} <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script> {% endblock %}
5. Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi hallintapaneelista
6. Tallenna tiedosto

Vaihtoehtoinen menetelmä 1: Sylius-mallitapahtumien käyttö

Sylius tarjoaa tehokkaan mallitapahtumajärjestelmän, joka mahdollistaa sisällön lisäämisen tiettyihin asettelun osiin ilman kokonaisten mallien ylikirjoittamista. Voit käyttää tätä chatbot-widgetin lisäämiseen alatunnistealueelle.

1. Luo uusi mallitiedosto polkuun templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig seuraavalla sisällöllä:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Rekisteröi mallitapahtuma config/packages/sylius_ui.yaml-konfiguraatiotiedostossasi:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi
4. Tyhjennä Symfony-välimuisti (katso vaihe 3 alla)

Vaihtoehtoinen menetelmä 2: Webpack Encoren käyttö

Jos Sylius-projektisi käyttää Webpack Encore -työkalua resurssien hallintaan, voit integroida chatbot-skriptin JavaScript-buildausputken kautta.

1. Luo uusi JavaScript-tiedosto polkuun assets/shop/js/asyntai-chatbot.js seuraavalla sisällöllä:
   (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. Tuo tämä tiedosto kaupan aloituspisteeseen (esim. assets/shop/entry.js tai assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Rakenna resurssisi uudelleen suorittamalla:
   yarn encore dev

   Tai tuotantoympäristöä varten:

   yarn encore production
4. Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi

Vaihtoehtoinen menetelmä 3: Sonata Block Bundlen käyttö

Jos Sylius-asennuksesi käyttää Sonata Block Bundlea (sisältyy oletusarvoisesti joihinkin Sylius-konfiguraatioihin), voit luoda mukautetun lohkopalvelun chatbot-widgetin renderöimiseksi.

1. Luo uusi lohkopalveluluokka projektiisi, esimerkiksi 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. Luo lohkomalli polkuun 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. Rekisteröi lohkopalvelu config/services.yaml-tiedostossasi:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Sijoita lohko alatunnistekontekstiisi Sonata-hallintapaneelin kautta tai lisäämällä se asettelukonfiguraatioosi
5. Korvaa YOUR_WIDGET_ID todellisella widget-tunnuksellasi

Vaihe 3: Tyhjennä välimuisti ja vahvista

Muutosten tekemisen jälkeen sinun on tyhjennettävä Symfony-välimuisti ja varmistettava asennus:

1. Tyhjennä Symfony-välimuisti suorittamalla seuraava komento projektisi juurihakemistosta:
   bin/console cache:clear
2. Jos olet tuotantoympäristössä, lämmitä myös välimuisti:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Avaa Sylius-kauppasi uudessa selaimen välilehdessä tai incognito-ikkunassa
4. Chat-widget-painikkeen pitäisi näkyä oikeassa alakulmassa
5. Napsauta sitä varmistaaksesi, että se avautuu ja toimii oikein