Magento 2: How to add css in system config field
-
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 usegeneral
, 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 calledvalidation.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