Skip to main content
أضف مربع اختيار أسفل زر الدفع وامنع المتسوق من المتابعة حتى يحدده. مفيد لقبول الشروط، وبوابات التحقق من العمر، وإقرارات التصنيع حسب الطلب.
حدث checkout لا يستطيع إلغاء الدفع. فهو ينطلق كإشعار قبل انتقال المتصفح مباشرة، لذا فإن إعادة false أو استدعاء preventDefault لا يفعل شيئًا. الطريقة الوحيدة لتقييد الدفع هي منع الزر من الاستجابة للنقرات قبل الضغط عليه، وهذا ما تعرضه هذه الصفحة.تعامل مع هذا كرادع في واجهة المستخدم، وليس ضمانة قانونية. لا يزال بإمكان متسوق مصمّم الوصول إلى الدفع مباشرة.

كيف يعمل

ثلاثة أجزاء:
  1. كتلة تعليمات برمجية مخصصة أسفل زر الدفع تعرض مربع الاختيار.
  2. أثناء كون المربع فارغًا، تضيف الكتلة فئة إلى أزرار الدفع والدفع السريع في السلة عبر الجذر الظلي.
  3. CSS مخصصة تجعل تلك الفئة تعطّل النقرات.

الخطوة 1: أضف كتلة مربع الاختيار

أضف كتلة تعليمات برمجية مخصصة أسفل كتلة زر الدفع لديك، وحوّلها إلى وضع React component، والصق:
انقر Compile، ثم فعّل “Use custom template”. لا تعرض الكتلة شيئًا حتى تفعل ذلك. اعتماد props.cart مهم: فهو يعيد تطبيق الفئة بعد إعادة عرض السلة، التي كانت ستمحوها لولا ذلك.

الخطوة 2: أضف CSS

في Cart settings → Custom CSS:
pointer-events: none هو ما يمنع النقر فعليًا؛ والشفافية تُظهر للمتسوق السبب فقط.

الخطوة 3: اختبره

في المعاينة، تأكد من أن:
  • زر الدفع خافت ولا يستجيب للنقرات عند التحميل.
  • تحديد المربع يفعّله؛ ومسحه يعطّل الزر مرة أخرى.
  • أزرار الدفع السريع مقيّدة أيضًا.
  • إضافة عنصر أو إزالته لا تعيد تفعيل الزر أثناء كون المربع فارغًا.
الأخيرة هي الفشل الشائع. إذا أعاد الزر تفعيل نفسه بعد تغيير في السلة، فالتأثير لا يُعاد تشغيله. تحقق من وجود props.cart في مصفوفة الاعتماديات.

تتبع من وافق

مربع الاختيار حالة في المتصفح فقط؛ لا يصل أبدًا إلى الطلب. لتسجيل الموافقة، ادمغها على كل سطر كخاصية وقت الإضافة إلى السلة:
أضف ذلك إلى نموذج المنتج في القالب. تقرأ Shopify properties[...] مباشرة من النموذج، لذا تصل القيمة إلى الطلب أيًا كان من يقوم بالإضافة: Aftersell أو القالب أو تطبيق آخر. الخاصية المسبوقة بـ _ تبقى خارج السطر المرئي للمشتري لكنها تصل إلى Shopify، لذا تظهر في الطلب. هذا يسجّل أي إصدار من الشروط كان ساريًا، وليس أن المتسوق حدّد المربع.

أمور يجب ضبطها بشكل صحيح

  • استهدف فئات cart-external-* فقط. نظائرها cart-internal-* هي أعمال السلة الداخلية، وليست مقبضًا لتعليماتك البرمجية. راجع CSS المخصصة.
  • تحقق من وجود shadowRoot قبل استخدامه. فهو undefined حتى تُقلع السلة.
  • لا تعرض الكتلة شيئًا حتى تُحمّل السلة، لذا لا يكون زر الدفع نشطًا للحظة قبل تطبيق البوابة.
  • كتلة React التي تُلقي خطأً لا تعرض شيئًا وتستمر بقية السلة في العمل، ما يعني هنا زر دفع غير محروس. اختبر في المعاينة قبل النشر.

إلى أين تذهب بعد ذلك