2. 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.

Getting the value of an input text field
To get the value of the input text field, we will perform the following steps:

1.Open the header.phtml file in app/design/frontend/bookstore/default/template/page/html
configuration field, change to:

<?php echo Mage::getStoreConfig('bookstore/header/telephone',Mage::app()->getStore()); ?>

This code will be put inside the header part <fields> tags

<telephone translate="label">
	<label>Telephone Number: </label>
	<comment>Insert here the Phone number of your company, will be displayed in the top header</comment>

2.Now, go in the backend and insert a custom phone number in the field: Header Settings [ if you don’t see the telephone field, I think you should do inspect elements and then you can see id=”row_bookstore_header_telephone” style=”display:none”, you can also seen input text have been disabled ] why this happened, i can’t understand.

3.Then, save the configuration. Go to the frontend and you can see the telephone number is shown in the screen

Conditional options:
Let’s suppose that you want to show content, if the options are filled. 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());
	echo 'You need to fill in the options in the System Config';

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.

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>

Go to admin and select No and save the configuration.
[ This is not response , when this implemented then response 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 ?>

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">

Now, open the header.phtml file located in app/design/frontend/bookstore/default/template/page/html.
Here we have the default logo URL.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>

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 . Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA) . '/bookstore/' . Mage::getStoreConfig('bookstore/header/logo',Mage::app()->getStore());
                $logourl = $this->getLogoSrc();
        <img src="<?php echo $logourl ?>" alt="<?php echo $this->getLogoAlt()?>" class="img-responsive" />

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

To remove the uploaded logo, return to the admin theme options and select the Delete File checkbox and save the configuration


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s