تبويبات المنتجات
يُستخدم مكون تبويبات المنتجات لعرض مجموعات مختلفة من المنتجات في مساحة واحدة منظمة وذكية. يتيح هذا المكون للعملاء التنقل بين أقسام أو تصنيفات متعددة (مثل: “الأكثر مبيعاً”، “وصل حديثاً”، “عروض خاصة”) من خلال النقر على أزرار التبويبات العلوية، مما يسهل عليهم استكشاف تشكيلة واسعة من المنتجات دون الحاجة للتمرير طويلاً إلى أسفل الصفحة.
خيارات الخلفية
تتحكم هذه الخيارات في شكل المساحة أو الخلفية التي تقع خلف المكون بالكامل.
| اسم الخيار | الوصف |
|---|---|
| نوع خلفية العنصر | يتيح لك اختيار شكل الخلفية، يمكنك تركها “بدون خلفية”، أو اختيار “لون” ثابت، أو وضع “صورة”، أو حتى “فيديو” ليعمل في الخلفية. |
| لون الخلفية | تحديد اللون المرغوب في حال اخترت “لون” في نوع الخلفية. |
| صورة الخلفية | رفع الصورة التي ستظهر كخلفية للمكون في حال اخترت “صورة”. |
| فيديو الخلفية | إدراج رابط الفيديو الذي سيعمل كخلفية للمكون في حال اخترت “فيديو”. |
خيارات العنوان
تتحكم هذه الخيارات في العنوان الرئيسي للمكون بشكل عام، بالإضافة إلى النصوص والأزرار المصاحبة له أعلى التبويبات.
| اسم الخيار | الوصف |
|---|---|
| إضافة عنوان للعنصر | زر لتفعيل أو إخفاء العنوان بالكامل من أعلى المكون. |
| العنوان الرئيسي | النص الأساسي الذي يوضح فكرة هذا القسم (مثال: “تشكيلات متنوعة”). |
| لون العنوان الرئيسي | لاختيار وتغيير لون النص الخاص بالعنوان الأساسي. |
| النص التوضيحى | فقرة قصيرة تظهر أسفل أو بجانب العنوان الرئيسي لإضافة وصف (مثال: “أحدث التصاميم لتبتكر مظهرك الخاص”). |
| لون النص التوضيحي | لاختيار لون النص الخاص بالفقرة التوضيحية. |
| نص الزر | الكلمة المكتوبة داخل زر الانتقال الموجود أعلى التبويبات (إن وجد). |
| رابط الزر | لتحديد الوجهة التي سينتقل إليها العميل عند الضغط على هذا الزر. |
| لون الزر | لاختيار لون خلفية زر الانتقال ليبرز بشكل جذاب. |
| موضع العنوان | للتحكم في مكان محاذاة العنوان الرئيسي والنصوص (إما “في البداية” على اليمين، أو “في المنتصف”). |
خيارات المسافات
تتحكم هذه الخيارات في المسافات الداخلية للمكون، لإضافة مسافات خارجية يرجى إضافة عنصر «فاصل» من قائمة المكونات.
| اسم الخيار | الوصف |
|---|---|
| المسافة العلوية - شاشات الكمبيوتر | تحديد مقدار الفراغ أعلى المكون عند التصفح من جهاز الكمبيوتر. |
| المسافة العلوية - شاشات الجوال | تحديد مقدار الفراغ أعلى المكون عند التصفح من الجوال لضمان مظهر متناسق. |
| المسافة السفلية - شاشات الكمبيوتر | تحديد مقدار الفراغ أسفل المكون عند التصفح من جهاز الكمبيوتر. |
| المسافة السفلية - شاشات الجوال | تحديد مقدار الفراغ أسفل المكون عند التصفح من الجوال. |
خيارات تبويبات المنتجات (الإعدادات العامة)
تتحكم هذه الخيارات في طريقة عرض وتخطيط التبويبات والمنتجات داخلها.
| اسم الخيار | الوصف |
|---|---|
| عرض العنصر بكامل الشاشة | تفعيل هذا الخيار يجعل مكون التبويبات يمتد بالعرض ليغطي كامل مساحة الشاشة من اليمين لليسار. |
| عرض المنتجات علي هيئة سلايدر متحرك | تفعيل هذا الخيار يجعل المنتجات داخل كل تبويب تظهر في شريط أفقي يمكن سحبه وتمريره يميناً ويساراً لمشاهدة المزيد، بدلاً من عرضها ثابتة تحت بعضها. |
قائمة التبويبات
من هنا يمكنك إضافة التبويبات نفسها (كحد أقصى 8 تبويبات)، وكل تبويب يحتوي على الإعدادات التالية للتحكم في المنتجات التي ستظهر بداخله:
| اسم الخيار | الوصف |
|---|---|
| العنوان | اسم التبويب الذي سيظهر للعميل لينقر عليه (مثال: “ملابس رجالية”، “تخفيضات الشتاء”). |
| نوع المنتجات | لاختيار مصدر المنتجات التي ستعرض داخل هذا التبويب تحديداً (إما “أحدث المنتجات” المضافة لمتجرك، أو جلب “منتجات من تصنيف” معين، أو تحديد “منتجات مختارة” يدوياً). |
| المنتجات المختارة | يظهر هذا الخيار إذا اخترت “منتجات مختارة”، ويتيح لك البحث وتحديد المنتجات الفردية التي ترغب بعرضها (كحد أقصى 12 منتجاً). |
| التصنيف | يظهر هذا الخيار إذا اخترت عرض “منتجات من تصنيف”، ويتيح لك اختيار القسم أو الفئة (مثل: الساعات) ليتم عرض منتجاته تلقائياً في هذا التبويب. |
| عدد المنتجات | لتحديد الحد الأقصى لعدد المنتجات المسموح بظهورها داخل هذا التبويب (من 4 وحتى 32 منتجاً). |