1

I'm creating an extension and I'm wondering how to add a new menu item to a product view next to "Content", "Configuration", "Product Reviews", "Images and Vidoes" etc. enter image description here

I've been studying the code in /vendor/magento/module-catalog/view/adminhtml/layout/catalog_product_form.xml to create a catalog_product_form.xml in my module's view/adminhtml/layout directory, but the new menu item never shows.

I've added new columns to the admin product grid, and new configuration items via the system.xml file, so I think I understand how the DOM merging should work, but what am I don't wrong with this product menu item? Here's the code in my module's catalog_product_form.xml:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <referenceContainer name="product_form">
        <block name="gallery" class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery">
            <arguments>
                <argument name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">My experiment</item>
                    <item name="collapsible" xsi:type="boolean">true</item>
                    <item name="opened" xsi:type="boolean">false</item>
                    <item name="sortOrder" xsi:type="string">22</item>
                    <item name="canShow" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">fieldset</item>
                </argument>
            </arguments>
            <block class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="parentComponent" xsi:type="string">product_form.product_form.block_gallery.block_gallery</item>
                    </argument>
                </arguments>
                <block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video" template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
            </block>
        </block>
    </referenceContainer>
</layout>
4
  • this might help you. magento.stackexchange.com/questions/103642/… Mar 22, 2017 at 21:33
  • Thanks Abhishek, that post does work. However, I inserted a select element with some options, and when I save the product, it doesn't save my selection. Is there another way to add a fieldset to a product (similar to adding a group and field to system.xml)? Mar 23, 2017 at 16:07
  • In which phtml file you put your code? Mar 23, 2017 at 16:11
  • Vendor/Module/view/adminhtml/templates/catalog/product/edit/welcome.phtml. Just like the tutorial said. I'm trying a very simple test (<select><option value="mytest1">mytest1</option><option value="mytest2">mytest2</option></select>). My selection isn't saved in the database. Mar 23, 2017 at 16:26

1 Answer 1

0

I've found what I was looking for by studying some of the core Magento 2 code. First add a <fieldset> element to view/adminhtml/ui_component/product_form.xml:

<?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">
    <argument name="data" xsi:type="array">
        <item name="buttons" xsi:type="array">
            <item name="product_button" xsi:type="string">Vendor\Module\Block\Adminhtml\Product\Edit\Button\UploadButton</item>
        </item>
    </argument>
    <fieldset name="my_fieldset">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">My New Tab</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">10</item>
            </item>
        </argument>
        <container name="my_group">
            <field name="my_field">
                <argument name="data" xsi:type="array">
                    <item name="options" xsi:type="object">Vendor\Module\Block\Adminhtml\Product\Edit\Tab\ProfileSelect</item>
                    <item name="config" xsi:type="array">
                        <item name="label" xsi:type="string" translate="true">My test menu</item>
                        <item name="sortOrder" xsi:type="number">230</item>
                        <item name="dataType" xsi:type="string">string</item>
                        <item name="dataScope" xsi:type="string">value</item>
                        <item name="formElement" xsi:type="string">select</item>
                        <item name="source" xsi:type="string">category</item>
                    </item>
                </argument>
            </field>
        </container>
    </fieldset>
</form>

Second, create a source class to populate your field. Mine is Vendor\Module\Block\Adminhtml\Product\Edit\Tab\ProfileSelect.php.

<?php

namespace Vendor\Module\Block\Adminhtml\Product\Edit\Tab;

use Magento\Framework\Data\Form\Element\AbstractElement;

class ProfileSelect extends \Magento\Config\Block\System\Config\Form\Field implements \Magento\Framework\Option\ArrayInterface
{
    /**
    * @var \Magento\Framework\App\Config\ScopeConfigInterface
    */
    protected $_scopeConfig;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_scopeConfig = $context->getScopeConfig();
    }

    /**
    * Disables the communities if no token is present
    */
    public function _getElementHtml(AbstractElement $element)
    {
        return $element->getElementHtml();
    }

    /**
    * Return options array
    *
    * @return array
    */
    public function toOptionArray()
    {
       return [
            ['value' => 'theducksflyatmidnight', 'label' => 'theducksflyatmidnight'],
            ['value' => 'newenglandclamchowder', 'label' => 'newenglandclamchowder']
        ];
     }
}

Clear the cache and run setup:di:compile, and the new menu item containing the new field will show.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.