Develop magento module frontend layout

This tutorial explains how to develop magento module frontend layout.Please check the previous tutorial which shows how to develop the magento module admin section.

The section explains in detailed how to create the frontend xml and template files.This magento module displays the social icons in the footer section as shown.


develop-admin-module-magento-demo

Step by step explanation

  • File Structure
  • Frontend layout xml file
  • Template File
  • Include layout xml file

File Structure

For displaying the social links create the layout xml file and the template file in the base folder.

frontend_layout_xml
develop-magento-module-frontend-layout

Frontend layout xml file

This section explains how to show the social links in the frontend. For displaying the social links in the content section create block inside the xml file as shown below. design/frontend/base/default/layout/addpeople_slinks.xml

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="content" after="-">
            <block type="core/template" name="addpeople_slinks" as="addpeople_slinks" template="addpeople/slinks/sociallinks.phtml" />
        </reference>
    </default>
</layout>

Template File

This section show how to retrieve the social links from the admin section. For retrieving the variable from the admin section use the following code.Also check the highlighted path of the following image.


<h2>Social Links</h2>
<ul>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_facebook');?>">Facebook</a>
    </li>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_twitter');?>">Twitter</a>
    </li>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_linkedin');?>">Linkedin</a>
    </li>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_pinsterest');?>">pInterest</a>
    </li>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_ping');?>">ping</a>
    </li>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_instagram');?>">Instagram</a>
    </li>
    <li>
        <a href="<?php echo Mage::getStoreConfig('addpeople_tab/addpeople_slinks/slinks_googleplus');?>">Googleplus</a>
    </li>
</ul>

Include layout xml file

This section explains how to include the frontend layout xml file in the magento module config file.Inside the include the following code.

 <frontend>
        <layout>
            <updates>
                <addpeople_slinks>
                    <file>addpeople_slinks.xml</file>
                </addpeople_slinks>
            </updates>
        </layout>
    </frontend>

Please click here to download the full code.

Share this Tutorial

One comment on “Develop magento module frontend layout

  1. Alex on

    Thanks for sharing this post, I was trying to add custom information to my Magento module, Through your post, I got help in this .This post helped me.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*