كيفية إضافة حقل إلى الخيارات المخصصة في Magento 2؟

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

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

1. إنشاء وحدة جديدة

أولاً ، لنقم بإنشاء وحدة MageWorx_Option. سننجز كل شيء باستخدام هذه الوحدة كمثال.

لنقم بإنشاء الدليل التالي: app / code / MageWorx / Option. لتسجيل وحدة ، سنحتاج إلى بعض الملفات القياسية:

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'MageWorx_Option', __DIR__ ); composer.json: { "name": "mageworx/module-option", "description": "N/A", "require": { "magento/module-catalog" : ">=101.0.0 <104", "magento/module-ui" : ">=100.1.0 <102" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "MageWorx\\Option\\": "" } } } 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="MageWorx_Option" setup_version="1.0.0"> <sequence> <module name="Magento_Catalog"/> <module name="Magento_Ui"/> </sequence> </module> </config>

2. أضف حقولنا الجديدة إلى قاعدة البيانات

على سبيل المثال ، نرغب في إبراز أحد الخيارات في الواجهة الأمامية بطريقة ما. دعنا نضيف حقل مربع اختيار للخيار "هو عرض خاص" وحقل نصي "الوصف" لقيم الخيارات القابلة للتحديد (القائمة المنسدلة ، مربع الاختيار ، زر الاختيار ، التحديد المتعدد).
أولاً ، سنحتاج إلى إضافته إلى قاعدة البيانات في الجداول المقابلة. لذلك ، أضف الملف التالي: app / code / MageWorx / Option / Setup / InstallSchema.php.

 <?php namespace MageWorx\Option\Setup; use Magento\Framework\Setup\InstallSchemaInterface; use Magento\Framework\Setup\ModuleContextInterface; use Magento\Framework\Setup\SchemaSetupInterface; use Magento\Framework\DB\Ddl\Table; class InstallSchema implements InstallSchemaInterface { public function install(SchemaSetupInterface $setup, ModuleContextInterface $context) { $setup->startSetup(); $setup->getConnection()->addColumn( $setup->getTable('catalog_product_option'), 'is_special_offer', [ 'type' => Table::TYPE_BOOLEAN, 'unsigned' => true, 'nullable' => false, 'default' => '0', 'comment' => 'Special Offer Flag', ] ); $setup->getConnection()->addColumn( $setup->getTable('catalog_product_option_type_value'), 'description', [ 'type' => Table::TYPE_TEXT, 'nullable' => true, 'default' => null, 'comment' => 'Description', ] ); $setup->endSetup(); } }

سيتم تعطيل حقل "هو عرض خاص" افتراضيًا.

بعد ذلك ، يمكننا تثبيت الوحدة.

للقيام بذلك ، قم بتشغيل الأوامر التالية في وحدة التحكم:

 sudo -u www-data php bin/magento module:enable MageWorx_Option sudo -u www-data php bin/magento setup:upgrade

3. أضف منطقًا للعمل مع الواجهة الخلفية

في هذه المرحلة ، دعنا نضيف آلية مُعدِّلات التجمع إلى وحدتنا ، والتي يستخدمها Magento 2 لدمج جميع الميزات الضرورية في صفحة منتج في لوحة الإدارة.

لذلك دعونا نضيف الملف التالي:

app / code / MageWorx / Option / etc / adminhtml / di.xml

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <virtualType name="Magento\CatalogStaging\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="mageworx-option-all" xsi:type="array"> <item name="class" xsi:type="string">MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All</item> <item name="sortOrder" xsi:type="number">71</item> </item> </argument> </arguments> </virtualType> <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="mageworx-option-all" xsi:type="array"> <item name="class" xsi:type="string">MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All</item> <item name="sortOrder" xsi:type="number">71</item> </item> </argument> </arguments> </virtualType> <virtualType name="MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\Pool" type="Magento\Ui\DataProvider\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> </argument> </arguments> </virtualType> <type name="MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All"> <arguments> <argument name="pool" xsi:type="object">MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\Pool</argument> </arguments> </type> <virtualType name="MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\Pool"> <arguments> <argument name="modifiers" xsi:type="array"> <item name="mageworx-option-base" xsi:type="array"> <item name="class" xsi:type="string">MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\Base</item> <item name="sortOrder" xsi:type="number">72</item> </item> </argument> </arguments> </virtualType> </config>

حان الوقت الآن لإنشاء فئة MageWorx \ Option \ Ui \ DataProvider \ Product \ Form \ Modifier \ All ، والتي لا تضيف أي شيء جديد من تلقاء نفسها إلى نموذج الخيارات القابلة للتخصيص في صفحة المنتج. باستخدام حقن التبعية (DI) ، ستضيف الحقول الضرورية على صفحة المنتج.

في الواقع ، تضيف مجموعة خيارات المنتج المتقدمة لدينا حوالي 40 حقلاً وهياكل معقدة أخرى ، والتي تمت إضافتها بمساعدة أكثر من 10 حزم مضمنة في الامتداد. نظرًا لأننا لا نحتاج إلى مثل هذه البنية المعقدة هنا ، فسنستخدم مُعدِّل فئة واحدًا فقط -

MageWorx \ Option \ Ui \ DataProvider \ Product \ Form \ Modifier \ Base.

قد تتساءل ، لماذا نحدد الترتيب التالي sort_order = 71. كل هذا يمكن تفسيره من خلال وظيفة Magento 2 القياسية ، حيث تتم إضافة حقول للخيارات القابلة للتخصيص ضمن sort_order = 70.

أدناه ، ألق نظرة على فئة MageWorx \ Option \ Ui \ DataProvider \ Product \ Form \ Modifier \ All ، والتي يتم تقديمها بواسطة مكرر منتظم:

app / code / MageWorx / Option / Ui / DataProvider / Product / Form / Modifier / All.php

 <?php namespace MageWorx\Option\Ui\DataProvider\Product\Form\Modifier; use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier; use Magento\Ui\DataProvider\Modifier\PoolInterface; class All extends AbstractModifier implements \Magento\Ui\DataProvider\Modifier\ModifierInterface { /** * @var PoolInterface */ protected $pool; /** * @var array */ protected $meta = []; /** * @param PoolInterface $pool */ public function __construct( PoolInterface $pool ) { $this->pool = $pool; } /** * {@inheritdoc} */ public function modifyData(array $data) { /** @var \Magento\Ui\DataProvider\Modifier\ModifierInterface $modifier */ foreach ($this->pool->getModifiersInstances() as $modifier) { $data = $modifier->modifyData($data); } return $data; } /** * {@inheritdoc} */ public function modifyMeta(array $meta) { $this->meta = $meta; /** @var \Magento\Ui\DataProvider\Modifier\ModifierInterface $modifier */ foreach ($this->pool->getModifiersInstances() as $modifier) { $this->meta = $modifier->modifyMeta($this->meta); } return $this->meta; } }

في الأساس ، حان الوقت الآن لإنشاء ملف ، والذي سيضيف حقولنا إلى نموذج الخيارات القابلة للتخصيص:

app / code / MageWorx / Option / Ui / DataProvider / Product / Form / Modifier / Base.php

 <?php namespace MageWorx\Option\Ui\DataProvider\Product\Form\Modifier; use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier; use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions; use Magento\Ui\Component\Form\Element\Input; use Magento\Ui\Component\Form\Element\Checkbox; use Magento\Ui\Component\Form\Element\DataType\Text; use Magento\Ui\Component\Form\Field; class Base extends AbstractModifier { /** * @var array */ protected $meta = []; /** * {@inheritdoc} */ public function modifyData(array $data) { return $data; } /** * {@inheritdoc} */ public function modifyMeta(array $meta) { $this->meta = $meta; $this->addFields(); return $this->meta; } /** * Adds fields to the meta-data */ protected function addFields() { $groupCustomOptionsName = CustomOptions::GROUP_CUSTOM_OPTIONS_NAME; $optionContainerName = CustomOptions::CONTAINER_OPTION; $commonOptionContainerName = CustomOptions::CONTAINER_COMMON_NAME; // Add fields to the option $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children'][$commonOptionContainerName]['children'] = array_replace_recursive( $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children'][$commonOptionContainerName]['children'], $this->getOptionFieldsConfig() ); // Add fields to the values $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children']['values']['children']['record']['children'] = array_replace_recursive( $this->meta[$groupCustomOptionsName]['children']['options']['children']['record']['children'] [$optionContainerName]['children']['values']['children']['record']['children'], $this->getValueFieldsConfig() ); } /** * The custom option fields config * * @return array */ protected function getOptionFieldsConfig() { $fields['is_special_offer'] = $this->getSpecialOfferFieldConfig(); return $fields; } /** * The custom option fields config * * @return array */ protected function getValueFieldsConfig() { $fields['description'] = $this->getDescriptionFieldConfig(); return $fields; } /** * Get special offer field config * * @return array */ protected function getSpecialOfferFieldConfig() { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Is Special Offer'), 'componentType' => Field::NAME, 'formElement' => Checkbox::NAME, 'dataScope' => 'is_special_offer', 'dataType' => Text::NAME, 'sortOrder' => 65, 'valueMap' => [ 'true' => '1', 'false' => '0' ], ], ], ], ]; } /** * Get description field config * * @return array */ protected function getDescriptionFieldConfig() { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Description'), 'componentType' => Field::NAME, 'formElement' => Input::NAME, 'dataType' => Text::NAME, 'dataScope' => 'description', 'sortOrder' => 41 ], ], ], ]; } }

ما يتعين علينا القيام به هنا هو إضافة تكوين ضروري بشكل متكرر لحقلي "Is Special Offer" و "الوصف" في المكان الصحيح. انتبه للطريقتين الأخيرتين اللتين تدركان بالفعل تكوين الحقول المضافة. بالنسبة لـ "هو عرض خاص ، نستخدم مربع الاختيار ، و" الوصف "- إدخال النص.

نظرًا لأن الحقول الموجودة في قاعدة البيانات موجودة في حقلي "index_product_option" و "index_product_option_type_value" ، فإن Magento 2 نفسها ستضيفها إلى النموذج بشرط أن نحدد "dataScope" بشكل صحيح.

من المهم استخدام "SortOrder" مختلف لتجنب استبدال حقول "خيارات قابلة للتخصيص" القياسية. بعد اللعب مع متغيرات "sortOrder" المختلفة ، يمكنك ترتيب الحقول بالترتيب الذي يناسبك أكثر.

بالإضافة إلى ذلك ، يسمح لك تكوين الحقول بإضافة العديد من عمليات التحقق المضمنة. على سبيل المثال ، في ملحق Advanced Product Options ، يتم تنفيذ حقل "التكلفة" على النحو التالي:

 'label' => __('Cost'), 'componentType' => Field::NAME, 'formElement' => Input::NAME, 'dataScope' => 'cost', 'dataType' => Number::NAME, 'validation' => [ 'validate-number' => true, 'validate-zero-or-greater' => true, ]

بعد ذلك ، امسح ذاكرة التخزين المؤقت:

sudo -u www-data php bin / magento cache: نظيف

الشيء الوحيد المتبقي هو فتح منتج نهتم به ، وملء الحقول اللازمة ، وحفظه. ستبدو النتيجة النهائية على هذا النحو:

يتم إحتوائه

يوفر Magento 2 آلية مريحة للغاية لتوسيع الخيارات القابلة للتخصيص مع وظائف غير محدودة عمليًا. هذا هو ما نستخدمه بشغف في امتدادنا وننصحك بالتأكيد.