Suppose you want to list 5 recent post made under “news” category identifier. Here’s how you can do it easily, of course you have to install the module first. The Module can be currently downloaded from Here, and will be soon available in Magento Connect as well.

<reference name="right">
	<block type="sbloghelper/helper" name="news.list">
		<action method="addCategoryIdentifier">
			<identifier>news</identifier>
		</action>
		<action method="addListSize">
			<size>5</size>
		</action>
	</block>
</reference>

Simple isn’t it? You can place similar kind of code in layout out to list other post categorically. Hope this helps to someone. Please do post your feedbacks.

Frontend Screen Shots

// Directly in the PHTML where you want to show the block
<?php
echo $this->getLayout()->createBlock("module/block")->setTemplate("module/page.phtml")->toHtml();
?>

What we have actually done is just load the layout and create an instance of a block class defined inside its paramerter, then assigned a template to the block and finally echoed as html. Simple! The code above will be equivalent to what we do as following in layout and in template file.

// In layout
<block type="module/block" name="module.name" template="module/page.html"/>

<?php
// In parent PHTML
$this->getChildHtml("module.name");
?>

May be helpful!

Controller: The url on which Ajax will work on, or the request URL. You will have to set up the controller with its frontend router set in config.xml and its corresponding controller class.
Layout: Layout to handle the requested URL and return HTML if required.
Block: The block to call through layout for the above controller.

Now lets be descriptive.

If you want to show a loader while request is being processed just add the following whereever you like in the phtml page.First fetch the Javascript.

<script src="<?php echo $this->getJsUrl() ?>mage/adminhtml/loader.js" type="text/javascript"></script>

Then echo the loader which pops up. This loader will be similar to that of the admin.

<div id="loadingmask" style="display: none;">
<div class="loader" id="loading-mask-loader"><img src="<?php echo str_replace("index.php/","",$this->getUrl()) ?>skin/adminhtml/default/default/images/ajax-loader-tr.gif" alt="<?php echo $this->__('Loading...') ?>"/><?php echo $this->__('Loading...') ?></div>
<div id="loading-mask"></div>
</div>

Now to Call Ajax, use the following lines

/*Please note that the URL is created in reloadurl. Also see that the response text will be echoed in div with id=output-div*/

var reloadurl = '<?php echo $this->getUrl('router/controller/action') ?>';
Element.show('loadingmask');
new Ajax.Request(reloadurl, {
method: 'post',
parameters: "Params_Here",
onComplete: function(transport) {
Element.hide('loadingmask');
$('output-div').innerHTML = "";
$('output-div').innerHTML = transport.responseText;

}
});

After the Ajax Request is made it goes to your controller’s action, which in turn sees to your layout as follows:

class Namespace_module_frontendController extends Mage_Core_Controller_Front_Action
{
public function actionAction(){
$this->loadLayout()->renderLayout();
}
}

And here is the main part in layout where I spent most of my time in. Since in layout we will have to define reference where the html will echo (Most of the times), i got stuck here, because i need to echo the output on the div with id output-div not in any reference.And the trick is to name the layout as root and output as html. Like the following:

<module_controller_action>
<block type="module/block"  name="root" output="toHtml"  template="module/template.phtml"/>
</module_controller_action>

You are done now! What ever you write or echo in phtml file you will see populated in the DIV. Now you can treat block as normally as you do before.

Happy Coding!!