إمكانية توسيع Shopify Checkout: الدليل الكامل لعام 2026

تقوم Shopify بمعالجة أكثر من 235 مليار دولار من GMV السنوية من خلال الخروج. مع إيقاف checkout.liquid والطرح الكامل لميزة Checkout Extensibility، يحتاج كل تاجر في Shopify إلى فهم كيفية عمل النظام الجديد، وما يتيحه، وكيفية الترحيل دون فقدان التحويلات.

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

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

• تحل إمكانية توسيع Checkout محل checkout.liquid ببنية آمنة وقابلة للترقية مبنية على ملحقات واجهة المستخدم ووظائف Shopify
• تعمل ملحقات Checkout UI في بيئة معزولة باستخدام مكونات قائمة على React يتم تقديمها من خلال أهداف الخروج
• تتيح لك وظائف Shopify تخصيص منطق الخصم، وتصفية طرق الدفع، ومعالجة سعر الشحن من جانب الخادم دون مكالمات API الخارجية
• توفر واجهة برمجة تطبيقات Checkout Branding تحكمًا دقيقًا في الألوان والطباعة والمسافات والتخطيط دون لمس رمز الامتداد
• يعد الترحيل من checkout.liquid إلزاميًا لتجار Shopify Plus ويجب التخطيط له بشكل منهجي لتجنب انخفاض التحويلات
• يمكن أن تؤدي تدفقات الدفع المخصصة إلى زيادة معدلات التحويل بنسبة 8-15% عند تنفيذها باستخدام اختبار تجربة المستخدم المناسب

ما هي قابلية التوسعة في Checkout؟

Checkout Extensibility هو إطار عمل Shopify لتخصيص تجربة الخروج. فهو يستبدل نهج checkout.liquid القديم بنظام مصمم حول ثلاث ركائز:

1. ملحقات واجهة المستخدم الخاصة بالخروج --- المكونات المستندة إلى التفاعل والتي يتم عرضها في مواقع محددة ضمن تدفق عملية الدفع
2. ** وظائف Shopify ** --- منطق الخادم الذي يعمل داخل البنية التحتية لـ Shopify لتخصيص قواعد العمل
3. Checkout Branding API --- واجهة برمجة تطبيقات GraphQL للتحكم في المظهر المرئي لعملية الخروج

على عكس checkout.liquid، الذي منح التجار تحكمًا كاملاً في HTML/CSS/JS ولكنه أدى إلى مخاطر الترقية والأمان، توفر Checkout Extensibility التخصيص داخل بيئة خاضعة للتحكم والتي يمكن لـ Shopify الاستمرار في تحسينها.

ملحقات واجهة المستخدم الخاصة بالخروج

كيف يعملون

تم إنشاء ملحقات Checkout UI باستخدام إطار عمل ملحق Shopify UI. يتم عرضها داخل أهداف الامتداد المحددة مسبقًا (وتسمى أيضًا نقاط الامتداد) ضمن تدفق الدفع. يتوافق كل هدف مع موقع محدد: قبل محدد طريقة الشحن، بعد ملخص الطلب، داخل قسم الدفع، وما إلى ذلك.

تستخدم الإضافات مجموعة محدودة من مكونات واجهة المستخدم المقدمة من Shopify:

| المكون | الغرض | حالات الاستخدام الشائع | |-----------|--------|-----------------| | راية | عرض التنبيهات أو العروض الترويجية | عتبات الشحن مجانية، عروض لفترة محدودة | | بلوك ستاك / إنلاين ستاك | حاويات التخطيط | تنظيم الحقول والمحتوى المخصص | | حقل النص | مجموعة إدخال النص | رسائل الهدايا، تعليمات مخصصة | | خانة الاختيار | التحديدات المنطقية | الاشتراك في النشرة الإخبارية، قبول الشروط | | اختر | التحديدات المنسدلة | تفضيلات تاريخ التسليم | | العنوان / النص | الطباعة | رؤوس الأقسام، النص المساعد | | صورة | محتوى مرئي | شارات الثقة، عناصر العلامة التجارية | | مقسم | الفصل البصري | فواصل القسم |

أهداف التمديد في تدفق الخروج

يوفر تدفق الخروج العشرات من أهداف الإضافات المجمعة حسب القسم:

قبل وبعد عملية الدفع بأكملها --- يتيح لك buy.checkout.header.render-after وBuy.checkout.footer.render-after إضافة محتوى حول عملية الدفع بأكملها.

قسم عنوان الشحن --- عرض المحتوى قبل أو بعد نموذج عنوان الشحن مع أهداف buy.checkout.shipping-address.render-before وrender-after.

قسم طريقة الشحن --- أضف لافتات أو معلومات أو واجهة مستخدم مخصصة قبل قائمة خيارات الشحن أو بعدها.

قسم طريقة الدفع --- أدخل شارات الثقة أو معلومات الدفع أو الحقول المخصصة حول محدد طريقة الدفع.

ملخص الطلب --- أضف عمليات البيع الإضافية أو البيع المتقاطع أو المحتوى المعلوماتي إلى جانب عناصر عربة التسوق وإجمالي الطلب.

إنشاء ملحق واجهة مستخدم Checkout

يتم دعم مشروع ملحق واجهة مستخدم الخروج النموذجي باستخدام Shopify CLI مع نوع ملحق checkout_ui. تستخدم نقطة إدخال الامتداد وظيفة رد الفعل لتسجيل مكون في موقع مستهدف محدد في تدفق الخروج.

على سبيل المثال، قد يستخدم ملحق شعار الشحن المجاني خطاف useCartLines لحساب الإجمالي الفرعي لعربة التسوق، ومقارنته بحد الشحن المجاني الخاص بك، وعرض مكون شعار يعرض إما رسالة نجاح أو مقدار ما يحتاج العميل إلى إضافته. يؤدي هذا الامتداد الفردي عادةً إلى زيادة متوسط ​​قيمة الطلب بنسبة 5-12%.

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

يوفر Shopify مجموعة غنية من الخطافات للوصول إلى حالة الخروج:

• useCartLines() --- الوصول إلى جميع العناصر الموجودة في سلة التسوق بالأسعار والكميات والبيانات التعريفية للمنتج
• useBuyerJourney() --- اعتراض تقدم عملية الدفع والتحقق من صحتها، وحظر عمليات الإرسال غير الصالحة
• useShippingAddress() --- اقرأ عنوان الشحن لمعرفة المنطق الشرطي
• useApplyDiscountCodeChange() --- تطبيق رموز الخصم برمجيًا بناءً على الشروط
• useApplyMetafieldChange() --- قم بتخزين البيانات المخصصة حسب الطلب من أجل تنفيذ سير العمل
• useExtensionApi() --- الوصول إلى واجهة برمجة تطبيقات الامتداد الكامل بما في ذلك الترجمة والرموز المميزة للجلسة

أمثلة ملحقة عملية

مجموعة رسائل الهدايا: ضع مكون TextField في عنوان الشحن.render-after الهدف. استخدم useApplyMetafieldChange لتخزين الرسالة كحقل تعريف للطلب. يقرأ فريق التنفيذ حقل التعريف أثناء التعبئة.

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

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

وظائف شوبيفاي

ما هي وظائف Shopify التي تحل محلها

قبل Shopify Functions، كان منطق الأعمال المخصص يتطلب مكالمات واجهة برمجة التطبيقات الخارجية التي تضيف زمن الوصول ونقاط الفشل إلى الخروج. يتم تشغيل الوظائف مباشرة داخل البنية التحتية لـ Shopify، ويتم تنفيذها في أقل من 5 مللي ثانية دون أي حمل على الشبكة.

أنواع الوظائف

| نوع الوظيفة | ما يخصصه | مثال | |---------------|------------------|---------| | خصم المنتج | خصومات تلقائية على المنتجات | اشترِ 2 واحصل على 1 مجانًا بمنطق معقد | | خصم الطلب | خصومات على كامل الطلب | أنفق أكثر من الحد الأدنى، وفر 15% مع الاستثناءات | | خصم الشحن | خصومات على أسعار الشحن | شحن مجاني لأعضاء الولاء | | تخصيص الدفع | رؤية طريقة الدفع والطلب | إخفاء COD للطلبات ذات القيمة العالية | | تخصيص التسليم | أسماء طرق الشحن وفرزها | إعادة تسمية شركات النقل، إعادة الترتيب حسب الأولوية | | عربة التحويل | تعديل محتويات سلة التسوق | منتجات الحزمة التلقائية، توسيع مجموعات | | معوقات الوفاء | تقييد خيارات التنفيذ | يتطلب التوقيع على العناصر ذات القيمة العالية |

كيفية عمل الوظائف

تتم كتابة الوظائف بلغة Rust (يتم تجميعها إلى WebAssembly) أو JavaScript. تتلقى كل وظيفة كائن إدخال يحتوي على بيانات الخروج ذات الصلة وتقوم بإرجاع مصفوفة عمليات تصف التغييرات المطلوب تطبيقها.

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

حدود الوظيفة

• وقت التنفيذ: 5 مللي ثانية كحد أقصى
• الذاكرة: 10 ميجابايت كحد أقصى
• حجم الإدخال: محدود باستعلام إدخال الوظيفة
• لا توجد مكالمات شبكة: لا يمكن للوظائف تقديم طلبات HTTP
• لا توجد حالة مستمرة: كل استدعاء عديم الحالة

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

واجهة برمجة تطبيقات العلامة التجارية Checkout

توفر واجهة برمجة تطبيقات Checkout Branding API تخصيصًا مرئيًا دون إنشاء ملحقات. انها تسيطر على:

الألوان --- ألوان العلامة التجارية الأساسية والثانوية، وألوان الخلفية، وألوان النص والارتباط، وألوان الحالة للأخطاء والنجاح والتحذيرات.

الطباعة --- عائلة الخطوط من مكتبة الخطوط Shopify أو الخطوط المخصصة وأحجام الخطوط للعناوين والنص والتسميات، بالإضافة إلى أوزان الخطوط وارتفاعات الخطوط.

التخطيط والتباعد --- نصف قطر الزاوية للأزرار والمدخلات والحاويات والتباعد بين الأقسام وأنماط الحدود.

الشعار والأيقونة المفضلة --- شعار رأس الخروج مع عناصر التحكم في الموضع والتحجيم.

يتم الوصول إلى واجهة برمجة تطبيقات العلامة التجارية عبر طفرة checkoutBrandingUpsert GraphQL. يمكنك تمرير ملف تعريف وكائن إدخال للعلامة التجارية يحدد نظام التصميم الخاص بك: أنظمة الألوان، وإعدادات الطباعة، وقيم نصف قطر الزاوية. يؤدي هذا إلى فصل العلامة التجارية المرئية عن التخصيص الوظيفي حتى تتمكن من تحديث مظهر الخروج الخاص بك دون تعديل رمز الامتداد.

الهجرة من checkout.liquid

لماذا الهجرة إلزامية

قام Shopify بتعيين جداول زمنية ثابتة لإيقاف checkout.liquid. يجب على جميع تجار Shopify Plus الانتقال إلى Checkout Extensibility.

1. الأمان: يسمح checkout.liquid بتنفيذ جافا سكريبت بشكل عشوائي أثناء الدفع، مما يؤدي إلى مخاطر XSS وتسرب البيانات
2. الأداء: عمليات الدفع غير المحسنة. تعمل التخصيصات السائلة على إبطاء تحميل الصفحات
3. مسار الترقية: يتعذر على Shopify تنفيذ تحسينات الدفع عندما يتجاوز التجار قالب الدفع بأكمله

قائمة التحقق من الهجرة

| ميزة checkout.liquid | الخروج المعادل للتوسعة | |------------------------|----------------------------------| | تصميم CSS مخصص | الخروج من العلامة التجارية API | | صور شارة الثقة | ملحق واجهة مستخدم Checkout مع مكون الصورة | | حقل رسالة الهدية | ملحق واجهة مستخدم Checkout مع TextField | | منطق الخصم المخصص | وظيفة Shopify (نوع الخصم) | | إخفاء طريقة الدفع | وظيفة Shopify (تخصيص الدفع) | | إعادة تسمية طريقة الشحن | وظيفة Shopify (تخصيص التسليم) | | حقل ملاحظة الطلب | ملحق واجهة مستخدم Checkout مع TextField + metafield | | مخطوطات التحليلات | بكسلات الويب (أحداث العملاء) | | التحقق المخصص | ربط useBuyerJourney مع منطق التحقق من الصحة |

عملية الترحيل خطوة بخطوة

1. ** قم بمراجعة checkout.liquid الحالي ** --- قم بتوثيق كل تخصيص ونص وتغيير مرئي
2. تصنيف كل تخصيص --- التعيين إلى ملحقات واجهة المستخدم، أو الوظائف، أو واجهة برمجة تطبيقات العلامة التجارية، أو وحدات بكسل الويب
3. الإنشاء والاختبار قيد التطوير --- استخدم Shopify CLI لاختبار الامتدادات محليًا مقابل متجر التطوير
4. النشر بشكل تدريجي --- قم بتمكين إمكانية التوسعة في Checkout في متجر اختباري أولاً، ثم قم بالطرح في مرحلة الإنتاج
5. مراقبة معدلات التحويل --- قارن معدلات إتمام عملية الدفع قبل الترحيل وبعده لمدة أسبوعين على الأقل
6. التكرار --- استخدم اختبار A/B لتحسين وضع الإضافات والمراسلة

تخصيص الدفع والشحن

استراتيجيات تخصيص الدفع

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

استراتيجيات تخصيص الشحن

• إعادة تسمية شركة النقل: استبدل أسماء شركات النقل الفنية بأسماء تجارية مثل "التوصيل السريع (3-5 أيام عمل)"
• فرز الأسعار: ادفع طرق الشحن المفضلة إلى أعلى القائمة
• التوفر المشروط: إخفاء الشحن السريع للسلع كبيرة الحجم أو العناوين الريفية
• تقدير تاريخ التسليم: استخدم وظائف تخصيص التسليم لعرض تواريخ التسليم المقدرة بجانب كل خيار شحن

نصائح لتحسين التحويل

تقليل الاحتكاك عند الخروج

• استخدم الإكمال التلقائي للعنوان (مدمج في Shopify checkout) وتأكد من أنه يعمل لجميع الأسواق المستهدفة
• تمكين Shop Pay للعملاء العائدين --- فهو يقلل وقت الخروج بما يصل إلى 4x
• تقليل عدد الحقول المخصصة؛ كل حقل إضافي يقلل من معدلات الإنجاز بنسبة 3-5%

بناء الثقة عند الخروج

• ضع شارات الأمان وإشارات الثقة في منطقة تذييل الخروج
• عرض ملخصات واضحة لسياسة الإرجاع بالقرب من قسم الدفع
• عرض عدد تعليقات العملاء أو تقييمات الرضا

الاستفادة من ملحقات ما بعد الشراء

• استخدم هدف تقديم صفحة الشكر لعروض البيع
• إظهار مطالبات تسجيل الاشتراك في صفحة تأكيد الطلب
• جمع ردود فعل NPS مباشرة بعد الشراء

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

هل إمكانية التوسعة في Checkout متاحة في جميع خطط Shopify؟

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

هل ستتوقف تخصيصات checkout.liquid الخاصة بي عن العمل؟

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

هل يمكنني استخدام جافا سكريبت لجهة خارجية في إمكانية توسيع Checkout؟

لا. تعمل ملحقات Checkout UI في بيئة معزولة ولا يمكنها تحميل البرامج النصية الخارجية. هذا إجراء أمني. إذا كنت بحاجة إلى تكامل خدمة خارجية، فاستخدم Shopify Functions للمنطق من جانب الخادم أو Web Pixels لتتبع التحليلات.

كيف تؤثر وظائف Shopify على سرعة الدفع؟

يتم تنفيذ وظائف Shopify في أقل من 5 مللي ثانية داخل البنية التحتية لـ Shopify. إنها أسرع بكثير من استدعاءات واجهة برمجة التطبيقات الخارجية التي تحل محلها. يرى معظم التجار تحسينات في أداء عملية الدفع بعد الانتقال من البرامج النصية إلى الوظائف.

هل يمكنني العودة إلى checkout.liquid بعد الترحيل؟

خلال فترة الترحيل، يمكنك التبديل بين checkout.liquid وCheckout Extensibility في إعدادات متجرك. ومع ذلك، بمجرد أن يقوم Shopify بإيقاف checkout.liquid بالكامل لمتجرك، فلن يكون التراجع ممكنًا بعد الآن.

قم بتحويل Shopify Checkout الخاص بك

تمثل إمكانية التوسعة في Checkout مستقبل التجارة في Shopify. سواء كنت بحاجة إلى الترحيل من checkout.liquid، أو إنشاء تدفقات دفع مخصصة، أو تحسين معدلات التحويل، فإن الإطار الجديد يوفر الأدوات اللازمة لإنشاء تجربة دفع تتوافق مع علامتك التجارية ومتطلبات عملك.

ECOSIRE متخصص في إعداد متجر Shopify، تطوير السمات المخصصة، وتحسين التحويل. للحصول على تخصيص متقدم للدفع على Shopify Plus، استكشف خدمات Shopify Plus.

هل أنت مستعد لترقية تجربة الدفع الخاصة بك؟ اتصل بمتخصصي Shopify لدينا لمناقشة مشروع توسيع عملية الدفع الخاصة بك.