Creating fancy FAQ page in Magento – an easier approach

November 11, 2012  |  14 Comments  |  by Raj (MagePsycho)  |  Latest, Magento

Introduction

Just keep reading this tutorial which will teach how to create a fancy FAQ with expandable/collapsible feature in an easier approach.

In short, creating a fancy FAQ section can be easily achieved in Magento by using CMS page & jQuery.

Steps

Go to Admin > CMS Pages > Add New Page and implement the following steps:
1. Add FAQ contents
Add the following content in the ‘Content’ > ‘Content’ section of CMS page:

<div class="expand_wrapper">
	<h2 class="expand_heading"><a href="#">1. WordPress Theme Development</a></h2>
	<div class="toggle_container">
		<div class="box">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>
	<h2 class="expand_heading"><a href="#">2. Magento E-commerce</a></h2>
	<div class="toggle_container">
		<div class="box">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>
	<h2 class="expand_heading"><a href="#">3. Website Development</a></h2>
	<div class="toggle_container">
		<div class="box">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>
	<h2 class="expand_heading"><a href="#">4. PHP MySql Development</a></h2>
	<div class="toggle_container">
		<div class="box">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
			<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
		</div>
	</div>
</div>

2. Inject jQuery code
Add the following xml code in ‘Design’ > ‘Layout Update XML’ field of CMS page:

<reference name="head">
	<block type="core/text" name="google.cdn.jquery">
		<action method="setText">
			<text><![CDATA[
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery(".toggle_container").slice(1).hide();//expands first FAQ content
		jQuery(".expand_heading:first").addClass("active");//add active class to first FAQ title
		jQuery("h2.expand_heading").click(function(event){
			event.preventDefault()
			jQuery(this).toggleClass("active");
			jQuery(this).next(".toggle_container").slideToggle("slow");
		});
	});
</script>

			]]></text>
		</action>
	</block>
</reference>

3. You’re done
Go to the frontend and open the FAQ page, you will see as:

FAQ Page With Expand/Collapse

Happy E-Commerce!

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!

How to find current url in Magento

May 27, 2012  |  6 Comments  |  by Raj (MagePsycho)  |  Latest, Magento

You must be wondering we can simply use:

$currentUrl = Mage::helper('core/url')->getCurrentUrl()

or

$currentUrl = Mage::getUrl('*/*/*', array('_current' => true));

in order to find the current url.

But it does’t always work as expected.
Try to use the above code in a page which has some missing css, js, images etc.(You can use Firebug in order to find such error which are so called Network error.). You will see that above code captures the url for missing file(js, css, images etc.) which is obviously not the required current url.

You can simply fix above error by using the following code:

if (!in_array(Mage::app()->getFrontController()->getAction()->getFullActionName(), array('cms_index_noRoute', 'cms_index_defaultNoRoute'))) {
	$currentUrl = Mage::helper('core/url')->getCurrentUrl();
}

Cheers!