عناصر واجهات المستخدمين هى أحد عناصر الصفحة المستخدمة فى إضافة محتوى ثابت (Static) أو محتوى متغير (Dynamic) لمحتوى صفحات CMS لماجنتو 2 . و لإضافة المزيد من الوظائف فى متجرك فإن عناصر واجهات المستخدمين هى الحل الأمثل . و هو من العناصر الأساسية التى تساعد الزوار على عرض و تصفح متجرك بسهولة ، و فى هذا الموضوع ومن خلال منصة ماجنتو 2 سنتعرف على خطوات إنشاء عناصر واجهات المستخدمين المخصصة فى متاجر ماجنتو 2 .

شبكة واجهات المستخدم فى المتجر
الخطوة 1 – اختيار النوع (Widget Type)
1 – من قائمة لوحة التحكم لماجنتو 2 انتقل إلى Content > Elements > Widgets .
2 – اضغط على Add Widget ، ثم قم بالتالى :
3 – من قسم Settings و من قائمة Type اختر نوع عنصر واجهة المستخدم الذى تريد إنشاؤها .
4 – Design Theme : تأكد من اختيار سمة التصميم الحالية أو خلفية التصميم الحالية على المتجر .
5 – اضغط على Continue .

إعدادات واجهة المستخدم
6 – ستظهر صفحة إعدادات أخرى ، من خلال قسم Storefront Properties ، اتبع التالى :
- Widget Title : ادخل عنوان يصف عنصر واجهة المستخدم ، فقط للوحة التحكم الداخلية و لن يظهر فى واجهة المتجر .
- Assign to Store Views : قم بتعيين واجهة عرض المتجر الذى تريد اتاحة واجهة المستخدم لها أو يمكنك تعيينها لجميع واجهات المتجر (All Store Views) . يمكنك اختيار أكثر من واجهة متجر من خلال الضغط مع الاستمرار على مفتاح Ctrl ثم تحديد واجهات المتجر التى تريد .
- Sort Order : ادخل ترتيب الفرز لتحديد ترتيب البلوك إذا كانت تظهر فى نفس المكان مثل عناصر المحتوى الأخرى . أعلى ترتيب هو صفر .

خصائص الواجهة الامامية للمتجر
7 – اضغط على Add Layout Update ، ثم من خلال Display on اختر نوع الصفحة التى سيتم عرض واجهة المستخدم عليها من القائمة .
8 -من خلال Block Reference اختر مكان تخطيط الصفحة حيث سيتم وضعها فيها .

Layout Update
9 – اذا كانت عنصر واجهة المستخدم عبارة عن رابط أو لينك ، اختر القالب المناسب من احد الخيارات التالية من قائمة Template :
- Block Template : لتنسيق المحتوى حتى يتم إضافته كوحدة مستقلة أو منفصلة على الصفحة .
- Inline Template : تنسيق المحتوى بحيث تتم إضافته لوضعه داخل محتوى اخر . على سبيل المثال إضافة لينك أو رابط داخل فقرة نصية .
الخطوة 2 – اكمل إعدادات Widget Options
تختلف الخيارات لكل نوع عنصر واجهة مستخدم تقوم باختياره اختلاف بسيط لكن العملية هى نفسها ، سيعرض المثال التالى خيارات واجهة المستخدم الخاصة بقائمة منتج لفئة معينة ، مع عناصر التحكم فى الترقيم (Pagination Controls) .
1 – من القائمة الجانبية على يسار الصفحة انتقل إلى قسم Widget Options ، ثم اكمل التالى :
2 – اضغط على Select Block .
3 – Title : ادخل اسم العنوان الذى سيظهر أعلى قائمة المنتجات ، على سبيل المثال featured products .
4 – Display Page Control : اختر YES لتستطيع إظهار عناصر الترقيم فى الصفحة ، ثم قم بالتالى :
5 – Number of Products per Page : ادخل عدد المنتجات التى تظهر فى الصفحة الواحدة .
6 – Number of Products to Display.: ادخل عدد المنتجات التى تريد عرضها .
7 – Condition : قم بتعيين الشرط لفئة المنتجات المراد إظهارها . هى نفس خطوات إنشاء قاعدة أسعار Price Rule داخل المتجر .

خيارات واجهة المستخدم (Widget Options)
8 – اضغط على Save لحفظ الإعدادات السابقة داخل ماجنتو 2 .