Creating a Custom Grid on Your Magento Website
Published on 15 April 15
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
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>
<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
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>
<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
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>
<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
Blank Helper Class
<?php
class Example_Orders_Helper_Data extends Mage_Core_Helper_Abstract
{
}
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));
}
}
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
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');
}
}
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.
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));
}
}
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
Note: Don't forget to take a backup of your existing files and folders before you start creating a custom grid on Magento
This blog is listed under
Development & Implementations
and E-Commerce
Community
Related Posts:
Post a Comment
You may also be interested in
Share your perspective
Share your achievement or new finding or bring a new tech idea to life. Your IT community is waiting!