Magento 2.1 was released several days ago, and oh boy … Much has changed! I mean, just look at the release notes! If you’re already working with Magento 2 and you’ve added some custom attributes to your categories, you might have noticed that your tab with options is no longer there. Simply because all tabs aren’t there. It seems that in Magento 2.1, Magento has chosen for an accordeon-approach to render the category tree:
Now what just happened? Prior before Magento 2.1 you could simply add an attribute to your setup-script like you would have done in Magento 1 and the attribute would show up just fine, no additional work required:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/** @var EavSetup $eavSetup */ $eavSetup = $this->eavSetupFactory->create(); $eavSetup->addAttribute( \Magento\Catalog\Model\Category::ENTITY, 'custom_attribute', [ 'type' => 'varchar', 'label' => 'Custom Attribute', 'group' => 'Example', 'input' => 'test', 'global' => Attribute::SCOPE_GLOBAL, 'visible' => true, 'required' => false, 'user_defined' => false, 'sort_order' => 100 ] ); |
Now, above snippet creates a new EAV-attribute for the category entity type. With this code we created an attribute in the database. Now we just need an interface / input field in the backend so our client can set the proper value. How do we do that?
category_form.xml
With the Magento 2.1 update, the category form in the adminhtml is also created by XML-configuration, just like many other things in Magento. The file responsible for this is located in vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml . Go ahead, just take a peek at the file and you’ll see the XML Layout for all UI components on the category edit-page.
Now, we’ve created our attribute in the database, now we just need to add it to the XML tree. Because Magento merges all XML-files into one huge layout file, you can add a similar file to your own module. Create a file called category_form.xml in view/adminhtml/ui_component and put the following in it:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="UTF-8"?> <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"> <fieldset name="example"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="label" xsi:type="string" translate="true">Example</item> <item name="collapsible" xsi:type="boolean">true</item> <item name="sortOrder" xsi:type="number">100</item> </item> </argument> <field name="custom_attribute"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> <item name="sortOrder" xsi:type="number">1</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">Custom Attribute</item> </item> </argument> </field> </fieldset> </form> |
Flush the cache and there you go:
Footnote: Magento 2.1 has a small bug where the general fieldset has no sortOrder. I already created an issue for this and my best guess is this will most likely be solved in Magento 2.1.1.
Visitors give this article an average rating of 4.2 out of 5.
How would you rate this article?
★ ★ ★ ★ ★
How to add custom select box with some options?
See https://github.com/magento/magento2/issues/5438
Hello, I have it just encountered.. And for me it’ step back in convenience…
But – do you think it will be like this or it’s just some kind of bug?
I think – or even more so – I hope it will be like this. Having the layout of your category page in the admin being build according to XML layout opens up a whole new world of possibilities. You can add anything you want now, without having to hack form renderers. It’s just layout, just like anything else in Magento.
Sorry for the question but where do you place the php file.
Man, thanks heaps. Great article. Well done!!
Thank you for Great help . i have made changes in xml and item in displaying at backend . But where should we place attribute code ?
Great stuff, got it working like a charm. But what I can’t figure out, is how to call the custom field on the front-end..? Do you? http://magento.stackexchange.com/questions/131459/magento2-1-show-custom-category-attribute-on-frontend
Hello. I’ve added custom attribute category with input_renderer but it’s not working. Please help me.
Do you know if in version 2.1.1 the image field problem has been solved in the category/attributes?
I have added dropdown with yes/no but after save always “yes” selected even I select “no” before save
Adding the following to the mentioned xml file fixes the general fields error.
1
Mmm pasting html doesn’t work… Replace [ and ] with the normal html tags.
[fieldset name=”general”]
[argument name=”data” xsi:type=”array”]
[item name=”config” xsi:type=”array”]
[item name=”sortOrder” xsi:type=”number”]1[/item]
[/item]
[/argument]
[/fieldset]
We follow your instruction and we created category custom attribute but it is not visible in admin category page. But it is showing in database on server. Can you please help me to solve this issue.
I’ve created my custom attribute and it appears on my category edit screen, however it doesn’t seem to save any values? I also don’t see my custom attribute appear within my eav_attributes table? Any ideas?