Sylius'e Asyntai AI Chatbot Nasıl Eklenir

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

Adım 1: Yerleştirme Kodunuzu Alın

Önce Asyntai Dashboard'unuza gidin ve "Yerleştirme Kodu" bölümüne inin. Şuna benzeyen benzersiz yerleştirme kodunuzu kopyalayın:

Adım 2: Twig Düzen Şablonuna Ekleme (Önerilen)

Sylius, Symfony üzerine inşa edilmiştir ve Twig şablonlama motorunu kullanır. Önerilen yaklaşım, chatbot'u tüm mağaza ön yüz sayfalarına dahil etmek için mağaza düzen şablonunu geçersiz kılmaktır.

1. Sylius projenizde templates/bundles/SyliusShopBundle/ dizinine gidin (yoksa oluşturun)
2. Varsayılan mağaza düzenini geçersiz kılmak için layout.html.twig dosyasını oluşturun veya düzenleyin
3. Dosya zaten mevcutsa, şu bloğu bulun: {% block javascripts %} bloğu
4. javascripts bloğunu genişleterek Asyntai gömme kodunu ekleyin:
   {% 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 kısmını dashboard'daki gerçek widget kimliğinizle değiştirin
6. Dosyayı kaydedin

Alternatif Yöntem 1: Sylius Şablon Olaylarını Kullanma

Sylius, tüm şablonları geçersiz kılmadan düzenin belirli bölümlerine içerik eklemenize olanak tanıyan güçlü bir şablon olay sistemi sunar. Bunu, chatbot widget'ını footer alanına eklemek için kullanabilirsiniz.

1. Aşağıdaki içerikle templates/bundles/SyliusShopBundle/Event/asyntai_widget.html.twig konumunda yeni bir şablon dosyası oluşturun:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
2. Şablon olayını config/packages/sylius_ui.yaml yapılandırma dosyanıza kaydedin:
   sylius_ui:
    events:
        sylius.shop.layout.after_body:
            blocks:
                asyntai_chatbot:
                    template: "@SyliusShop/Event/asyntai_widget.html.twig"
                    priority: 0
3. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin
4. Symfony önbelleğini temizleyin (aşağıdaki Adım 3'e bakın)

Alternatif Yöntem 2: Webpack Encore Kullanma

Sylius projeniz varlık yönetimi için Webpack Encore kullanıyorsa, chatbot scriptini JavaScript derleme hattınız aracılığıyla entegre edebilirsiniz.

1. Aşağıdaki içerikle assets/shop/js/asyntai-chatbot.js konumunda yeni bir JavaScript dosyası oluşturun:
   (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. Bu dosyayı mağaza giriş noktanıza aktarın (ör. assets/shop/entry.js veya assets/shop/js/app.js):
   import './js/asyntai-chatbot';
3. Varlıklarınızı şu komutu çalıştırarak yeniden oluşturun:
   yarn encore dev

   Veya production için:

   yarn encore production
4. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin

Alternatif Yöntem 3: Sonata Block Bundle Kullanma

Sylius kurulumunuz Sonata Block Bundle kullanıyorsa (bazı Sylius yapılandırmalarında varsayılan olarak dahildir), chatbot widget'ını işlemek için özel bir blok servisi oluşturabilirsiniz.

1. Projenizde yeni bir blok servis sınıfı oluşturun, örneğin 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. templates/block/asyntai_chatbot.html.twig konumunda blok şablonunu oluşturun:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. Blok servisini config/services.yaml dosyanızda kaydedin:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. Bloğu Sonata yönetici aracılığıyla veya düzen yapılandırmanıza ekleyerek footer bağlamına yerleştirin
5. YOUR_WIDGET_ID kısmını gerçek widget kimliğinizle değiştirin

Adım 3: Önbelleği Temizleyin ve Doğrulayın

Değişikliklerinizi yaptıktan sonra Symfony önbelleğini temizlemeniz ve kurulumu doğrulamanız gerekir:

1. Proje kök dizininizden aşağıdaki komutu çalıştırarak Symfony önbelleğini temizleyin:
   bin/console cache:clear
2. Production ortamındaysanız, önbelleği de ısıtın:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. Web sitenizi yeni bir tarayıcı sekmesinde veya gizli pencerede açın
4. Sağ alt köşede sohbet widget'ı düğmesini görmeniz gerekir
5. Düzgün açıldığından ve çalıştığından emin olmak için tıklayın