|
I needed to do something similar to this. After searching for days (probably weeks), I came across this work around.
The trick is to place the progress.phtml code inside a new div (my-custom-right-column) and override the optcheckout.js to update this new div, instead of the whole right side column. You could then place your JavaScript before the div and it doesn’t get overwritten when the progress block gets refreshed.
In my situation, I needed a radio button in the Billing step so the customer can choose Pick Up or Delivery. When the option is selected, a hidden field stores the value and a call is made to function updateMyHeader() which displays the choice above the billing step in the progress block. You should be able to modify what I have done for your situation.
Here’s the changes I made to get it working:
skin/frontend/default/yourtheme/js/optcheckout.js
//REPLACE THIS:
/*
reloadProgressBlock: function(){
var request = new Ajax.Request(this.progressUrl, {method: 'get', onFailure: this.ajaxFailure.bind(this), onSuccess: function(transport) { $$('.one-page-checkout-progress').first().replace(transport.responseText);}});
},
*/
//WITH THIS:
reloadProgressBlock: function(){
var updater = new Ajax.Updater(
'my-custom-right-column',
this.progressUrl,
{method: 'get', onFailure: this.ajaxFailure.bind(this)}
);
},
design/frontend/default/yourtheme/template/checkout/onepage/progress.phtml
//Add any custom JavaScript or your own Div's in the beginning of the file, immediately after the license agreement
<script>
function updateMyHeader()
{
/* I removed the if/elses in this function which determine what to set the innerHTML to, for clarity */
document.getElementById("puOrDelHeader").innerHTML = "<div class='box2 one-page-checkout-progress2'><ol><li><h4 class='complete'>Pick Up or Delivery<span class='separator'>|</span> <a href='#billing' onclick=\"checkout.accordion.openSection(\'opc-billing\'); return false;\">Change</a></h4><div class='content'><b>Delivery</b></div></li></ol></div>";
}
</script>
<div id='puOrDelHeader'>
<!-- My Content Gets Updated In Here -->
</div>
<div id="my-custom-right-column"> <!-- This is the new div. Everything inside of this div will get refreshed -->
<div class="box one-page-checkout-progress">
<h3><?php echo $this->__('Your Order Progress') ?></h3>
<ol>
......
......
</div>
</div> <!-- Close the new div: my-custom-right-column -->
I duplicated the CSS classes (box2 one-page-checkout-progress2), because the Progress Update would duplicate my new Progress Header for some reason. You probably don’t not have to do this, though.
Credits to Szymon Switala for his blog post detailing many of these changes: http://blog.baobaz.com/en/blog/magento-checkout-progress-with-custom-layout
|
