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.

I successfully used the same “behavior” of tabbed navigation in “front-end”, was easy at the end (always with Magento, when you get it), but I was struggling at the start. So, like my other posts, to share here’s how I used the same type of tab in Magento’s Front-end.

First thing is add the Tab’s Java-script file. You can either include by layout or in PHTML file. If you want to do from layout then,

<reference name="head">
        	 <action method="addJs"><script>mage/adminhtml/tabs.js</script></action>
</reference>

Next thing is to create Tab’s Menu inside UL & LI. Here’s the structure. (Self Explanatory)

<!-- TAB MENU STRUCTURE -->

<ul id="page_tabs">
	<!-- NORMAL TAB -->
	<li>
		<a id="normaltab" name="normaltab" class="tab-item-link" href="#"> NORMAL TAB </a>
		<!-- NOTE: class has to be tab-item-link-->

		<div id="normaltab_content"> Normal Tab HTML</div>
		<!-- NOTE: See the id of this div content it has id equal to its anchor's (<a>) id + Underscore + content -->
	</li>
	<!-- NORMAL TAB END-->

	<!-- AJAX LOADED TAB -->
	<li>
		<a id="ajaxtab" name="ajaxtab" class="tab-item-link ajax notloaded" href="http://example.com/magento/module/controller/action"> AJAX TAB </a>
		<!-- NOTE 1: class has to be tab-item-link ajax notloaded -->
		<!-- NOTE 2: Since this is Ajax Loaded Tab its Anchor should have href value = SOME URL -->

		<div id="ajaxtab_content"></div>
		<!-- NOTE 1: See the id of this div content it has id equal to its anchor's (<a>) id + Underscore + content -->
		<!-- NOTE 2: Since its innerHTML will be loaded by by Ajax you can set its innerHTML "blank" -->

	</li>
	<!-- AJAX LOADED TAB END -->
</ul>
<!-- TAB MENU STRUCTURE END -->

<!-- TAB CONTENT CONTAINER DIV-->
<div id="tabcontainer"></div>
<!-- TAB CONTENT CONTAINER DIV-->

Now its the time to use the Tabs JS included, like below.

<script>
	// Form Key Required for POST AJAX Method
	var FORM_KEY="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>";

	// Set this to false, Guess used for some other purpose in backend, not really required in frontend.
	var varienGlobalEvents=false;

	// Initiallizing Varien Tabs
	/**
	* @param 1 : UL Menu ID
	* @param 2 : Target Tab Content ID
	* @param 3 : Initially Loading Tab's Id
	* @param 4 : Don't know yet, just use as it is (LOL)
	*/

	frontend_tabsJsTabs = new varienTabs('page_tabs', 'tabcontainer', 'normaltab',[]);

</script>

Done! You must now have a functioning Tab loading by Ajax and Normal, but yes tab would look good if you add CSS to your Tabs. Here is how it works.

1. On load it first copies the tab_content div inside the Target Tab Content ID div.
2. On tabbed menu clicked it checks its class name and if it class name does not have “ajax” it simply shows the its_content div.
3. If the menu clicked has “ajax” then it checks for another class name “notloaded”. So if its ajax and notloaded it then makes an Ajax request and updates the responseText to itsid_content div and then removes the “notloaded” class name for the menu. After that it then displays the itsid_content div, hiding previous ones.
4. If you re-click the “Ajax” typed menu, it will not find “notloaded” class in its menu, then it just shows its_content div.

A good trick, I thought while doing this, using class name to restrict the Ajax call.

<script>
if (navigator.geolocation) {
 var watchID = navigator.geolocation.watchPosition(function(position) {
  do_something(position.coords.latitude, position.coords.longitude);
}
);
} else {
  alert("I'm sorry, but geolocation services are not supported by your browser.");
}

function do_something(lat,long){
alert(lat);
alert(long);
}
</script>

Remember this only works on Mozilla Firefox 3.5. I’ll later come up with using this method to plot user on Google Maps, So follow on !

 <script type="text/javascript">
     var iconBlue = new GIcon();
    iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
    iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);
    var point = new GLatLng(26.88157422515243, 86.30859375);
    function load() {
		  if (GBrowserIsCompatible()) {
			var map = new GMap2(document.getElementById("map"));
			map.setCenter(point,3);
			GEvent.addListener(map, 'click', function(overlay, point) {
			  var lati=point.lat();
			  var long=point.lng();
			  var marker= new GMarker(new GLatLng(lati, long),{draggable: false});
			  map.addOverlay(marker);
				  var infoTabs = [	new GInfoWindowTab("Lat-Tab", "<h1> Latitude:</h1><br />"+lati),	new GInfoWindowTab("Long-Tab", "<h1>Longitude</h1><br />"+long)];
			  marker.openInfoWindowTabsHtml(infoTabs);
			 });
		}
	}
  </script>

Lets focus on the #17-#26 Lines of codes. Other Lines are already described on other posts. Please see the related post link below the post.
#17: Creates a GMarker on the point where clicked on the Map.
#18: Addes the GMarker over the Map.
#19: Initiates an array of tabsinfoTabs with GInfoWindowTab function with tabname and its innerHTML as parameters.
#20: Opens the infowindow calling openInfoWindowTabsHtml function and the array of tabs as parameters.

[Download] [Demo]

TinyMCE is platform independent, javascript based editor and has a very special feature of changing the textareas into the editor’s instance. It takes lesser time then fckeditor or other editors I have used. It also has a simple look and can fit into any designs. And its pretty easy to configure too. You can download it from http://tinymce.moxiecode.com/download.php. Here is code that may help you through configuring it for minimal use.

<script language="JavaScript" type="text/javascript" src="../tinymce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
	theme : "advanced",
	mode: "exact",
	elements : "content",
	theme_advanced_toolbar_location : "top",
	theme_advanced_buttons1 : "bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,outdent,indent,separator,undo,redo",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",
	height:"350px",
	width:"600px"
});
</script>

Code #1 : Includes the tinymce files for the page.
Code #4-#14: Initiates the tinymce instance for the page.
Code#5-#6: TinyMCE has a lots of themes and mode which you can configure to exactly what you want. Let’s leave this for now. Just keep those two.
Code#7: Now here’s the tricky part. You should keep here the name/Id of the textarea on which tinyMCE is decorated. If you want many editor’s instance on the same page, just add other textarea element seperated with commas.
Code#8: Defines where the toolbar is placed. The other option is bottom.
Code#9: Defines the tools avaliable. You can put custom tools wherever you like, either on button1 or button2 or button3.
Code #12-#13: Defines the height and width of the editor.

This is just a simple set up for tinyMCE, I am looking forward to adding more on this. Catch me later.