Wednesday, February 23, 2011

Magento - How to insert a custom tab in One Page Checkout?



I found a nice extension from Inchoo which will insert a customizable tab in Magento OnePage Checkout. So I used this extension and extended it a little bit to fit the requirements.

What I want to do is to add a Terms & Conditions tab before placing an order. So here's the code.
/home/donnafiera/magento/app/design/frontend/default/default/template/checkout/onepage/heared4us.phtml

<form id="co-heared4us-form" action="">
  <?php echo "I have read the <a href='".Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA)."test.pdf' target='_Blank'>TERMS AND CONDITIONS</a>"; ?>
  <label><input id="chkaccept" type="checkbox" name="useraccept" value="yes" />&nbsp;Accept</label><br/>
</form>
<script type="text/javascript">
  function formValidation(oEvent) {
  oEvent = oEvent || window.event;
  var txtField = oEvent.target || oEvent.srcElement;
  var t1ck=true;
  if(!document.getElementById("chkaccept").checked ){ t1ck=false;}
    if(t1ck){document.getElementById("btnTerms").disabled = false; }
    else{document.getElementById("btnTerms").disabled = true; }
  }

window.onload = function () {
var btnTerms = document.getElementById("btnTerms");
var chkaccept=document.getElementById("chkaccept");
var t1ck=false;
document.getElementById("btnTerms").disabled = true;
chkaccept.onclick = formValidation;
}
</script> 
<div class="button-set">
<p class="required"><?php echo $this->__('* Required Fields') ?></p>
<div id="heared4us-buttons-container">
<button id="btnTerms" type="button" class="form-button right" onclick=" heared4us.save();"><span><?php echo $this->__('Continue') ?></span></button>
<span id="heared4us-please-wait" style="display:none;" class="opc-please-wait">
<img src="<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif') ?>" class="v-middle" alt="" /> &nbsp; <?php echo $this->__('Loading next step...') ?> &nbsp;
</span>
</div>
</div>

No comments:

Post a Comment