ماجنتو 2 الواجهة الأمامية

نشرت: 2015-11-23

يأتي Magento 2 بمجموعة مميزة من أساليب الواجهة الأمامية المحسّنة مقارنةً بسابقه Magento 1.X ، سننظر اليوم تحت غطاء محرك الواجهة الأمامية Magento 2.0. ووصف الأجزاء الأكثر إثارة للاهتمام بالتفصيل.

الحار!! تم إطلاق الإصدار 2.0 من Claue

claue2_edited (1)

مشاهدة العرض التوضيحي

يعد Claue - Clean، Minimal Magento 2 & 1 Theme نموذجًا ممتازًا لمتجر تجارة إلكترونية حديث ونظيف يحتوي على أكثر من 40 تخطيطًا للصفحة الرئيسية والعديد من الخيارات للتسوق ، والمدونة ، والمحفظة ، وتخطيطات محدد مواقع المتاجر ، وصفحات مفيدة أخرى. يأتي إصدار Claue 2. 0 مع مجموعة من الميزات الحصرية بما في ذلك:

  • أن تكون مبنية على موضوع Luma.
  • تلبية جميع معايير موضوع Magento
  • تحسن كبير في الأداء
  • متوافق مع معظم ملحقات الطرف الثالث.
  • متوافق تمامًا مع Magento 2.4.x

هذه النسخة المتقدمة الثانية تختلف تمامًا عن سابقتها. وبالتالي ، إذا كنت تستخدم الإصدار 1 من Claue وترغب في التحديث إلى الإصدار 2 من Claue ، فيمكنك فقط إعادة إنشاء موقع ويب جديد بدلاً من التحديث من الإصدار القديم. الآن ، دعنا نعود إلى الموضوع الرئيسي

الاختلاف الكبير هو أن الواجهة الأمامية يتم تحديثها الآن بتقنيات أحدث مثل HTML5 و CSS3 و jQuery. هناك أيضًا تغييرات / تحسينات كبيرة في التلاعب الكلي بالتخطيط ، وهيكل الملفات ومقدمة جديدة تمامًا لمكتبة Magento UI تعتمد بشكل كبير على المعالج المسبق LESS مع المترجم المدمج.

كان أحد الأهداف الرئيسية إلى جانب الأداء وقابلية التوسع هو خدمة RWD خارج الصندوق. سأحاول في هذه المقالة تغطية بعض الاختلافات الرئيسية ، والغوص في التنمية وإظهار بعض الأمثلة العملية.

مكتبة Magento UI

مكتبة Magento UI هي مكتبة أمامية مرنة تعتمد على LESS مصممة لمساعدة مطوري موضوع Magento. يستخدم مجموعة من الخلطات للعناصر الأساسية لتسهيل تطوير موضوع الواجهة الأمامية وتخصيصها.

المكونات التي توفرها مكتبة واجهة المستخدم

توفر مكتبة Magento UI القدرة على تخصيص وإعادة استخدام عناصر وخصائص واجهة المستخدم التالية:

  • شريط أدوات الإجراءات
  • فتات الخبز
  • أزرار
  • هبوط قطرة
  • نماذج
  • الرموز
  • نسق
  • لوادر
  • رسائل
  • ترقيم الصفحات
  • تظهر ظهور مفاجئ
  • التقييمات
  • أقسام
  • علامات التبويب والأكورديون
  • الجداول
  • تلميحات
  • الطباعة
  • قائمة متغيرات الموضوع

يُظهر الرسم التوضيحي التالي صفحة منتج في واجهة المحل تحتوي على بعض العناصر السابقة:

الواجهة الأمامية لماجينتو 2

موقع ميكسين

يمكنك العثور على مكتبة Magento UI ضمن lib/web/css . مكتبة المصدر .less ملفات مخزنة تحت الدليل source ، كل ملف يحتوي على مزيج لتكوين عنصر معين ، وفي معظم الحالات يتطابق العنصر مع اسم الملف:

 ليب / ويب
    ├── المغلق /
    │ ├── مستندات / (وثائق المكتبة)
    │ ├── المصدر /
    │ │ ├── lib / (ملفات مصدر المكتبة)
    | | | ├── المتغيرات / (المتغيرات المحددة مسبقًا لكل مزيج)
    │ │ │ ├── _actions-toolbar.less
    │ │ ├── _breadcrumbs.less
    │ │ │ ├── _buttons.less
    │ │ ├── _dropdowns.less
    │ │ ├── _forms.less
    | | | ├── شبكات بدون
    │ │ │ ├── _icons.less
    │ │ ├── _layout.less
    │ │ ├── _lib.less
    │ │ ├── _loaders.less
    │ │ │ ├── _Messages.less
    │ │ ├── _navigation.less
    │ │ │ ├── _pages.less
    │ │ ├── _popups.less
    │ │ ├── _rating.less
    │ │ ├── _resets.less
    │ │ │ ├── _responsive.less
    │ │ ├── _sections.less
    │ │ ├── _tables.less
    │ │ ├── _tooltips.less
    │ │ ├── _typography.less
    │ │ ├── _utilities.less
    │ │ │ └── _variables.less
    │ └── _extend.less
    │ └── _theme.less
    │ │ └── _variables.less
    │ └── انماط
    ├── الخطوط /
    │ └── رموز موضوعات فارغة / (خط الرموز المخصصة للمكتبة)
    ├── صور /
    │ └── blank-theme-icons.png (رموز مكتبة الرموز)
    └── مسج / (مكتبة ملفات جافا سكريبت)

المتغيرات المحددة مسبقًا

إذا كان المظهر الخاص بك موروثًا من أي سمة Magento الجاهزة ، على سبيل المثال فارغ ، يمكنك بسهولة تخصيص أي عنصر في صفحة المتجر دون تغيير أي كود CSS أو قوالب. يمكن إجراء التخصيص ببساطة عن طريق تغيير قيم المتغيرات المحددة مسبقًا المستخدمة في مكتبة واجهة المستخدم أو مزيج السمات الأصل في نسقك.

يتم تخزين القائمة الكاملة لهذه المتغيرات وقيمها الافتراضية في lib/web/css/source/lib/variables . يحتوي هذا الدليل على مجموعة من الملفات ، تتوافق مع مجموعة عناصر مكتبة واجهة المستخدم ، وكل ملف يسرد المتغيرات الخاصة بالعنصر. على سبيل المثال ، يحتوي lib/web/css/source/lib/variables/_breadcrumbs.less على متغيرات مستخدمة في مزيج breadcrumbs() .

لتغيير قيم متغيرات المكتبة الافتراضية ، حدد القيم الجديدة للمتغيرات المطلوبة في الملف <theme_dir>/web/css/source/_theme.less .

يرجى مراعاة أن <theme_dir>/web/css/source/_theme.less يتجاوز الملف _theme.less عن السمة الرئيسية (إذا كان قالبك له أحد الوالدين). لذلك ، إذا كنت تريد أن ترث القيم المتغيرة للقالب الأصلي بالإضافة إلى تغييراتك ، فأضف محتوى _theme.less الخاص بالوالدين إلى ملفك أيضًا.

يوضح الشكل التالي صفحة المنتج الموضحة سابقًا في هذا الموضوع ، بعد تطبيق سمة مخصصة. الموضوع مخصص فارغ عن طريق إعادة تعريف المتغيرات فقط.

تغيير التصميم بإعادة تعريف المتغيرات

باستخدام الخلطات

يمكنك استخدام mixin بقيم المتغيرات الافتراضية ، أو يمكنك إعادة تعريفها عند استدعاء mixin. تصف الفقرات التالية كلا الطريقتين لاستدعاء mixin.

لاستخدام mixin مع القيم الافتراضية ، قم باستدعاء mixin بدون تحديد أي معلمات. فمثلا:

 .breadcrumbs {
    .breadcrumbs () ؛
}

لاستدعاء mixin بقيم معلمات مختلفة عن الافتراضي ، قم بتعيين هذه القيم عند استدعاء mixin ، كما في المثال التالي:

 زر مثال {
    .زر(
        @ _button-padding: @ button-padding ،
        @ _button-color: #fff ،
        @ _button-color-hover: #ccc
    ) ؛
}

المتغيرات التي تبدأ @_ هي متغيرات mixin الخاصة المستخدمة فقط في هذا المزيج. المتغيرات التي تبدأ بـ @ (بدون الشرطة السفلية) هي متغيرات عامة ومدرجة في lib/web/css/source/lib/variables/ .

وثائق مكتبة واجهة المستخدم

يمكنك العثور على معلومات مفصلة حول مكتبة Magento UI في الوثائق المقدمة مع الكود:

  • lib/web/css/docs/source/README.md : يصف بنية مكتبة Magento UI واصطلاحات التسمية ونمط الكود.
  • lib/web/css/docs : يحتوي على مجموعة من ملفات .html مع معلومات مفصلة حول مزيج المكتبة. تتم تسمية كل ملف على اسم mixin الذي يصفه ، ويحتوي على وصف تفصيلي للمزج وعناصر تحكم في التنقل للوصول إلى الوثائق الخاصة بمزيجات أخرى. الوثائق متاحة في عرض HTML مناسب في الموقع التالي في تثبيت Magento: pub/static/frontend/Magento/blank/en_US/css/docs/index.html

استمرارًا للمقال ، أود أن أصف لك هيكل السمات الجديد لمنصة Magento 2.

هيكل موضوع Magento 2

خضع هيكل موضوع Magento 2 لتغييرات كبيرة:

تم الآن تنظيم الموضوع بالكامل نسبيًا حسب "التطبيق / التصميم". مجلد "السطح" لم يعد موجودًا. أيضًا ، هناك طريقة جديدة لتخصيص الوحدات: الآن في المجلد الذي يحتوي على السمة ، سيكون لكل وحدة وحدة كتالوج _ الخاص بها مع تمثيلها ، وستحتوي على قوالب ، و JS و CSS / LESS. إنه نهج سهل الاستخدام وعملي للغاية. لدينا هيكل مريح ، حيث يتم فرز كل شيء بطريقة مريحة للغاية.

i18n

يحتوي هذا المجلد على ملفات ترجمة .csv.

theme.xml

يتم استخدامه لتهيئة الموضوع. يجب تحديد اسم السمة وإصدار السمة والقالب الرئيسي للموضوع وصورة معاينة السمة هناك. بالمناسبة ، يدعم Magento 2 الآن وراثة السمات المتعددة.

1
2
3
4
5
6
7
8
<theme xmlns:xsi= "http :// www. w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation= "../../../../../lib/internal/Magento/Framework/Config/etc/theme.xsd" >
<title>Astrio</title>
<version>1.0.0.0</version>
<parent>Magento/blank</parent>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>

الملحن json

يتم تنظيم موضوعات Magento 2 كحزم ملحن.

لتحويل السمة الخاصة بك إلى حزمة مؤلف ، ستحتاج إلى إضافة ملف تكوين composer.json في مجلد السمة ، وتحتاج أيضًا إلى تسجيل الحزمة الخاصة بك على https://packagist.org

تحديثات / تحسينات التخطيط

عندما يتعلق الأمر بمعالجة التخطيط ، هناك بعض التحسينات الجديدة الرائعة والمثيرة للاهتمام حقًا.

قبل الغوص في الأمثلة العملية ، من المهم الإشارة إلى أن ملفات التخطيط مقسمة الآن إلى أجزاء أصغر. شرح عمليًا - ما كان يومًا ما مقبض تخطيط أصبح الآن ملفًا منفصلاً.
ربما كان القصد من تبسيط الصيانة.

يقدم Magento 2 المفهوم الجديد بالكامل لإجراءات تغيير حجم صورة المنتج / الوسائط مباشرة من التخطيط. يعد ملف Layout view.xml مسؤولاً ويجب وضعه ضمن دليل app / design / frontend / vendorName / newTheme / etc / . فيما يلي مثال على تغيير حجم صور كتالوج المنتجات أثناء العمل.

 <view xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation = "../../../../../../lib/internal/Magento/Framework/Config/etc/view.xsd" > <vars module = "Magento_Catalog" > <var name = "product_small_image_sidebar_size" > 100 </var > <var name = "product_base_image_size" > 275 </var > <var name = "product_base_image_icon_size" > 48 </var > <var name = "product_list_image_size" > 166 </var > <var name = "product_zoom_image_size" > 370 </var > <var name = "product_image_white_borders" > 0 </var > </vars > </view >

على الرغم من أنني أفترض أن الهدف الرئيسي كان تبسيط عملية تغيير الحجم الفعلية للمطورين ، إلا أنها ستفشل بالتأكيد في ظل غالبية حالات التصميم سريعة الاستجابة. على سبيل المثال ، لا نريد عرض صور كبيرة لمستخدمي الهواتف الذكية على اتصال الحافة. يوفر تغيير الحجم من ملفات القوالب طريقة أفضل لخدمة مصادر متعددة لملفات تعريف المستخدم النهائي المختلفة. في الوقت الحالي ، أتفقد موضوعًا فارغًا ، أرى فقط موقفًا به مجرد تصغير للصور في html.

أحد التغييرات العظيمة والأكثر ترحيبًا هو إدخال غلاف الحاوية ، الذي يخلف نوع كتلة أساسي / قائمة نصية والذي خدم دور الكتلة الهيكلية في الإصدارات السابقة من النظام. الأمر المثير للاهتمام حقًا هو إمكانية تمرير سمات مثل htmlTag و htmlClass و htmlId مباشرة من ملفات التخطيط.

الشخصية المفضلة لدي هي مقدمة طريقة الحركة . إنه نوع من أسلوب العمل المكرر الذي تم تعيينه / unsetChild ولكن الآن أصبحت العملية أكثر سهولة. على سبيل المثال ، إذا احتجنا إلى إدخال كتلة المصدر 1 في كتلة الوجهة 2 ، فهذه هي الطريقة التي يمكننا بها القيام بذلك:

يقوم تلقائيًا بجعل كتلة المصدر 1 تابعة لكتلة الوجهة 2 .

من المهم الإشارة إلى أن Magento 2 يوفر التحقق من صحة النظام لملفات XML باستخدام مخططات xml لملفات التخطيط الفردية والمدمجة.

تم تحسين نظام الواجهة الأمامية Magento 2 بشكل كبير ، وهو الآن أكثر تقدمًا من الناحية التكنولوجية وأسهل كثيرًا في العمل معه. لسوء الحظ ، من المستحيل تغطية جميع التغييرات والابتكارات الخاصة بـ Magento 2 في مقال واحد. في المقالات المستقبلية ستتابع Magesolution الأمر بالتأكيد ، وسوف ندخل في مزيد من التفاصيل حول عالم تكنولوجيا Magento 2.

المصدر: magento.com