Magento 2: How to add css in system config field

magento.stackexchange https://magento.stackexchange.com/questions/295425

  •  19-03-2021
  •  | 
  •  

質問

I need to add phtml file for the following path.

\app\code\Abc\Mkt\view\adminhtml\templates\validation.phtml

How do I add this?

Validation.phtml

<?php $enable  = \Magento\Framework\App\ObjectManager::getInstance()->get('Magento\Framework\App\Config\ScopeConfigInterface')->getValue('abc_auth/abc_settings/expiry_date');
$helper = $this->helper('Abc\Mkt\Helper\Data');
$expiry = $helper->checkExpiry();
if($enable == "failure" || $enable == "invalid" || $enable == "" || !$expiry ){ ?>
<style>
li.admin__page-nav-item.item._last{ display: none; }
</style>
<?php } ?>
役に立ちましたか？

解決

You need to create below files in your custom module to add your validation.phtml file in your custom module's system configuration. If you follow below steps then your validation file will not call in any other module's system configuration.

So first of all create events.xml file here

app/code/Vendor/Module/etc/adminhtml/events.xml

Content for this file is..

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="layout_load_before">
        <observer name="custom_config_layout_load_before" instance="Vendor\Module\Observer\Adminhtml\LayoutHandler" />
    </event>
</config>

Now you need to create one LayoutHandler.php Observer file here

app/code/Vendor/Module/Observer/Adminhtml/LayoutHandler.php

Content for this file is ..

<?php

namespace Vendor\Module\Observer\Adminhtml;

class LayoutHandler implements \Magento\Framework\Event\ObserverInterface
{
    public function __construct(\Magento\Framework\App\Request\Http\Proxy $request)
    {
        $this->request = $request;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $params = $this->request->getParams();

        if (! empty($params['section'])) {
            $moduleName = $this->getModuleName();
            if ($params['section'] == "custom_section_id") { //Here you can use your section ID which is available in your adminhtml/system.xml file's <section id='whatever'>
                $layout = $observer->getData('layout');
                $layout->getUpdate()->addHandle('adminhtml_system_config_edit_section_custom_handler');
            }
        }
    }

    private function getModuleName()
    {
        $class = get_class($this);
        $moduleName = strtolower(
            str_replace('\\', '_', substr($class, 0, strpos($class, '\\Observer')))
        );
        return (string) $moduleName;
    }
}
  • In above file, You just need to change your section ID in if condition like if I'm adding css for General Configuration then I'll use general, so you can use your custom module's system config's section ID here.

Now you need to create one layout xml file here

app/code/Vendor/Module/view/adminhtml/layout/adminhtml_system_config_edit_section_custom_handler.xml

Content for this file is..

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Module::css/custom.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Backend\Block\Template" name="custom_validation" template="Vendor_Module::system/config/validation.phtml"/>
        </referenceContainer>
    </body>
</page>
  • Here I've included one custom.css CSS file and one template file called validation.phtml.

So you need to create above both files in this location..

CSS

app/code/Vendor/Module/view/adminhtml/web/css/custom.css

phtml

app/code/Vendor/Module/view/adminhtml/templates/system/config/validation.phtml

You can add whatever content here based on your requirement.

Hope this will help you!

他のヒント

You can set class in the field by <frontend_class> tag. Like this below code:

<field id="country_id" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="0" canRestore="1">
    <label>Country</label>
    <frontend_class>countries</frontend_class>
    <source_model>Magento\Directory\Model\Config\Source\Country</source_model>
</field>

Reference: vendor/magento/module-shipping/etc/adminhtml/system.xml

ライセンス： CC-BY-SA と 帰属
所属していません magento.stackexchange
scroll top