How to add custom fields in checkout page in magento

We will see in this blog to add a custom field in any of the Magento checkout page steps. I have demonstrated to add one field in the billing step. You should have good knowledge of developing modules in Magento.

Step1: Adding HTML This is the most simple step.

We will have to add a text field to the billing.phtml file. For magento 1.6(-) the file to edit is checkout/onepage/billing.phtml and for magento 1.6(+) you need to edit file persistent/checkout/onepage/billing.phtml. Open the phtml file, find the code

<? php if ($this->canShip()): ?>

and just above the line add this

<li class="fields">
	<div class="field">
		<label for="billing:ssn" class="required"><em>*</em><? php echo $this->__('SSN') ?></label>
		<div class="input-box">
			<input type="text" name="custom[ssn]" value="<? php echo $this->htmlEscape($this->getQuote()->getSsn()) ?>" title="<? php echo $this->__('SSN') ?>" class="input-text required-entry" id="billing:ssn" />
		</div>
	</div>
</li>

So, as you can see we are simply adding a text with name as custom[ssn] and value as $this->getQuote()->getSsn(); You will see the field in the Billing step on the checkout page. The same way you can add the field in any step.

Step2: Save the field in Quote and Order Tables

Now to save this field in the quote object and in the database, please follow the below steps. First I will create a database table “sales_quote_custom” and for that put the following SLQ code in your modules.

<? php
$installer = $this;
$installer->startSetup();
$installer->run("
CREATE TABLE IF NOT EXISTS {$this->getTable('sales_quote_custom')} (
  `id` int(11) unsigned NOT NULL auto_increment,
  `quote_id` int(11) unsigned NOT NULL,
  `key` varchar(255) NOT NULL,
  `value` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
CREATE TABLE IF NOT EXISTS {$this->getTable('sales_order_custom')} (
  `id` int(11) unsigned NOT NULL auto_increment,
  `order_id` int(11) unsigned NOT NULL,
  `key` varchar(255) NOT NULL,
  `value` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
");
$installer->endSetup();

We have created two tables here; one is for quote and other for order. You can confirm in PHPMyadmin that these tables have been created. Now we have to write event observers to capture quote save and load events and for that please open the your modules config.xml file and inside the tag put in

<events>
         <sales_quote_save_before> 
             <observers>
                       <save_before>
                        <type>singleton</type>
                        <class>Icorethink_Custom_Model_Observer</class> 
                        <method>saveQuoteBefore</method> 
                      </save_before>
            </observers>
          </sales_quote_save_before>
          <sales_quote_save_after> 
             <observers>
                       <save_after>
                            <type>singleton</type>
                            <class>Icorethink_Custom_Model_Observer</class>
                            <method>saveQuoteAfter</method>
                      </save_after>
            </observers>
          </sales_quote_save_after>
          <sales_quote_load_after> 
                <observers>
                    <load_after>
                            <type>singleton</type>
                            <class>Icorethink_Custom_Model_Observer</class> 
                            <method>loadQuoteAfter</method> 
                     </load_after>
                 </observers>
          </sales_quote_load_after>
          <sales_model_service_quote_submit_after> 
                <observers>
                    <sales_model_service_quote_submit_after>
                            <type>singleton</type>
                            <class>Icorethink_Custom_Model_Observer</class> 
                            <method>saveOrderAfter</method> 
                     </sales_model_service_quote_submit_after>
                 </observers>
          </sales_model_service_quote_submit_after>
          <sales_order_load_after> 
                <observers>
                    <sales_order_load_after>
                            <type>singleton</type>
                            <class>Icorethink_Custom_Model_Observer</class> 
                            <method>loadOrderAfter</method> 
                     </sales_order_load_after>
                 </observers>
          </sales_order_load_after>
    </events>

and next we have to create our Observer classes in Model folder. So create an Observer.php in your modules Model folder.

<? php
class Icorethink_Custom_Model_Observer{
    public function saveQuoteBefore($evt){
        $quote = $evt->getQuote();
        $post = Mage::app()->getFrontController()->getRequest()->getPost();
        if(isset($post['custom']['ssn'])){
            $var = $post['custom']['ssn'];
            $quote->setSsn($var);
        }
    }
    public function saveQuoteAfter($evt){
        $quote = $evt->getQuote();
        if($quote->getSsn()){
            $var = $quote->getSsn();
            if(!empty($var)){
                $model = Mage::getModel('custom/custom_quote');
                $model->deteleByQuote($quote->getId(),'ssn');
                $model->setQuoteId($quote->getId());
                $model->setKey('ssn');
                $model->setValue($var);
                $model->save();
            }
        }
    }
    public function loadQuoteAfter($evt){
        $quote = $evt->getQuote();
        $model = Mage::getModel('custom/custom_quote');
        $data = $model->getByQuote($quote->getId());
        foreach($data as $key => $value){
            $quote->setData($key,$value);
        }
    }
    public function saveOrderAfter($evt){
        $order = $evt->getOrder();
        $quote = $evt->getQuote();
        if($quote->getSsn()){
            $var = $quote->getSsn();
            if(!empty($var)){
                $model = Mage::getModel('custom/custom_order');
                $model->deleteByOrder($order->getId(),'ssn');
                $model->setOrderId($order->getId());
                $model->setKey('ssn');
                $model->setValue($var);
                $order->setSsn($var);
                $model->save();
            }
        }
    }
    public function loadOrderAfter($evt){
        $order = $evt->getOrder();
        $model = Mage::getModel('custom/custom_order');
        $data = $model->getByOrder($order->getId());
        foreach($data as $key => $value){
            $order->setData($key,$value);
        }
    }
}

So, we have captured the quote events sales_quote_save_before,sales_quote_save_after and sales_quote_load_after in above line of codes. These events will save our custom field to database. Details of functions are given in comments.
We have already create model classes for this
Icorethink_Custom_Model_Custom_Order
Icorethink_Custom_Model_Custom_Quote
Which you will find in the source code

Detailed Explanation

The first event captured by our module is sales_quote_save_before and saveQuoteBefore() function is called in our Observer class. What this function does, just before $quote->save() function is called, it reads our custom variable value ‘ssn’ from FORM POST data and simply sets it in the $quote object.
The next event captured by our module is sales_quote_save_after and saveQuoteAfter() function is called in our Observer class. What this function does, just after $quote->save() function is called i.e the quote object get stored in database, it store our custom variable to our database table “sales_quote_custom”
The next event is sales_quote_load_after and function called is loadQuoteAfter(). When the $quote->load($id) is called, i.e quote is created from database entries, our function is called and this read the values of the custom variable from our database table “sales_quote_custom” and sets it back again in the quote object.
The next event captured in sales_model_service_quote_submit_after and function called is saveOrderAfter(). This event is called, just after an order is successfully placed. In this event, we read our custom field value from quote object and put in order table.
The next event is sales_order_load_after and function called is loadOrderAfter(). This event is fired when $order->load() function is called, we read our fields values from database and place it back in the order object.

Step3: Display Our Field in My Account -> View Order

After the order is placed by the customer, our custom fields needs to be visible in My Account. So to do this in our module fronted layout file, in my case its custom.xml.

<? xml version="1.0"?>
<layout version="0.1.0">
    <sales_order_view>
        <reference name="my.account.wrapper">
            <block type="custom/custom_order" name="custom.order" template="custom/order.phtml" after='sales.order.info' />
        </reference>
    </sales_order_view>
</layout>

This layout file is simple and understandable. Basically, we are taking reference of my.account.wrapper block and adding a child block to it. Our block type is custom/order_view and template file is custom/order.phtml. So we need to create our block class

<? php
class Icorethink_Custom_Block_Custom_Order extends Mage_Core_Block_Template{
    public function getCustomVars(){
        $model = Mage::getModel('custom/custom_order');
        return $model->getByOrder($this->getOrder()->getId());
    }
    public function getOrder()
    {
        return Mage::registry('current_order');
    }
}

and our order.phtml file

<div class="col-set order-info-box">
    <div class="col">
        <div class="box">
            <div class="box-title">
                <h2><? php echo $this->__('Custom Fields') ?></h2>
            </div>
            <div class="box-content">
 
                    <? php
                        $custom = $this->getCustomVars();
                        foreach($custom as $key => $value){
                    ?>
                        <b><? php echo $this->__($key);?></b> : <? php echo $value;?> <br/>
                    <? php } ?>
 
            </div>
        </div>
    </div>
</div>

After doing this, you should be able to see your custom field in My Account page as shown here My Account View Order

Step4: Admin Order View Page

Next we need to show our custom field in Admin -> Order -> View Order page. To do this, in our adminhtml layout file, in my case custom.xml we will put in this code.

<? xml version="1.0"?>
<layout version="0.1.0">
    <adminhtml_sales_order_view>
        <reference name="order_info">
            <action method='setTemplate'><template>custom/sales/order/info.phtml</template></action>
            <block type="adminhtml/sales_order_view_info" name="order_info2" template="sales/order/view/info.phtml"></block>
            <block type="custom/adminhtml_custom_order" name="custom.order" template='custom/order.phtml'/>
        </reference>
    </adminhtml_sales_order_view>
</layout>

So basically here i have added my block “custom.order” to the existing order_info block. So the code for block class custom/adminhtml_custom_order would be

<? php
class Icorethink_Custom_Block_Adminhtml_Custom_Order extends Mage_Adminhtml_Block_Sales_Order_Abstract{
    public function getCustomVars(){
        $model = Mage::getModel('custom/custom_order');
        return $model->getByOrder($this->getOrder()->getId());
    }
}

and next we need to create their phtml files custom/order.phtml

<? php $_order = $this->getOrder() ?>
<div class="box-left">
    <div class="entry-edit">
        <div class="entry-edit-head">
            <h4 class="icon-head head-account"><? php echo Mage::helper('sales')->__('Custom Fields') ?></h4>
        </div>
        <div class="fieldset">
            <table cellspacing="0" class="form-list">
            <? php
                $custom = $this->getCustomVars();
                foreach($custom as $key => $value){
            ?>
            <tr>
                <td style="width:10%" class="label"><strong><? php echo Mage::helper('sales')->__($key) ?></strong></td>
                <td class="value"><? php echo $value;?></td>
            </tr>
            <? php } ?>
            </table>
        </div>
    </div>
</div>
<div class="clear"></div>

custom/sales/order/info.phtml

<? php echo $this->getChildHtml('order_info2');?>
<? php echo $this->getChildHtml('custom.order');?>

custom/sales/order/view/tab/info.phtml
you can get this file from the source code, there code in file is the default magento file. After doing these steps in admin we should be able to see this Admin Order View Page

Step5: Adding Custom Fields to Order Email

The final step, is adding the custom fields selected by user to the order email. So when user places an order, we will add our custom field to the order email. To do this open the order email template located at
app\locale\en_US\template\email\sales\order_new.html
app\locale\en_US\template\email\sales\order_new_guest.html
add the below code where you want

{{ depend order.hasCustomFields() }}
                    <table cellspacing="0" cellpadding="0" border="0" width="650">
                        <thead>
                        <tr>
                            <th align="left" width="325" bgcolor="#EAEAEA" style="font-size:13px; padding:5px 9px 6px 9px; line-height:1em;">Custom Fields:</th>
                        </tr>
                        </thead>  
                        <tbody>
                        <tr>
                            <td valign="top" style="font-size:12px; padding:7px 9px 9px 9px; border-left:1px solid #EAEAEA; border-bottom:1px solid #EAEAEA; border-right:1px solid #EAEAEA;">
                                {{ var order.getFieldHtml() }}
                                &nbsp;
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    {{ /depend }}
                    <br/>

So as per the above code, we need to two functions hasCustomFields() and getFieldHtml() in our Order class. So next we will override the Mage_Sales_Model_Order model. Open your config.xml file and inside section put in this code

<sales>
	<rewrite>
		<order>Icorethink_Custom_Model_Sales_Order</order>
	</rewrite>
</sales>

and next create our new model class Icorethink_Custom_Model_Sales_Order

<? php
class Icorethink_Custom_Model_Sales_Order extends Mage_Sales_Model_Order{
    public function hasCustomFields(){
        $var = $this->getSsn();
        if($var && !empty($var)){
            return true;
        }else{
            return false;
        }
    }
    public function getFieldHtml(){
        $var = $this->getSsn();
        $html = '<b>SSN:</b>'.$var.'<br/>';
        return $html;
    }
}

This should add the custom fields to the order.

Using the above steps anyone having basic knowledge of magento module development can add custom fields in any step of checkout page.