> ## 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.

# سعر المنتج الديناميكي

![معاينة سعر المنتج](https://raw.githubusercontent.com/thedesignmvp/framerfy-assets/refs/heads/main/docs/Dynamic%20Product%20Price.png)

مكون عرض سعر واعٍ بالمتغيرات لـ Framer يعرض إما أدنى سعر متاح لبطاقة المنتج أو سعر المتغير المحدد حاليًا في صفحة المنتج.

***

## ما الذي يفعله

يعرض **سعر المنتج الديناميكي** قيمة سعر واحدة كعنصر نص منسق. له وضعان — **Card** لصفحات قوائم المنتجات و**Product** لصفحات تفاصيل المنتج — ويدعم رمز العملة والرمز الاختصاري وتنسيق الكسور العشرية الاختياريين.

السلوكيات الرئيسية:

* **وضع Card** — يعرض أدنى سعر عبر جميع المتغيرات. مفيد في صفحات المجموعات أو القوائم حيث لم يُحدَّد متغير معين.
* **وضع Product** — يقرأ معامل URL ‏`?variant=` ويعرض سعر المتغير المحدد حاليًا. يتحدث تلقائيًا عند تغيير المتغير (مثل عند تفاعل المستخدم مع محدد متغير).
* **رمز العملة والرمز الاختصاري** — يعرض اختياريًا رمز العملة (مثل `₹`) و/أو الرمز الاختصاري (مثل `INR`) بجانب السعر. كلاهما مشتق من حقل `currencyCode` للمتغير، مع الرجوع إلى إعداد **Currency** في Format.
* **التحكم في الكسور العشرية** — يمكن عرض الكسور العشرية أو إخفاؤها بشكل مستقل عن الرمز والرمز الاختصاري.
* **دعم المتغيرات** — يستمع لأحداث `popstate` حتى يبقى السعر المعروض متزامنًا مع المتغير النشط عبر جميع مكونات المحددات في الصفحة.

***

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

جميع الضوابط متاحة في لوحة Framer اليمنى عند تحديد المكون. تُجمَّع في خمسة أقسام: **Product ID**، **Variants**، **Price Type**، **Format**، و**Styles**.

### Product ID

| الخاصية        | النوع | الوصف                                                                                                                |
| :------------- | :---- | :------------------------------------------------------------------------------------------------------------------- |
| **Product ID** | نص    | معرّف منتج Shopify لهذا المنتج. اربط هذا بمتغير `Product ID` من Framer CMS. يُستخدم لتحديد نطاق السعر للمنتج الصحيح. |

### Variants *(CMS)*

| الخاصية      | النوع     | الوصف                                                                                                                                                     |
| :----------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Variants** | نص (JSON) | مصفوفة JSON من جميع كائنات المتغيرات لهذا المنتج، يحتوي كل منها على `id` و`price.amount` و`price.currencyCode`. اربط هذا بمتغير `Variants` من Framer CMS. |

### Price Type

| الخاصية        | النوع | الافتراضي | الوصف                                                                                                                                                                                                   |
| :------------- | :---- | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Price Type** | قائمة | `Card`    | يتحكم في السعر المعروض. `Card` يعرض أدنى سعر عبر جميع المتغيرات — استخدمه في صفحات القوائم/المجموعات. `Product` يعرض سعر المتغير المحدد حاليًا — استخدمه في صفحات تفاصيل المنتج بجانب محددات المتغيرات. |

### Format

يتحكم في طريقة عرض قيمة السعر.

| الخاصية          | النوع | الافتراضي | الوصف                                                                                                               |
| :--------------- | :---- | :-------- | :------------------------------------------------------------------------------------------------------------------ |
| **Show Symbol**  | منطقي | `false`   | عند التفعيل، يعرض رمز العملة قبل السعر (مثال: `₹`، `$`، `€`). يُشتق الرمز من `currencyCode` المتغير النشط.          |
| **Show Code**    | منطقي | `false`   | عند التفعيل، يعرض رمز العملة الاختصاري بعد السعر (مثال: `INR`، `USD`). يُشتق الرمز من `currencyCode` المتغير النشط. |
| **Show Decimal** | منطقي | `false`   | عند التفعيل، يُنسِّق السعر بمنزلتين عشريتين (مثال: `600.00`). عند التعطيل، يُعرض السعر كرقم صحيح.                   |

### Styles

يتحكم في المظهر البصري لنص السعر.

| الخاصية   | النوع | الوصف                                           |
| :-------- | :---- | :---------------------------------------------- |
| **Font**  | خط    | الطباعة لنص السعر (العائلة، الحجم، الوزن، إلخ). |
| **Color** | لون   | لون نص السعر.                                   |

## ملاحظات

* العملات المدعومة ورموزها: USD `$`، EUR `€`، GBP `£`، INR `₹`، JPY `¥`، CNY `¥`، AUD `A$`، CAD `C$`، CHF `CHF`، SEK `kr`، NZD `NZ$`، SGD `S$`، HKD `HK$`، KRW `₩`، ZAR `R`، RUB `₽`، BRL `R$`، MXN `MX$`، AED `د.إ`، SAR `﷼`.
* في وضع **Card** يكون السعر المعروض دائمًا أدنى سعر عبر جميع المتغيرات، بغض النظر عن أي معامل متغير نشط في URL.
* في وضع **Product** يتحدث السعر تلقائيًا كلما تغير معامل URL ‏`?variant=` — لا حاجة لتوصيلات إضافية طالما أن محددات المتغيرات في الصفحة تكتب أيضًا في ذلك المعامل.
* إذا لم يكن هناك متغير محدد ولم تُمرَّر خاصية `price` احتياطية، فقد تُعرض منطقة السعر فارغة في وضع **Product**.