زر إضافة إلى عربة التسوق

زر إضافة إلى عربة التسوق متصل بـ Shopify لـ Framer يقرأ المتغير المحدد حاليًا من URL، ويضيفه إلى عربة التسوق في localStorage، ويعرض اختياريًا إشعار تنبيه يؤكد الإجراء.

---

​

ما الذي يفعله

زر إضافة إلى عربة التسوق هو زر منسق ومتحرك يتعامل مع عملية إضافة المنتج إلى عربة التسوق بالكامل. يقرأ المتغير النشط من URL، ويجد تفاصيله من بيانات المتغيرات، ويكتب العنصر في عربة التسوق بـ localStorage — مع زيادة الكمية إذا كان العنصر موجودًا بالفعل في العربة. السلوكيات الرئيسية:

• يقرأ المتغير النشط من URL — عند النقر، يقرأ معامل URL ‏?variant= لتحديد المتغير المراد إضافته. يتحدث تلقائيًا عند تغيير URL (مثل عند تبديل المستخدم للمتغيرات).
• يضيف أو يزيد — إذا كان المتغير موجودًا بالفعل في العربة، تزيد كميته بمقدار 1. إذا كان جديدًا، يُضاف كإدخال جديد في العربة بكمية 1.
• يكتب في localStorage — يحفظ العربة المحدَّثة في localStorage تحت المفتاح cart ويطلق حدث cartUpdated لإبقاء جميع مكونات عربة التسوق الأخرى متزامنة.
• إشعار التنبيه — يعرض اختياريًا تنبيهًا عائمًا مع صورة المنتج والعنوان واسم المتغير بعد الإضافة الناجحة. موضع التنبيه والإزاحة قابلان للتخصيص بالكامل.
• حالة التحميل — أثناء إضافة العنصر، يعرض الزر نص تحميل قابل للتخصيص ويُعطَّل مؤقتًا لمنع النقر المزدوج.
• زر متحرك — يتضمن تصغيرًا خفيفًا عند اللمس وانتقال نصف قطر الحدود عند التحويم عبر Framer Motion.

---

​

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

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في سبعة أقسام: Store ID، Product ID، Product Title، Variants، Image URLs، Texts، Styles، وToast Layout.

​

Store ID

​

Product ID

​

Product Title

​

Variants (CMS)

​

Image URLs (CMS)

​

Texts

​

Styles

يتحكم في المظهر البصري للزر.

​

Toast Layout

يتحكم في إشعار التأكيد المعروض بعد إضافة عنصر إلى عربة التسوق. Offset — ضبط دقيق لموضع التنبيه نسبة إلى حواف الشاشة:

​

ملاحظات

• لا يفعل الزر شيئًا إذا لم يُعيَّن Product ID — احرص دائمًا على ربطه من CMS.
• يُقرأ المتغير النشط من معامل URL ‏?variant=. إذا لم يكن هناك متغير محدد عند النقر على الزر، فسيكون selectedVariant فارغًا وسيفشل البحث عن المتغير بصمت. تأكد من وجود محدد متغير في نفس الصفحة.
• عنصر عربة التسوق المكتوب في localStorage يتضمن: productId، variantId، title، variantTitle، price، quantity، selectedOptions، وimage.
• بعد كل إضافة، يُطلَق حدث cartUpdated على window، مما يُبقي عداد عناصر عربة التسوق ومتحكم حالة عربة التسوق وقائمة منتجات عربة التسوق والسعر الإجمالي لعربة التسوق متزامنة تلقائيًا.
• يُعرض إشعار التنبيه باستخدام مكتبة Sonner ويُظهر صورة المنتج والعنوان واسم المتغير.