Tag Archives: menu

Problems, tips and tricks about Magento

Hello friends,

I am new to Magento. I find many configurations that has to be done before you make your Magento site live. So I though I should list out all important configurations at one place so that this list can also be used as checklist as well as tips and tricks for new Magento developers.

  • Install Magento on XAMPP
    Magento requires itself to be installed on a host name with at least one period ‘.’ in it, therefore installing to http://localhost doesn’t work. So, before you install it on your local machine, you should update your host file and add some domain name. For e.g. magento.local. In windows normally host file is located at C:/Windows/System32/drivers/etc/hosts location. In Linux it may be in /etc/hosts. Please refer this wiki page for more about Magento on XAMPP and WAMP. The only important section is note in that wiki page.
  • Linux/Ubuntu installation error: curl not enabled
    Please install php5-curl module. e.g. For Ubuntu “sudo apt-get install php5-curl”
  • Linux/Ubuntu installation warning: “Your web server is configured incorrectly. As a result, configuration files with sensitive information are accessible from the outside. Please contact your hosting provider.”
    To solve this issue, modify Apache site configuration from “AllowOverride None” to “AllowOverride All”
  • Installation warning: The URL “http://yourdomainname.com.local” is invalid.Response from server isn’t valid
    Domain name probably not pointing to your installation directory, try to update server host file and add your domain name to point to localhost IP.
  • Select correct time zone while you install Magento
    Please refer to this forum.
  • Use a better way to customize your site
    There are some good tips from community to turn off some Magento blocks here. Please go through that. I’d also like to refer this blog post. This will help you a lot.
  • Changing default logo and other important settings
    There is another nice wiki page here, that will some good points while you customize your Magento site.
  • Fix about Magento Admin notification issue
    It has been solved in Latest Magento version 1.7, but if you have previous versions you’ll notice an issue described in this forum.
  • Setting up cron
    To set up cron please refer this Magento wiki page. Ideally you should set cron to run every 5 minutes.
  • Make sure SEO is enabled
    To check it, go to System -> Configuration -> General -> web -> Search Engine Optimization
  • Make cron settings for currency conversion rate
    I was having a case where currency was listed in Magento but I was not able to get the conversion rate. Please refer this wiki page.
  • Setting up log cleaning
    By default log cleaning is not enabled, so you must need to configure it, other wise your database will grow surprisingly.
    To configure it, go to System -> Configuration -> Advanced -> System -> Open Log cleaning section. Please note that, this will be triggered by Magento cron job, so you must have to configure cron job for Magento. Please read more about log cleaning in this blog post.
  • Upgrading Magento to higher version
    Go to System -> Magento connect -> Magento connect manager. login with admin credentials. Then, go to section with name “Manage Existing Extensions” and click the button that says “Check for Upgrades”. To upgrade all Magento core extensions, just select “Mage_All_Latest” and select the upgrade action (only available if new version is available) and then click on commit changes button. Similarly your can also upgrade any other extension that you installed on your website.
  • Add CMS page links to top navigation
    Please refer to my previous post.
  • Moving Magento from One server to another
    This wiki page covers two methods to migrate Magento site from one server to another. From my point of view second method is more appropriate. Here are the steps that you can perform.

    1. Take back up of database and website files.
    2. Export data from old MySQL server
    3. Create new database on new server and import data that we’ve downloaded from old server.
    4. Table core_config_data has rows that need to be changed and updated with the new url.
      path:                       value:
      web/unsecure/base_url       http://[you_domain_here]/
      web/secure/base_url         https://[your_secure_domain_here]/
    5. Download all files from old server and upload it to new server
    6. Delete /var/cache and /var/session directory
    7. Modify /app/etc/local.xml file to update new database information
    8. Make sure that /var and /media should have read/write permission with recursive
    9. All is done! Now browse the new server
  • Add currency dropdown on top of the page
    Modify your local.xml file and add following code between the default tag:

     <reference name="header">
    <block type="directory/currency" name="store_currency_selector" as="store_currency_selector" before="top.menu" template="directory/currency.phtml"/>
  • Change three column layout to two column layout and update grid column count
    Modify your local.xml file and it should contains tags shown as bellow:
  •  <?xml version="1.0"?>
    <layout version="0.1.0">
    <reference name="root">
    <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
    <reference name="product_list">
    <action method="setColumnCount">
    <reference name="product_list">
    <action method="setColumnCount">
    <reference name="root">
    <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
    <reference name="search_result_list">
    <action method="setColumnCount">
  • Add Facebook, twitter, Google plus buttons
    AddThis simplifies social sharing. You can get the Magento extension for AddThis from here.
  • Remove Email to friend link
    Go to System -> Configuration -> Catalog -> Email to a Friend -> Email templates -> Change Enabled to No
  • Add Banner slider
    Banner slider is a well known tool that you can use. To solve the issue of adding new slider image, please refer to this forum post.
  • User your SMTP server to send emails
    This extension will help you if your localhost is not allowed to send emails and even if you want different SMTP server.
  • 404 Page not found error when using newly installed extension
    logoff and login will solve that issue.
  • Email sending issue
    If you get an error like “Warning: Illegal offset type  in /lib/Zend/Mail.php on line 574”, Please refer to this and this post.
  • Solve issue of Service Temporarily Unavailable Magento
    Refer to this page.

Adding CMS page links to top navigation in Magento

Hello friends,

I had a site running on magento 1.6.2 CE.

To add a menu item, first of all you need to find out where it is added into template file.

Following file is rendering categories as a menu on top navigation


Basically you need to modify this file and add links in list.

To make the changes upgrade proof, you should copy this file and paste it in your template directory

e.g. app/design/frontend/default/YourThemeName/template/catalog/navigation/top.phtml

Now you add a link as follow:

<!--?php $_menu = $this--->renderCategoriesMenuHtml(0,'level-top') ?>
<!--?php if($_menu): ?--></pre>
<div class="nav-container">
<ul id="nav">
	<li><a href="/">Home</a></li>
	<li><!--?php echo $_menu ?--></li>
<!--?php endif ?-->

But this way you will need to modify file each and every time when you want to modify links. So it is better to load a static CMS block. To do so, render two CMS block as shown bellow:

<!--?php if($_menu): ?--></pre>
<div class="nav-container">

<!--?php endif ?-->

Now create those two CMS blocks in CMS -> Static Block -> Add New Block

Block identifier: navbar_links1

	<li><a href="{{store url=">Home</a></li>
	<li><a href="{{store url=">Introduction</a></li>

Similarly create another block for navbar_links2. Please Note that, when you edit them, HTML editor automatically adds

    tag surrounding it. You should remove it when ever you edit blocks.

Above trick was working perfectly until I upgrade my site to Magento Community addition 1.7.

I take a look around page.xml layout, and I noticed that, now magento is rendering menu from the following template file:


So in order to work our trick, you need to modify above file by the way did it before.

First copy that file to following location:


Make the same changes as we did it in top.phtml (show in listing no 2). Delete our old modified file app/design/frontend/default/YourThemeName/template/catalog/navigation/top.phtml as we don’t need it now. Flush the cache and you are done!

Your menu links will be back!

Create an Ext.tree.TreePanel from an XML document


Recently I created menu manager with Ext JS components.
First I loaded tree from XML documents, But then I realize JSON will be very much easy. Still if you think that XML document is perfect for you then here is my work.

On fly I’m just providing html page and xml file, so if you have any doubts or questions then you can place comment bellow.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
			Manage Menu 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="http://dev.sencha.com/deploy/ext-3.4.0/resources/css/ext-all.css" rel="stylesheet"/>
		<script src="http://dev.sencha.com/deploy/ext-3.4.0/adapter/ext/ext-base.js"></script>
		<script src="http://dev.sencha.com/deploy/ext-3.4.0/ext-all.js"></script>
		<link href="http://dev.sencha.com/deploy/ext-3.4.0/examples/tree/xml-tree-loader.css"/>
		<script src="http://dev.sencha.com/deploy/ext-3.4.0/examples/ux/XmlTreeLoader.js"></script>
			//Excellent function that converts tree data into json
			function getJson(treeNode) {
				var json = {};
				var attributes = treeNode.attributes;
				for(var item in attributes){
					if (item == 'src' || item == 'text' || item == 'allowDrop' || item == 'allowDrag') { //get only required attributes
						json[item] = attributes[item];
				json.children = [];
				if(treeNode.childNodes.length > 0){
					for (var i=0; i < treeNode.childNodes.length; i++) {
					json.leaf = false;
				} else {
					json.leaf = true;
				return json;
			// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
			Ext.app.CustomTreeLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
				processAttributes : function(attr){
					// Set the node text that will show in the tree since our raw data does not include a text attribute:
					attr.text = attr.title;
					if(attr.src == 'javascript:void(0);'){ // Does the node has child?
						// Override these values for our folder nodes because we are loading all data at once.  If we were
						// loading each node asynchronously (the default) we would not want to do this:
						attr.loaded = true;
						attr.expanded = true;
					else { // is it a leaf node?
						// Tell the tree this is a leaf node.  This could also be passed as an attribute in the original XML,
						// but this example demonstrates that you can control this even when you cannot dictate the format of
						// the incoming source XML:
						attr.leaf = true;
				requestMethod: 'GET'
				new Ext.Panel({
					title: 'Menu',
					renderTo: 'menuTree',
					layout: 'border',
					width: 500,
					height: 500,
					items: [{
						xtype: 'treepanel',
						id: 'tree-panel',
						region: 'center',
						margins: '2 2 0 2',
						autoScroll: true,
						rootVisible: false,
						enableDD: true,
						viewConfig: {
				            plugins: [{
				                ptype: 'treeviewdragdrop'
						root: new Ext.tree.AsyncTreeNode(),
							loader: new Ext.app.CustomTreeLoader({
								dataUrl:'menu.xml'  //load your xml file
							listeners: {
								'render': function(tp){
								tp.getSelectionModel().on('selectionchange', function(tree, node){
									var el = Ext.getCmp('details-panel').body;
									tpl.overwrite(el, node.attributes);
			function savechanges(){
				var myTree = Ext.getCmp('tree-panel');
				var json = getJson(myTree.getRootNode());
				console.log(Ext.encode(json.children)); //serialize json data into string so we can send back to server
		<div id="menuTree"></div>

Sample XML file…

<?xml version="1.0" encoding="UTF-8"?>
<menu src="root" title="root" id="0">
	<!-- Home -->
	<menu src="/page.htm2" title="Home"></menu>
	<menu title="Clients" src="javascript:void(0);">
		<menu src="/page1.html" title="Bank Management"></menu>
		<menu src="/page2.html" title="Client Management"></menu>
		<menu src="javascript:void(0);" title="Updates">
			<menu src="/page2.html" title="View Updates"></menu>
			<menu src="/page3.html" title="Report Bug"></menu>
	<!--  Ends -->

I used third party control, that extends the XMLLoader for processing XML attributes…

In the Next post, I’ll show you how we can use JSON for easy storage and loading into tree. I’ll also post add/edit/delete/drag & drop/restriction etc.