Now that we have a full working theme admin panel, and you know how to create any type of option, we need to show the values in the frontend.
Retrieving the data saved in your configuration is quite easy. You can use the following code:
<?php echo Mage::getStoreConfig(bookstore/general/options,Mage::app()->getStore()); ?php>
In the preceding code, bookstore
is the sections, general
is the fields group, and option
is the options field.
Now it is very easy to customize the frontend, because you need to change the stuff in the frontend with the options you created and some conditions. Let's start with a basic example: let's set the telephone number in the header from the admin panel.
To get the value of the input text field, we will perform the following steps:
header.phtml
file in app/design/frontend/bookstore/default/template/html
and find the following lines of code:<div class="col-md-8 col-sm-7"> <?php echo $this->getChildHtml('topbar_cmslinks') ?> </div> Now the block is managed by a CMS static block, so to place the configuration field, change to: <div class="col-md-8 col-sm-7"> <?php echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore()); ?> </div>
Just to remind you, the piece of code that generates the field in the admin panel is in the system.xml
file, as follows:
<telephone translate="label"> <label>Telephone Number: </label> <comment>Insert here the Phone number of your company, will be displayed in the top header</comment> <frontend_type>text</frontend_type> <sort_order>04</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <depends> <topheader_enable>1</topheader_enable> </depends> </telephone>
This part of code is present in the header
group inside the bookstore
section.
Let's suppose that you want to show content if the options are filled and other options in case of the opposite. To do this, add a simple condition in the frontend as follows:
<?php if(Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore())): echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore()); else: echo 'You need to fill in the options in the System Config'; endif; ?>
Done! In this way, the user who installs the theme will be alerted in the frontend that he or she needs to edit some parts.
Let's see another example that will explain better with a Yes/No field. Let's suppose that we want to enable or disable the top bar (the black bar in the header).
We already created the option in the system.xml
file as follows:
<topheader_enable translate="label"> <label>Enable Top Header</label> <comment>Enable or Disable the top header bar</comment> <frontend_type>select</frontend_type> <sort_order>01</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <source_model>adminhtml/system_config_source_yesno</source_model> </topheader_enable>
Go to admin and select No and save the configuration.
Now, reopen the header.phtml
file and wrap the top header div
inside the following code, to enable or disable the top header, depending on the options:
<?php if(Mage::getStoreConfig('bookstore/header/topheader_enable',Mage::app()->getStore())==1): ?> . . . <?php endif ?>
To get an uploaded image file, the process is the same. Now we are going to see a live example with the logo
field we created.
In system.xml
, the logo
field is defined in the following way:
<logo translate="label" module="themeoptions"> <comment></comment> <label>Logo</label> <frontend_type>file</frontend_type> <backend_model>adminhtml/system_config_backend_file</backend_model> <upload_dir>media/bookstore</upload_dir> <sort_order>00</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </logo>
Now, open the header.phtml
file located in app/design/frontend/bookstore/default/template/html
.
Here we have the default logo URL. What we are going to do is use the uploaded logo from our theme options if present; if not, we will use the default Magento logo, which is always defined in the admin in System Configuration | Design.
But the uploader is always a better solution for customers, and if they find all the options to customize the theme in one place, it is better!
So now that you have opened the header.phtml
file, find the line where the logo is declared in the following code:
<div class="logo col-md-4 col-sm-5"> <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>"> <img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" class="img-responsive" /></a> </div>
Replace the preceding code with the following code:
<div class="logo col-md-4 col-sm-5"> <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>"> <?php if(Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore())): $logourl = $media . 'media/bookstore/' . Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore()); else: $logourl = $this->getLogoSrc(); endif; ?> <img src="<?php echo $logourl ?>" alt="<?php echo $this->getLogoAlt() ?>" class="img-responsive" /> </a> </div>
What we've done here is a simple condition that displays the uploaded logo if present. Try to upload a custom logo now, and you will see that it appears in the site header, as shown in the following screenshot:
To remove the uploaded logo, return to the admin theme options and select the Delete File checkbox and save the configuration, as shown in the following screenshot:
3.145.64.132