• 主頁
  • 文章
  • SEO
  • 如何在 Magento 2 的自定義選項中添加字段？

如何在 Magento 2 的自定義選項中添加字段？

已發表: 2019-07-16

你們都知道使用產品的可定制選項是多麼方便。 我們有一個強大的高級產品選項套件，它極大地擴展了可定制選項的標準功能。 自定義字段是擴展某些功能的基礎。 這些字段被添加到特定的選項類型，例如復選框或文本區域。

在本文中，我將盡力解釋如何快速輕鬆地將必要的字段添加到數據庫和管理面板中。 讓我們有一個見解。

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. 將我們的新字段添加到數據庫中

例如，我們希望以某種方式突出顯示前端的選項之一。 讓我們為選項“Is Special Offer”添加一個複選框字段，並為可選選項值（下拉菜單、複選框、單選按鈕、多選）添加一個文本字段“Description”。
首先，我們需要將其添加到相應表中的數據庫中。 為此，添加以下文件：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.添加邏輯以與後端一起使用

此時，讓我們將 pool-modifiers 機制添加到我們的模塊中，Magento 2 使用它來組合管理面板中產品頁面上的所有必要功能。

為此，讓我們添加以下文件：

應用程序/代碼/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 類了，它本身不會向產品頁面上的 Customizable Options 表單添加任何新內容。 使用依賴注入(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; } }

基本上，現在是創建文件的時候了，它會將我們的字段添加到 Customizable Options 表單中：

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”和“Description”字段添加必要的配置。 注意最後兩個方法實際上實現了添加字段的配置。 對於'Is Special Offer，我們使用複選框，對於'Description' - 文本輸入。

由於我們在數據庫中的字段位於“catalog_product_option”和“catalog_product_option_type_value”字段中，Magento 2 本身會將它們添加到表單中，前提是我們正確指定了“dataScope” 。

使用不同的“sortOrder”以避免替換標準的可定制選項字段很重要。 在玩弄了各種“sortOrder”變體之後，您可以按照最適合您的順序排列字段。

此外，字段配置允許您添加各種內聯驗證。 例如，在我們的高級產品選項擴展中，“成本”字段的實現方式如下：

 '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 緩存：清理

剩下的就是打開我們感興趣的產品，填寫必要的字段，然後保存。 最終結果將如下所示：

包起來

Magento 2 提供了一種非常方便的機制，可以擴展具有幾乎無限功能的可定制選項。 這就是我們在擴展程序中急切使用的，當然也向您推薦。

使用 Mageworx 預訂現場演示