MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

Creating a Custom Grid on Your Magento Website

Published on 15 April 15
719
0
2
There is a default grid for product display available with Magento store. What if you want to customize the grid and create a new layout, with some add-ons? Is it possible? Yes, of course you can create a custom grid, provided you can code your way into it.

Here is how coding will get you to deliver a custom grid for the e-Store

Let's say you want to change the grid layout for your orders grid.

Let's begin with creating a new module

Creating a Module

The new module will be called example_orders.xml

Here is the code to create the new module

<?xml version="1.0"?>
<config>
<modules>
<Example_Orders>
<active>true</active>
<codePool>community</codePool>
</Example_Orders>
</modules>
</config>
Creating a New Folder
Once you have created a new module, it is time to create a new folder where you can create folders like block, controller, helper and other such elements.

Go to App>Code>Community>Example>Orders

Here you can create sub-folders like controller, helper, block etc.

Create Config.xml

The etc folder that you have created in the previous step is where you will store the config.xml file
<?xml version="1.0"?>
<config>
<modules>
<Example_Orders>
<version>0.0.0.1</version>
</Example_Orders>
</modules>

<global>
<models>
<Example_Orders>
<class>Example_Orders_Model</class>
<resourceModel>Example_Orders_resource</resourceModel>
</Example_Orders>
</models>

<resources>
<Example_Orders_setup>
<setup>
<module>Example_Orders</module>
</setup>
</Example_Orders_setup>
</resources>

<blocks>
<Example_Orders>
<class>Example_Orders_Block</class>
</Example_Orders>
</blocks>
<helpers>
<Example_Orders>
<class>Example_Orders_Helper</class>
</Example_Orders>
</helpers>
</global>
<admin>
<routers>
<adminhtml>
<args>
<modules>
<Example_Orders before="Mage_Adminhtml">Example_Orders_Adminhtml</Example_Orders>
</modules>
</args>
</adminhtml>
</routers>
</admin>
</config>
Adminhtml.xml Folder
You will need to create the adminhtml.xml folder configuring it inside the etc folder.

This folder will link the orders page located in the admin panel of your store
<?xml version="1.0"?>
<config>
<menu>
<sales>
<children>
<Example_Orders translate="title" module="Example_Orders">
<sort_order>10</sort_order>
<title>Orders - Example</title>
<action>adminhtml/order/</action>
</Example_Orders>
</children>
</sales>
</menu>
</config>
Once this is done, you will need to create a blank helper class and a controller grid to further actions

Blank Helper Class
<?php

class Example_Orders_Helper_Data extends Mage_Core_Helper_Abstract

{

}
Controller
<?php

class Example_Orders_Adminhtml_OrderController extends Mage_Adminhtml_Controller_Action

{
public function indexAction()
{
$this->_title($this->__('Sales'))->_title($this->__(âOrders Example'));
$this->loadLayout();
$this->_setActiveMenu('sales/sales');
$this->_addContent($this->getLayout()->createBlock('Example_Orders/adminhtml_sales_order'));
$this->renderLayout();
}
public function gridAction()
{
$this->loadLayout();
$this->getResponse()->setBody(
$this->getLayout()->createBlock('Example_Orders/adminhtml_sales_order_grid')->toHtml()
);
}
public function exportExampleCsvAction()
{
$fileName = 'orders_Example.csv';
$grid = $this->getLayout()->createBlock('Example_Orders/adminhtml_sales_order_grid');
$this->_prepareDownloadResponse($fileName, $grid->getCsvFile());
}

public function exportExampleExcelAction()
{
$fileName = 'orders_Example.xml';
$grid = $this->getLayout()->createBlock('Example_Orders/adminhtml_sales_order_grid');
$this->_prepareDownloadResponse($fileName, $grid->getExcelFile($fileName));
}
}
Create Grid Controller

Go to Block>Adminhtml>Sales>Order.php

Create the grid controller in this file using the code given below
<?php

Class Example_Orders_Block_Adminhtml_Sales_Order extends

Mage_Adminhtml_Block_Widget_Grid_Container
{
public function __construct()
{
$this->_blockGroup = 'Example_Orders';
$this->_controller = 'adminhtml_sales_order';
$this->_headerText = Mage::helper('Example_Orders')->__('Orders - Example');

parent::__construct();
$this->_removeButton('add');
}
}
Create the Grid Class
Now that you are ready with the controller, you can create the grid class for orders module

Define all the headings that you want in the custom grid as per the code below. This is an example of how the orders grid layout can be customized as per the requirement. You can easily add or remove the headings.
<?php

class Example_Orders_Block_Adminhtml_Sales_Order_Grid extends
Mage_Adminhtml_Block_Widget_Grid
{
public function __construct()
{
parent::__construct();
$this->setId('Example_order_grid');
$this->setDefaultSort('increment_id');
$this->setDefaultDir('DESC');
$this->setSaveParametersInSession(true);
$this->setUseAjax(true);
}

protected function _prepareCollection()
{
$collection = Mage::getResourceModel('sales/order_collection')
->join(array('a' => 'sales/order_address'), 'main_table.entity_id = a.parent_id AND a.address_type != \'billing\'', array(
'city' => 'city',
'country_id' => 'country_id'
))
->join(array('c' => 'customer/customer_group'), 'main_table.customer_group_id =
c.customer_group_id', array(
'customer_group_code' => 'customer_group_code'
))
->addExpressionFieldToSelect(
'fullname',
'CONCAT({{customer_firstname}}, \' \', {{customer_lastname}})',
array('customer_firstname' => 'main_table.customer_firstname', 'customer_lastname' => 'main_table.customer_lastname'))
->addExpressionFieldToSelect(
'products',
'(SELECT GROUP_CONCAT(\' \', x.name)
FROM sales_flat_order_item x
WHERE {{entity_id}} = x.order_id
AND x.product_type != \'configurable\')',
array('entity_id' => 'main_table.entity_id')
)
;

$this->setCollection($collection);
parent::_prepareCollection();
return $this;
}

protected function _prepareColumns()
{
$helper = Mage::helper('Example_Orders');
$currency = (string)
Mage::getStoreConfig(Mage_Directory_Model_Currency::XML_PATH_CURRENCY_BASE);

$this->addColumn('increment_id', array(
'header' => $helper->__('Order #'),
'index' => 'increment_id'
));

$this->addColumn('purchased_on', array(
'header' => $helper->__('Purchased On'),
'type' => 'datetime',
'index' => 'created_at'
));

$this->addColumn('products', array(
'header' => $helper->__('Products Purchased'),
'index' => 'products',
'filter_index' => '(SELECT GROUP_CONCAT(\' \', x.name) FROM sales_flat_order_item x WHERE main_table.entity_id = x.order_id AND x.product_type != \'configurable\')'
));

$this->addColumn('fullname', array(
'header' => $helper->__('Name'),
'index' => 'fullname',
'filter_index' => 'CONCAT(customer_firstname, \' \', customer_lastname)'
));

$this->addColumn('city', array(
'header' => $helper->__('City'),
'index' => 'city'
));

$this->addColumn('country', array(
'header' => $helper->__('Country'),
'index' => 'country_id',
'renderer' => 'adminhtml/widget_grid_column_renderer_country'
));

$this->addColumn('customer_group', array(
'header' => $helper->__('Customer Group'),
'index' => 'customer_group_code'
));

$this->addColumn('grand_total', array(
'header' => $helper->__('Grand Total'),
'index' => 'grand_total',
'type' => 'currency',
'currency_code' => $currency
));

$this->addColumn('shipping_method', array(
'header' => $helper->__('Shipping Method'),
'index' => 'shipping_description'
));

$this->addColumn('order_status', array(
'header' => $helper->__('Status'),
'index' => 'status',
'type' => 'options',
'options' => Mage::getSingleton('sales/order_config')->getStatuses(),
));

$this->addExportType('*/*/exportExampleCsv', $helper->__('CSV'));
$this->addExportType('*/*/exportExampleExcel', $helper->__('Excel XML'));

return parent::_prepareColumns();
}

public function getGridUrl()
{
return $this->getUrl('*/*/grid', array('_current'=>true));
}
}
You can easily access the custom grid by visiting the admin panel and navigating to Sales>Orders-Example

Note: Don't forget to take a backup of your existing files and folders before you start creating a custom grid on Magento



































































































































































































































































































There is a default grid for product display available with Magento store. What if you want to customize the grid and create a new layout, with some add-ons? Is it possible? Yes, of course you can create a custom grid, provided you can code your way into it.

Here is how coding will get you to deliver a custom grid for the e-Store

Let's say you want to change the grid layout for your orders grid.

Let's begin with creating a new module

Creating a Module

The new module will be called example_orders.xml

Here is the code to create the new module

true
community

Creating a New Folder
Once you have created a new module, it is time to create a new folder where you can create folders like block, controller, helper and other such elements.

Go to App>Code>Community>Example>Orders

Here you can create sub-folders like controller, helper, block etc.

Create Config.xml

The etc folder that you have created in the previous step is where you will store the config.xml file

0.0.0.1

Example_Orders_Model
Example_Orders_resource

Example_Orders

Example_Orders_Block

Example_Orders_Helper

Example_Orders_Adminhtml

Adminhtml.xml Folder
You will need to create the adminhtml.xml folder configuring it inside the etc folder.

This folder will link the orders page located in the admin panel of your store

10
Orders - Example
adminhtml/order/

Once this is done, you will need to create a blank helper class and a controller grid to further actions

Blank Helper Class

This blog is listed under Development & Implementations and E-Commerce Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top