How to? Customize backend template (F.e. Sales order information)

Last modified by naturalcrusader on Mon, August 29, 2011 13:24
Source|Old Revisions  

This is an old revision of the document!

This ‘how to’ has been deprecated [AS OF VERSION?]. The information in this ‘how to’ is not valid for the current version of Magento [List what the current version is] . [ ADD which revisions article is applicable to]

This how to explains by a short example how developers can customize backend templates by overloading a block.

Scenario: We have collected additional data during the checkout process and saved them into the order. Now we want to display these datas within the order overview in backend.

The block displaying order data is located in app/code/core/Mage/Adminhtml/Block/Sales/Order/View/Info.php. If we take a look at this class we see following code setting the template:

  1. protected function _construct()
  2. {
  3.    $this->setTemplate('sales/order/view/info.phtml');
  4. }

Easiest way to change template would be to change code of info.phtml. But we should protect our code from being overwritten by Magento updates. The solution? Overloading the block.

1st Step: We create our own extension

2nd Step We create our own block. For example: Mymodule/Block/Sales/Order/View/Info.php

  1. class Mage_Mymodule_Block_Sales_Order_View_Info extends Mage_Adminhtml_Block_Sales_Order_View_Info
  2. {
  3.     protected function _construct()
  4.     {
  5.         $this->setTemplate('mymodule/sales/order/view/info.phtml');
  6.     }     
  7. }

3rd Step We create our own .phtml file in design/adminhtml/default/default/template/mymodule/sales/order/view/info.phtml and customize it.

4th Step Overload Mage_Adminhtml_Block_Sales_Order_View_Info with own block out of own module. We add to config.xml within <default> node:

  1. <blocks>
  2.             <adminhtml>
  3.                 <rewrite>
  4.                     <sales_order_view_info>Mage_Mymodule_Block_Sales_Order_View_Info</sales_order_view_info>
  5.                 </rewrite>
  6.             </adminhtml>
  7.         </blocks>

This example assumes you want to edit the order view page

  • Create a standard custom module.
  • Create a Block with the _toHtml() returning the html with javascript similar to this:
  1. public function _toHtml()
  2. {
  3.         $str = '<script type="text/javascript">';
  4.         $str .= 'var mystr = "';
  5.         $str .= '<tr><td class="label"><label>';
  6.         $str .= Mage::helper('sales')->__("Order Flag Notes");
  7.         $str .= '</label></td><td class="value"><strong>';
  8.         $str .= $this->_note;
  9.         $str .= '</strong></td></tr>";';
  10.         $str .= "$$('table.form-list')[0].insert({bottom: mystr});</script>";
  11.         return $str;
  12. }
//you can add in a document observer to make sure it runs after the page finishes loading//
  • Create your observer and listen to something like adminhtml_block_html_before
  add something similar to your observer function:
  1. public function order_view($observer)
  2. {
  3.         $template = $observer->getBlock()->getTemplate();
  4.         if($template == 'sales/order/view/info.phtml'): // make sure its the template you want
  5.             $block = $observer->getEvent()->getBlock->getLayout()
  6.                      ->createBlock('orderscreening/js')
  7.                      ->setNote($block->getOrder()->getOrderFlagNotes());
  8.             Mage::getSingleton('core/layout')->getBlock('content')
  9.                      ->append($block);
  10.         endif;
  11. }

The code will find the first table (happens to be the left side at the top) and add the label and value of the notes into it, the javascript is appended to content and runs immediately.