How to Add a Category Attribute with WYSIWYG editor in Magento 2

category_attribute_magento_2

Magento 2 category entity provides a number of attributes by default. Still, we need a custom attribute sometimes to improve the functionality of category. Today we will see How to add a category attribute with WYSIWYG editor in Magento 2.

To add a custom attribute into the system first we need to create either an Install or an Upgrade Data script.

Create InstallData file

Create InstallData.php file under app/code/Vendor/Module/Setup directory and add below code.

<?php
namespace Codextblog\Categoryattr\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;

class InstallData implements InstallDataInterface
{

    private $eavSetupFactory;

    /**
     * Constructor
     *
     * @param \Magento\Eav\Setup\EavSetupFactory $eavSetupFactory
     */
    public function __construct(EavSetupFactory $eavSetupFactory)
    {
        $this->eavSetupFactory = $eavSetupFactory;
    }

    /**
     * {@inheritdoc}
     */
    public function install(
        ModuleDataSetupInterface $setup,
        ModuleContextInterface $context
    ) {
        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY,
            'promotion_text',
            [
                'type' => 'text',
                'label' => 'Promotion Text',
                'input' => 'textarea',
                'sort_order' => 333,
                'source' => '',
                'global' => 1,
                'visible' => true,
                'required' => false,
                'user_defined' => false,
                'default' => null,
                'wysiwyg_enabled' => true,
                'is_html_allowed_on_front' => true,
                'group' => 'General Information',
                'backend' => ''
            ]
        );
    }
}

In this file, we have added a promotion_text attribute into the system. Once you run this script it will create an attribute in the eav_attribute table.

Now we have to create ui_component of this attribute, which tells Magento to add this attribute into category form.

Create category_form ui component file

Create category_form.xml file under app/code/Vendor/Module/view/adminhtml/ui_component directory with below code.

<?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="general">
		<field name="promotion_text">
			<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">Promotion Text</item>
					<item name="wysiwygConfigData" xsi:type="array">
						<item name="settings" xsi:type="array">
							<item name="theme_advanced_buttons1" xsi:type="string">bold,italic,|,justifyleft,justifycenter,justifyright,|,fontselect,fontsizeselect,|,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,|,code</item>
							<item name="theme_advanced_buttons2" xsi:type="boolean">false</item>
							<item name="theme_advanced_buttons3" xsi:type="boolean">false</item>
							<item name="theme_advanced_buttons4" xsi:type="boolean">false</item>
							<item name="theme_advanced_statusbar_location" xsi:type="boolean">false</item>
						</item>
						<item name="files_browser_window_url" xsi:type="boolean">false</item>
						<item name="height" xsi:type="string">100px</item>
						<item name="toggle_button" xsi:type="boolean">false</item>
						<item name="add_variables" xsi:type="boolean">false</item>
						<item name="add_widgets" xsi:type="boolean">false</item>
						<item name="add_images" xsi:type="boolean">false</item>
					</item>
					<item name="template" xsi:type="string">ui/form/field</item>
					<item name="source" xsi:type="string">category</item>
					<item name="wysiwyg" xsi:type="boolean">true</item>
					<item name="dataScope" xsi:type="string">promotion_text</item>
					<item name="sortOrder" xsi:type="number">33</item>
					<item name="rows" xsi:type="number">8</item>
				</item>
			</argument>
		</field>
	</fieldset>
</form>

After adding this code you should see the category attribute with WYSIWYG editor in category edit form.

Note: To display WYSIWYG editor, Please make sure WYSIWYG Options are enable from Magento 2 admin > Store > Configuration > General > Content Management section.

Hope this post helps you.To receive update about this type of code snippet, please like us on Facebook and follow us on Twitter.

Leave a Comment

(0 Comments)

All the comments are goes into moderation before approval. Irrelevant comment with links directly goes to spam. Your email address will not be published.

Was this post helpful? Please support Us!

Follow us on twitter or Like us on facebook.

 


Subscribe Here
SUBSCRIBE NOW

Want to Increase your Magento 2 Development Knowledge?

If Yes! Then Subscribe to our newsletter and receive step-by-step tutorials, code snippets once a week!!
close-link

To Avoid Spam Downloads, We Want Your Email

We will send you download link right
away. Please submit form below.
SEND ME DOWNLOAD LINK
Close