زر الدفع

مكون تشغيل الدفع على Shopify لـ Framer يقرأ عربة التسوق الحالية من localStorage، ينشئ عربة Shopify عبر Storefront API، ويعيد توجيه المستخدم إلى رابط الدفع على Shopify.

---

​

ما الذي يفعله

زر الدفع هو مكون غلاف — يقبل أي عنصر Framer كعنصره الفرعي ويجعله يطلق عملية الدفع على Shopify عند النقر. لا يمتلك الزر نفسه أي نمط بصري خاص به؛ المظهر يُحدَّد بالكامل من قِبل المكون الذي تضعه بداخله. السلوكيات الرئيسية:

• يقرأ عربة التسوق من localStorage — عند النقر، يقرأ المفتاح cart من localStorage، ومن المتوقع أن يكون مصفوفة JSON من العناصر تحتوي على variantId وquantity.
• ينشئ عربة Shopify — يرسل طفرة GraphQL ‏cartCreate إلى Shopify Storefront API مع جميع العناصر في عربة التسوق.
• يعيد التوجيه للدفع — يفتح checkoutUrl الذي ولّده Shopify في تبويب جديد بعد إنشاء عربة التسوق بنجاح.
• صامت عند عربة التسوق الفارغة — إذا كانت عربة التسوق فارغة أو مفقودة، فإن النقر لا يفعل شيئًا ويُسجّل تحذيرًا في وحدة التحكم.
• يقبل أي عنصر فرعي — يلتف حول أي مكون Framer أو عنصر تصميم تضعه بداخله، لذا يعود التصميم البصري للزر بالكامل إليك.

​

ضوابط الخصائص

​

ملاحظات

• يتطلب هذا المكون تعيين window.DOMAIN وwindow.ACCESSTOKEN عالميًا على الصفحة. بدونهما، ستفشل استدعاء Shopify API.
• يجب تخزين بيانات عربة التسوق في localStorage تحت المفتاح cart كمصفوفة JSON. يجب أن يحتوي كل عنصر في المصفوفة على variantId (معرّف متغير Shopify الرقمي) واختياريًا quantity (يُعيَّن افتراضيًا 1 إذا لم يُوفَّر).
• يُفتح رابط الدفع في تبويب جديد (window.open).
• إذا أعاد Shopify API رابط دفع فارغًا (مثل بسبب معرّف متغير غير صالح أو خطأ في API)، يُسجّل المكون خطأً في وحدة التحكم ولا يُعيد التوجيه.
• لا يمتلك هذا المكون واجهة مستخدم احتياطية للأخطاء — حالات الأخطاء مرئية فقط في وحدة تحكم المتصفح.