How to Get Data on Frontend From System Configuration File in Magento2

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.

System Configuration Data Data in phtml

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

Magento 2 Create System Configuration

 

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

 

Magento 2 Get Data on Frontend from System XML

That's all !!

If you need any help with Magento 2 extension or module development you can directly contact me.

Thanks

Check with GitHub

 

Similar Posts:

Add JS File in Magento 2 Module: How to Add Java Script

Magento 2 Featured Products: How to Add Featured Products

Leave a Reply