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!

How to convert an array to a collection object in magento?

November 6, 2012  |  2 Comments  |  by Raj (MagePsycho)  |  Latest, Magento

Scenario

Suppose say we have an array of data fetched from database.
And we want to merge it with Magento collection object or want to provide the data as collection object to the view(template) file.

Solution

<?php
$resource		= Mage::getModel('core/resource');
$connection		= $resource->getConnection('core_read');
$sql			= "SELECT * FROM custom_table WHERE some_field = ?";
$rows			= $connection->fetchAll($sql, array($someFieldValue));//this row will return an array

$collection = new Varien_Db_Collection();
foreach($rows as $row){
	$rowObj = new Varien_Object();
	$rowObj->setData($row);
	$collection->addItem($rowObj);
}

//now you can get the data using collection way
foreach($collection as $_data){
	print_r($_data->getData());
}

Notes:
In order to create a collection object
1> Create an instance of Varien_Db_Collection

$collection = new Varien_Db_Collection();

2> Create an instance of Varien_Object and set the array of data

$rowObj = new Varien_Object();
$rowObj->setData($row);

3> Finally add the Varien_Object to Collection instance

$collection->addItem($rowObj);

Now you can play with the magic getters and setters of collection class.

In order to have depth knowledge on Magento Collection you can refer to the Alan Storm’s article:
Varien Data Collections