Magento 2: Adding new category attributes in Magento 2

 Text attribute in category

To create new module in Magento 2 we need the following files:

app/code/Atwix/CategoryAttribute/etc/module.xml
app/code/Atwix/CategoryAttribute/registration.php
app/code/Atwix/CategoryAttribute/composer.json

<?xml version="1.0"?>
<!-- file: app/code/Atwix/CategoryAttribute/etc/module.xml -->

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Atwix_CategoryAttribute" setup_version="1.0.0" />
</config>

<?php
/* file: app/code/Atwix/CategoryAttribute/registration.php  */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Atwix_CategoryAttribute',
    __DIR__
);

{
  "name": "atwix/categoryattribute",
  "description": "N/A",
  "require": {
    "php": "~5.5.0|~5.6.0|~7.0.0"
  },
  "type": "magento2-module",
  "version": "1.0.0",
  "license": [
    "OSL-3.0",
    "AFL-3.0"
  ],
  "autoload": {
    "files": [ "registration.php" ],
    "psr-4": {
      "Atwix\\CategoryAttribute\\": ""
    }
  }
}

Note, you can find more information about module components here.
All the main changes will be added to the install script, so in order to add a new category attribute, we need to create a script file for our module:

<?php
/* file: app/code/Atwix/CategoryAttribute/Setup/InstallData.php */

namespace Atwix\CategoryAttribute\Setup;

use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Catalog\Model\Category;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;

/**
 * @codeCoverageIgnore
 */
class InstallData implements InstallDataInterface
{
    /**
     * @var EavSetupFactory
     */
    private $eavSetupFactory;

    /**
     *
     * @param EavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
    {
        /** @var EavSetup $eavSetup */
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
        $eavSetup->addAttribute(
            Category::ENTITY,
            'custom_attribute',
            [
                'type' => 'varchar',
                'label' => 'Custom attribute',
                'input' => 'text',
                'required' => false,
                'sort_order' => 100,
                'global' => ScopedAttributeInterface::SCOPE_STORE,
                'group' => 'General Information',
            ]
        );
    }
}

As you may know, in the latest Magento versions, the category form for the admin panel is created via configuration file (app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml or vendor/magento/module-catalog/view/adminhtml/ui_component/category_form.xml), so we need to create the same configuration file for our module and add our attribute to the category form. Please, see the example below:

<?xml version="1.0" encoding="UTF-8"?>
<!-- file: app/code/Atwix/CategoryAttribute/view/adminhtml/ui_component/category_form.xml -->

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="custom_content">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Custom Content</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">10</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 name="required" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

 <field name="link1">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">44</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">Link 1</item>

                    \\ ADD THIS FOR URL VALIDATION
                    <item name="validation" xsi:type="array">
                        <item name="validate-url" xsi:type="boolean">true</item>
                    </item>

 
                    <item name="required" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>

After all these changes we should enable our module, so we need to run the following commands:

./bin/magento cache:flush
./bin/magento module:enable Atwix_CategoryAttribute
./bin/magento setup:upgrade 

 Image attributes:

Github Link: https://github.com/studioraz/magento2-category-image

Drive Link: https://drive.google.com/open?id=1QiqSbFOgeKniJjA0QRfmzHgAoSk38j1T

Image with TEXT attributes

Link: https://drive.google.com/open?id=1sFyPexoJeoNDBt_zzHO8jLr7PMcnfApE 

Magento 2 Category Image Module

Purpose

Creating a new category EAV attribute is not simple as creating a new product EAV attribute.
This module comes to answer this complexity by allowing the developer to follow a few simple steps in order to create new category images.

How to add new category image ?

The module already creates one image field called Thumbnail.
If you need to additional image fields follow these steps:

1. Create an upgrade data script to create the new category image attribute.
2. Create new upload class for the new image attribute by copy-pasting the file Controller/Adminhtml/Category/Thumbnail/Upload.php. Change the class name and the following line:

  $result = $this->imageUploader->saveFileToTmpDir('{image-attribute-code}');

3. Add the new fields to the admin html category form at view/adminhtml/ui_component/category_form.xml and change: the field name, the label and the uploader Url

 <field name="{image-attribute-code}">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="source" xsi:type="string">category</item>
                    <item name="label" xsi:type="string" translate="true">{Image Label}</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">fileUploader</item>
                    <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                    <item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
                    <item name="required" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="number">41</item>
                    <item name="uploaderConfig" xsi:type="array">
                        <item name="url" xsi:type="url" path="categoryimage/category_thumbnail/{upload-class-file-name}"/>
                    </item>
                </item>
            </argument>
        </field>

4. Add the new image attribute code to the helper class Helper/Category.php line 16

public function getAdditionalImageTypes()
    {
        return array('thumbnail', '{image-attribute-code}');
    }

5. Repeat step 4 in the Controller class Controller/Adminhtml/Category/Save.php line 18

protected function getAdditionalImages() {
        return array('thumbnail', '{image-attribute-code}');
}

If everything went well you should be able to see the new field on the category screen under the Content group. You should also be able to upload, save and delete the image file successfully.

How to show the new image on frontend ?

The module comes with a block that can print any new image field on the category page frontend. Just add the following XML block under the container/block you would like the image to appear.

 <block class="SR\CategoryImage\Block\Image" name="sr.category.image" template="SR_CategoryImage::image.phtml">
    <arguments>
        <argument name="image_code" xsi:type="string">{image-attribute-code}</argument>
        <argument name="css_class" xsi:type="string">{div-css-class}</argument>
    </arguments>
</block>

The above block can print category images ONLY on category pages cause it assumes there is already stored category model in core registry. If you need to print the image on other pages use the following code snippet.

$category = 'load a category model class here'; // the decision how to load category model object is up to you.
$helper    = $this->helper('SR\CategoryImage\Helper\Category');
$imageUrl = $helper->getImageUrl($category->getData('image-attribute-code'));