01 Jun 2017
Use Of Colors In Magento Admin Sales Order Grid
The Magento is a platform that scales up with your business. With a dedicated server (or decent cloud configuration) there should be no problem adding 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 task for the admin users.
The Magento admin panel is a simple one with necessary feature. However the UI/UX shall be improved for different pages based on the business and process needs.
Here we are providing steps to list the order with different background color based on the order status. This will help the admin user to identify the different status of the orders instantly. Mainly it prevent from missing an order to process for 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 editor 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
jsmage/adminhtml/grid.js
jscolors/adminhtml/grid.js
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.,
Share this Article on
Tags: magento, admin, sales, orders,
RELATED POSTS