الكتل المعيارية — أنشئ صفحات متجرك مثل قطع الليغو
تعتمد الصفحة الرئيسية لـ Loomix كلياً على مفهوم Dynamic Zones في Strapi 5، مما يمنح مديري المتجر مرونة مطلقة لتغيير ترتيب الأقسام وإضافة عناصر جديدة.
ما هي الكتل المعيارية (Modular Blocks)؟
هي مكونات واجهة مستخدم مستقلة (UI Components) ذات بنية بيانات محددة، يمكن تكرارها وترتيبها بحرية في أي صفحة.
- اختر القسم المطلوب من قائمة Dynamic Zones في Strapi.
- حدد النمط البصري المفضل (style-1، style-2، أو style-3).
- أدخل المحتوى، الصور، والعناوين التفاعلية.
- اسحب الكتل لإعادة ترتيب تسلسل ظهورها في الصفحة بسهولة.
- انقر Publish لتشاهد النتيجة المباشرة على متجرك في أجزاء من الثانية.
دورة حياة الكتل من Strapi إلى الواجهة
إضافة أنماط جديدة من لوحة Strapi
لإضافة أو إزالة أنماط بصرية لأي كتلة، افتح قائمة Storefront Management في Strapi، اختر المكون والنمط المطلوب، ثم انشر التحديث.
- 1. 1. يضيف المدير كتلة جديدة (مثل Featured Products) في Strapi.
- 2. 2. يرسل Strapi إشعار Webhook لإعادة التحقق الفوري (Revalidation).
- 3. 3. يقوم Next.js 16 BlockRenderer بعرض المكون فورياً للزوار.
كتالوج الكتل المدعومة افتراضياً
استعرض جميع الكتل الجاهزة للاستخدام مع خيارات التخصيص والمظهر.
قسم الترحيب الرئيسي (Hero Banner)
واجهة الدخول الأولى للمتجر؛ تدعم العناوين الجذابة، الصور عالية الدقة، وأزرار الشراء الفوري.
- حدد عنوان الترحيب والشعار الترويجي.
- أضف رابط الزر الرئيسي وزر الاستكشاف الثانوي.
قسم استعراض المنتجات (Product Showcase)
لعرض منتج محدد أو مجموعة منتجات بتصميم تفاعلي جذاب مع مميزات المنتج ومواصفاته الفنية.
- اختر نمط العرض (سلايدر، شبكة، أو بطاقة ثلاثية الأبعاد).
- حدد معرّف المنتج من Medusa.
نصيحة للمديرين:
النمط البصري (Style):
قسم المنتجات المتمررة (Scroll Products)
شريط تمرير أفقي سلس للمنتجات الجديدة أو العروض الخاطفة لجذب انتباه الزائر.
- اختر نمط التمرير وسرعة الحركة.
- حدد تصنيف المنتجات المعروضة.
النمط البصري (Style):
قسم المزايا والخدمات (Features)
عرض مميزات المتجر مثل 'شحن مجاني'، 'دفع آمن'، أو 'ضمان الاسترجاع' بأيقونات عصرية.
- اختر من بين 3 أنماط تصميمية مختلفة.
- أضف عنوان ومحتوى وأيقونة لكل ميزة.
- اضبط ألوان الخلفية والتدرجات لتلائم علامتك التجارية.
النمط البصري (Style):
قسم استعراض التصنيفات (Categories Grid)
عرض شبكة تصنيفات المتجر بأشكال دائرية أو بطاقات مربعة مع صور توضيحية.
- حدد التصنيفات التي تريد إبرازها في الصفحة الرئيسية.
النمط البصري (Style):
قسم أحدث المقالات (Recent Blog Posts)
عرض أحدث المقالات والنصائح الترويجية لزيادة تفاعل الزوار وتحسين تصدر محركات البحث (SEO).
- اختر عدد المقالات المعروضة (3 أو 4 مقالات).
النمط البصري (Style):
الخطوة التالية: الإعدادات العامة
تعرف على كيفية ضبط الهوية البصرية، الشعار، وألوان المتجر من Strapi.