Lesson 13: Magento Grid on Frontend

Howdy friends,

Today we will continue our 3 hours of Magento Tutorial to learn about Grid on Magento Frontend. There are 4 main parts:

<layout version="0.1.0">
<default>
<!-- update layout for all frontend page -->
</default>
<lesson13_index_index>
<reference name="content">
<block type="lesson13/lesson13" name="lesson13" template="lesson13/lesson13.phtml" />
</reference>
</lesson13_index_index>
</layout> 

class Magestore_Lesson13_IndexController extends Mage_Core_Controller_Front_Action
{
/**
* index action
*/
public function indexAction()
{
$this->loadLayout();
$this->renderLayout();
}
}

class Magestore_Lesson13_Block_Lesson13 extends Mage_Core_Block_Template
{
/**
* prepare block's layout
*
* @return Magestore_Lesson13_Block_Lesson13
*/

public function __construct()
{
parent::__construct();
$collection = Mage::getModel('lesson13/lesson13')->getCollection();
$this->setCollection($collection);
}
}

3. Writing templates for grid

In this section we will go into details: How the rows and columns are shown in the grid as described above.

<!-- Page Title -->
<div class="page-title">
<h2><?php echo $this->__('Lesson13 Module Grid Template') ?></h2>
</div>
<table id="my-person-table" class="data-table">
<colgroup>
<col width="1">
<col>
<col width="1">
<col width="1">
<col>
</colgroup>
<thead>
<tr class="first last">
<th><?php echo $this->__('No.')?></th>
<th><?php echo $this->__('Name')?></th>
<th><?php echo $this->__('Birth Day')?></th>
<th><?php echo $this->__('Gender')?></th>
<th><?php echo $this->__('Address')?></th>
</tr>
</thead>
<tbody>
<?php foreach($this->getCollection() as $person): ?>
<tr>
<td><?php echo $person->getData('person_id')?></td>
<td><?php echo $person->getData('name')?></td>
<td><?php echo Mage::helper('core')->formatDate($person->getData('birthday'))?></td>
<td><?php echo $person->getData('gender')?></td>
<td><?php echo $person->getData('address')?></td>
</tr>
<?php endforeach ?>
</tbody>
</table>

An information table will be displayed in the code above. In this code, we should pay attention to this function:

Mage :: helper ('core') -> formatDate ($ person-> getData ('birthday'))

This function can convert form of date in the database according to “currently locales” of store in config setting. In addition to formatDate function, there are a lot of other functions for coverting data into standard format which are written in: app/code /core /Mage/Core /Helper/Data.php

The result will be

Currently, rows in the above table are very difficult to distinguish from each other. That’s why Magento is available to support a javascript function to differentiate the rows color. Here is the code:

<script type="text/javascript">decorateTable('my-person-table')</script>

In which ‘my-person-table’ is ID of the table.

The result will be:

4. Grid pagination

For the tables with large amount of data/rows, we need to paginate for grid.  In Magento, there is no need for great effort to calculate the number of rows, pages with normal php functions, we just need to go through some basic steps:

• Insert /app/code/core/Mage/Page/Block/Html/Pager.php to create a sub-block of block lession 13, which is already configured, and then name it (for example: lesson13_pager)

<layout version="0.1.0">
<default>
<!-- update layout for all frontend page -->
</default>
<lesson13_index_index>
<reference name="content">
<block type="lesson13/lesson13" name="lesson13" template="lesson13/lesson13.phtml" >
<block type="page/html_pager" name="lesson13_page"/>
</block>
</reference>
</lesson13_index_index>
</layout>

• Rewrite 2 function in blog: _prepareLayout() và getPagerHtml()

app/code/local/Magestore/Lesson13/Block/Lesson13.php

public function _prepareLayout()
{
parent::_prepareLayout();
$pager = $this->getLayout()->createBlock('page/html_pager', 'lesson13.pager')->setCollection($this->getCollection());
$this->setChild('pager', $pager);
return $this;
}
public function getPagerHtml()
{
return $this->getChildHtml('pager');
}

<!-- Page Title -->
<div class="page-title">
<h2><?php echo $this->__('Lesson13 Module Grid Template') ?></h2>
</div>
<?php echo $this->getPagerHtml() ?>  <!--Add Paging-->
<table id="my-person-table" class="data-table">
……
</table>
<?php echo $this->getPagerHtml() ?> <!--Add Paging-->
<script type="text/javascript">decorateTable('my-person-table')</script>