Ajouter un nouvel onglet dans la page d'édition du produit et appeler un phtml personnalisé dans Magento 2.1

12

Je veux ajouter un nouvel onglet dans la page d'édition du produit et pour cela, je dois suivre ces étapes:

  1. Créez di.xmlet ajoutez le code ci-dessous:

    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="custommodule" xsi:type="array">
                <item name="class" xsi:type="string">Namespace\Custommodule\Ui\DataProvider\Product\Modifier\Customtab</item>
                <item name="sortOrder" xsi:type="number">200</item>
            </item>
        </argument>
    </arguments>
</virtualType>

  2. Créer Customtab.phpet par modifyMeta()fonction un nouvel onglet est créé.

Maintenant, je veux appeler un fichier phtml personnalisé pour rendre le html. Comment puis-je appeler un fichier phtml personnalisé?

magento2.1.0 
— Jaimin Parikh
source
Bonjour, je fais quelque chose de semblable. Avez-vous compris? Veuillez mettre à jour les ans si vous en avez. Merci d'avance!!
— Rushvi
Merci Jaimin, aujourd'hui cela m'aide beaucoup à résoudre le problème :) +5 de moi
— Keyur Shah

Réponses:

16

J'ai pris référence pour le produit configurable et suivi les étapes ci-dessous. Voici peut-être du code qui n'est pas utilisable.

1) Créer app/code/Namespace/Modulename/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="modulename" xsi:type="array">
                    <item name="class" xsi:type="string">Namespace\Modulename\Ui\DataProvider\Product\Modifier\Customtab</item>
                    <item name="sortOrder" xsi:type="number">200</item>
                </item>
            </argument>
        </arguments>
    </virtualType>

     <type name="Namespace\Modulename\Ui\DataProvider\Product\Modifier\Customtab">
        <arguments>
            <argument name="formName" xsi:type="string">product_form</argument>
            <argument name="dataScopeName" xsi:type="string">product_form.product_form</argument>
            <argument name="dataSourceName" xsi:type="string">product_form.product_form_data_source</argument>
        </arguments>
    </type>
</config>

2) Créer app/code/Namespace/Modulename/Ui/DataProvider/Product/Modifier/Customtab.php

<?php

namespace Namespace\Modulename\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 Customtab 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,
                [
                    'tabname' => [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'additionalClasses' => 'admin__fieldset-product-customclass',
                                    'label' => __('Your Label'),
                                    '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 [
            'tabname_products_button_set' => $this->getButtonSet()

        ];
    }

    protected function getButtonSet()
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'component' => 'Namespace_Modulename/js/components/container-tabname-handler',
                        'formElement' => 'container',
                        'componentType' => 'container',
                        'label' => false,
                        'content1' => __(
                            'Add some content'
                        ),
                        'template' => 'ui/form/components/complex',
                        'createTabButton' => 'ns = ${ $.ns }, index = create_tabname_products_button',
                    ],
                ],
            ],
            'children' => [

                'create_tabname_products_button' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'formElement' => 'container',
                                'componentType' => 'container',
                                'component' => 'Magento_Ui/js/form/components/button',
                                'actions' => [
                                    [
                                        'targetName' => $this->dataScopeName.'.customModal',
                                        'actionName' => 'trigger',
                                        'params' => ['active', true],
                                    ],
                                    [
                                        'targetName' => $this->dataScopeName.'.customModal',
                                        'actionName' => 'openModal',
                                    ],
                                ],
                                'title' => __('Your Title'),
                                'sortOrder' => 20,

                            ],
                        ],
                    ],
                ],
            ],
        ];
    }
}

3) Créer app/code/Namespace/Modulename/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_form">
            <block name="product.form.modulename.matrix" class="Magento\ConfigurableProduct\Block\Adminhtml\Product\Edit\Tab\Variations\Config\Matrix" template="Namespace_Modulename::catalog/product/edit/tab/custom.phtml" as="product_custom">
                <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">customModal</item>
                        <item name="nameStepWizard" xsi:type="string">variation-steps-wizard</item>
                        <item name="dataScope" xsi:type="string">productFormCustommodule</item>
                        <item name="urlWizard" xsi:type="string">modulename/index/custom</item>
                    </argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

4) Créer un fichier de mise en page pour l'action app/code/Namespace/Modulename/view/adminhtml/layout/modulename_index_custom.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="Namespace\Modulename\Block\Adminhtml\Catalog\Product\Edit\Tab\Custom" template="catalog/product/edit/tab/customfile.phtml" name="product_custom">

        </block> 
    </container>
</layout>

5) Créer un fichier de blocage app/code/Namespace/Modulename/Block/Adminhtml/Catalog/Product/Edit/Tab/Custom.php

<?php


namespace Namespace\Modulename\Block\Adminhtml\Catalog\Product\Edit\Tab;


class Custom extends \Magento\Backend\Block\Widget implements \Magento\Backend\Block\Widget\Tab\TabInterface
{
    protected $_template = 'catalog/product/edit/tab/custom.phtml';


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

    protected function _prepareLayout()
    {

        return parent::_prepareLayout();
    }
}

6) Créer un fichier contrôleur pour l'action app/code/Namespace/Modulename/Controller/Adminhtml/Index/Custom.php

<?php

namespace Namespace\Modulename\Controller\Adminhtml\Index;

class Custom 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_custom');
        $this->getResponse()->appendBody($block->toHtml());
    }
}

7) Créer un fichier modèle app/code/Namespace/Modulename/view/adminhtml/templates/catalog/product/edit/tab/custom.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": "Namespace_Modulename/js/components/modal-custommodule",
                        "options": {"type": "slide", "title": "<?php echo $block->escapeHtml(__('Your Title')); ?>"},
                        "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>

8) Créez mon fichier phtml personnalisé app/code/Namespace/Modulename/view/adminhtml/templates/catalog/product/edit/tab/customfile.phtml et écrivez mon code ici.

9) Créer des Js app/code/Namesapce/Modulename/view/adminhtml/web/js/components/modal-custommodule.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();
            }
        }
    });
});

10) Créer des Js app/code/Namesapce/Modulename/view/adminhtml/web/js/components/container-tabname-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);
                }
            }
        }
    });
});
— Jaimin Parikh
source
Votre code validera-t-il également les champs?
— Rushvi
oui mon code valide les champs.
— Jaimin Parikh
OK merci. Je vérifierai et vous informerai.
— Rushvi
Son bon fonctionnement
— Jalpesh Patel
J'ai utilisé la logique ci-dessus et cela fonctionne bien avec la version Magento 2.1.x mais cela ne fonctionne pas avec la version Magento2.2. Veuillez me fournir un soluton.
— Ajay
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.