كيفية إضافة روبوت الدردشة Asyntai AI إلى 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 وانتقل لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الذي سيبدو هكذا:

الخطوة 2: الإضافة إلى قالب تخطيط Twig (موصى به)

Sylius مبني على Symfony ويستخدم محرك قوالب Twig. النهج الموصى به هو تجاوز قالب تخطيط المتجر لتضمين روبوت الدردشة في جميع صفحات واجهة المتجر.

1. في مشروع Sylius الخاص بك، انتقل إلى دليل templates/bundles/SyliusShopBundle/ (أنشئه إذا لم يكن موجوداً)
2. أنشئ أو عدّل ملف layout.html.twig لتجاوز تخطيط المتجر الافتراضي
3. إذا كان الملف موجوداً بالفعل، ابحث عن {% block javascripts %} الكتلة
4. أضف كود تضمين Asyntai بتوسيع كتلة javascripts:
   {% 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 بمعرّف الأداة الفعلي من لوحة التحكم
6. احفظ الملف

الطريقة البديلة 1: استخدام أحداث قوالب Sylius

يوفر Sylius نظام أحداث قوالب قوياً يتيح لك حقن المحتوى في أجزاء محددة من التخطيط دون تجاوز القوالب بأكملها. يمكنك استخدامه لإضافة أداة الدردشة إلى منطقة التذييل.

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 بمعرف الأداة الفعلي الخاص بك
4. امسح ذاكرة التخزين المؤقت لـ Symfony (انظر الخطوة 3 أدناه)

الطريقة البديلة 2: استخدام Webpack Encore

إذا كان مشروع Sylius الخاص بك يستخدم Webpack Encore لإدارة الأصول، يمكنك دمج كود روبوت الدردشة من خلال خط أنابيب بناء 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. أعد بناء الأصول بتشغيل:
   yarn encore dev

   أو للإنتاج:

   yarn encore production
4. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك

الطريقة البديلة 3: استخدام Sonata Block Bundle

إذا كان تثبيت Sylius الخاص بك يستخدم Sonata Block Bundle (مضمن افتراضياً في بعض إعدادات Sylius)، يمكنك إنشاء خدمة كتلة مخصصة لعرض أداة الدردشة.

1. أنشئ فئة خدمة كتلة جديدة في مشروعك، مثل 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:
   <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
3. سجّل خدمة الكتلة في config/services.yaml:
   services:
    app.block.asyntai_chatbot:
        class: App\Block\AsyntaiChatbotBlockService
        arguments:
            - '@twig'
        tags:
            - { name: sonata.block, context: footer }
4. ضع الكتلة في سياق التذييل عبر إدارة Sonata أو بإضافتها إلى إعدادات التخطيط
5. استبدل YOUR_WIDGET_ID بمعرف الأداة الفعلي الخاص بك

الخطوة 3: مسح ذاكرة التخزين المؤقت والتحقق

بعد إجراء التغييرات، تحتاج إلى مسح ذاكرة التخزين المؤقت لـ Symfony والتحقق من التثبيت:

1. امسح ذاكرة التخزين المؤقت لـ Symfony بتشغيل الأمر التالي من جذر مشروعك:
   bin/console cache:clear
2. إذا كنت في بيئة إنتاج، قم أيضاً بتسخين ذاكرة التخزين المؤقت:
   bin/console cache:clear --env=prod
bin/console cache:warmup --env=prod
3. قم بزيارة واجهة متجر Sylius في علامة تبويب جديدة أو نافذة تصفح خاص
4. يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى
5. انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح