إمكانية توسيع Shopify Plus Checkout: تجارب الخروج المخصصة

يتم تحويل عملية الدفع في Shopify بمعدل 15% - من بين أعلى المعدلات في التجارة الإلكترونية. هذه الإحصائية هي السبب وراء قيام Shopify بتقييد تخصيص عملية الدفع تاريخيًا: تم تحسين عملية الدفع بشكل جيد، وتميل التعديلات المخصصة إلى تقليل التحويل. لكن التجار لديهم أسباب مشروعة للتخصيص: عرض نقاط الولاء، وتفضيلات التسليم، ورسائل الهدايا، وحقول أوامر الشراء B2B، ومتطلبات الامتثال التي لا يمكن أن تلبيها عملية الدفع القياسية.

إمكانية التوسعة في Checkout هي إجابة Shopify Plus على هذا التوتر. فهو يسمح بتخصيص الخروج بشكل مفيد مع الحفاظ على بنية الخروج المحسنة لـ Shopify سليمة والحفاظ على التحديثات التلقائية مع قيام Shopify بتطوير النظام الأساسي. تم إيقاف نهج checkout.liquid المهمل في كل مرة يقوم فيها Shopify بتحديث عملية الدفع. تعتبر الإضافات آمنة للترقية حسب التصميم.

الوجبات الرئيسية

تحل إمكانية توسيع Checkout محل checkout.liquid المهمل - يجب أن يتم ترحيل جميع تجار Plus بحلول عام 2025 (الماضي بالفعل)

تضيف ملحقات واجهة المستخدم مكونات React إلى فتحات دفع محددة دون تجاوز قالب الدفع الأساسي الخاص بـ Shopify

تعمل وظائف الخروج على تمكين المنطق المخصص من جانب الخادم للخصومات والشحن وتصفية طرق الدفع

يتم تنفيذ الإضافات في بيئة معزولة - لا يمكنها الوصول إلى DOM خارج هدف العرض الخاص بها

تتيح واجهة برمجة تطبيقات العلامة التجارية إمكانية التخصيص المرئي الكامل لألوان الخروج والطباعة ونصف قطر الزاوية

تضيف ملحقات ما بعد الشراء عروض بيع بنقرة واحدة بعد تأكيد الطلب (أعلى موضع تحويل)

أصبحت صفحة "شكرًا لك" وصفحة "حالة الطلب" قابلة للتخصيص بالكامل باستخدام الامتدادات

الأداء: يتم تقديم الإضافات من جانب الخادم في البنية التحتية لـ Shopify - ولا توجد عقوبة على الأداء من جانب العميل

بنية قابلية التوسعة في الخروج

يساعدك فهم البنية التقنية على اتخاذ قرارات أفضل بشأن ما يجب بناؤه وكيف.

** نقاط التمديد (الفتحات) **

تحتوي واجهة المستخدم الخاصة بالخروج في Shopify على نقاط امتداد محددة مسبقًا — مواقع محددة يمكنك من خلالها إدخال مكونات React مخصصة. فكر فيها على أنها فتحات منظمة في قالب الخروج الذي يقبل المكونات المعتمدة:

نقطة التمديد	الموقع في الخروج	حالات الاستخدام الشائع
`purchase.checkout.block.render`	أي قسم (الأكثر مرونة)	كتل إعلامية مخصصة
`purchase.checkout.cart-line-item.render-after`	بعد كل بند	الكشف عن الحزمة، ملاحظات المنتج
`purchase.checkout.reductions.render-after`	بعد حقل الخصم	القطعة استبدال نقاط الولاء
`purchase.checkout.shipping-option-item.render-after`	بعد كل خيار شحن	عرض تقدير تاريخ التسليم
`purchase.checkout.payment-method-list.render-after`	بعد طرق الدفع	شارات أمنية، ضمانات الدفع
`purchase.checkout.contact.render-after`	بعد معلومات الاتصال	خانة اختيار الموافقة على اللائحة العامة لحماية البيانات، حقل B2B
`purchase.checkout.actions.render-before`	قبل "إكمال الطلب"	العرض النهائي، القطعة التبرع
`purchase.thank-you.block.render`	صفحة تأكيد الطلب	البيع المتبادل، ونقاط الولاء المكتسبة
`purchase.order-status.block.render`	صفحة حالة الطلب	بدء العودة، القطعة الدعم

صندوق الحماية الممتد

تعمل الإضافات في بيئة JavaScript معزولة. يتواصلون مع عملية الدفع في Shopify عبر واجهة برمجة تطبيقات موحدة (الحزمة @shopify/ui-extensions) بدلاً من معالجة DOM المباشرة. هذا يعني:

لا يمكن للملحقات قراءة أو تعديل أجزاء أخرى من صفحة الخروج
لا يمكن للملحقات الوصول إلى ملفات تعريف الارتباط للمتصفح أو التخزين المحلي أو جافا سكريبت الخارجي
يجب أن تمر طلبات الشبكة من الامتدادات عبر نقاط النهاية المعتمدة لدى Shopify
يمكن للملحقات قراءة بيانات الدفع (محتويات سلة التسوق ومعلومات العميل واختيار الشحن) عبر واجهة برمجة التطبيقات

إن وضع الحماية هذا هو السبب وراء كون الإضافات آمنة للترقية: يمكن لـ Shopify تحديث قالب الدفع دون كسر عمليات تكامل الإضافات.

إعداد بيئة تطوير الامتدادات الخاصة بك

المتطلبات الأساسية

متجر Shopify Plus مع إمكانية الوصول إلى متجر التطوير -Node.js 18+ وnpm/pnpm
Shopify CLI 3.x

الإعداد الأولي

npm install -g @shopify/cli @shopify/theme
shopify app create
# Select: Add extension → Checkout UI extension

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

** هيكل ملف الامتداد **

extensions/
  my-checkout-extension/
    src/
      Checkout.tsx    # Main React component
    shopify.extension.toml   # Extension configuration
    package.json

الامتداد الأدنى (TypeScript/React)

ملحق الخروج الذي يعرض رسالة مخصصة:

import {
  reactExtension,
  useSettings,
  Banner,
} from "@shopify/ui-extensions-react/checkout";

export default reactExtension(
  "purchase.checkout.block.render",
  () => <MyExtension />
);

function MyExtension() {
  const { message } = useSettings();
  return (
    <Banner status="info">
      {message || "Default message"}
    </Banner>
  );
}

ملاحظة: أمثلة التعليمات البرمجية توضيحية؛ تتطور واجهة برمجة تطبيقات Shopify UI Extensions الفعلية - قم دائمًا بالرجوع إلى وثائق مطور Shopify الحالية.

حالات استخدام الامتدادات عالية القيمة

1. عرض نقاط الولاء واستردادها

أظهر رصيد نقاط الولاء الحالي للعميل واسمح له بتطبيق النقاط كخصم:

يقرأ الملحق معرف العميل من سياق الخروج، ويستدعي واجهة برمجة التطبيقات (API) الخاصة بمنصة الولاء الخاصة بك (Smile.io، LoyaltyLion) عبر وكيل Shopify fetch، ويعرض الرصيد، وعند التأكيد، يطبق رمز الخصم عبر واجهة برمجة تطبيقات الخصم الخاصة بـ Shopify.

يحل هذا محل نقطة الاحتكاك الشائعة: العملاء الذين يرغبون في استرداد نقاط الولاء ولكن عليهم مغادرة الخروج للعثور على الرمز الخاص بهم، مما يؤدي غالبًا إلى التخلي عن سلة التسوق.

تأثير التحويل المتوقع: زيادة بنسبة 3 إلى 8% في معدل إتمام عملية الدفع لأعضاء برنامج الولاء الذين يرون النقاط المتاحة.

2. رسالة الهدية وخيارات التغليف

قم بإضافة حقل رسالة هدية وخيار تغليف الهدايا للخروج. التمديد:

يعرض مفتاح التبديل "هذه هدية".
عند التمكين، يظهر حقل نصي لرسالة الهدية
يُظهر اختياريًا زيادة في سعر تغليف الهدايا (يتم إضافة سعر ثابت كبند)
يحفظ الرسالة كسمة طلب يمكن الوصول إليها في سير عمل التعبئة الخاص بك

التأثير المتوقع: 2-5% من الطلبات تستخدم رسائل الهدايا؛ يؤدي البيع إلى إنشاء إيرادات إضافية.

3. حقل رقم أمر الشراء B2B

يحتاج مشترو B2B إلى رقم أمر الشراء لأنظمة الشراء الخاصة بهم. بدون هذا المجال، يكون احتكاك الخروج بين الشركات أمرًا مهمًا:

يضيف الملحق حقل إدخال النص "رقم طلب الشراء"، ويضع علامة عليه على أنه مطلوب لعملاء B2B (يتم اكتشافه عبر علامات العميل)، ويحفظ رقم أمر الشراء كسمة طلب. يظهر رقم أمر الشراء على الفواتير وفي أمر المشرف.

اعتبارات التنفيذ: اكتشف عملاء B2B عن طريق التحقق من علامات العملاء باستخدام الخطاف useCustomer.

4. تفضيلات تاريخ التسليم

بالنسبة للتجار الذين يقدمون خيارات متعددة لسرعة التسليم، فإن عرض تواريخ التسليم المقدرة إلى جانب خيارات الشحن يقلل من عدم اليقين في القرار ويزيد من اختيار الشحن المتميز:

يتم ربط الامتداد بـ purchase.checkout.shipping-option-item.render-after لإدخال حساب تاريخ التسليم أسفل كل خيار شحن. يستخدم حساب التاريخ التاريخ الحالي + أيام نقل الشحن (يتم جلبها من واجهة برمجة التطبيقات الخاصة بشركة الاتصالات الخاصة بك أو يتم تشفيرها بواسطة منطقة الشحن).

التأثير المتوقع: زيادة بنسبة 8 إلى 15% في اختيار الشحن السريع عند عرض تواريخ التسليم الدقيقة.

5. البيع الإضافي/البيع المتبادل عند الدفع

حظر زيادة مبيعات المنتج قبل زر "إكمال الطلب" - الفرصة الأخيرة لزيادة AOV قبل الشراء:

يقرأ الملحق محتويات سلة التسوق، ويستدعي واجهة برمجة تطبيقات محرك التوصية الخاص بك، ويعرض 1-2 من المنتجات الإضافية ذات الصلة بنقرة واحدة إضافية إلى عربة التسوق. تعمل العناصر المضافة عبر الامتداد على تحديث إجمالي الخروج من Shopify في الوقت الفعلي.

التأثير المتوقع: يضيف 5 إلى 12% من المشترين عنصرًا من مجموعة الدفع الإضافية.

ملحقات ما بعد الشراء: أعلى فرصة لعائد الاستثمار

تظهر ملحقات ما بعد الشراء في صفحة تأكيد الطلب مباشرة بعد إكمال العميل عملية الدفع. العميل في حالة ذروة إيجابية - لقد اشترى للتو شيئًا يريده. هذا هو الموضع الأعلى تحويلًا لعروض البيع.

زيادة المبيعات بعد الشراء بنقرة واحدة

يمكن أن يوفر ملحق ما بعد الشراء وظيفة إضافية للمنتج يتم فرض رسوم عليها على طريقة الدفع المعتمدة بالفعل للعميل دون تدفق دفع جديد:

يكمل العميل الطلب رقم 1234
يظهر الملحق: "أكمل عملية الشراء — أضف [المنتج] مقابل 19 دولارًا (نقرة واحدة، بدون إعادة إدخال معلومات الدفع)"
يقبل العميل أو يرفض
في حالة القبول: يتم إنشاء رسوم جديدة وبند أمر جديد
تتم إعادة توجيه العميل إلى صفحة حالة الطلب النهائية

التأثير المتوقع: معدل قبول يتراوح بين 8 و20% على عروض ما بعد الشراء المُعدة جيدًا عند نقطة السعر المناسبة (عرض بقيمة 10 إلى 30 دولارًا أمريكيًا للطلب الأساسي الذي يزيد عن 100 دولار أمريكي).

تخصيصات صفحة الشكر

بالإضافة إلى عمليات الارتقاء بالمبيعات، يمكن لامتداد صفحة الشكر أن:

عرض نقاط الولاء المكتسبة من هذا الطلب
عرض CTA لبرنامج الإحالة مع رابط المشاركة المعبأ مسبقًا
عرض ترقية الاشتراك لمشتري المنتجات الاستهلاكية لمرة واحدة
طلب متابعة وسائل التواصل الاجتماعي مع الحافز
عرض تعليمات العناية بالمنتج للمشترين من الفئة لأول مرة

وظائف الخروج: ملحقات المنطق من جانب الخادم

تعد وظائف الدفع أقوى من امتدادات واجهة المستخدم - فهي تقوم بتعديل منطق حساب الدفع الأساسي نفسه. يتم تشغيلها من جانب الخادم باعتبارها WebAssembly المترجمة، مما يعني أنها سريعة ولا يمكن تجاوزها عن طريق التلاعب من جانب العميل.

** وظائف الخصم **

قم بتنفيذ منطق الخصم المعقد الذي لا يدعمه محرك الخصم الأصلي في Shopify:

سيناريو الخصم المخصص	Shopify الأصلي؟	وظيفة الخصم؟
اشتر 3 وادفع مقابل 2 (على أساس الطبقة)	جزئي	كامل
النسبة المئوية للخصم على الطلبات من مصدر إحالة محدد	لا	نعم
هدية مجانية عند الشراء (منتج محدد)	التطبيق مطلوب	نعم
الخصم التلقائي على أساس مجموعة العملاء	لا	نعم
خصم الحجم الذي يتناسب مع الكمية عبر عناصر متعددة	لا	نعم
الخصم على أساس الجغرافي	لا	نعم

وظائف الشحن

قم بتعديل كيفية قيام Shopify بحساب خيارات الشحن وتقديمها:

إخفاء طرق شحن معينة بناءً على محتويات سلة التسوق (لا يوجد شحن قياسي للسلع كبيرة الحجم)
أدخل أسعار الشحن المخصصة من مزود الخدمات اللوجستية الخاص بك
تطبيق رسوم الشحن الإضافية لعناوين التسليم البعيدة
عرض الشحن المجاني بمجرد وصول سلة التسوق إلى الحد الأدنى (يتم حسابه في الوقت الفعلي)

** وظائف تخصيص الدفع **

التحكم في طرق الدفع التي تظهر:

إخفاء "الدفع عند الاستلام" للطلبات الدولية
إظهار التحويل البنكي فقط للطلبات التي تزيد عن 10000 دولار
إخفاء PayPal لفئات منتجات محددة (لأسباب تتعلق بالامتثال)
عرض أوصاف أو أيقونات طريقة الدفع المخصصة

واجهة برمجة تطبيقات العلامة التجارية: تخصيص الدفع المرئي

تتيح واجهة برمجة تطبيقات Checkout Branding إمكانية التخصيص المرئي الشامل دون لمس منطق الخروج:

ما يمكنك تخصيصه

العنصر	خيارات التخصيص
الألوان	اللكنة الأساسية، حالة الخطأ، الخلفية، النص
الطباعة	عائلة الخطوط (من Shopify's CDN)، الحجم، الوزن
نصف قطر الزاوية	الأزرار وحقول النموذج والحاويات (حادة مقابل مستديرة)
أزرار	نمط التعبئة، نص التسمية، حالات التمرير
حقول النموذج	نمط الحدود، وتحديد المواقع التسمية
رأس/تذييل الصفحة الخروج	موضع الشعار، خلفية الرأس

قم بالتكوين عبر مسؤول Shopify → الإعدادات → حسابات الدفع والعملاء → تخصيص الدفع أو عبر Branding API مباشرة للتكوين البرمجي عبر متاجر متعددة.

الهجرة من checkout.liquid

إذا كان متجر Shopify Plus الخاص بك يستخدم checkout.liquid (تم إيقافه في أغسطس 2024، واكتمل الترحيل القسري)، فستحتاج إلى إعادة بناء التخصيصات كملحقات. تخصيصات checkout.liquid الشائعة وما يعادلها من الامتدادات:

checkout.تخصيص السائل	تمديد يعادل
رأس/شعار مخصص	واجهة برمجة تطبيقات العلامات التجارية
نص تذييل مخصص	`purchase.checkout.block.render` (أسفل)
حقل رسالة الهدية	`purchase.checkout.actions.render-before`
مخصص CSS	واجهة برمجة تطبيقات العلامة التجارية (تقتصر على خيارات واجهة برمجة التطبيقات)
تحليلات حقن البكسل	Shopify Pixels API (نظام منفصل)
جافا سكريبت مخصص	لا يمكن النسخ المتماثل مباشرةً — استخدم وظائف Checkout للمنطق
القطعة الإثبات الاجتماعي	`purchase.checkout.block.render`
شارات الثقة	واجهة برمجة تطبيقات العلامة التجارية + `purchase.checkout.payment-method-list.render-after`

القيود مقابل checkout.liquid

لا يمكن للملحقات نسخ حقن JavaScript التعسفي أو المعالجة الكاملة للقالب. إذا كان checkout.liquid يحتوي على منطق شرطي معقد أو تخطيطات واجهة مستخدم مخصصة بشكل كبير، فقد تتطلب بعض الوظائف إعادة البناء باستخدام وظائف Checkout أو قد لا تكون قابلة للتكرار في إطار عمل الملحقات على الإطلاق.

الأسئلة المتداولة

هل تعمل ميزات إمكانية التوسعة في Checkout على الهاتف المحمول وسطح المكتب؟

نعم. يتم عرض ملحقات واجهة المستخدم باستخدام مكونات واجهة المستخدم الخاصة بـ Shopify، والتي تستجيب بطبيعتها. تتعامل عملية الدفع في Shopify مع استجابة التخطيط — حيث يتم عرض الامتداد الخاص بك داخل الفتحة المخصصة له، والتي تتكيف مع حجم الشاشة تلقائيًا. لا تحتاج إلى كتابة تخطيطات منفصلة للهاتف المحمول وسطح المكتب.

هل يمكن للإضافات إبطاء تجربة الدفع؟

يتم عرض ملحقات واجهة المستخدم بواسطة الخادم داخل البنية التحتية لـ Shopify - فهي لا تتطلب تنفيذ JavaScript من جانب العميل للعرض الأولي. ومع ذلك، فإن الإضافات التي تقوم باستدعاءات واجهة برمجة التطبيقات (لجلب أرصدة الولاء وبيانات التوصيات وما إلى ذلك) تضيف زمن استجابة الشبكة. احتفظ باستدعاءات واجهة برمجة التطبيقات (API) بأقل من 200 مللي ثانية عن طريق تخزين الاستجابات مؤقتًا وتحسين نقاط النهاية لديك. تم اكتشاف الإضافات التي تعمل على إبطاء عملية الدفع باستمرار بواسطة Shopify وقد يتم تعطيلها.

كيف يمكنني اختبار ملحقات Checkout قبل بدء البث المباشر؟

استخدم متجر تطوير Shopify لاختبار الإضافات دون التأثير على عملية الدفع الخاصة بالإنتاج. يوفر Shopify CLI خادم تطوير محلي يقوم بمعاينة الامتداد الخاص بك في بيئة الدفع الحقيقية لـ Shopify. يمكن أيضًا نشر الامتدادات في متجر الإنتاج الخاص بك في حالة "مخفية"، بحيث تكون مرئية فقط عبر عنوان URL للمعاينة - وهي مفيدة لمراجعة أصحاب المصلحة قبل الإطلاق العام.

ما المهارات الفنية المطلوبة لإنشاء ملحقات Checkout؟

تتطلب ملحقات واجهة المستخدم معرفة React وTypeScript. تتطلب وظائف Checkout وجود Rust أو JavaScript (يتم تجميعها إلى WebAssembly عبر سلسلة أدوات توفرها Shopify). يمكن لمعظم المطورين الذين يتمتعون بخبرة React إنشاء ملحقات واجهة المستخدم بعد مراجعة وثائق Shopify. تعد وظائف Checkout أكثر تطلبًا من الناحية الفنية - يعد المطور الكبير الذي يتمتع بخبرة الواجهة الخلفية مناسبًا للوظائف غير التافهة.

هل تتوفر ملحقات Checkout في خطط Shopify بخلاف Plus؟

تتوفر ملحقات ما بعد الشراء وملحقات صفحة الشكر في جميع خطط Shopify. ملحقات واجهة مستخدم Checkout (تخصيص منتصف الخروج) هي ميزة Plus فقط. وظائف الخروج هي زائد فقط. واجهة برمجة تطبيقات العلامة التجارية للتخصيص المرئي للدفع هي ميزة Plus فقط (على الرغم من أن تخصيص التخصيص الأساسي لمحرر السمات متاح في جميع الخطط).

الخطوات التالية

تعد إمكانية التوسعة في Checkout هي القدرة الأكثر تعقيدًا من الناحية الفنية في مجموعة ميزات Shopify Plus. عائد الاستثمار واضح - استرداد الولاء، وحقول B2B، وعمليات البيع بعد الشراء، وشفافية تاريخ التسليم، جميعها لها تأثير تحويل موثق. يتطلب التنفيذ مهارة تطوير React والإلمام بواجهات برمجة التطبيقات الملحقة بـ Shopify.

يقوم فريق Shopify Plus التابع لـ ECOSIRE ببناء وصيانة ملحقات Checkout للتجار بدءًا من العلامات التجارية DTC إلى الموزعين B2B. المطورون لدينا هم شركاء Shopify Plus المعتمدون الذين يتمتعون بخبرة محددة في إمكانية توسيع Checkout ووظائف Checkout وواجهة برمجة التطبيقات للعلامة التجارية.

تواصل معنا لمناقشة متطلبات تخصيص عملية الدفع الخاصة بك — سنقوم بتقييم احتياجاتك وتصميم بنية ملحقة تعمل على زيادة التحويلات دون المساس بأداء عملية الدفع.

Shopify Plus Checkout Extensibility: Custom Checkout Experiences