Create Dynamic CMS Navigation For Magento Frontend

October 15, 2012  |  6 Comments  |  by Raj (MagePsycho)  |  Latest, Magento

Introduction

As you know in Magento, catalog has dynamic menu but cms doesn’t in frontend.
If you are curios about how to create dynamic menu for CMS which can either be included in left or right sidebar for all CMS pages, then you are in right place.

Steps

1. Create navigation.phtml file
Create nagivation.phtml file in folder: app/design/frontend/[your-interface]/[your-theme]/template/cms/
and add the following code:

<?php
$cmsPages = Mage::getModel('cms/page')->getCollection()
			->addStoreFilter(Mage::app()->getStore()->getId())
			->addFieldToFilter('is_active',1)
			->addFieldToFilter('identifier', array(
				array(
					'nin' => array(
							'home',
							'no-route',
							'enable-cookies',
							'empty'
						)
					)
				)
			);
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
	#cms-navigation a.active { color: red; }‚Äč
</style>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
	var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
	jQuery('#cms-navigation a').each(function(){
		if(urlRegExp.test(this.href.replace(/\/$/,''))){
			jQuery(this).addClass('active');
		}
	});
 });
</script>
<div class="block">
	<div class="block-title">
		<strong><span>CMS Navigation</span></strong>
	</div>
	<div class="block-content">
		<ul id="cms-navigation" style="padding: 10px;">
			<?php
			foreach($cmsPages as $_cms):
				$page = $_cms->getData();
				?>
				<li><a href="<?php echo $this->getBaseUrl() . $page['identifier']; ?>"><?php echo $page['title']; ?></a></li>
				<?php
			endforeach;
			?>

		</ul>
	</div>
</div>

OR
You can simply download the navigation.phtml file from [here]

2> Include CMS Navigation in Layout
Copy/paste the following XML code in your layout XML file (preferably in your theme’s local.xml file):

<cms_page_view>
	<reference name="left"><!--or right-->
		<block type="core/template" name="cms-navigation" template="cms/navigation.phtml" before="-" />
	</reference>
</cms_page_view>

This will automatically include the CMS navigation in layout file.
Notes:
Make sure you select the proper Layout template from CMS form (Design > Page Layout > Layout).
For example, in order to include CMS navigation in left column you either have to use: Layout = 2 columns with left bar or 3columns.

3> That’s all.

If you visit the CMS pages in frontend you will see navigation with all the CMS pages dynamically included with current one being highlighted (see below snapshot).
This will of course make your CMS pages look more beautiful and user friendlier.

CMS Navigation

Happy E-commerce!

Export / Import CMS pages / Static Blocks Via SSH

October 10, 2011  |  4 Comments  |  by Raj (MagePsycho)  |  Linux, Magento, Mysql

It’s really a tedious task when you have to copy all the cms pages / static blocks from your development server to the live server. If you are importing the whole database then you are lucky enough but if you are updating in already installed magento server then :(, luckily you can use the following commands via SSH:

1> Export from your development server:

mysqldump -u [username] -p[password] [database] cms_page cms_page_store cms_block cms_block_store | grep INSERT | sed 's/INSERT INTO/REPLACE INTO/' > cms-export.sql

Note: Don’t forget to add prefix to cms_* tables if you have prefixed your tables.

2> Import to your live/destination server:

mysql -u [username] -p[password] [database] < cms-export.sql

Hope this saves your time while copying cms pages & static blocks.

Let’s share if anyone has better idea.

Happy E-Commerce!!