Kullanıcı Arabirimi Formuna Alanlarla Alan Kümesi Eklemenin Kolay Yolu
Yayınlanan: 2016-08-23Bu yazıda, ürün düzenleme UI-formunda alanlar içeren bir alan seti ekleyecek basit bir modül oluşturacağız. Ayrıca, ürün kaydetme sırasında bu verilere müdahale etmek için bir gözlemci oluşturacağız.
İlk olarak, bir Vendor_Product modülü oluşturmamız gerekiyor:
1. Bir dizin uygulaması/kodu/Satıcı/Ürün oluşturun
2. Aşağıdaki içeriğe sahip bir uygulama/kod/Vendor/Product/registration.php kayıt dosyası oluşturun:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Satıcı_Ürün',
__DIR__
);
?>Bir besteci dosyası oluşturun (modülü aktarmayı planlıyorsanız) app/code/Vendor/Module/composer.json :
{
"isim": "satıcı/modül-ürün",
"açıklama": "Yok",
"type": "magento2-module",
"sürüm": "1.0.0",
"lisans": [
"OSL-3.0",
"AFL-3.0"
],
"otomatik yükleme": {
"Dosyalar": [
"kayıt.php"
],
"psr-4": {
"Satıcı\\Ürün\\": ""
}
}
}Şimdi, modülün ana XML dosyası app/code/Vendor/Product/etc/module.xml dosyasını Magento_Catalog modülüne bağımlı olarak oluşturun, çünkü modal penceremiz formuna eklenecektir:
<?xml version="1.0"?>
<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Satıcı_Ürün" setup_version="1.0.0">
<sıra>
<module name="Magento_Catalog"/>
</sıra>
</modül>
</config>Aşağıdakileri girerek modülü etkinleştirin: kök Magento dizininde bin/magento module:enable Vendor_Product ve bin/magento setup:upgrade.
Ardından, modülün içeriğini ekleyin: UI formu meta verileri ve eklenmesi için sanal tür.
Bir uygulama/kod/Satıcı/Ürün/etc/adminhtml/di.xml dosyası oluşturun. İçine bir değiştirici yerleştireceğiz:
<?xml version="1.0"?>
<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Havuz">
<argümanlar>
<argument name="değiştiriciler" xsi:type="dizi">
<item name="özel alan kümesi" xsi:type="dizi">
<item name="class" xsi:type="string">Vendor\Product\Ui\DataProvider\Product\Form\Modifier\CustomFieldset</item>
<item name="sortOrder" xsi:type="number">10</item>
</ite>
</argüman>
</argümanlar>
</virtualType>
</config>Değiştirici, veri eklemeden ve öğeler ve UI-form bileşenleri ile bazı manipülasyonlardan sorumludur. Değiştiricinin arayüzünden gelen 2 ana yöntem vardır (her zaman bulunmaları gerekir):
<?php
/**
* Telif hakkı 2016 Magento. Tüm hakları Saklıdır.
* Lisans ayrıntıları için COPYING.txt'ye bakın.
*/
ad alanı Magento\Ui\DataProvider\Modifier;
/**
* Sınıf Değiştirici Arayüzü
*/
arayüz DeğiştiriciArayüz
{
/**
* @param dizisi $veri
* @dönüş dizisi
*/
public function changeData(dizi $veri);
/**
* @param dizisi $meta
* @dönüş dizisi
*/
public function changeMeta(dizi $meta);
}
?>Bu örnekte changeMeta yöntemini kullanacağız. ModifiyeData yöntemi bir sonraki makalede açıklanacaktır.
Şimdi, ürün düzenleme sayfası için özel bir alan seti ile değiştirici dosyayı (app/code/Vendor/Product/Ui/DataProvider/Product/Form/Modifier/CustomFieldset.php) oluşturun ve şu alanları doldurun:
<?php
ad alanı Satıcı\Ürün\Ui\DataSağlayıcı\Ürün\Form\Değiştirici;
Magento\Catalog\Model\Locator\LocatorInterface'i kullanın;
Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier'ı kullanın;
Magento\Framework\Stdlib\ArrayManager'ı kullanın;
Magento\Framework\UrlInterface'i kullanın;
Magento\Ui\Component\Container'ı kullanın;
Magento\Ui\Component\Form\Fieldset'i kullanın;
Magento\Ui\Component\Form\Element\DataType\Number kullanın;
Magento\Ui\Component\Form\Element\DataType\Text kullanın;
Magento\Ui\Component\Form\Element\Input kullanın;
Magento\Ui\Component\Form\Element\Select'i kullanın;
Magento\Ui\Component\Form\Element\MultiSelect'i kullanın;
Magento\Ui\Component\Form\Field'ı kullanın;
class CustomFieldset, AbstractModifier'ı genişletir
{
// Bileşen dizinleri
const CUSTOM_FIELDSET_INDEX = 'custom_fieldset';
const CUSTOM_FIELDSET_CONTENT = 'custom_fieldset_content';
const CONTAINER_HEADER_NAME = 'custom_fieldset_content_header';
// Alan adları
const FIELD_NAME_TEXT = 'example_text_field';
const FIELD_NAME_SELECT = 'example_select_field';
const FIELD_NAME_MULTISELECT = 'example_multiselect_field';
/**
* @var \Magento\Catalog\Model\Locator\LocatorInterface
*/
korumalı $bulucu;
/**
* @var ArrayManager
*/
korumalı $arrayManager;
/**
* @var UrlInterface
*/
korumalı $urlBuilder;
/**
* @var dizisi
*/
korumalı $meta = [];
/**
* @param LocatorInterface $lokatör
* @param ArrayManager $arrayManager
* @param UrlInterface $urlBuilder
*/
genel işlev __construct(
KonumlandırıcıArayüz $bulucu,
ArrayManager $diziManager,
UrlInterface $urlBuilder
) {
$bu->yer bulucu = $yer bulucu;
$this->arrayManager = $arrayManager;
$this->urlBuilder = $urlBuilder;
}
/**
* Veri değiştirici, örneğimizde hiçbir şey yapmaz.
*
* @param dizisi $veri
* @dönüş dizisi
*/
public function changeData(dizi $veri)
{
$veri döndür;
}
/**
* Meta-veri değiştirici: bizim alan setimizi ekler
*
* @param dizisi $meta
* @dönüş dizisi
*/
public function changeMeta(dizi $meta)
{
$bu->meta = $meta;
$this->addCustomFieldset();
$this->meta döndür;
}
/**
* Mevcut meta-verilerimizi meta-verilerimizle birleştirin (üzerine yazmayın!)
*
* @dönüş geçersiz
*/
korumalı işlev addCustomFieldset()
{
$bu->meta = array_merge_recursive(
$bu->meta,
[
static::CUSTOM_FIELDSET_INDEX => $this->getFieldsetConfig(),
]
);
}
/**
* Alan seti yapılandırmamızı bildirin
*
* @dönüş dizisi
*/
korumalı işlev getFieldsetConfig()
{
dönüş [
'argümanlar' => [
'veri' => [
'yapılandırma' => [
'etiket' => __('Alan Kümesi Başlığı'),
'componentType' => Fieldset::NAME,
'dataScope' => static::DATA_SCOPE_PRODUCT, // verileri ürün verisine kaydedin
'sağlayıcı' => statik::DATA_SCOPE_PRODUCT . '_veri kaynağı',
'ns' => statik::FORM_NAME,
'daraltılabilir' => doğru,
'sıralama' => 10,
'açıldı' => doğru,
],
],
],
'çocuklar' => [
static::CONTAINER_HEADER_NAME => $this->getHeaderContainerConfig(10),
static::FIELD_NAME_TEXT => $this->getTextFieldConfig(20),
static::FIELD_NAME_SELECT => $this->getSelectFieldConfig(30),
static::FIELD_NAME_MULTISELECT => $this->getMultiSelectFieldConfig(40),
],
];
}
/**
* Başlık kapsayıcı için yapılandırma alın
*
* @param int $sortOrder
* @dönüş dizisi
*/
korumalı işlev getHeaderContainerConfig($sortOrder)
{
dönüş [
'argümanlar' => [
'veri' => [
'yapılandırma' => [
'etiket' => boş,
'formElement' => Kapsayıcı::NAME,
'componentType' => Kapsayıcı::NAME,
'şablon' => 'ui/form/bileşenler/karmaşık',
'sortOrder' => $sortOrder,
'content' => __('Buraya istediğiniz metni yazabilirsiniz'),
],
],
],
'çocuklar' => [],
];
}
/**
* Örnek metin alanı yapılandırması
*
* @param $sortOrder
* @dönüş dizisi
*/
korumalı işlev getTextFieldConfig($sortOrder)
{
dönüş [
'argümanlar' => [
'veri' => [
'yapılandırma' => [
'etiket' => __('Örnek Metin Alanı'),
'formElement' => Alan::NAME,
'componentType' => Giriş::NAME,
'dataScope' => statik::FIELD_NAME_TEXT,
'dataType' => Sayı::NAME,
'sortOrder' => $sortOrder,
],
],
],
];
}
/**
* Örnek seçme alanı yapılandırması
*
* @param $sortOrder
* @dönüş dizisi
*/
korumalı işlev getSelectFieldConfig($sortOrder)
{
dönüş [
'argümanlar' => [
'veri' => [
'yapılandırma' => [
'etiket' => __('Seçenek Seçimi'),
'componentType' => Alan::NAME,
'formElement' => Seç::NAME,
'dataScope' => statik::FIELD_NAME_SELECT,
'dataType' => Metin::NAME,
'sortOrder' => $sortOrder,
'seçenekler' => $this->_getOptions(),
'görünür' => doğru,
'devre dışı' => yanlış,
],
],
],
];
}
/**
* Örnek çoklu seçim alan yapılandırması
*
* @param $sortOrder
* @dönüş dizisi
*/
korumalı işlev getMultiSelectFieldConfig($sortOrder)
{
dönüş [
'argümanlar' => [
'veri' => [
'yapılandırma' => [
'etiket' => __('Seçenekler Çoklu Seçim'),
'componentType' => Alan::NAME,
'formElement' => MultiSelect::NAME,
'dataScope' => statik::FIELD_NAME_MULTISELECT,
'dataType' => Metin::NAME,
'sortOrder' => $sortOrder,
'seçenekler' => $this->_getOptions(),
'görünür' => doğru,
'devre dışı' => yanlış,
],
],
],
];
}
/**
* Seçenek dizisi olarak örnek seçenekleri alın:
* [
* etiket => dize,
* değer => seçenek_kimliği
* ]
*
* @dönüş dizisi
*/
korumalı işlev _getOptions()
{
$seçenekler = [
1 => [
'etiket' => __('Seçenek 1'),
'değer' => 1
],
2 => [
'etiket' => __('Seçenek 2'),
'değer' => 2
],
3 => [
'etiket' => __('Seçenek 3'),
'değer' => 3
],
];
$seçeneklerini döndür;
}
}
?>
Bu örnekte, mevcut UI-form meta verilerini alıp yeni verilerimizle birleştirmemiz (yeniden yazmamamız gerekiyor!)
<?php
/**
* Mevcut meta-verilerimizi meta-verilerimizle birleştirin (üzerine yazmayın!)
*
* @dönüş geçersiz
*/
korumalı işlev addCustomFieldset()
{
$bu->meta = array_merge_recursive(
$bu->meta,
[
static::CUSTOM_FIELDSET_INDEX => $this->getFieldsetConfig(),
]
);
}
?>Bittiğinde, yeni alan kümesini getFieldsetConfig yöntemine ekleyin:
<?php
/**
* Alan seti yapılandırmamızı bildirin
*
* @dönüş dizisi
*/
korumalı işlev getFieldsetConfig()
{
dönüş [
'argümanlar' => [
'veri' => [
'yapılandırma' => [
'etiket' => __('Alan Kümesi Başlığı'),
'componentType' => Fieldset::NAME,
'dataScope' => static::DATA_SCOPE_PRODUCT, // verileri ürün verisine kaydedin
'sağlayıcı' => statik::DATA_SCOPE_PRODUCT . '_veri kaynağı',
'ns' => statik::FORM_NAME,
'daraltılabilir' => doğru,
'sıralama' => 10,
'açıldı' => doğru,
],
],
],
'çocuklar' => [
static::CONTAINER_HEADER_NAME => $this->getHeaderContainerConfig(10),
static::FIELD_NAME_TEXT => $this->getTextFieldConfig(20),
static::FIELD_NAME_SELECT => $this->getSelectFieldConfig(30),
static::FIELD_NAME_MULTISELECT => $this->getMultiSelectFieldConfig(40),
],
];
}
?>Soyut ürün UI-form değiştiricisinden devralırız ve ad alanını ve verilerini sağlayıcı olarak kullanırız: 'provider' => static::DATA_SCOPE_PRODUCT . '_data_source' (burada DATA_SCOPE_PRODUCT, 'data.product' satırıdır).
componentType seçeneği, ana seçeneklerden biridir ve bileşen türünden sorumludur. Katlanabilir seçenek, alan setimizin çökmesinden ve genişlemesinden sorumludur. Ve açık seçeneği, form çizimi sırasında alan kümesinin varsayılan olarak açık olup olmayacağını tanımlar.
Ardından, getHeaderContainerConfig yönteminde alan kümemize bir başlık ve 3 alan örneği ekliyoruz: metin, seç ve çoklu seçim. Ancak, ürünümüz ve formumuz, biz onu changeData yöntemine ekleyene kadar veri almayacak. Ancak kaydetme sırasında verileri iletme ve engelleme yeteneğine sahibiz.
Bakalım formun nasıl göründüğüne bakalım:
Veri kaydetme, ana yürütme yönteminde ürün denetleyici dosyası satıcısı/magento/module-catalog/Controller/Adminhtml/Product/Save.php içinde gerçekleşir. Her şey doğru şekilde yapıldıysa, verilerimiz bu yöntemin giriş verilerinde doğru şekilde görüntülenecektir:
Ürününüz en başından bu özelliklere sahip değilse, bunları manuel olarak kaydetmeniz gerektiğini unutmayın. Bunu gözlemcide yapabilirsiniz.
İlk olarak, bunu app/code/Vendor/Product/etc/adminhtml/events.xml dosyasında bildirin (form ön uçta bulunmadığından adminhtml kapsamını kullanıyoruz):
<?xml version="1.0"?>
<config xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
<event name="catalog_product_save_after">
<observer name="save_example_data" instance="Vendor\Product\Observer\ProductSaveAfter" />
</event>
</config>Ardından, örnek özniteliğinde işaret ettiğimiz gözlemcinin sınıfını oluşturun – app/code/Vendor/Product/Observer/ProductSaveAfter.php:
<?php
ad alanı Satıcı\Ürün\Gözlemci;
\Magento\Framework\Event\ObserverInterface kullanın;
EventObserver olarak \Magento\Framework\Event\Observer'ı kullanın;
Vendor\Product\Ui\DataProvider\Product\Form\Modifier\CustomFieldset'i kullanın;
class ProductSaveAfter, ObserverInterface'i uygular
{
/**
* @param EventObserver $gözlemci
*/
genel işlev yürütme (\Magento\Framework\Event\Observer $gözlemci)
{
/** @var \Magento\Catalog\Model\Ürün $ürün */
$ürün = $gözlemci->getEvent()->getProduct();
if (!$ürün) {
dönüş;
}
$exampleTextField = $product->getData(CustomFieldset::FIELD_NAME_TEXT);
$exampleSelectField = $product->getData(CustomFieldset::FIELD_NAME_SELECT);
$exampleMultiSelectField = $product->getData(CustomFieldset::FIELD_NAME_MULTISELECT);
// Verileri burada işleyin
}
}
?>Gözlemcideki veriler:
Artık gözlemciden kendi modelinizi çağırabilir ve verileri içine kaydedebilir veya istediğiniz gibi değiştirebilirsiniz.
Dikkat olmak! Modelinizin kaydedilmesi ürün tasarrufuna bağlıysa yinelemeye neden olabilir.