Add custom fileds for Category in admin panel magento 2

Question

I want to add One custom section in my Magento admin panel for categories. like https://prnt.sc/rf34k5.

And in that section, I want to add 3 text fields like https://prnt.sc/rf34nz. How can I add custom fields for categories in Magento 2

Answer 1

Two steps to create the category attribute,

1. Add an InstallData.php in the below path

app/code/vendor/ModuleName/Setup/InstallData.php

then add the below code to it

<?php
namespace Vendor\ModuleName\Setup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;
class InstallData implements InstallDataInterface
{
 protected $eav_setup;
 protected $connection;
 public function __construct(EavSetupFactory $eavSetupFactory,
 \Magento\Framework\App\ResourceConnection $connection,
 \Magento\Eav\Model\Config $eavConfig
 ) {
 $this->eav_setup_factory = $eavSetupFactory;
 $this->connection = $connection->getConnection();
 $this->eav_config = $eavConfig;
 }
 public function install(
 ModuleDataSetupInterface $setup,
 ModuleContextInterface $context
 ) {
 $setup->startSetup();
 //create Category Attributes
 $this->createCategoryAttributes($setup);
 $setup->endSetup();
 }
 protected function createCategoryAttributes($setup)
 {
 $eav_setup = $this->eav_setup_factory->create(['setup' => $setup]);
 $eav_setup->addAttribute(
 \Magento\Catalog\Model\Category::ENTITY,
 'attribute_code',
 [
 'type' => 'text',
 'label' => 'Category Attribute Name',
 'input' => 'textarea',
 'sort_order' => 420,
 'source' => '',
 'global' => ScopedAttributeInterface::SCOPE_STORE,
 'visible' => true,
 'required' => false,
 'user_defined' => false,
 'default' => null,
 'group' => 'Custom Attributes',
 'backend' => ''
 ]
 );
 }
}

2. Add category_form.xml in the below path to make it visible in admin

app/code/Vendor/ModuleName/view/adminhtml/ui_component/category_form.xml

then add the below code to it

<?xml version="1.0" ?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <fieldset name="custom_attribute">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string">Custom Attributes</item>
 <item name="collapsible" xsi:type="boolean">true</item>
 <item name="sortOrder" xsi:type="number">100</item>
 </item>
 </argument>
 <field name="attribute_code">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="required" xsi:type="boolean">false</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">false</item>
 </item>
 <item name="sortOrder" xsi:type="number">40</item>
 <item name="dataType" xsi:type="string">string</item>
 <item name="formElement" xsi:type="string">textarea</item>
 <item name="label" translate="true" xsi:type="string">Category Attribute Name</item>
 </item>
 </argument>
 </field>
 </fieldset>
</form>

After doing this run the below command

php bin/magento setup:upgrade
php bin/magento cache:flush

Hope this helps.

• Nafsss: Thanx. I followed this. One thing i wanna ask. Now i installed my module and want to make some changes again. so i need to increase the version in category_form.xml???
• Vikas kalal: Yes you need to increase version in your module.xml if you have changed in UpgradeSchema or add some new column.Please accept this ans if it worked
• Nafsss: i did changes in InstallData.. What is upgradeData...DO i need to change the file name also?
• Vikas kalal: are you trying to add new column
• Nafsss: Yes, add one attribute in this $eavSetup->addAttribute

Answer 2

For that you have to first override view/adminhtml/ui_component/category_form.xml in your custom module.

Inside your category_form.xml you have to add your code.

You can create section using below code (<fieldset></fieldset>).

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <fieldset name="custom_setting">
 <settings>
 <collapsible>true</collapsible>
 <label translate="true">Custom Setting</label>
 </settings> 
 </fieldset>
</form>

And you can create field using below code (you have to add this code inside )

<field name="category_thumbnail">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sortOrder" xsi:type="number">40</item>
 <item name="dataType" xsi:type="string">varchar</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="label" xsi:type="string" translate="true">Category Icon</item>
 <item name="default" xsi:type="number">0</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 </argument>
 </field>

I hope it helps!

Answer 3

Add a UpgradeData.php in the below path

/app/code/<Vendor_name>/<Module_name>/Setup/UpgradeData.php

Add below code of category attributes

<?php
/**
* Copyright © 2020 Devi mage. All rights reserved.
*/
namespace Devi\Mage\Setup;
use Magento\Framework\Module\Setup\Migration;
use Magento\Framework\Setup\UpgradeDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Catalog\Setup\CategorySetupFactory;
/**
 * @codeCoverageIgnore
 */
class UpgradeData implements UpgradeDataInterface
{
 /**
 * Category setup factory
 *
 * @var CategorySetupFactory
 */
 private $categorySetupFactory;
 /**
 * Init
 *
 * @param CategorySetupFactory $categorySetupFactory
 */
 public function __construct(CategorySetupFactory $categorySetupFactory)
 {
 $this->categorySetupFactory = $categorySetupFactory;
 }
 /**
 * {@inheritdoc}
 * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
 */
 public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
 {
 $installer = $setup;
 $installer->startSetup();
 if (version_compare($context->getVersion(), '2.1.0') < 0) {
 // set new resource model paths
 /** @var \Magento\Catalog\Setup\CategorySetup $categorySetup */
 $categorySetup = $this->categorySetupFactory->create(['setup' => $setup]);
 $entityTypeId = $categorySetup->getEntityTypeId(\Magento\Catalog\Model\Category::ENTITY);
 $attributeSetId = $categorySetup->getDefaultAttributeSetId($entityTypeId);
 $menu_attributes = [
 'sw_ocat_category_font_icon' => [
 'type' => 'varchar',
 'label' => 'Font Icon Class',
 'input' => 'text',
 'required' => false,
 'sort_order' => 30,
 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
 'group' => 'Onepage Category',
 'note' => 'If this category has no "Icon Image", font icon will be shown. example to input: icon-dollar'
 ],
 'sw_ocat_category_hoverbgcolor' => [
 'type' => 'varchar',
 'label' => 'Category Hover Background Color',
 'input' => 'text',
 'required' => false,
 'sort_order' => 40,
 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
 'group' => 'Onepage Category'
 ],
 'sw_ocat_additional_content' => [
 'type' => 'text',
 'label' => 'Additional Content',
 'input' => 'textarea',
 'required' => false,
 'sort_order' => 50,
 'wysiwyg_enabled' => true,
 'is_html_allowed_on_front' => true,
 'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
 'group' => 'Onepage Category'
 ]
 ];
 foreach($menu_attributes as $item => $data) {
 $categorySetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, $item, $data);
 }
 $idg = $categorySetup->getAttributeGroupId($entityTypeId, $attributeSetId, 'Onepage Category');
 foreach($menu_attributes as $item => $data) {
 $categorySetup->addAttributeToGroup(
 $entityTypeId,
 $attributeSetId,
 $idg,
 $item,
 $data['sort_order']
 );
 }
 }
 $setup->endSetup();
 }
}

Then add category form using UI Component below path

/app/code/<Vendor_name>/<Module_name>/view/adminhtml/ui_component/category_form.xml
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2020 Devi Mage.
 *
 */
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <fieldset name="onepage_category">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Onepage Category</item>
 <item name="collapsible" xsi:type="boolean">true</item>
 <item name="sortOrder" xsi:type="number">200</item>
 </item>
 </argument>
 <field name="sw_ocat_hide_this_item">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sortOrder" xsi:type="number">10</item>
 <item name="dataType" xsi:type="string">boolean</item>
 <item name="formElement" xsi:type="string">checkbox</item>
 <item name="label" xsi:type="string" translate="true">Hide This Category</item>
 <item name="prefer" xsi:type="string">toggle</item>
 <item name="valueMap" xsi:type="array">
 <item name="true" xsi:type="string">1</item>
 <item name="false" xsi:type="string">0</item>
 </item>
 <item name="default" xsi:type="number">0</item>
 </item>
 </argument>
 </field>
 <field name="sw_ocat_category_font_icon">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sortOrder" xsi:type="number">30</item>
 <item name="dataType" xsi:type="string">string</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="label" xsi:type="string" translate="true">Font Icon Class</item>
 </item>
 </argument>
 </field>
 <field name="sw_ocat_category_hoverbgcolor">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sortOrder" xsi:type="number">40</item>
 <item name="dataType" xsi:type="string">string</item>
 <item name="formElement" xsi:type="string">input</item>
 <item name="label" xsi:type="string" translate="true">Category Hover Background Color</item>
 </item>
 </argument>
 </field>
 <field name="sw_ocat_additional_content">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="class" xsi:type="string">Magento\Catalog\Ui\Component\Category\Form\Element\Wysiwyg</item>
 <item name="formElement" xsi:type="string">wysiwyg</item>
 <item name="label" xsi:type="string" translate="true">Additional Content</item>
 <item name="template" xsi:type="string">ui/form/field</item>
 <item name="sortOrder" xsi:type="number">50</item>
 <item name="rows" xsi:type="number">3</item>
 </item>
 </argument>
 </field>
 </fieldset>
</form>

Hope this helps you.