Bagaimana Cara Menambahkan Bidang ke Opsi Kustom di Magento 2?

Anda semua tahu betapa nyamannya menggunakan opsi produk yang dapat disesuaikan. Kami memiliki Suite Opsi Produk Lanjutan yang kuat yang secara drastis memperluas fungsionalitas standar dari opsi yang dapat disesuaikan. Bidang khusus adalah dasar dari beberapa fungsi ekstensi. Bidang ini ditambahkan ke jenis opsi tertentu, seperti kotak centang atau area teks.

Dalam artikel ini, saya akan melakukan yang terbaik untuk menjelaskan bagaimana Anda dapat menambahkan bidang yang diperlukan ke database dan panel admin dengan cepat dan mudah. Mari kita memiliki wawasan.

1. Buat modul baru

Pertama, mari buat modul MageWorx_Option. Kami akan menyelesaikan semuanya menggunakan modul ini sebagai contoh.

Mari buat direktori berikut: app/code/MageWorx/Option. Untuk mendaftarkan modul, kita memerlukan beberapa file standar:

 <?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. Tambahkan bidang baru kami ke database

Misalnya, kami ingin menyorot salah satu opsi di front-end. Mari tambahkan bidang kotak centang untuk opsi 'Penawaran Khusus' dan bidang teks 'Deskripsi' untuk nilai opsi yang dapat dipilih (dropdown, kotak centang, tombol radio, multi-pilih).
Pertama, kita perlu menambahkannya ke database di tabel yang sesuai. Untuk itu, tambahkan file berikut: 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(); } }

Bidang 'Apakah Penawaran Khusus' akan dinonaktifkan secara default.

Selanjutnya, kita dapat menginstal modul.

Untuk melakukannya, jalankan perintah berikut di konsol:

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

3. Tambahkan logika untuk bekerja dengan backend

Pada titik ini, mari tambahkan mekanisme pool-modifier ke modul kita, yang digunakan Magento 2 untuk menggabungkan semua fitur yang diperlukan pada halaman produk di panel admin.

Untuk itu, mari tambahkan file berikut:

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>

Sekarang, saatnya untuk membuat kelas MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All kami, yang tidak menambahkan sesuatu yang baru dengan sendirinya ke formulir Opsi yang Dapat Disesuaikan di halaman produk. Menggunakan injeksi ketergantungan (DI), itu akan menambahkan bidang yang diperlukan pada halaman produk.

Faktanya, Suite Opsi Produk Lanjutan kami menambahkan sekitar 40 bidang dan struktur kompleks lainnya, yang ditambahkan dengan bantuan lebih dari 10 paket yang disertakan dalam ekstensi. Karena kita tidak memerlukan struktur yang rumit di sini, kita hanya akan menggunakan satu class-modificator

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

Anda mungkin bertanya-tanya, mengapa kami menentukan sort_order = 71 berikut. Ini semua dapat dijelaskan oleh fungsionalitas standar Magento 2, di mana bidang untuk Opsi yang Dapat Disesuaikan ditambahkan di bawah sort_order = 70.

Di bawah ini, lihat kelas MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All, yang disajikan oleh iterator biasa:

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; } }

Pada dasarnya, sekarang saatnya untuk membuat file, yang akan menambahkan bidang kita ke formulir Opsi yang Dapat Disesuaikan:

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 ], ], ], ]; } }

Apa yang perlu kita lakukan di sini adalah menambahkan konfigurasi yang diperlukan secara rekursif untuk bidang 'Is Special Offer' dan 'Description' di tempat yang tepat. Perhatikan dua metode terakhir yang benar-benar mewujudkan konfigurasi bidang yang ditambahkan. Untuk 'Apakah Penawaran Khusus kami menggunakan kotak centang, dan untuk 'Deskripsi' masukan teks.

Karena bidang kami dalam database terletak di bidang 'catalog_product_option' dan 'catalog_product_option_type_value', Magento 2 sendiri akan menambahkannya ke formulir asalkan kami menentukan 'dataScope' dengan benar.

Penting untuk menggunakan 'sortOrder' yang berbeda untuk menghindari penggantian bidang Opsi yang Dapat Disesuaikan standar. Setelah bermain-main dengan berbagai varian 'sortOrder', Anda dapat mengatur bidang dalam urutan yang paling cocok untuk Anda.

Selain itu, konfigurasi bidang memungkinkan Anda untuk menambahkan berbagai validasi sebaris. Misalnya, dalam ekstensi Opsi Produk Lanjutan kami, bidang 'Biaya' diterapkan sebagai berikut:

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

Kemudian, bersihkan cache:

sudo -u www-data php bin/magento cache:clean

Satu-satunya yang tersisa adalah membuka produk yang kita minati, mengisi bidang yang diperlukan, dan menyimpannya. Hasil akhir akan terlihat seperti ini:

Bungkus

Magento 2 menawarkan mekanisme yang sangat nyaman untuk memperluas opsi yang dapat disesuaikan dengan fungsionalitas yang praktis tidak terbatas. Itulah yang kami gunakan dengan penuh semangat dalam ekstensi kami dan tentu saja merekomendasikan Anda.