How to Add Link on Store Configuration Fields Comment in Magento 2?

Hello Magento Friends,

In today’s blog, we will learn about How to Add Link on Store Configuration Fields Comment in Magento 2.

Adding links to comments in the store configuration fields in Magento 2 can be a useful way to provide additional information or direct users to relevant resources. This process can be beneficial for providing guidance, documentation, or any external references related to the configuration fields.

Here’s a step-by-step guide on how to add a link to a comment in store configuration fields in Magento 2:

Contents

1 Steps to Add Link on Store Configuration Fields Comment in Magento 2:
2 Conclusion:

Steps to Add Link on Store Configuration Fields Comment in Magento 2:

Step 1: First, create a system.xml file at the below path

{{magento_root}}/app/code/Vendor/Module/etc/adminhtml

Then add the code as follows

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="general" translate="label" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
            <group id="my_group" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="my_field" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>My Custom Field</label>
                    <frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Link</frontend_model>
                    <comment>This is a custom field. Click <a href="https://www.magecomp.com" target="_blank">here</a> for more information.</comment>
                </field>
            </group>
        </section>
    </system>
</config>

<?xml version="1.0"?>

<label>My Custom Field</label>

<frontend_model>Vendor\Module\Block\Adminhtml\System\Config\Link</frontend_model>

<comment>This is a custom field. Click <a href="https://www.magecomp.com" target="_blank">here</a> for more information.</comment>

</field>

</group>

</section>

</system>

</config>

System configuration field with the frontend_model attributes. The frontend_model points to a custom block where we’ll define the field’s behavior.

Step 2: Now create a Block file called Link.php file at the below-mentioned path

{{magento_root}}/app/code/Vendor/Module/Block/Adminhtml/System/Config

Create a custom block for the frontend model:

Create a custom block to handle the frontend rendering and behavior of your field.

<?php
namespace Vendor\Module\Block\Adminhtml\System\Config;

use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;

class Link extends Field
{
    /**
     * Render the element and add a custom link to the comment field.
     *
     * @param AbstractElement $element
     * @return string
     */
    protected function _getElementHtml(AbstractElement $element)
    {
        $element->setComment(
            'This is a custom field. Click <a href="https://www.magecomp.com" target="_blank">here</a> for more information.'
        );

        return parent::_getElementHtml($element);
    }
}

<?php

namespace Vendor\Module\Block\Adminhtml\System\Config;

use Magento\Config\Block\System\Config\Form\Field;

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

class Link extends Field

{

/**

* Render the element and add a custom link to the comment field.

* @param AbstractElement $element

* @return string

protected function _getElementHtml(AbstractElement $element)

{

$element->setComment(

'This is a custom field. Click <a href="https://www.magecomp.com" target="_blank">here</a> for more information.'

);

return parent::_getElementHtml($element);

}

Output SS:

Link in configuration fields comment

Conclusion:

By following these steps, you can easily add a link to the comment section in the store configuration fields in Magento 2, enhancing the admin experience by providing additional guidance and resources.

Also, Check out,

Magento 2: How to Add Custom Validation To System Configuration Field

If you have any doubts about performing the above steps, please connect with me through the comment section. Share the article with your friends and stay updated with us.

Happy Coding!

Click to rate this post!

[Total: 1 Average: 5]