How to create a Button in Configuration Section of Adobe Commerce (Magento 2)
Here we will learn that How to create a button at Store -> Configuration -> yourSection in Adobe Commerce (Magento 2).
The button will look like as displayed in the image.
1. Open a file Webkul/Addbutton/etc/adminhtml/system.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="webkul" translate="label" sortOrder="10">
<label>Webkul</label>
</tab>
<section id="demomanagement" translate="label" type="text" sortOrder="305" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Demo Management</label>
<tab>webkul</tab>
<resource>Webkul_Addbutton::config_addbutton</resource>
<group id="showbutton" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
<field id="listbutton" translate="label" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<frontend_model>Webkul\Addbutton\Block\System\Config\Form\Button</frontend_model>
</field>
</group>
</section>
</system>
</config>
2. Now create a frontend_model that we have defined in system.xml
Webkul/Addbutton/Block/System/Config/Form/Button.php
<?php
namespace Webkul\Addbutton\Block\System\Config\Form;
class Button extends \Magento\Config\Block\System\Config\Form\Field
{
const BUTTON_TEMPLATE = 'system/config/button/button.phtml';
/**
* Set template to itself
*
* @return $this
*/
protected function _prepareLayout()
{
parent::_prepareLayout();
if (!$this->getTemplate()) {
$this->setTemplate(static::BUTTON_TEMPLATE);
}
return $this;
}
/**
* Render button
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
public function render(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
// Remove scope label
$element->unsScope()->unsCanUseWebsiteValue()->unsCanUseDefaultValue();
return parent::render($element);
}
/**
* Return ajax url for button
*
* @return string
*/
public function getAjaxCheckUrl()
{
return $this->getUrl('addbutton/listdata'); //hit controller by ajax call on button click.
}
/**
* Get the button and scripts contents
*
* @param \Magento\Framework\Data\Form\Element\AbstractElement $element
* @return string
*/
protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
{
$this->addData(
[
'id' => 'addbutton_button',
'button_label' => __('New Button'),
'onclick' => 'javascript:check(); return false;'
]
);
return $this->_toHtml();
}
}
Now let’s create a button.phtml
Webkul/Addbutton/view/adminhtml/templates/system/config/button/button.phtml
<div class="pp-buttons-container">
<button id="<?= $block->getId() ?>" onclick="return false;">
<span><span><span><?php echo $block->escapeHtml($block->getButtonLabel()); ?></span></span></span>
</button>
</div>
Now refresh the cache and go to your store->configuration->your_section, you will see a button here.
If you need any technical support, please contact us at support@webkul.com. Additionally, explore various ways to enhance your online store by visiting the Adobe Commerce modules section.
For expert guidance or to develop customized features, hire Adobe Commerce Developers for your project.