Today, we’re going to teach you guys how to add, save, and display custom fields in the product edit page of your Magento 2 store.
When running a Magento 2 store, you’ll often need to create extra custom fields for adding & displaying additional product data.
And while the good news is that Magento 2 already supports creating additional product attributes through its EAV model.
Sometimes, though, the data might require extra processing before they’re stored into custom models. Put another way, they will require custom fields with custom logic.
In this post, we will show you exactly how to add, save, and display custom fields in your Magento 2 product edit pages.
Steps to Add Custom Fields in Magento 2 Product Edit Page
Please follow the below steps to learn how to add custom fields to Magento 2 product edit page.
Step 1.
First of all, create a product_form.xml file in the MageDelight/CustomFields/view/adminhtml/ui_component/ folder and paste the following code:
<?xml version="1.0" encoding="UTF-8"?> <!-- /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ --> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="MageDelight"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string">MageDelight Custom Fields</item> <item name="collapsible" xsi:type="boolean">true</item> <item name="dataScope" xsi:type="string">data.MageDelight</item> <item name="sortOrder" xsi:type="number">10</item> </item> </argument> <field name="status"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Status</item> <item name="dataScope" xsi:type="string">status</item> <item name="sortOrder" xsi:type="number">10</item> <item name="componentType" xsi:type="string">field</item> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">select</item> <item name="options" xsi:type="array"> <item name="0" xsi:type="array"> <item name="value" xsi:type="number">0</item> <item name="label" xsi:type="string">Inactive</item> </item> <item name="1" xsi:type="array"> <item name="value" xsi:type="number">1</item> <item name="label" xsi:type="string">Active</item> </item> </item> </item> </argument> </field> <field name="textField"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Text Field</item> <item name="dataScope" xsi:type="string">textField</item> <item name="sortOrder" xsi:type="number">20</item> <item name="componentType" xsi:type="string">field</item> <item name="dataType" xsi:type="string">text</item> <item name="formElement" xsi:type="string">input</item> </item> </argument> </field> </fieldset> </form>
Step 2.
After that, check the product edit page and it will show you the new custom field as shown below:
Steps to Save Custom Fields in Magento 2 Product Edit Page
Please follow the below steps to learn how to save custom fields in the product edit page of your Magento 2 store.
Step 1.
First of all, we need to write & declare a Magento 2 observer for the catalog_product_save_before event to get product parameters.
For this, create events.xml file in the /etc/adminhtml/ folder and paste the following code:
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd"> <event name="catalog_product_save_before"> <observer name="catalog_product_save_before_observer" instance="MageDelight\CustomFields\Observer\HandleSaveProduct" /> </event> </config>
Step 2.
After that, we need to create a HandleSaveProduct class in the MageDelight\CustomFields\Observer\ folder and paste the following code:
protected $request;
/**
* HandleSaveProduct constructor.
* @param \Magento\Framework\App\RequestInterface $request
*/
public function __construct(\Magento\Framework\App\RequestInterface $request)
{
$this->request = $request;
}
Step 3.
After that, you need to use RequestInterface on the observer’s execute () function to get data from custom fields.
Now, since we’ve already defined the fieldset with scope.MageDelight, the custom field data will be found under MageDelight array:
/**
* @param Observer $observer
*/
public function execute(Observer $observer)
{
$params = $this->request->getParams();
$customFieldData = $params['MageDelight'];
//logic to process custom fields data
// ...
}
Steps to Display Custom Fields in Magento 2 Product Edit Page
Please follow the below steps to learn how to display custom fields in the product edit page of your Magento 2 store.
Step 1.
To show the custom fields on the product edit page, expand the modifyData() function from the Ui\DataProvider\Product\Form\Modifiers\Fields class and paste the following code to use LocatorInterface to get the ID current product and display custom fields:
public function modifyData(array $data)
{
$product = $this->locator->getProduct();
$productId = $product->getId();
$data = array_replace_recursive(
$data, [
$productId => [
'MageDelight' => [
'textField' => 'MageDelight Welcome',
'status'=> 1
]
]
]);
return $data;
}
Also read: How to Import Products Data in Magento 2?
Conclusion
And that’s about it!
This is the best & quickest way to add, save, and display custom fields in the product edit page of a Magento 2 store.
And if you need our professional assistance with Magento 2 Development, feel free to contact us at any time.