الانتقال إلى المحتوى الرئيسي
معاينة سعر المنتج مكون عرض سعر واعٍ بالمتغيرات لـ 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.