I will try to describe this issue by taking a case of changing the Magento’s login functionality to a Ajax powered login functionality. So after this you will be able to implement a login function in a pop-up div in any page, unlike the default Magento’s seperate login page. I will leave the pop-up div part to you and get started with the real business (AJAX and JSON).

Presuming that you will use Mini-Login form. Here is how you proceed.

1. Change Submit type button to Button type button.
2. Register OnClick Javascript event of that button and its Handler
3. In the Handler function call Ajax Request for login
4. Show Error Message or redirect to customer Dashboard

Your mini.login.phtml should be like this

<form action="<?php //echo $this->getPostActionUrl() ?>" id="mini-login-form" method="post">
    <fieldset>
        <p><label><?php echo $this->__('Email') ?>:</label> <input name="login[username]" class="input-text" /></p>
        <p><label><?php echo $this->__('Password') ?>:</label> <input name="login[password]" class="input-text" /></p>
        <p><input type="button" onClick="handlerFunction()" value="<?php echo $this->__('Login') ?>" /></p>
    </fieldset>
</form>

<script type="text/javascript">
<!--
function handlerFunction(){

// Write These codes only after form Validation

// Making Ajax Request
		var request = new Ajax.Request(
			//Defining Ajax Request URL, We are calling custom Controller Ns_Mylogin_AccountController Class (Defined Below)
        	'<?php echo $this->getUrl("mylogin/account/loginPost") ?>',
           	{
            	method: 'post',
                onComplete: function(transport){ // Defining Complete Callback Function

                	// Getting Ajax Response Text Which is JSON Object
                	var jsonResponse=transport.responseText;
                	//Checking JSON Objects property and performing related action
                	// You will understand the response Text format after going through the controller description (Below)
                	if(jsonResponse.error){
                		alert("Error Occured");
						return false;
                	}
                	else{
                		window.location.href=jsonResponse.url;
                	}
                },
                parameters: Form.serialize($("mini-login-form"))	// Seriallizing the form input values
        	}
        );
}
//-->
</script>

Please see inline comments for better understanding. Now our next set should be setting up our custom controller. I’ll not get into details of setting up modules and all but directly to our controller class Ns_Mylogin_AccountController. What I’ve done is just taken the core’s loginPostAction function of Mage_Customer_AccountController and added some codes there. Please see there is a comment on each line added apart from the default Magento’s core code.

<?php
require_once("Mage/Customer/controllers/AccountController.php");
class Ns_Mylogin_AccountController extends Mage_Customer_AccountController{
	/**
	 * Login post action
	 * @return JSON Object
	 */
	public function loginPostAction()
	{
		// Added Line #1
		$result["error"]=0;

		$session = $this->_getSession();

		if ($this->getRequest()->isPost()) {
			$login = $this->getRequest()->getPost('login');
			if (!empty($login['username']) &amp;&amp; !empty($login['password'])) {
				try {
					$session->login($login['username'], $login['password']);
					if ($session->getCustomer()->getIsJustConfirmed()) {
						$this->_welcomeCustomer($session->getCustomer(), true);
					}
				} catch (Mage_Core_Exception $e) {
					switch ($e->getCode()) {
						case Mage_Customer_Model_Customer::EXCEPTION_EMAIL_NOT_CONFIRMED:
							//Added Line #2
							$result["error"]=1;
							$message = Mage::helper('customer')->__('This account is not confirmed. <a href="%s">Click here</a> to resend confirmation email.', 						Mage::helper('customer')->getEmailConfirmationUrl($login['username']));
							break;
						case Mage_Customer_Model_Customer::EXCEPTION_INVALID_EMAIL_OR_PASSWORD:
							//Added Line #3
							$result["error"]=1;
							$message = $e->getMessage();
							break;
						default:
							//Added Line #4
							$result["error"]=1;
							$message = $e->getMessage();
					}
					$session->addError($message);
					$session->setUsername($login['username']);
				} catch (Exception $e) {
					// Mage::logException($e); // PA DSS violation: this exception log can disclose customer password
				}
			} else {
				//Added Line #5
				$result["error"]=1;
				$session->addError($this->__('Login and password are required'));
				//Added Line #6
				$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
			}
		}
		//Added Line #7
		$result["url"]=$this->_loginPostRedirect();
		//Added Line #8
		$this->getResponse()->setBody(Mage::helper('core')->jsonEncode($result));
	}

What I’ve done is added an array $result that will hold value if there is error or not while processing the user’s request. If there is error that array will hold $result['error']=1 else it will be as initiallized in Added Line #1. From Added Line #2 through Added Line #5, we have various condition to check for error and set our $result variable.

On Added Line #7 we have called another function (which we we rewrite as well) that will give us the url location identifying which location should be redirect after successful login. The implementation of function is given below. Finally in Added Line #8 and Line #6 we have encoded our $result array into JSON format and send as the response.

For visuallization our $result array will be one of the following.

1. Case (No Error) : $result["error"]=0; $result["url"]=”SOME Redirect URL”
2. Case (Error) : $result["error"]=1;

This JSON encoded response will be then used by the ajax call back function defined and perform related action.

Here’s the _loginPostRedirect() function which I mentioned (Added Line #7).

/**
	 * Define target URL and redirect customer after logging in
	 */
	protected function _loginPostRedirect()
	{
		$session = $this->_getSession();

		if (!$session->getBeforeAuthUrl() || $session->getBeforeAuthUrl() == Mage::getBaseUrl() ) {

			// Set default URL to redirect customer to
			$session->setBeforeAuthUrl(Mage::helper('customer')->getAccountUrl());

			// Redirect customer to the last page visited after logging in
			if ($session->isLoggedIn())
			{
				if (!Mage::getStoreConfigFlag('customer/startup/redirect_dashboard')) {
					if ($referer = $this->getRequest()->getParam(Mage_Customer_Helper_Data::REFERER_QUERY_PARAM_NAME)) {
						$referer = Mage::helper('core')->urlDecode($referer);
						if ($this->_isUrlInternal($referer)) {
							$session->setBeforeAuthUrl($referer);
						}
					}
				}
				else if ($session->getAfterAuthUrl()) {
					$session->setBeforeAuthUrl($session->getAfterAuthUrl(true));
				}
			} else {
				$session->setBeforeAuthUrl(Mage::helper('customer')->getLoginUrl());
			}
		} else if ($session->getBeforeAuthUrl() == Mage::helper('customer')->getLogoutUrl()) {
			$session->setBeforeAuthUrl(Mage::helper('customer')->getDashboardUrl());
		}
		else {
			if (!$session->getAfterAuthUrl()) {
				$session->setAfterAuthUrl($session->getBeforeAuthUrl());
			}
			if ($session->isLoggedIn()) {
				$session->setBeforeAuthUrl($session->getAfterAuthUrl(true));
			}
		}
		// Changed Here
		return $session->getBeforeAuthUrl(true);
	}

You can download the code From Here.

Hope it helps! Happy Coding.

<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>

It did not work. Yes, after adding this block it had worked before. In my case, the probable case might be that I had called the module’s template from CMS page. In other case it should work. So, I looked for work around and the following did the trick.

// Getting Messages from Session
$messages=Mage::getSingleton("customer/session")->getMessages();

// Creating Block Mage_Core_Block_Messages
// Setting Message
// echoing the Message's HTML
echo $this->getLayout()->createBlock("core/messages")->setMessages($messages)->getGroupedHtml();

The Error/Success or Notice messages are set on session. So what I did was take those message/s from the session and create a new block, same as what $this->getMessagesBlock() might have called, and set those message to the created block and echoed its HTML.

Clever? or not?

// 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!

Magento gets all the reviews and processes it accordingly, so what I did was just added limit filter to get the rescent rating only, and left the Magento default working do the rest. Tricky! huh….

Here the block that can achieve the same.

<?php
class Namespace_Comment_Block_Comment extends Mage_Review_Block_Product_View
{
	/**
	 * Get only Latest review.
	 * Only adding PageSize filter to the collection sent by the parent::getReviewsCollection(), since parent already
	 * sorts it by date.
	 */
	public function getRescentReview ()
	{
		$collection = $this->getReviewsCollection()->setPageSize(1);
		return $collection;
	}
	/**
	 * Getting Current Product's name
	 */
	public function getProductName ()
	{
		return Mage::registry("product")->getName();
	}
	/**
	 * Getting Rating summary only for the one Review (latest one)
	 */
	public function getRatingSummary ()
	{
		return Mage::getModel('rating/rating')->getReviewSummary($this->getReviewId());
	}
}

And here is the phtml file.

<?php
// Retreiving rescent comment collection's Item
$_items = $this->getRescentReview()->getItems();
?>
<?php if (count($_items)):
// Loading review with the latest comment's id
$_review=Mage::getModel("review/review")->load(array_keys($_items));
$curRat=$_review->getData('review_id');

// Setting the current Review Id to the block's Object, used in Namespace_Comment_Block_Comment line #26
$this->setReviewId($curRat);
if($curRat!=1):
?>
<div >
    <div>
        <h2><?php echo $this->__('Recente Reviews') ?></h2>
    </div>
    <h3><?php echo $this->getProductName()?></h3>
    <div class="rating-box">
        <div class="rating" style="width:<?php echo ceil($this->getRatingSummary()->getSum() / ($this->getRatingSummary()->getCount())) ?>%;"></div>
    </div>
    <div>
      <?php echo $_review->getDetail()?>
    </div>
</div>
<?php
endif;
endif;
?>

You must call this in product detail page.

--
<block type ="comment/comment" name="rescent.comment" template="comment/rescent.phtml"/>
--

By the end of this you will get the Rescent rating summary on your product detail page.

Happy Coding in Magento!!

Here’s the “magic code” for breadcrumbs to show anywhere in Magento

<?php  echo $this->getLayout()->getBlock("breadcrumbs")->toHtml()?>

Its very simple, it just gets the block breadcrumbs defined in page.xml and echoes it as html.

Happy coding!

This is the first part of series of post. I’ll discuss here how to debug layout errors. I’ll come across other technique as well, later on.

Case: If you have just added your Layout/Template and wondering why it is not working ?

First and foremost, If you have installed a new Module or Changed Layout and is not working where/how it is supposed to work, clear the cache from Admin, even if you say i have disabled the cache.

To test if your layout file say, example.xml, is actually being looked up while the page loads, first open your example.xml file and make some error on that file. The error may be invalid tag closing of XML. And then refresh your page. If XML load error is displayed then you are sure that your layout file is being referred.

If not then first see what package/theme you are using in Design and confirm if the layout is uploaded or placed in correct path.

After you are sure that layout is placed okai, then its now time to see whether your layout file is registed in config.xml of your Custom Module or not. Your layout file’s name should be set in config.xml of any module inside . Please check if your tags are correct and under correct parents. Normally layout are inside Frontend–>Layout–>Updates.

If you are through to this point, then your problem may lie in the Block defined. But before that see if you have defined correct reference name.

Later on debugging Block. The post may be listed below. Stay tuned.

It is extremely easy to add a tab and its Javascript, but comparatively difficult to make its CSS, and I won’t talk about that here . You can manage tabs in product page of Magento just through layout files. No need to work on Javascript. Just use the following xml tags inside your catalog_product_view layout.

<block type="catalog/product_view_tabs" name="product.info.tabs" as="info_tabs" template="catalog/product/view/tabs.phtml" >
                    <action method="addTab" translate="title" module="catalog"><alias>additional</alias><title>General Info</title><block>catalog/product_view_attributes</block><template>catalog/product/view/attributes.phtml</template></action>
                    <action method="addTab" translate="title" module="catalog"><alias>deliverytime</alias><title>Delivery Time</title><block>    catalog/product_view</block><template>catalog/product/view/delivery.phtml</template></action>
                    <action method="addTab" translate="title" module="catalog"><alias>printinginfo</alias><title>Printing Info</title><block>    catalog/product_view</block><template>catalog/product/view/printing_info.phtml</template></action>
<!--  4th tab -->
<action method="addTab" translate="title" module="catalog"><alias>notes</alias><title>Notes</title><block>catalog/product_view</block><template>catalog/product/view/notes.phtml</template></action>
                </block>

In the code above the fourth tab, we have called addTab method of catalog/product_view_tabs block, with the parameters alias as notes, title as Notes, block as catalog/product_view and template as catalog/product/view/notes.phtml.

After adding this in your layout, echo the following in your view.phtml file.

<?php
 echo $this->getChildHtml('product.info.tabs');
?>

After that you will see four tabbed navigation in your product view page. Easy isn’t it?

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