كيف يعمل
- كتلة تعليمات برمجية مخصصة أسفل زر الدفع تعرض مربع الاختيار.
- أثناء كون المربع فارغًا، تضيف الكتلة فئة إلى أزرار الدفع والدفع السريع في السلة عبر الجذر الظلي.
- CSS مخصصة تجعل تلك الفئة تعطّل النقرات.
الخطوة 1: أضف كتلة مربع الاختيار
props.cart مهم: فهو يعيد تطبيق الفئة بعد إعادة عرض السلة، التي كانت ستمحوها لولا ذلك.
الخطوة 2: أضف CSS
pointer-events: none هو ما يمنع النقر فعليًا؛ والشفافية تُظهر للمتسوق السبب فقط.
الخطوة 3: اختبره
- زر الدفع خافت ولا يستجيب للنقرات عند التحميل.
- تحديد المربع يفعّله؛ ومسحه يعطّل الزر مرة أخرى.
- أزرار الدفع السريع مقيّدة أيضًا.
- إضافة عنصر أو إزالته لا تعيد تفعيل الزر أثناء كون المربع فارغًا.
props.cart في مصفوفة الاعتماديات.
تتبع من وافق
properties[...] مباشرة من النموذج، لذا تصل القيمة إلى الطلب أيًا كان من يقوم بالإضافة: Aftersell أو القالب أو تطبيق آخر.
الخاصية المسبوقة بـ _ تبقى خارج السطر المرئي للمشتري لكنها تصل إلى Shopify، لذا تظهر في الطلب. هذا يسجّل أي إصدار من الشروط كان ساريًا، وليس أن المتسوق حدّد المربع.
أمور يجب ضبطها بشكل صحيح
- استهدف فئات
cart-external-*فقط. نظائرهاcart-internal-*هي أعمال السلة الداخلية، وليست مقبضًا لتعليماتك البرمجية. راجع CSS المخصصة. - تحقق من وجود
shadowRootقبل استخدامه. فهوundefinedحتى تُقلع السلة. - لا تعرض الكتلة شيئًا حتى تُحمّل السلة، لذا لا يكون زر الدفع نشطًا للحظة قبل تطبيق البوابة.
- كتلة React التي تُلقي خطأً لا تعرض شيئًا وتستمر بقية السلة في العمل، ما يعني هنا زر دفع غير محروس. اختبر في المعاينة قبل النشر.
إلى أين تذهب بعد ذلك
- كتل التعليمات البرمجية المخصصة: وضع React وخصائصه.
- CSS المخصصة: اصطلاح الفئات العامة.
- الأحداث: ما يستطيع حدث
checkoutفعله وما لا يستطيع.