Magento 2.1 – How to Add a Second CMS Block in Category Adminhtml

adminhtmlcategory-attributeinstall-scriptlayoutmagento-2.1

I am trying to add a second cms block in the category backend just below the default one. I copied and altered the category_form.xml and CategorySetup.php from core into a separate module.

I think I may be close as I can create the attribute and get a select element on the page. The issue is that the select box is empty – there are no options:

I am assuming I need to copy a source model or something like that but haven't found anything helpful online. Does anyone have some insight on this? I am running Magento EE 2.1.8.

Here is my relevant code:

InstallData.php

<?php
namespace [Vendor]\[Module]\Setup;

use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface
{
    private $eavSetupFactory;

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

    /**
     * {@inheritdoc}
     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
     */

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

        /**
         * Add attributes to the eav/attribute - landing_page_secondary
        **/

        $eavSetup->addAttribute(
            \Magento\Catalog\Model\Category::ENTITY, 
            'landing_page_secondary', [
                'type' => 'int',
                'label' => 'Secondary CMS Block',
                'input' => 'select',
                'source' => 'Magento\Catalog\Model\Category\Attribute\Source\Page',
                'required' => false,
                'sort_order' => 25,
                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
                'group' => 'Display Settings',
            ]
        );

    }
}

category_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="content">
        <field name="landing_page_secondary">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="sortOrder" xsi:type="number">65</item>
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Add Secondary CMS Block</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

Additionally, in Catalog/Block/Category/View.php I found this code for outputting the cms block. It does not reference the landing_page category attribute which is another reason why I think there are a few more classes I need to override/duplicate.

/**
 * @return mixed
 */
public function getCmsBlockHtml()
{
    if (!$this->getData('cms_block_html')) {
        $html = $this->getLayout()->createBlock(
            'Magento\Cms\Block\Block'
        )->setBlockId(
            $this->getCurrentCategory()->getLandingPage()
        )->toHtml();
        $this->setData('cms_block_html', $html);
    }
    return $this->getData('cms_block_html');
}

Best Answer

in category_form.xml you're missing the options tags:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © 2013-2017 Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="content">
    <field name="landing_page_secondary">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Magento\Catalog\Model\Category\Attribute\Source\Page</item>
            <item name="config" xsi:type="array">
                <item name="sortOrder" xsi:type="number">65</item>
                <item name="dataType" xsi:type="string">string</item>
                <item name="formElement" xsi:type="string">select</item>
                <item name="label" xsi:type="string" translate="true">Add Secondary CMS Block</item>
            </item>
        </argument>
    </field>
</fieldset>
</form>

Make sure you are calling to Magento\Catalog\Model\Category\Attribute\Source\Page in your options configuration like above.

TL;DR: If you need to customise your custom attribute in product edit form Magento 2, use PHP modifier in UI components instead of input renderer.

I found the solution myself.

As we all knew that Magento 2 using UI components, the solution I'm talking about here is PHP modifier in UI components.

From Magento 2 devdocs:

PHP modifiers that are the server-side part of UI components configuration. Using modifiers is optional and might be necessary when static declaration in XML configuration files is not suitable for the tasks. For example, in cases when additional data should be loaded from database. Or the other specific example is the default product creation form, for which the modifier is a place where validations are added to display only certain fields for certain product types.

By default, Magento 2 using PHP modifiers to render EAV attribute. They never use input_renderer to do so. If you are reading here, I assume that you need few examples, so here you are :)

Ui\DataProviders\Product\Form\Modifier\CustomAttr

<?php
namespace Vendor\Module\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Api\Data\ProductAttributeInterface;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Framework\UrlInterface;
use Magento\Ui\Component\Form\Field;

/**
 * Data provider for "Custom Attribute" field of product page
 */
class CustomAttr extends AbstractModifier
{
    const SUGGEST_FILTER_URI = 'vendor_module/something/suggestCustomAttr';

    /**
     * @param LocatorInterface            $locator
     * @param UrlInterface                $urlBuilder
     * @param ArrayManager                $arrayManager
     */
    public function __construct(
        LocatorInterface $locator,
        UrlInterface $urlBuilder,
        ArrayManager $arrayManager
    ) {
        $this->locator = $locator;
        $this->urlBuilder = $urlBuilder;
        $this->arrayManager = $arrayManager;
    }

    /**
     * {@inheritdoc}
     */
    public function modifyMeta(array $meta)
    {
        $meta = $this->customiseCustomAttrField($meta);

        return $meta;
    }

    /**
     * {@inheritdoc}
     */
    public function modifyData(array $data)
    {
        return $data;
    }

    /**
     * Customise Custom Attribute field
     *
     * @param array $meta
     *
     * @return array
     */
    protected function customiseCustomAttrField(array $meta)
    {
        $fieldCode = 'custom_ids'; //your custom attribute code
        $elementPath = $this->arrayManager->findPath($fieldCode, $meta, null, 'children');
        $containerPath = $this->arrayManager->findPath(static::CONTAINER_PREFIX . $fieldCode, $meta, null, 'children');

        if (!$elementPath) {
            return $meta;
        }

        $meta = $this->arrayManager->merge(
            $containerPath,
            $meta,
            [
                'arguments' => [
                    'data' => [
                        'config' => [
                            'label'         => __('Custom Attribute'),
                            'dataScope'     => '',
                            'breakLine'     => false,
                            'formElement'   => 'container',
                            'componentType' => 'container',
                            'component'     => 'Magento_Ui/js/form/components/group',
                            'scopeLabel'    => __('[GLOBAL]'),
                        ],
                    ],
                ],
                'children'  => [
                    $fieldCode => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'component'     => 'Vendor_Module/js/components/your-select-js',
                                    'componentType' => Field::NAME,
                                    'formElement'   => 'select',
                                    'elementTmpl'   => 'ui/grid/filters/elements/ui-select',
                                    'disableLabel'  => true,
                                    'multiple'      => false,
                                    'options'       => $this->getOptions(),
                                    'filterUrl'     => $this->urlBuilder->getUrl(
                                        self::SUGGEST_FILTER_URI,
                                        ['isAjax' => 'true']
                                    ),
                                    'config'           => [
                                        'dataScope' => $fieldCode,
                                        'sortOrder' => self::FIELD_ORDER,
                                    ],
                                ],
                            ],
                        ],
                    ]
                ]
            ]
        );

        return $meta;
    }

    /**
     * Retrieve custom attribute collection
     *
     * @return array
     */
    protected function getOptions()
    {
        // Get your options
    }
}

etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
        <arguments>
            <argument name="modifiers" xsi:type="array">
                <item name="custom-attribute" xsi:type="array">
                    <item name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\Form\Modifier\CustomAttr</item>
                    <item name="sortOrder" xsi:type="number">10</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

Above is example of two important file which ping Magento 2 to render your custom attribute fields in product edit form to whatever you want. You will need to customise with javascript if you want it plays smoothly.

Best Answer

Related Solutions

Magento 2.1 – How to Add Custom Button on Custom Grid in Customer View Adminhtml

Customize Product Attribute Input Renderer in Magento 2

TL;DR: If you need to customise your custom attribute in product edit form Magento 2, use PHP modifier in UI components instead of input renderer.

And yes, welcome to Magento 2 most painful's world - UI components.

Related Topic