1

I would like to add a button to the 'Product Name' attribute within the product information tab, but I'm unsure of how to achieve this. Below is my product_form.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 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">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">product_form.product_form_data_source</item>
            <item name="namespace" xsi:type="string">product_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="childrenFromMeta" xsi:type="boolean">true</item>
    </argument>
    <settings>
        <reloadItem>product-details.attribute_set_id:value</reloadItem>
        <buttons>
            <button name="save" class="Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Save"/>
            <button name="addAttribute" class="Magento\Catalog\Block\Adminhtml\Product\Edit\Button\AddAttribute"/>
            <button name="back" class="Magento\Catalog\Block\Adminhtml\Product\Edit\Button\Back"/>
            <button name="ai" class="Improove\Task\Block\Adminhtml\Product\Edit\Button\CustomButton"/>
        </buttons>
        <deps>
            <dep>product_form.product_form_data_source</dep>
        </deps>
    </settings>
    <dataSource name="product_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <dataProvider class="Magento\Catalog\Ui\DataProvider\Product\Form\ProductDataProvider" name="product_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
    <htmlContent name="gallery" sortOrder="22">
        <argument name="data" xsi:type="array">
            <item name="wrapper" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Images</item>
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="opened" xsi:type="boolean">false</item>
            </item>
        </argument>
        <settings>
            <wrapper>
                <canShow>true</canShow>
                <componentType>fieldset</componentType>
            </wrapper>
        </settings>
        <block name="gallery" class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery">
            <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>
    </htmlContent>
</form>

What do I need to do?

2
  • Can you add more information about what this button is supposed to do ?
    – Cladiuss
    Oct 13, 2023 at 14:32
  • its something like the image that suncartstore insert in the comment Oct 23, 2023 at 15:19

1 Answer 1

2

You can follow below steps to add custom button under Product Name Container.

Your Above requirement can achieve by implement Product Form Modifier approach.

Step 1: Create etc/adminhtml/di.xml file

<virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
    <arguments>
        <argument name="modifiers" xsi:type="array">
            <item name="advancedUrlButton" xsi:type="array">
                <item name="class" xsi:type="string">
                    StackOver\ProductBtn\Ui\DataProvider\Product\Form\Modifier\NameBtn
                </item>
                <item name="sortOrder" xsi:type="number">50</item>
            </item>
        </argument>
    </arguments>
</virtualType>

Step 2: Create modifier class file \Ui\DataProvider\Product\Form\Modifier\NameBtn.php

<?php

namespace StackOver\ProductBtn\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\AbstractModifier;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Framework\App\Request\Http;

class NameBtn extends AbstractModifier
{
protected ArrayManager $arrayManager;
protected Http $request;

public function __construct(ArrayManager $arrayManager, Http $request)
{
    $this->arrayManager = $arrayManager;
    $this->request = $request;
}

/**
 * @param array $meta
 *
 * @return array
 */
public function modifyMeta(array $meta): array
{
    $containerPrefix = "container_";
    $fieldCode = 'name';
    $containerPath = $this->arrayManager->findPath($containerPrefix . $fieldCode, $meta, null, 'children');

    $value['children']['create_productname_button'] = [
        'arguments' => [
            'data' => [
                'config' => [
                    'title' => __('Extra Button'),
                    'formElement' => 'container',
                    'buttonClasses' => 'namegenerator-button-class',
                    'additionalClasses' => 'admin__field-small',
                    'elementTmpl' => 'StackOver_ProductBtn/form/element/namegenerate',
                    'componentType' => 'container',
                    'disabled' => false,
                    'component' => 'StackOver_ProductBtn/js/advancename',
                    'template' => 'ui/form/components/button/container',
                    'additionalForGroup' => true,
                    'provider' => false,
                    'source' => 'product_details',
                    'displayArea' => 'insideGroup',
                    'sortOrder' => 55,
                    'dataScope' => $fieldCode,
                ],
            ],
        ]
    ];
    $meta = $this->arrayManager->merge($containerPath, $meta, $value);
    return $meta;
}

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

Step 3: Then create Template file for Custom Btn StackOver/ProductBtn/view/adminhtml/web/template/form/element/namegenerate.html

<button type="button"
    css="buttonClasses"
    attr="'data-index': index, 'aria-labelledby': ariLabelledby">
<span attr="'id': buttonTextId" text="title">Click</span>
</button>

<if args="childError">
<strong class="_error">
    <span class="admin__page-nav-item-messages">
        <span class="admin__page-nav-item-message _error">
            <span class="admin__page-nav-item-message-icon"></span>
            <span class="admin__page-nav-item-message-tooltip"
                  data-bind="i18n: 'This element contains invalid data. Please resolve this before saving.'">This element contains invalid data. Please resolve this before saving.</span>
        </span>
    </span>
</strong>
</if>

Step 4: Create Custom Btn Component File to write your custom btn click events.

StackOver/ProductBtn/view/adminhtml/web/js/advancename.js

define(['Magento_Ui/js/form/components/button', 'jquery'],
function (Button, $) {
    'use strict';

    console.log("Component has been loaded");

    return Button.extend({
        initialize: function () {
            this._super();
        }
    })
})

enter image description here

Please let us know, if have any doubt's regarding the same. And Don't forget to up-vote the answer.

2
  • when i click the button, i can't do nothing and i have changes in the js file. Oct 26, 2023 at 16:05
  • @VicenteRomão you need to add/bind click event on your html button template like this <button type="button"data-bind="click: nameGenerate"> and in component js file you can define function to handle the event like this nameGenerate: function () {console.log("button click")} Oct 27, 2023 at 6:34

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.