I. INTRODUCTION 1. Time: 3 hours 2. Content
Introduction to Grid Magento Process to create a Magento grid Writing Grid template
Grid pagination II. CONTENT
1. Introduction to Magento Grid
Here is an example of grid, which is a page displaying a list of orders when you sign in a Magento account
In order to create a Magento grid, you can try to get the data and display it in a common PHP table. However, it takes you a lot of time and effort to configure the template as well as
136
pagination. This lesson will briefly introduce how to create a standard grid with available support from Magento.
For example, after installing Magento and creating a new module named Lesson13, we build a database table (table lesson13) with the fields: person_id, name, birthday, gender, and address with the following information (in phpMyAdmin)
Model corresponding to this table is Lesson13/Model/Lesson13.php
Note: Methods to configure Model and database were introduced in Lesson 5. 2. Process to create a frontend grid
As mentioned in Lesson12, it takes four steps to build a template in frontend:
Step 1: Create a layout for action index: app/design/frontend/default/default/lesson13.xml <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>
Step 2: Create controller/Action: indexAction() in file
137
class Magestore_Lesson13_IndexController extends Mage_Core_Controller_Front_Action
{
/**
* index action */
public function indexAction()
{
$this->loadLayout();
$this->renderLayout();
} }
Step 3: Create Block Lesson 13 in file
app/code/local/Magestore/Lesson13/Block/Lesson13.php
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);
} }
Step 4: Create file template
app/design/frontend/default/default/template/lesson13/lesson13.phtml
File template will display all HTML paragraphs we want to show out in frontend. 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>
138 <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 is as follow:
Currently, rows in the above table are very difficult to distinguish from each other. That is why Magento is available to support a JavaScript function to differentiate the rows color. Here is the code:
139
<<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 lesson 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 two functions in block: prepareLayout() and getPagerHtml()
app/code/local/Magestore/Lesson13/Block/Lesson13.php public function _prepareLayout()
{
140
$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');
}
Add paging to template file
app/design/frontend/default/default/template/lesson13/lesson13.phtml
<!-- 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> The result is as follow:
III. SUMMARY AND REFERENCES So, after learning this lesson, we know:
Grid in Magento
How to create a simple Grid Grid pagination
You are recommended to read more about this topic in: Lesson 11: Magento Configuration
141
Lesson 12: Layout and Template on Magento Frontend Back to top
142