Magento 2 Extending Core functionality – Showing custom field from store info on the front page

Mario Erhard Magento, E-Commerce

In this blog I will show you an example of how you can Extend Magento Core functions. To start, you need to create a folder at app/code/<vendor>/<module_name> (<vendor> is usually the name of the company, but can be any name you wish, same goes for module_name>). This module shows a field from Store information in admin on the footer of the frontpage.

To get started, we are going to create a folder app/code/Perpetuum/Footer which is the folder for our module.

After that we need to declare the module, to do that we have to create module.xml in App/code/Perpetuum/Footer/etc

 
<? xml version ="1.0"  ?>  
< config  xmlns: xsi  ="http://www.w3.org/2001/XMLSchema-instance"   xsi :noNamespaceSchemaLocation ="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd" > 
    < module  name ="Perpetuum_Footer"  setup_version ="1.0.0"  schema_version ="1.0.0" > 
    </ module > 
</ config >

Now in the root of our module app/code/Perpetuum/Footer create registration.php, this file is used so that framework will register your module with Magento.

 
<?php  
\Magento\Framework\Component\ComponentRegistrar:: register ( 
    \Magento\Framework\Component\ComponentRegistrar::  MODULE  , 
     'Perpetuum_Footer' , 
      __DIR__   
);

Now we need to create a folder App/code/Perpetuum/Footer/etc/adminhtml and file system.xml

 
<? 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"  type ="text"  sortOrder ="10"  showInDefault ="1"  showInWebsite ="1"  showInStore ="1" > 
            < label >General</ label > 
            < tab >general</ tab > 
            < resource >Magento_Config::config_general</ resource >
                < group  id ="store_information"  translate ="label"  type ="text"  sortOrder ="100"  showInDefault ="1"  showInWebsite ="1"  showInStore ="1" > 
                < label >Store Information</ label > 
                < field  id ="in_store"  translate ="label"  type ="text"  sortOrder ="24"  showInDefault ="1"  showInWebsite ="1"  showInStore ="0" > 
                    < label >Identification number</ label > 
                </ field > 
            </ group >
        </ section > 
    </ system > 
</ config >

What this does it extends Store configuration general tab and adds an Identification number to the Store information. In this xml you can also sort by attribute sortOrder (it tells magento where you wish to put your field based on its weight).

Next we need to create a folder App/code/Perpetuum/Footer/Helper and file Data.php here we will create a helper function that will return a value from the database for our field

 
namespace  Perpetuum\Footer\Helper;

class Data extends \Magento\Framework\App\Helper\AbstractHelper 
{ 
public function getConfig($config_path) 
    { 
        return $this-> scopeConfig ->getValue($config_path, \Magento\Store\Model\ScopeInterface:: SCOPE_STORE); 
    } 
} 

After that we need to create or edit a template to show this value. We will do it from a module but you can call it from your theme

create a folder App/code/Perpetuum/Footer/view/frontend/templates and create a file footer.phtml with


<?php  
$helper = $this->helper( 'Perpetuum\Footer\Helper\Data' ); 
?>  
< div class= "footer-item"> 
Store Identification number:  <?php echo $helper->getConfig( "general/store_information/in_store" );?>
</ div > 

And now you need to edit default.xml of your theme which should be something like app/design/<vendor>/<your_theme_name>/Magento_theme/layout (if you don't have it copy it from vendor/magento/module_theme/view/layout or from your parent theme (I will show you an example from magento luma theme) . Here you need to find where does the theme references footer container and add this code


< block class="Magento\Theme\Block\Html\Footer" name="id_number" template ="Perpetuum_Footer::footer.phtml" after ="store_switcher" />

My example for Luma theme


< referenceContainer  name ="footer" > 
    < block class ="Magento\Store\Block\Switcher" name ="store_switcher" as ="store_switcher" after ="footer_links" template ="switch/stores.phtml" /> 
    < block class ="Magento\Theme\Block\Html\Footer" name ="id_number" template ="Perpetuum_Footer::footer.phtml" after ="store_switcher" /> 
</ referenceContainer >

After that you need to enable the module with (run it from the root of your project)


bin/magento module:enable
bin/magento setup:upgrade

And now you should see In admin (for adding value to the field)

AdminFronntend