Use Of Colors In Magento Admin Sales Order Grid

Magento is a platform that scales up with your business. With a dedicated server (or decent cloud configuration) there should be no problem adding a virtually unlimited number of products on your site with network traffic ranging from 10,000 to 100,000 visits a month. As Magento is used for more serious online shops which has potential to receive more orders and hence the order processing is one of the high priority tasks for the admin users.

The Magento admin panel is not a complicated one and comes with the necessary features. However, the UI/UX can be improved for different pages based on the business and process needs.

Here we are providing steps to list the order with different background colour based on the order status. This will help the admin user to identify the different status of the orders instantly. Mainly it prevents from missing an order to process for a longer time, as the human eye shall miss the text-based status.

This is a working code, running successfully with our live projects. Please follow the below steps to achieve.

Step 1: Using your file explorer copy file grid.js from js/mage/adminhtml/ and paste to js/colors/adminhtml/

Step 2: Open the newly copied file i.e., js/colors/adminhtml/grid.js using your code editors such as Notepad or Sub Lime

Step 3: Search for the function reload : function(url), which needs to be inserted with colorize(); after line 208, before the line containing “}.bind(this)) add:”

Step 4: After inserting the colorize() function, at end of file, add code as

function colorize () {
    $$('td').each(function(macguffin) {
	if(macguffin.innerHTML.strip()=="Processing") macguffin.parentNode.setStyle({backgroundColor: 'Orange' });

        if(macguffin.innerHTML.strip()=="Pending") macguffin.parentNode.setStyle({backgroundColor: 'Gold', color:'Black' });

        if(macguffin.innerHTML.strip()=="Payment Review") macguffin.parentNode.setStyle({backgroundColor: 'LightPink' });

        if((macguffin.innerHTML.strip()=="On Hold")||(macguffin.innerHTML.strip()=="Payment Review")) macguffin.parentNode.setStyle({backgroundColor: 'HotPink' });

        if(macguffin.innerHTML.strip()=="Suspected Fraud") macguffin.parentNode.setStyle({backgroundColor: 'Red' });

        if((macguffin.innerHTML.strip()=="Closed")||(macguffin.innerHTML.strip()=="Canceled")||(macguffin.innerHTML.strip()=="Cancelled")) macguffin.parentNode.setStyle({backgroundColor: 'LightBlue', fontStyle: 'italic' });

        if(macguffin.innerHTML.strip()=="Complete") macguffin.parentNode.setStyle({backgroundColor: 'Green' });
  });
}
document.observe("dom:loaded", colorize);

Step 5 : Now create or edit the local.xml file at app/design/adminhtml/default/default/layout/, and add/insert the below code

<?xml version="1.0"?>
<layout version="0.1.0">
  <default>
    <reference name="head">
        <action method="removeItem"><type>js</type><name>mage/adminhtml/grid.js</name></action>
        <action method="addItem"><type>js</type><name>colors/adminhtml/grid.js</name></action> 
    </reference>
  </default>
</layout>

Step 6 : Now you shall clear the cache and refresh the admin’s order list page, which will have different colors based on order status. Similarly the same functionality / code shall be extended to achieve different colors for other attributes such as Payment method, Shipment method, Customer group, etc.,