المكونات
المعارض
مكونات لعرض صور المنتجات.| المكون | الوصف |
|---|---|
| عرض الوسائط العمودي | معرض صور قابل للتمرير مع صور مصغرة عائمة ثابتة وتكبير عند التحويم. |
| عرض الوسائط المنزلق | شريحة صورة واحدة مع أزرار تنقل بالأسهم وشريط صور مصغرة وتكبير عند التحويم. |
اختيار المتغيرات
مكونات تتيح للمستخدمين اختيار متغيرات المنتج.| المكون | الوصف |
|---|---|
| محدد المتغيرات الشامل | أزرار خيارات نصية (الحجم، نمط الإطار، إلخ) لأي نوع خيار Shopify. ضع واحدًا لكل خيار. |
| محدد متغير الألوان | أزرار دائرية لعينات الألوان مملوءة بالألوان السداسية لكل متغير. مرتبط بخيار Color. |
التصفية والترتيب
مكونات لتصفية قوائم المنتجات وترتيبها.| المكون | الوصف |
|---|---|
| فلتر حسب المتغير | يجلب جميع المتغيرات من الكتالوج ويعرضها كأزرار فلتر. يحفظ الفلتر النشط في localStorage لاستخدامه في شبكة المنتجات. |
| متحكم ترتيب الأسعار | قائمة منسدلة لترتيب المنتجات حسب الموصى به أو السعر من الأدنى للأعلى أو من الأعلى للأدنى. يحفظ الترتيب في sessionStorage. |
الأسعار
مكونات لعرض أسعار المنتجات.| المكون | الوصف |
|---|---|
| سعر المنتج الديناميكي | يعرض إما أدنى سعر للمتغير (وضع البطاقة) أو سعر المتغير المحدد حاليًا (وضع المنتج). |
عربة التسوق
مكونات لإدارة عربة التسوق وعرضها.| المكون | الوصف |
|---|---|
| زر إضافة إلى عربة التسوق | يضيف المتغير المحدد حاليًا إلى عربة التسوق. يدعم إشعارات التنبيه ويزيد الكمية إذا كان العنصر موجودًا بالفعل. |
| قائمة منتجات عربة التسوق | يعرض جميع عناصر عربة التسوق كبطاقات مع صورة المنتج والعنوان وخيارات المتغير والسعر ومتحكم الكمية وزر الحذف. |
| عداد عناصر عربة التسوق | يعرض عدد العناصر في عربة التسوق. يتحدث في الوقت الفعلي عبر حدث cartUpdated. |
| متحكم حالة عربة التسوق | يتبدل بين مكونين فرعيين اعتمادًا على ما إذا كانت عربة التسوق فارغة أم تحتوي على عناصر. |
| السعر الإجمالي لعربة التسوق | يعرض التكلفة الإجمالية لجميع العناصر في عربة التسوق مع رمز العملة والرمز الاختصاري الاختياريين. |
| زر مسح عربة التسوق | يلتف حول أي عنصر ويمسح عربة التسوق بالكامل عند النقر. |
التنقل
مكونات للتنقل إلى صفحات Shopify.| المكون | الوصف |
|---|---|
| زر الدفع | يقرأ عربة التسوق من localStorage، ينشئ عربة Shopify عبر Storefront API، ويعيد التوجيه إلى رابط الدفع على Shopify. |
| زر إعادة توجيه الملف الشخصي على Shopify | يلتف حول أي عنصر ويعيد توجيه المستخدم إلى صفحة حسابه على Shopify عند النقر. |