כיצד להוסיף צ'אטבוט AI של Asyntai ל-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 וגלול למטה לחלק "קוד הטמעה". העתק את קוד ההטמעה הייחודי שלך שייראה כך:

שלב 2: הוספה לתבנית Layout של Twig (מומלץ)

Sylius בנוי על Symfony ומשתמש במנוע התבניות Twig. הגישה המומלצת היא לדרוס את תבנית ה-layout של החנות כדי לכלול את הצ'אטבוט בכל דפי החנות.

1. בפרויקט Sylius שלכם, נווטו לספריית templates/bundles/SyliusShopBundle/ (צרו אותה אם היא לא קיימת)
2. צרו או ערכו את הקובץ layout.html.twig כדי לדרוס את layout ברירת המחדל של החנות
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 מספק מערכת אירועי תבנית עוצמתית שמאפשרת להזריק תוכן לחלקים ספציפיים של ה-layout מבלי לדרוס תבניות שלמות. ניתן להשתמש בזה כדי להוסיף את ווידג'ט הצ'אטבוט לאזור הפוטר.

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 או על ידי הוספתו להגדרות ה-layout
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. לחץ עליו כדי לוודא שהוא נפתח ועובד כראוי