Magento 2 : Add a category attribute

Another day another Magento 2 article for you guys, we had a requirement to add a category attribute to Magento 2. Unlike Magento 1 it requires a little bit more extra work to render new attribute to Magento 2 admin panel under categories section.

In Magento 2, you need to explicitly render it using UI component, even though it is extra work but gives you more control and flexibility.

Let’s crack on with our step by step guide to add a category attribute in Magento 2.

Step 1 – Create the attribute using either InstallData.php or UpgradeData.php. You need to use InstallData.php if you are creating brand new module but if you already have an existing module then you need to create UpgradeData.php.

InstallData.php – When creating category attribute with the brand new module

/**
 * Copyright © 2018 Scommerce Mage Limited. All rights reserved.
 * See LICENSE.txt for license details.
 */
namespace Scommerce\Custom\Setup;

use Magento\Framework\Setup\{
    ModuleContextInterface,
    ModuleDataSetupInterface,
    InstallDataInterface
};

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;

class InstallData implements InstallDataInterface
{
    private $eavSetupFactory;

    public function __construct(EavSetupFactory $eavSetupFactory) {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
            $eavSetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, 'custom_attribute', [
                'type'     => 'int',
                'label'    => 'Custom attribute name',
                'input'    => 'boolean',
                'source'   => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean',
                'visible'  => true,
                'default'  => '0',
                'required' => false,
                'global'   => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'group'    => 'General Information',
            ]);
    }
}

UpgradeData.php – When creating attribute with the existing module which has already been created

/**
 * Copyright © 2018 Scommerce Mage Limited. All rights reserved.
 * See LICENSE.txt for license details.
 */
namespace Scommerce\Custom\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Framework\Setup\UpgradeDataInterface;

class UpgradeData implements UpgradeDataInterface
{

    private $eavSetupFactory;

    public function __construct(EavSetupFactory $eavSetupFactory) {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        $setup->startSetup();

        if(version_compare($context->getVersion(), '1.0.1', '>')) {
            $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
            $eavSetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, 'custom_attribute', [
                'type'     => 'int',
                'label'    => 'Custom attribute name',
                'input'    => 'boolean',
                'source'   => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean',
                'visible'  => true,
                'default'  => '0',
                'required' => false,
                'global'   => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'group'    => 'General Information',
            ]);
        }

        $setup->endSetup();
    }
}

Step 2: Display the attribute in admin using UI component

<!-- Scommerce/Custom/view/adminhtml/ui_component/category_form.xml -->
<?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="display_settings">
        <field name="attribute_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">boolean</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="label" xsi:type="string" translate="true">Your Category Attribute Name</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>
    </fieldset>
</form>

That’s it, Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.