Skip to main content
يعرض بلوك Product add-on منتجًا واحدًا محددًا تختاره كإضافة داخل السلة، للترويج لمنتج معروف واحد (ضمان، عيّنة، منتج الأكثر مبيعًا) كإضافة سريعة مباشرةً في السلة.
بخلاف بلوك Upsells الذي يعرض منتجات تختارها استراتيجية، يعرض Product add-on دائمًا المنتج المحدد الذي تختاره بالضبط.
بلوك إضافة المنتج يعرض منتجًا إضافيًا ليضمّه المتسوق إلى سلته

السلوك

  • إذا لم يُحل أي متغير نشط — المنتج غير معيّن أو مؤرشف أو نفد من المخزون — لا يعرض البلوك أي شيء بدلًا من زر معطّل.
  • يعكس عنصر التحكم ما إذا كان بند الإضافة الخاص بهذا البلوك نفسه موجودًا في السلة، لذا فإن إيقافه يزيل البند الذي أضافه (ولن يؤثر على المنتج نفسه إذا أُضيف من مكان آخر).
  • يُشطب سعر المقارنة عندما يكون هناك تخفيض حقيقي؛ وتُخفى تسمية ”% off” إذا انخفض الخصم بعد التقريب عن 1%.
  • تعود صورة الإضافة إلى الصورة المميزة للمنتج عندما لا تكون للمتغير المختار صورة.

الإعدادات

تدعم Title وPrice label وDescription جميعها الرموز الأربعة نفسها: {{product_title}} و{{price}} و{{compare_at_price}} و{{savings}}.

الموضع والحدود

  • المنطقة: الجسم أو الأسفل.
  • الحد الأقصى: 3 لكل حالة سلة — للسلة الممتلئة والسلة الفارغة حصة مستقلة لكل منهما.
  • الحالة: السلة الممتلئة والفارغة معًا.
  • لا يُضاف افتراضيًا. غير مقفل — يمكنك إزالته أو إخفاؤه.

القالب المخصص

يدعم قالبًا مخصصًا من تبويب Code الخاص به، والذي يستبدل الترميز المدمج لهذا البلوك بكود JSX الخاص بك. هذه هي الخصائص (props) التي يستقبلها.

المحتوى

الحالة والإجراءات

تحدد format المعالج المناسب: handleAdd لصيغة button، وhandleToggle لصيغتي checkbox وtoggle. إذا كانت variantId تساوي null فلا يوجد ما يُضاف، لذا اجعل عنصر التحكم مشروطًا بها بدلًا من استدعاء معالج لا يمكنه النجاح.

التصميم

نسّق هذا البلوك من قسم Design الخاص به في لوحة الإعدادات. هذه تجاوزات على مستوى البلوك تُطبَّق فوق تصميمك العام وتعود إليه عند تركها فارغة.

Text

يتيح لك قسم Text في Design التحكم في طباعة ثلاثة عناصر. استخدم منتقي Text element للتبديل بينها. Title — اسم المنتج. يدعم أيضًا عائلة خط مخصصة. يُضبط الخط العريض ولون النص من محرر النص المنسّق أعلاه (في علامة تبويب Settings)، وليس هنا. Price — سطر السعر. يُضبط الخط العريض ولون النص من محرر النص المنسّق أعلاه. Description — النص الداعم. يُضبط الخط العريض ولون النص من محرر النص المنسّق أعلاه.
النقر على عنصر نصي مباشرة في معاينة السلة يُبرزه ويفتح عناصر تحكمه في اللوحة تلقائيًا.
ما هي إعدادات التصميم؟ اعرف المزيد هنا: إعدادات التصميم.