Magento 2'de Özel Seçeneklere Alan Nasıl Eklenir?

Ürünlerin özelleştirilebilir seçeneklerini kullanmanın ne kadar kullanışlı olduğunu hepiniz biliyorsunuz. Özelleştirilebilir seçeneklerin standart işlevselliğini büyük ölçüde genişleten güçlü bir Gelişmiş Ürün Seçenekleri Paketimiz var. Özel alanlar, uzantının bazı işlevlerinin temelidir. Bu alanlar, onay kutusu veya metin alanı gibi belirli seçenek türlerine eklenir.

Yazıda, gerekli alanları veritabanına ve admin paneline nasıl hızlı ve kolay bir şekilde ekleyebileceğinizi anlatmak için elimden geleni yapacağım. Bir içgörü alalım.

1. Yeni bir modül oluşturun

İlk önce bir MageWorx_Option modülü oluşturalım. Örnek olarak bu modülü kullanarak hepsini halledeceğiz.

Şu dizini oluşturalım: app/code/MageWorx/Option. Bir modülü kaydetmek için bazı standart dosyalara ihtiyacımız olacak:

 <?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. Yeni alanlarımızı veritabanına ekleyin

Örneğin, ön uçtaki seçeneklerden birini bir şekilde vurgulamak istiyoruz. 'Özel Teklif' seçeneği için bir onay kutusu alanı ve seçilebilir seçenekler değerleri için bir 'Açıklama' metin alanı ekleyelim (açılır menü, onay kutusu, radyo düğmesi, çoklu seçim).
İlk olarak, ilgili tablolardaki veritabanına eklememiz gerekecek. Bunun için şu dosyayı ekleyin: 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(); } }

'Özel Teklif' alanı varsayılan olarak devre dışı bırakılacaktır.

Ardından, modülü kurabiliriz.

Bunu yapmak için konsolda aşağıdaki komutları çalıştırın:

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

3. Arka uçla çalışmak için mantık ekleyin

Bu noktada, Magento 2'nin yönetici panelindeki bir ürün sayfasında gerekli tüm özellikleri birleştirmek için kullandığı havuz değiştiriciler mekanizmasını modülümüze ekleyelim.

Bunun için aşağıdaki dosyayı ekleyelim:

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>

Şimdi, ürün sayfasındaki Özelleştirilebilir Seçenekler formuna kendi başına yeni bir şey eklemeyen MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All sınıfımızı oluşturma zamanı. Bağımlılık eklemeyi (DI) kullanarak, ürün sayfasında gerekli alanları ekleyecektir.

Aslında, Gelişmiş Ürün Seçenekleri Paketimiz, uzantıya dahil edilen 10'dan fazla paketin yardımıyla eklenen yaklaşık 40 alan ve diğer karmaşık yapılar ekler. Burada böyle karmaşık bir yapıya ihtiyacımız olmadığı için sadece bir sınıf değiştirici kullanacağız ―

MageWorx\Option\Ui\DataProvider\Ürün\Form\Değiştirici\Base.

Sıralama_düzeni = 71'i neden belirttiğimizi merak edebilirsiniz. Bunların tümü, Özelleştirilebilir Seçenekler alanlarının sort_order = 70 altında eklendiği standart Magento 2 işleviyle açıklanabilir.

Aşağıda, normal bir yineleyici tarafından sunulan MageWorx\Option\Ui\DataProvider\Product\Form\Modifier\All sınıfına bir göz atın:

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

Temel olarak, şimdi alanlarımızı Özelleştirilebilir Seçenekler formuna ekleyecek bir dosya oluşturma zamanı:

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

Burada yapmamız gereken 'Özel Teklif' ve 'Açıklama' alanları için gerekli konfigürasyonu tekrar tekrar doğru yere eklemektir. Eklenen alanların yapılandırmasını gerçekten gerçekleştiren son iki yönteme dikkat edin. 'Özel Teklif mi? onay kutusunu ve 'Açıklama' için ― metin girişi kullanıyoruz.

Veritabanındaki alanlarımız 'catalog_product_option' ve 'catalog_product_option_type_value' alanlarında yer aldığından, Magento 2, 'dataScope'u doğru bir şekilde belirtmemiz koşuluyla bunları forma ekleyecektir.

Standart Özelleştirilebilir Seçenekler alanlarını değiştirmekten kaçınmak için farklı 'sortOrder' kullanmak önemlidir. Çeşitli 'sortOrder' türevleriyle uğraştıktan sonra, alanları size en uygun sırada düzenleyebilirsiniz.

Ayrıca, alanların yapılandırması, çeşitli satır içi doğrulamalar eklemenize olanak tanır. Örneğin, Gelişmiş Ürün Seçenekleri uzantımızda 'Maliyet' alanı şu şekilde uygulanır:

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

Ardından, önbelleği temizleyin:

sudo -u www-data php bin/magento önbelleği:temiz

Geriye sadece ilgilendiğimiz bir ürünü açıp gerekli alanları doldurup kaydetmek kalıyor. Nihai sonuç şöyle görünecek:

Sarmak

Magento 2, pratikte sınırsız işlevsellik ile özelleştirilebilir seçenekleri genişletmek için son derece kullanışlı bir mekanizma sunar. Uzantımızda hevesle kullandığımız şey budur ve kesinlikle size tavsiye ederiz.