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.
1. Customizing the frontend
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.
1.1. Getting the value of an input text field
To get the value of the input text field, we will perform the following steps:
- Open the 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.
- Now, go in the backend and insert a custom phone number in the field:
- Then, save the Go to the frontend and the telephone number (+00) 800 99 66 55 993 that you inserted should appear in the top bar, as shown in the following screenshot:
1.2. Conditional options
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.
1.3. Accessing a Yes/No dropdown
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 ?>
Note: The Yes/No option returns 1 for Yes and 0 for No.
1.4. Getting the uploaded image file
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:
Source: Sacca Andrea (2014), Mastering Magento theme design, Packt Publishing; Illustrated edition.