> ## Documentation Index
> Fetch the complete documentation index at: https://docs.framerfy.ae/llms.txt
> Use this file to discover all available pages before exploring further.

# نظرة عامة

مجموعة من مكونات Framer المتصلة بـ Shopify لبناء صفحات منتجات متكاملة وخيارات المتغيرات وإدارة عربة التسوق وإجراءات الدفع — دون كتابة أي كود مخصص.

## المكونات

### المعارض

مكونات لعرض صور المنتجات.

| المكون                                                                                | الوصف                                                                      |
| :------------------------------------------------------------------------------------ | :------------------------------------------------------------------------- |
| [عرض الوسائط العمودي](https://docs.framerfy.ae/ar/components/vertical-media-carousel) | معرض صور قابل للتمرير مع صور مصغرة عائمة ثابتة وتكبير عند التحويم.         |
| [عرض الوسائط المنزلق](https://docs.framerfy.ae/ar/components/slider-media-carousel)   | شريحة صورة واحدة مع أزرار تنقل بالأسهم وشريط صور مصغرة وتكبير عند التحويم. |

### اختيار المتغيرات

مكونات تتيح للمستخدمين اختيار متغيرات المنتج.

| المكون                                                                                   | الوصف                                                                                |
| :--------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------- |
| [محدد المتغيرات الشامل](https://docs.framerfy.ae/ar/components/universal-variant-picker) | أزرار خيارات نصية (الحجم، نمط الإطار، إلخ) لأي نوع خيار Shopify. ضع واحدًا لكل خيار. |
| [محدد متغير الألوان](https://docs.framerfy.ae/ar/components/color-variant-picker)        | أزرار دائرية لعينات الألوان مملوءة بالألوان السداسية لكل متغير. مرتبط بخيار `Color`. |

### التصفية والترتيب

مكونات لتصفية قوائم المنتجات وترتيبها.

| المكون                                                                              | الوصف                                                                                                                       |
| :---------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- |
| [فلتر حسب المتغير](https://docs.framerfy.ae/ar/components/variant-based-filter)     | يجلب جميع المتغيرات من الكتالوج ويعرضها كأزرار فلتر. يحفظ الفلتر النشط في `localStorage` لاستخدامه في شبكة المنتجات.        |
| [متحكم ترتيب الأسعار](https://docs.framerfy.ae/ar/components/price-sort-controller) | قائمة منسدلة لترتيب المنتجات حسب الموصى به أو السعر من الأدنى للأعلى أو من الأعلى للأدنى. يحفظ الترتيب في `sessionStorage`. |

### الأسعار

مكونات لعرض أسعار المنتجات.

| المكون                                                                                | الوصف                                                                              |
| :------------------------------------------------------------------------------------ | :--------------------------------------------------------------------------------- |
| [سعر المنتج الديناميكي](https://docs.framerfy.ae/ar/components/dynamic-product-price) | يعرض إما أدنى سعر للمتغير (وضع البطاقة) أو سعر المتغير المحدد حاليًا (وضع المنتج). |

### عربة التسوق

مكونات لإدارة عربة التسوق وعرضها.

| المكون                                                                                 | الوصف                                                                                                        |
| :------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------- |
| [زر إضافة إلى عربة التسوق](https://docs.framerfy.ae/ar/components/add-to-cart-button)  | يضيف المتغير المحدد حاليًا إلى عربة التسوق. يدعم إشعارات التنبيه ويزيد الكمية إذا كان العنصر موجودًا بالفعل. |
| [قائمة منتجات عربة التسوق](https://docs.framerfy.ae/ar/components/cart-product-list)   | يعرض جميع عناصر عربة التسوق كبطاقات مع صورة المنتج والعنوان وخيارات المتغير والسعر ومتحكم الكمية وزر الحذف.  |
| [عداد عناصر عربة التسوق](https://docs.framerfy.ae/ar/components/cart-item-counter)     | يعرض عدد العناصر في عربة التسوق. يتحدث في الوقت الفعلي عبر حدث `cartUpdated`.                                |
| [متحكم حالة عربة التسوق](https://docs.framerfy.ae/ar/components/cart-state-controller) | يتبدل بين مكونين فرعيين اعتمادًا على ما إذا كانت عربة التسوق فارغة أم تحتوي على عناصر.                       |
| [السعر الإجمالي لعربة التسوق](https://docs.framerfy.ae/ar/components/cart-total-price) | يعرض التكلفة الإجمالية لجميع العناصر في عربة التسوق مع رمز العملة والرمز الاختصاري الاختياريين.              |
| [زر مسح عربة التسوق](https://docs.framerfy.ae/ar/components/clear-cart-button)         | يلتف حول أي عنصر ويمسح عربة التسوق بالكامل عند النقر.                                                        |

### التنقل

مكونات للتنقل إلى صفحات Shopify.

| المكون                                                                                                            | الوصف                                                                                                               |
| :---------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ |
| [زر الدفع](https://docs.framerfy.ae/ar/components/checkout-button)                                                | يقرأ عربة التسوق من `localStorage`، ينشئ عربة Shopify عبر Storefront API، ويعيد التوجيه إلى رابط الدفع على Shopify. |
| [زر إعادة توجيه الملف الشخصي على Shopify](https://docs.framerfy.ae/ar/components/shopify-profile-redirect-button) | يلتف حول أي عنصر ويعيد توجيه المستخدم إلى صفحة حسابه على Shopify عند النقر.                                         |