2

I want to add product tab in Magento 2 admin panel product edit page. Here's my code:

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/Block/Adminhtml/Catalog/Product/Edit/Tab/Productgridextend.php

<?php
namespace Meet\Productgridextend\Block\Adminhtml\Catalog\Product\Edit\Tab;
class Productgridextend extends \Magento\Backend\Block\Widget implements \Magento\Backend\Block\Widget\Tab\TabInterface
{
    protected $_template = 'catalog/product/edit/tab/productgridextend.phtml';
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }
    protected function _prepareLayout()
    {
        return parent::_prepareLayout();
    }
}

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/Controller/Adminhtml/Index/Productgridextend.php

<?php
namespace Meet\Productgridextend\Controller\Adminhtml\Index;
class Productgridextend extends \Magento\Framework\App\Action\Action
{
    protected $_resultPageFactory;
    protected $resultJsonFactory;
    protected $_errorHelper;
    /**
     * @param \Magento\Framework\App\Action\Context           $context
     * @param \Magento\Framework\View\Result\PageFactory      $resultPageFactory
     * @param \Magento\Framework\Controller\Result\RawFactory $resultRawFactory
     */
    public function __construct(
    \Magento\Framework\App\Action\Context $context, \Magento\Framework\View\Result\PageFactory $resultPageFactory, \Magento\Framework\Controller\Result\RawFactory $resultRawFactory
    ) {
        $this->_resultPageFactory = $resultPageFactory;
        $this->resultRawFactory = $resultRawFactory;
        parent::__construct($context);
    }
    public function execute()
    {
        $resultPage = $this->_resultPageFactory->create();
        $block = $resultPage->getLayout()->getBlock('product_productgridextend');
        $this->getResponse()->appendBody($block->toHtml());
    }
}

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/Ui/DataProvider/Product/Modifier/Productgridextend.php

<?php
namespace Meet\Productgridextend\Ui\DataProvider\Product\Modifier;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Store\Api\WebsiteRepositoryInterface;
use Magento\Store\Api\GroupRepositoryInterface;
use Magento\Store\Api\StoreRepositoryInterface;
use Magento\Ui\Component\Form;
use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
class Productgridextend extends AbstractModifier
{
    const SORT_ORDER = 40;
    protected $locator;
    protected $websiteRepository;
    protected $groupRepository;
    protected $storeRepository;
    protected $websitesOptionsList;
    protected $storeManager;
    protected $websitesList;
    private $dataScopeName;
    public function __construct(
        LocatorInterface $locator,
        StoreManagerInterface $storeManager,
        WebsiteRepositoryInterface $websiteRepository,
        GroupRepositoryInterface $groupRepository,
        StoreRepositoryInterface $storeRepository,
        $dataScopeName
    ) {
        $this->locator = $locator;
        $this->storeManager = $storeManager;
        $this->websiteRepository = $websiteRepository;
        $this->groupRepository = $groupRepository;
        $this->storeRepository = $storeRepository;
        $this->dataScopeName = $dataScopeName;
    }
    public function modifyData(array $data)
    {
        return $data;
    }
    public function modifyMeta(array $meta)
    {
        if (!$this->storeManager->isSingleStoreMode()) {
            $meta = array_replace_recursive(
                $meta,
                [
                    'productgridextend' => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'additionalClasses' => 'admin__fieldset-product-productgridextend',
                                    'label' => __('Price Per Customer'),
                                    'collapsible' => true,
                                    'componentType' => Form\Fieldset::NAME,
                                    'sortOrder' => $this->getNextGroupSortOrder(
                                        $meta,
                                        'search-engine-optimization',
                                        self::SORT_ORDER
                                    ),
                                ],
                            ],
                        ],
                        'children' => $this->getPanelChildren(),
                    ],
                ]
            );
        }
        return $meta;
    }
    protected function getPanelChildren()
    {
        return [
            'productgridextend_products_button_set' => $this->getButtonSet()
        ];
    }
    protected function getButtonSet()
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'content' => "test",
                        'formElement' => 'container',
                        'componentType' => 'container',
                        'content1' => __(
                            'Apply discount for this product to customers.'
                        ),
                        'label' => false,
                        'template' => 'ui/form/components/complex',
                    ],
                ],
            ],
            'children' => [
                'create_productgridextend_products_button' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'formElement' => 'container',
                                'componentType' => 'container',
                                 'component' => 'Magento_Ui/js/form/components/button',
                                'actions' => [
                                    [
                                        'targetName' => $this->dataScopeName.'.configurableModal',
                                        'actionName' => 'trigger',
                                        'params' => ['active', true],
                                    ],
                                    [
                                        'targetName' => $this->dataScopeName.'.configurableModal',
                                        'actionName' => 'openModal',
                                    ],
                                ],
                                'title' => __('Price Per Customer Configuration'),
                                'sortOrder' => 20,
                            ],
                        ],
                    ],
                ],
            ],
        ];
    }
}

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/view/adminhtml/layout/catalog_product_new.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="product_tabs">
            <block class="Meet\Productgridextend\Block\Adminhtml\Catalog\Product\Edit\Tab\Productgridextend" name="product.productgridextend" />
            <action method="addTab">
                <argument name="name" xsi:type="string">product_productgridextend</argument>
                <argument name="block" xsi:type="string">product.productgridextend</argument>
            </action>
        </referenceBlock>

        <referenceBlock name="product_form">
            <block name="product.form.productgridextend.matrix" class="Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Variations\Config\Matrix" template="Meet_Productgridextend::catalog/product/price/productgridextend.phtml" as="product_productgridextend">
                <arguments>
                    <argument name="config" xsi:type="array">
                        <item name="collapsible" xsi:type="boolean">false</item>
                        <item name="label" xsi:type="string" translate="true" />
                        <item name="sortOrder" xsi:type="string">1000</item>
                        <item name="canShow" xsi:type="boolean">true</item>
                        <item name="componentType" xsi:type="string">fieldset</item>
                        <item name="provider" xsi:type="string">product_form.product_form_data_source</item>
                        <item name="form" xsi:type="string">product_form.product_form</item>
                        <item name="modal" xsi:type="string">productgridextendModal</item>
                        <item name="nameStepWizard" xsi:type="string">variation-steps-wizard</item>
                        <item name="dataScope" xsi:type="string">productFormProductgridextend</item>
                        <item name="urlWizard" xsi:type="string">md_Productgridextend/product/productgridextend</item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>

    </body>
</page>

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/view/adminhtml/layout/productgridextend_index_productgridextend.xml

<?xml version="1.0" ?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <container name="root" label="Root">
        <block class="Meet\Productgridextend\Block\Adminhtml\Catalog\Product\Edit\Tab\Productgridextend" template="catalog/product/edit/tab/productgridextend.phtml" name="product_productgridextend">
        </block> 
    </container>
</layout>

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/view/adminhtml/templates/catalog/product/edit/tab/productgridextend.phtml

<div class="<?= /* @noEscape */ $block->getData('config/dataScope') ?>" data-role="step-wizard-dialog" data-bind="scope: '<?= /* @noEscape */ $block->getForm() ?>.<?= /* @noEscape */ $block->getModal() ?>'">
    <!-- ko template: getTemplate() --><!-- /ko -->
</div>
<div class="<?= /* @noEscape */ $block->getData('config/dataScope') ?>" id="product-variations-matrix" data-role="product-variations-matrix">
    <div data-bind="scope: 'configurableVariations'"></div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "<?= /* @noEscape */ $block->getData('config/form') ?>.<?= /* @noEscape */ $block->getModal() ?>": {
                        "component": "Meet_Productgridextend/js/components/modal-productgridextend",
                        "options": {"type": "slide", "title": "<?php echo $block->escapeHtml(__('Price Groups')); ?>"},
                        "formName": "<?= /* @noEscape */ $block->getForm() ?>",
                        "isTemplate": false,
                        "stepWizard": "<?= /* @noEscape */ $block->getData('config/nameStepWizard') ?>",
                        "children": {
                            "wizard": {
                                "url": "<?= /* @noEscape */ $block->getUrl($block->getData('config/urlWizard'), ['id' => $block->getProduct()->getId()]) ?>",
                                "component": "Magento_Ui/js/form/components/html"
                            }
                        }
                    }
                }
            }
        }
    }
</script>

<script>
    require(['jquery', 'mage/apply/main'], function ($, main) {
        main.apply();
          $('.<?= /* @noEscape */ $block->getData('config/dataScope') ?>[data-role=step-wizard-dialog]').applyBindings();
        $('.<?= /* @noEscape */ $block->getData('config/dataScope') ?>[data-role=product-variations-matrix]').applyBindings();
    })
</script>

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/view/adminhtml/web/js/components/container-productgridextend-handler.js

define([
    'uiComponent'
], function (Element) {
    'use strict';

    return Element.extend({
        defaults: {
            listens: {
                '${ $.provider }:data.is_downloadable': 'handleProductType'
            },
            links: {
                isDownloadable: '${ $.provider }:data.is_downloadable'
            },
            modules: {
                createConfigurableButton: '${$.createConfigurableButton}'
            }
        },

        /**
         * Invokes initialize method of parent class,
         * contains initialization logic
         */
        initialize: function () {
            this._super();
            this.handleProductType(this.isDownloadable);

            return this;
        },

        /**
         * Calls 'initObservable' of parent
         *
         * @returns {Object} Chainable.
         */
        initObservable: function () {
            this._super()
                .observe(['content']);

            return this;
        },

        /**
         * Change content for container and visibility for button
         *
         * @param {String} isDownloadable
         */
        handleProductType: function (isDownloadable) {
            if (isDownloadable === '1') {
                this.content(this.content2);

                if (this.createConfigurableButton()) {
                    this.createConfigurableButton().visible(false);
                }
            } else {
                this.content(this.content1);

                if (this.createConfigurableButton()) {
                    this.createConfigurableButton().visible(true);
                }
            }
        }
    });
});

/home1/dukaania/public_html/testing2/app/code/Meet/Productgridextend/view/adminhtml/web/js/components/modal-productgridextend.js

define([
    'Magento_Ui/js/modal/modal-component',
    'uiRegistry',
    'underscore'
], function (Modal, registry, _) {
    'use strict';

    return Modal.extend({
        defaults: {
            stepWizard: '',
            modules: {
                form: '${ $.formName }'
            }
        },

        /**
         * Open modal
         */
        openModal: function () {
            var stepWizard = {};

            this.form().validate();

            if (this.form().source.get('params.invalid') === false) {
                stepWizard = registry.get('index = ' + this.stepWizard);

                if (!_.isUndefined(stepWizard)) {
                    stepWizard.open();
                }

                this._super();
            }
        }
    });
});
  • Please let us know what problem you have faced? – Amit Bera Sep 22 '18 at 13:51
  • no tab is sowing up in product edit page admin panel – jhon jhon doe Sep 22 '18 at 17:57
  • Please, can anyone review my code and share the issue that i am facing no tab is created in admin panel product edit page with this code. – jhon jhon doe Sep 24 '18 at 6:30
  • can you find out what problem i faced in that code – jhon jhon doe Sep 24 '18 at 7:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.