كيفية إنشاء أدوات Magento 2 المخصصة

تسمح الأدوات الذكية لمسؤولي متجر Magento 2 بإضافة محتوى ثابت / ديناميكي إلى صفحات وكتل CMS ، مما يوفر الكثير من الوظائف والتنفيذ المباشر. الأدوات هي مكونات قابلة لإعادة الاستخدام ويمكن إضافتها في أي كتلة CMS من Magento 2.

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

الهدف من هذه المقالة هو توضيح كيفية إنشاء عناصر واجهة مستخدم في Magento 2 ، مع التركيز على الأدوات المخصصة.

الحاجيات ماجنتو 2

Magento 2 هو أحدث إصدار من Magento ، أحد منصات التجارة الإلكترونية الرائدة اليوم. تلعب الأدوات الذكية دورًا مهمًا في Magento 2 ، خاصة من وجهة نظر الوظائف. بالإضافة إلى تقديم المزيد من الوظائف من جانب المستخدم ، تساعد أدوات Magento المسؤولين على إضافة محتوى ثابت أو ديناميكي إلى صفحات CMS والكتل.

ولكن ، من منظور تقني ... ما هو عنصر واجهة مستخدم Magento؟

عنصر واجهة مستخدم Magento 2 هو في الأساس امتداد Magento مصمم بمجموعة من خيارات التكوين المتقدمة. نظرًا لزيادة المرونة والتحكم ، يتم استخدامها لتوفير المعلومات والمحتوى التسويقي عبر لوحة Magento Administrator. تتمثل إحدى مزايا أدوات Magento 2 في أنه يمكنك "الاتصال" بها من أي مكان على الموقع.

تسمح الأدوات الذكية أيضًا للمسؤولين بإضافة واجهات وميزات تفاعلية في الواجهة الأمامية لـ Magento ، دون الحاجة إلى الكود (في الواقع ، دون معرفة كيفية البرمجة).

تقدم Magento 2 أنواعًا متعددة من الأدوات

قبل أن ننتقل إلى التنفيذ ، دعنا نلقي نظرة فاحصة على النطاق القياسي للأدوات المدعومة في Magento 2:

• المنتجات التي تمت مقارنتها مؤخرًا - يجب أن تكون قد لاحظت هذه الأداة أثناء تصفح المنتجات على مواقع التجارة الإلكترونية المفضلة لديك. تُستخدم هذه الأداة لعرض المنتجات التي تم عرضها أو مقارنتها مؤخرًا في الشريط الجانبي لصفحة الكتالوج. قد تظهر أيضًا في متجرك حسب الموضوع. إحدى النقاط الحاسمة هي أنه يمكن تكوين عدد المنتجات المدرجة في كل كتلة مفردة.
• الطلبات والمرتجعات - عندما تتسوق للحصول على منتج عبر الإنترنت ، هناك عنصر واجهة مستخدم لا غنى عنه يوفر وصولاً سريعًا إلى الطلبات والمرتجعات. إذا أراد المستخدم مراجعة المنتجات المطلوبة أو المرتجعة ، فيمكنه ملء التفاصيل الضرورية مثل معرّف الطلب ، وفوترة التاريخ الأخير ، والعثور على الطلب عن طريق ، والبريد الإلكتروني ، وما إلى ذلك.
• قائمة منتجات الكتالوج - هذه أداة أخرى مستخدمة على نطاق واسع ؛ الجميع على دراية بأقسام "المنتج المميز" على مواقع التجارة الإلكترونية ، حيث يحتوي كل موقع تقريبًا على واحد. عادة ما يتم وضع المنتجات المميزة على الصفحة الرئيسية لغرض ترويج المنتج. يتم عرض المنتج المعين مع تفاصيل موجزة مثل السعر والميزات والخيارات مثل الإضافة إلى عربة التسوق والإضافة إلى قائمة الرغبات والإضافة إلى ميزة المقارنة.
• Catalog Product Link - الغرض الرئيسي من أداة Catalog Product Link هو أنها تسمح للمسؤولين بإدارة الروابط للمنتجات ، بما في ذلك المنتجات ذات الصلة وعمليات البيع المتقاطعة والمبيعات الإضافية والمنتجات المجمعة. عندما تزور صفحة ارتباط منتج الكتالوج ، سترى فئات كتالوج مختلفة بدأت بمقدمة. هناك ، ستجد روابط منتج الكتالوج مع روابط فرعية متنوعة ، مثل تعيين ارتباط منتج الكتالوج ، وسمات ارتباط منتج الكتالوج ، وإزالة ارتباط منتج الكتالوج ، وأنواع ارتباط منتج الكتالوج ، والمزيد.
• رابط فئة الكتالوج - في مواقع التجارة الإلكترونية ، خاصة تلك القائمة على المنتج ، لن تجد أي نقص في أدوات ارتباط فئة الكتالوج.
• Custom Block Widget - من الممكن الجمع بين الكتل وعناصر واجهة المستخدم والصفحات المخصصة لعرض أجزاء من الكتالوج أو معلومات أخرى قد يجدها العملاء مفيدة.

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

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

حالة الحاجيات المخصصة Magento 2

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

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

يتيح لنا استخدام وظيفة Custom Widget في Magento 2 إنشاء قوالب عناصر واجهة المستخدم الخاصة بنا. يمكن أن تقدم أداة مخصصة في بعض الأحيان طريقة أفضل لتحرير أو إضافة محتوى عالي الجودة داخل كتل أو صفحات CMS.

ومع ذلك ، قبل أن ننتقل إلى الأدوات المخصصة ، نحتاج إلى فحص حالة الاستخدام القياسية للأدوات في Magento 2. لنلقِ نظرة على شيء أساسي وشائع الاستخدام ، على سبيل المثال:

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

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

لإضافة قائمة منتجات Magento إلى الصفحة الرئيسية ، ما عليك سوى اتباع عملية بسيطة:

• قم بتسجيل الدخول إلى صفحة إدارة Magento 2 وانتقل إلى Content> Widget

• انقر فوق الزر Add Widget . بعد ذلك ، سيتم إعادة توجيهنا إلى علامة التبويب الإعدادات ، حيث يتعين علينا تحديد خيارات وموضوعات النوع والتصميم .

• يمكننا رؤية لقطة الشاشة أدناه ، والتي حددنا فيها بالفعل قائمة منتجات الكتالوج الجديدة التي سنعرضها في الواجهة الأمامية.

• اخترنا LUMA كخيار سمة التصميم.

• بعد تحديد كلتا القيمتين ، يتعين علينا الانتقال إلى الخطوة الثانية ، حيث يتعين علينا ملء خصائص واجهة المتجر. الآن يتعين علينا تعيين عنوان عنصر واجهة المستخدم وخصائص واجهة المتجر ، مثل عنوان القطعة وطريقة عرض المتجر . نحن نستخدم قائمة منتجات Toptal الجديدة وجميع مشاهدات المتجر .

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

توفر لك إعدادات تحديثات التخطيط الخيارات التالية:

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

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

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

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

في عدد المنتجات المراد عرضها ، يمكننا تحديد عدد المنتجات التي يمكن عرضها في قسم المنتجات الجديدة . أيضًا ، يمكننا تغيير إعدادات Cache Lifetime إذا لزم الأمر.

الآن علينا حفظ هذه الأداة ومسح ذاكرة التخزين المؤقت لـ Magento 2. يمكن القيام بذلك من المسؤول أو سطر الأوامر. يمكننا استخدام الأمر التالي لمسح ذاكرة التخزين المؤقت:

php bin/magento cache:clean and php bin/magento cache:flush

ثم سنكون قادرين على رؤية المنتجات الجديدة على الصفحة الرئيسية.

كيفية إنشاء عنصر واجهة مستخدم مخصص في Magento 2

الآن ، سوف نتعلم كيفية إنشاء عناصر واجهة مستخدم مخصصة لـ Magento 2. توفر الأدوات الذكية المخصصة أفضل طريقة لإضافة المحتوى وتحريره داخل كتل أو صفحات CMS ، لأنه يمكن تخصيصها لتلائم متطلباتك.

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

الآن ، دعنا ننتقل إلى العملية خطوة بخطوة لإنشاء عناصر واجهة مستخدم مخصصة في Magento 2.

أولاً ، نحتاج إلى إنشاء وحدة نمطية جديدة تتطلب مساحة اسم ومجلدات وحدة. في هذا المثال ، سنستخدم Toptal الاسم و CustomWidget لاسم الوحدة. لذلك ، لنبدأ كالمعتاد بـ composer.json و registration.php و etc/module.xml .

app/code/Toptal/CustomWidget/composer.json

سيتم تحميل هذا الملف بواسطة Composer في كل مرة نقوم بتشغيله ، على الرغم من أننا لا نستخدم Composer بالفعل مع الوحدة النمطية الخاصة بنا.

نحتاج الآن إلى تسجيل وحدتنا مع Magento ، لذلك نحن مطالبون بإنشاء register.php في الموقع التالي: app/code/Toptal/CustomWidget/registration.php .

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Toptal_CustomWidget', __DIR__ );

الآن ، سننشئ ملف التسجيل الأخير ، module.xml .

app/code/Toptal/CustomWidget/etc/module.xml

 <?xml version="1.0" ?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Toptal_CustomWidget" setup_version="1.0.0"/> </config>

بعد إكمال خطوة التسجيل ، نقوم بعد ذلك بإنشاء ملف تكوين widget.xml .

app/code/Toptal/CustomWidget/etc/widget.xml

 <?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="Toptal\CustomWidget\Block\Widget\Samplewidget"> <label>Toptal Sample Widget</label> <description></description> <parameters> <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text"> <label>Title</label> </parameter> <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="textarea"> <label>Content</label> </parameter> </parameters> </widget> </widgets>

في الكود أعلاه ، نحصل على Title Content كمعلمات يتم عرضها أينما يتم استدعاء الأداة. تحتوي علامة <widget> على فئة الكتلة Toptal\CustomWidget\Block\Widget\Samplewidget . يتم إبطاء هذه الفئة داخل Block/Widget/Samplewidget.php . يوجه الفصل عناصر واجهة المستخدم الخاصة بنا إلى النموذج الذي يجب استخدامه.

يوضح المقتطف التالي من التعليمات البرمجية كيفية تحديد كتلة لعنصر واجهة المستخدم ؛ سنضع نموذجنا هنا. دعونا نرى كيف يبدو.

app/code/Toptal/CustomWidget/Block/Widget/Samplewidget.php

 <?php namespace Toptal\CustomWidget\Block\Widget; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Samplewidget extends Template implements BlockInterface { protected $_template = "widget/samplewidget.phtml"; }

Toptal\CustomWidget\Block\Widge\Samplewidget فوق الكود. في هذا الملف ، نقوم بتعيين ملف قالب مخصص داخل المتغير $_template .

بعد ذلك ، سنرى ما يحتوي على قالب عنصر واجهة المستخدم الخاص بنا.

app/code/Toptal/CustomWidget/Block/view/frontend/templates/widget/samplewidget.phtml

 <?php if($block->getData('widgettitle')): ?> <h2 class='toptal-title'><?php echo $block->getData('widgettitle'); ?></h2> <?php endif; ?> <?php if($block->getData('widgetcontent')): ?> <h2 class='toptal-content'><?php echo $block->getData('widgetcontent'); ?></h2> <?php endif; ?>

هنا ، يمكننا أن نرى كيفية التقاط القيمة من معلمات عنصر واجهة المستخدم. انه سهل:

$this->getData('widgettitle');

و

$this->getData('widgetcontent');

ما هي نتيجتنا النهائية؟ دعني أوضح لك كيف يبدو في Magento Admin:

الآن علينا حفظ هذه القطعة ومسح ذاكرة التخزين المؤقت. كما هو موضح سابقًا ، يمكن القيام بذلك من المسؤول أو سطر الأوامر ، باستخدام php bin/magento cache:clean و php bin/magento cache:flush

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

أخيرًا ، أود أن أذكر اثنين من مدونات التطوير الشخصية التي وجدتها مفيدة جدًا. ربما يكون لدى Alan Storm المحتوى التعليمي الأكثر عندما يتعلق الأمر بتعلم Magento ، وأعتقد أنه يجب عليك مراجعة مدونة Alan Kent أيضًا.

الحاجيات: جزء حاسم من الصورة الكبيرة

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

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

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

ومع ذلك ، هذا خارج نطاق هذه المقالة. كان هدفي هو تقديم نظرة عامة فنية سريعة ، وهو وسيلة سهلة لمتابعة البرنامج التعليمي لعناصر Magento 2 ، وليس لمناقشة عائد الاستثمار والتسويق.