كيفية إضافة روبوت الدردشة Asyntai AI إلى MedusaCMS

دليل خطوة بخطوة لواجهات المتاجر المدعومة بـ Medusa

المنصة:

مهم: Medusa هي منصة تجارة إلكترونية بدون واجهة. يجب إضافة كود روبوت الدردشة إلى تطبيق واجهة المتجر الخاص بك، وليس إلى خادم/لوحة إدارة Medusa.

الخطوة 1: احصل على كود التضمين

أولاً، انتقل إلى لوحة تحكم Asyntai وانتقل لأسفل إلى قسم "Embed Code". انسخ كود التضمين الفريد الذي سيبدو هكذا:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

ملاحظة: الكود أعلاه مجرد مثال. يجب عليك نسخ كود التضمين الفريد الخاص بك من لوحة التحكم لأنه يحتوي على معرف الأداة الشخصي الخاص بك.

الخطوة 2: الإضافة إلى واجهة متجر Next.js (الأكثر شيوعًا)

يستخدم قالب واجهة المتجر الافتراضي في Medusa إطار Next.js. أضف روبوت الدردشة إلى التخطيط الجذري لواجهة المتجر:

App Router (Next.js 13+)

افتح app/layout.tsx في مشروع واجهة المتجر وأضف مكون Script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

إذا كانت واجهة المتجر تستخدم Pages Router، افتح pages/_document.tsx أو pages/_app.tsx:

// pages/_app.tsx
import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

نصيحة: يضمن خيار strategy="afterInteractive" تحميل روبوت الدردشة بعد أن تصبح الصفحة تفاعلية، مما يوفر أفضل تجربة مستخدم دون التأثير على أداء تحميل الصفحة.

الطريقة البديلة 1: واجهة متجر Gatsby

إذا كانت واجهة متجر Medusa تستخدم Gatsby، أضف النص البرمجي عبر gatsby-ssr.js باستخدام onRenderBody وsetPostBodyComponents:

// gatsby-ssr.js
import React from 'react'

export const onRenderBody = ({ setPostBodyComponents }) => {
  setPostBodyComponents([
    <script
      key="asyntai"
      async
      src="https://asyntai.com/static/js/chat-widget.js"
      data-asyntai-id="YOUR_WIDGET_ID"
    />
  ]);
};

ملاحظة: يجب أيضًا إضافة نفس الكود إلى gatsby-browser.js إذا كنت تريد أن تستمر الأداة أثناء التنقل من جانب العميل. بدلاً من ذلك، أضفه إلى مكون التخطيط الجذري.

الطريقة البديلة 2: واجهة متجر React مخصصة

إذا كانت واجهة متجر Medusa تستخدم إعداد React مخصصًا (Vite أو Create React App وغيرها):

أضف النص البرمجي إلى public/index.html قبل وسم الإغلاق </body> مباشرة:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... existing head content ... -->
  </head>
  <body>
    <div id="root"></div>
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

أو استخدم خطاف useEffect في المكون الجذري:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    // ... your app content
  );
}

الطريقة البديلة 3: أي واجهة أمامية مخصصة

إذا كان متجرك المدعوم بـ Medusa يستخدم أي واجهة أمامية أخرى قائمة على HTML، فما عليك سوى إضافة وسم script القياسي قبل وسم الإغلاق </body> مباشرة:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

نصيحة: تعمل هذه الطريقة مع أي إطار عمل للواجهة الأمامية أو مولد مواقع ثابتة ينتج HTML، بما في ذلك Vue وSvelte وAngular وAstro وغيرها المتصلة بخلفية Medusa.

الخطوة 3: النشر والتحقق

بعد إضافة الكود إلى تطبيق واجهة المتجر:

انشر واجهة المتجر على مزود الاستضافة الخاص بك (Vercel أو Netlify أو Railway وغيرها)
افتح واجهة المتجر المباشرة في علامة تبويب جديدة
يجب أن ترى زر أداة الدردشة في الزاوية السفلية اليمنى
انقر عليه للتأكد من أنه يفتح ويعمل بشكل صحيح

لا ترى الأداة؟ تأكد من استبدال YOUR_WIDGET_ID بمعرف الأداة الفعلي من لوحة التحكم. تحقق من تحميل النص البرمجي في علامة تبويب الشبكة في المتصفح (F12 > Network). تحقق من إعادة نشر واجهة المتجر بعد إضافة الكود. بالنسبة لـ Next.js، تأكد من استخدام مكون Script من next/script، وليس وسم <script> عادي. تذكر أن الكود يُضاف في واجهة المتجر، وليس في خادم Medusa. امسح ذاكرة التخزين المؤقت للمتصفح أو اختبر في وضع التصفح الخاص.

التوثيق