كيفية تنفيذ Clerk.io لـ Magento PWA: دليل خطوة بخطوة

نشرت: 2023-05-25

يتيح لك دمج Clerk.io مع تطبيق الويب التقدمي Magento (PWA) تقديم توصيات مخصصة وتتبع المبيعات بفعالية. سيرشدك منشور المدونة هذا خلال الخطوات لتنفيذ Clerk.io بسلاسة لـ Magento PWA ، مما يتيح لك تعزيز مشاركة العملاء وزيادة التحويلات.

لماذا تكامل Clerk.io مع Magento PWA؟

يوفر دمج Clerk.io مع Magento PWA العديد من المزايا الرئيسية لمتجرك عبر الإنترنت:

  1. التوصيات المخصصة: يوفر Clerk.io أدوات توصية قوية يمكن دمجها بسلاسة في صفحة عربة التسوق وصفحة الفئة وصفحة المنتج. تتيح لك هذه الأدوات عرض توصيات منتجات مخصصة لعملائك ، مما يعزز فرص البيع المتبادل والبيع الإضافي.
  2. تتبع المبيعات المحسن: يوفر Clerk.io إمكانات قوية لتتبع المبيعات ، مما يسمح لك بجمع رؤى قيمة حول سلوك العملاء وقياس فعالية حملاتك التسويقية. من خلال تتبع بيانات المبيعات ، يمكنك تحسين استراتيجياتك وزيادة نمو الإيرادات.

الميزات الرئيسية للتكامل

قبل الغوص في عملية التنفيذ ، دعنا نستكشف الميزات الرئيسية التي يقدمها Clerk.io للتكامل السلس مع Magento PWA:

كاتب
  1. أداة التوصيات: تتيح لك أداة التوصيات عرض توصيات المنتجات المخصصة ديناميكيًا. قم بتنفيذه على عربة التسوق ، والفئة ، وصفحات المنتج لزيادة تفاعل العملاء وتحويلاتهم.
  2. مزامنة بيانات المتجر: يوفر Clerk.io عملية مزامنة لضمان توصيل Magento PWA الخاص بك بسلاسة ، مما يمكّن النظام الأساسي من استرداد البيانات ذات الصلة واستخدامها بفعالية.

7 خطوات لتطبيق Clerk.io لـ Magento PWA

1. إنشاء حساب كاتب وتسجيل الدخول

ابدأ بإنشاء حساب Clerk.io وتسجيل الدخول إلى لوحة معلومات Clerk.io.

2. إضافة متجر

دمج clerk.io مع magento pwa

بعد تسجيل الدخول إلى my.clerk.io ، فإن الخطوة الأولى هي إضافة متجرك:

  • أدخل اسم ومجال متجر الويب الخاص بك
  • اختر Magento 2 كمنصة
  • حدد عملتك
  • انقر فوق إضافة متجر جديد للمتابعة

3. تثبيت وتكوين الامتداد

لدمج Clerk.io مع Magento PWA ، تحتاج إلى تثبيت امتداد Clerk.io وتكوينه. اتبع هذه الخطوات:

  • قم بتشغيل الأوامر التالية في جهازك الطرفي:
 يتطلب الملحن كاتب / magento2
php bin / magento module: قم بتمكين Clerk_Clerk
php bin / magento setup: ترقية
php bin / magento setup: di: compile
  • بعد تثبيت الامتداد ، قم بتكوينه بالانتقال إلى Store → Configuration → Clerk وإدخال مفتاح Clerk.io API الخاص بك.
clerk.io magento 2 pwa

4. مزامنة متجرك

بعد تكوين الامتداد ، من المهم مزامنة متجر Magento الخاص بك مع Clerk.io:

clerk.io pwa دليل التكامل
  • ارجع إلى دليل الإعداد في لوحة معلومات Clerk.io وانقر على مزامنة بياناتك .
  • أدخل تفاصيل متجرك وانقر فوق بدء المزامنة لبدء عملية المزامنة. تضمن هذه الخطوة أن بيانات متجرك متصلة بـ Clerk.io.
تنفيذ كاتب io لـ magento pwa github

5. إعداد وتكوين أداة التوصيات

ارجع إلى الخطوات الأولى للتوصيات حول Magento 2 من أجل:

  • إنشاء أشرطة تمرير التوصية
  • تحديد محتويات القطعة
  • تكوين عرض المحتوى من خلال الواجهة الخلفية لـ Magento
توصيات على Magento 2
توصيات Clerk.io

6. اعرض أداة التوصيات برمجيًا

لإظهار أداة التوصيات برمجيًا في سلة التسوق ، والفئة ، وصفحات المنتج ، تحتاج إلى تنفيذ الخطوات التالية:

قم بإنشاء وحدة لاسترداد تكوين محتوى عنصر واجهة المستخدم من الواجهة الخلفية لماجينتو.

  • حدد متغيرات التكوين في ملف di.xml .
  • قم بإنشاء ملف schema.graphqls مع الحقول المطلوبة لاسترجاع API.

قم بتطوير وظيفة إضافية لـ PWA للاستعلام عن بيانات تكوين المتجر وجلب محتوى عنصر واجهة المستخدم.

  • استعلام GraphQl لاسترداد بيانات تكوين المخزن.
  • بعض الروابط المخصصة للاستعلام عن نقطة نهاية Clerk API https://api.clerk.io/v2?payload= لجلب بيانات محتوى عنصر واجهة المستخدم.
  • المكونات الممتدة من المكون الأساسي PWA ، مع اعتراضات قابلة للاستهداف برمجيًا تستدعي الخطافات المخصصة وتدرج بيانات المحتوى بناءً على التكوين.
  • بعض أوراق الأنماط لتتوافق مع الموضوع الحالي.

الكود ذو الصلة:

 <! - حدد متغير التكوين في ملف di.xml. ->
<type name = "Magento \ StoreGraphQl \ Model \ Resolver \ Store \ StoreConfigDataProvider">
        <الحجج>
            <اسم الوسيطة = "extensionConfigData" xsi: type = "array">
                <item name = "clerk_general_public_key" xsi: type = "string"> كاتب / عام / public_key </item>
                <item name = "clerk_category_enabled" xsi: type = "string"> كاتب / فئة / ممكن </ em>
                <item name = "clerk_category_content" xsi: type = "string"> كاتب / فئة / محتوى </item>
                <item name = "clerk_product_enabled" xsi: type = "string"> كاتب / منتج / ممكّن </ em>
                <item name = "clerk_product_content" xsi: type = "string"> كاتب / منتج / محتوى </item>
                <item name = "clerk_cart_enabled" xsi: type = "string"> كاتب / سلة التسوق / ممكن </ em>
                <item name = "clerk_cart_content" xsi: type = "string"> كاتب / سلة تسوق / محتوى </ item
            </argument>
        </ الحجج>
    </type> 
 // قم بإنشاء ملف schema.grapqls
اكتب StoreConfig {
    clerk_general_public_key: Stringdoc (الوصف: "clerk public key")
    clerk_category_enabled: منطقيdoc (الوصف: "حالة محتوى فئة كاتب")
    clerk_category_content: Stringdoc (الوصف: "فئة محتوى فئة الكاتب")
    clerk_product_enabled: Booleandoc (الوصف: "حالة محتوى منتج كاتب")
    clerk_product_content: Stringdoc (الوصف: "فئة محتوى المنتج كاتب")
    clerk_cart_enabled: Booleandoc (الوصف: "حالة محتوى عربة التسوق")
    clerk_cart_content: Stringdoc (الوصف: "حالة محتوى عربة التسوق")
} 
 // استعلام GraphQl لاسترداد بيانات تكوين المتجر.
تصدير const GET_STORE_CONFIG_DATA = gql`
    الاستعلام عن getStoreConfigClerk {
        # eslint-disable-next-line @ graphql-eslint / need-id-when-available
        storeConfig {
            store_code
            كاتب_العام_المفتاح العام
            كاتب_فئة_تمكين
            كاتب_الفئة_محتوى
            clerk_product_enabled
            clerk_product_content
            clerk_cart_enabled
            clerk_cart_content
        }
    }
"؛

7. تمكين تتبع المبيعات برمجياً

لتنفيذ تتبع المبيعات باستخدام Clerk.io في Magento PWA ، اتبع الخطوات التالية:

  • قم بإنشاء مكونات ومخالب لتوسيع ملفات سمة Venia الأساسية والتعامل مع استدعاءات واجهة برمجة التطبيقات لتتبع المبيعات إلى نقطة نهاية Clerk.io https://api.clerk.io/v2/log/sale للكاتب بعد تقديم الطلب.
  • قم بتوسيع ملفات السمات المتعلقة بطرق الدفع الخاصة بك ، مثل SagePay و Stripe ، لتضمين تتبع المبيعات.
  • قم بتوسيع @magento/peregrine/lib/store/actions/checkout/asyncActions.js لدمج الوظائف الضرورية.
كاتب ماجنتو 2

باتباع هذه الخطوات ، يمكنك دمج Clerk.io بنجاح مع Magento PWA والاستفادة من ميزاته القوية لتعزيز تجربة التسوق لعملائك.

مثال عرض

للحصول على تمثيل مرئي لتكامل Clerk.io أثناء العمل ، قم بزيارة موقعنا التجريبي.

  • صفحة الفئة
أمثلة clerk.io في magento 2 pwa
  • صفحة المنتج
clerk.io على صفحة منتج magento pwa
  • صفحة عربة التسوق
صفحة عربة التسوق
  • تتبع المبيعات
تتبع المبيعات

الكلمات الأخيرة

يوفر دمج Clerk.io مع Magento PWA مزايا قوية لمتجرك عبر الإنترنت. باتباع الخطوات المقدمة ، يمكنك تنفيذ Clerk.io بسلاسة والاستمتاع بالتوصيات المخصصة وتتبع المبيعات الفعال.

إذا واجهت أي تحديات أثناء عملية الاندماج أو كنت تفضل أن يتعامل معها الخبراء نيابة عنك ، فإن فريق Tigren هنا لمساعدتك. مع أكثر من 5 سنوات من الخبرة في تطوير Magento PWA ، لدينا معرفة وخبرة متعمقة لمساعدتك. سواء أكنت بحاجة إلى إنشاء Magento PWA قوي من البداية ، أو استخدام سمة Magento PWA ، أو دمجها مع برنامج تابع لجهة خارجية ، فإن فريقنا جاهز لتقديم حلول مخصصة لتلبية متطلباتك الخاصة.

لا تتردد في التواصل مع فريق Tigren للحصول على مساعدة الخبراء في تعظيم إمكانات Magento PWA وضمان التكامل السلس مع Clerk.io.

المنشورات ذات الصلة:

لا يمكن معاينة حملة في تنظيم محتوى Magento PWA؟ إليك كيفية إصلاحه