When we create a model inside Magento 2, we also give the system configuration of that model so that the admin user can manage it easily.
And any extension or model is considered good only when its user experience is good.
The more you manage or customize the admin side of the extension, the better your admin experience will be.
In this article, I am going to tell you how to create a configuration of System.xml in the admin of any model and get its data in the front end.
Get System Configuration Data in Phtml File
The system.xml is a configuration file that is used to manage any extension or module in Magento 2 by giving the option on the admin side to customize or change the behavior.
Configuration options are available in Magento 2
Store -> Settings -> Configuration
Step 1: Create Registration File
Here in the first step, you have to create a registration file to register your Magento 2 module or extension.
Wishusucess/SystemHelloworld/registration.php
<?php /** * @Developer: Hemant Kumar Singh Magento 2x Developer * @Website: http://www.wishusucess.com/ */ \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Wishusucess_SystemHelloworld', __DIR__ );
Step 2: Create Module XML File
Now you have to create a module XML file to give the module version and basic information of your Magento 2 System configuration module.
Wishusucess/SystemHelloworld/etc/module.xml
<?xml version="1.0"?> <!-- /** * @Developer: Hemant Kumar Singh Magento 2x Developer * @Website: http://www.wishusucess.com/ */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="Wishusucess_SystemHelloworld" setup_version="1.0.0" active="true"></module> </config>
Step 3: Create System Configuration XML File
The system. xml file is known as the configuration file that we used to create admin configuration fields in Magento 2 Module or extension.
This file decides the admin setting options for any extension or Module.
Store -> Setting -> Configuration
Wishusucess/SystemHelloworld/etc/adminhtml/system.xml
<?xml version="1.0"?> <!-- /** * @Developer: Hemant Kumar Singh Magento 2x Developer * @Website: http://www.wishusucess.com/ */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd"> <system> <tab id="wus" translate="label" sortOrder="10"> <label>Wishusucess</label> </tab> <section id="wishusucess_systemhelloworld" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1"> <class>separator-top</class> <label>Hello World</label> <tab>wus</tab> <resource>Wishusucess_SystemHelloworld::wishusucess_systemhelloworld</resource> <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0"> <label>General Configuration</label> <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Module Enable</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> <field id="text_title" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Title</label> <comment>This title text.</comment> </field> <field id="text_description" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Description</label> <comment>This is description text.</comment> </field> </group> </section> </system> </config>
Step 4: Config XML file for Admin
Now we are going to create a config XML file that we used to provide the default value in admin configuration fields in Magento 2 admin.
Wishusucess/SystemHelloworld/etc/config.xml
<?xml version="1.0"?> <!-- /** * @Developer: Hemant Kumar Singh Magento 2x Developer * @Website: http://www.wishusucess.com/ */ --> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd"> <default> <wishusucess_systemhelloworld> <general> <enable>0</enable> <text_title>Wishusucess System Config Hello World</text_title> <text_description>Wishusucess System Configuration Hello World Module</text_description> </general> </wishusucess_systemhelloworld> </default> </config>
Now till here, if you will run the below command then you will see the configuration like below screenshot
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy -f php bin/magento cache:clean
Step 5: System Configuration Helper Class
Now here we will get the data from a system XML file, we will initialize the path of each field id of the system.xml file in Magento 2.
In order to initialize the field path, we will prefer the order hierarchy.
Section_id/group_id/field_id
Wishusucess/SystemHelloworld/Helper/Data.php
<?php
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
namespace Wishusucess\SystemHelloworld\Helper;
use Magento\Framework\App\Config\ScopeConfigInterface;
class Data extends \Magento\Framework\App\Helper\AbstractHelper
{
/**
* Admin configuration paths
*
*/
const IS_ENABLED = 'helloworld_config/general/enable';
const TEXT_TITLE = 'helloworld_config/general/text_title';
const TEXT_DESCRIPTION = 'helloworld_config/general/text_description';
/**
* @var \Magento\Framework\App\Config\ScopeConfigInterface
*/
protected $scopeConfig;
/**
* Data constructor
* @param \Magento\Framework\App\Helper\Context $context
* @param \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
*/
public function __construct(
\Magento\Framework\App\Helper\Context $context,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
) {
parent::__construct($context);
}
/**
* @return $isEnabled
*/
public function isEnabled()
{
$isEnabled = $this->scopeConfig->getValue(self::IS_ENABLED,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);
return $isEnabled;
}
/**
* @return $textTitle
*/
public function getTextTitle()
{
$textTitle = $this->scopeConfig->getValue(self::TEXT_TITLE,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);
return $textTitle;
}
/**
* @return $textDescription
*/
public function getDisplayText()
{
$textDescription = $this->scopeConfig->getValue(self::TEXT_DESCRIPTION,
\Magento\Store\Model\ScopeInterface::SCOPE_STORE
);
return $textDescription;
}
}
Step 6: Call Helper in Block Class
Here, we have to create a block class in order to call the helper. So that we can directly use the block function in the phtml file.
Wishusucess/SystemHelloworld/Block/AdminConfiguration.php
<?php
/**
* @Developer: Hemant Kumar Singh Magento 2x Developer
* @Website: http://www.wishusucess.com/
*/
namespace Wishusucess\SystemHelloworld\Block;
use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;
use Wishusucess\SystemHelloworld\Helper\Data;
use Magento\Framework\App\Config\ScopeConfigInterface;
class AdminConfiguration extends \Magento\Framework\View\Element\Template
{
public function __construct(
\Magento\Backend\Block\Template\Context $context,
Data $helper,
\Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig,
array $data = []
)
{
$this->helper = $helper;
$this->scopeConfig = $scopeConfig;
parent::__construct($context, $data);
}
/*
* @return bool
*/
public function isEnabled()
{
return $this->helper->isEnabled();
}
/*
* @return string
*/
public function getDisplayText()
{
return $this->helper->getDisplayText();
}
}
Step 7: Call System Config Value in PHTML File
Now you will call the block method here so that the data of your admin field can be printed.
Another way is that you can directly call the helper class in this file and use its method.
In Magento 2, any system XML fields show the data of the common file ie admin fields on the front end
Wishusucess/SystemHelloworld/view/frontend/templates/helloworld.phtml
<?= $isEnabled; ?> <?= $getTextTitle; ?> <?= $getDisplayText; ?>
Or
<?php
$helper = $this->helper('Wishusucess\SystemHelloworld\Helper\Data');
$isEnabled = $helper->isEnabled();
$getTextTitle = $helper->getTextTitle();
$getDisplayText = $helper->getDisplayText();
?>
//Print Text title
<?php echo $getTextTitle; ?>
//Print Text Description
<?php $getDisplayText; ?>
Now make this module enable and save it, then call this phtml in cms page or block if you want to check this simple module in Magento 2.
<p>{{block class="Wishusucess\SystemHelloworld\Block\AdminConfiguration" template="Wishusucess_SystemHelloworld::helloworld.phtml"}}</p>
Run the below command and then check
php bin/magento setup:static-content:deploy -f php bin/magento cache:clean
That's all !!
If you need any help with Magento 2 extension or module development you can directly contact me.
Thanks
Similar Posts: