This was designed to solve the problem of duplicate orders being generated in osCommerce from a customer hitting the confirmation button more than once. So, I set this up to pop-up a “please wait” dialog with a progress bar to assure the customer that something was happening. If the progress bar make it to the end (currently programed for 125 seconds), then the dialog box changes to display an error occured and they can press the refresh button (in the dialog box) and try again.
Install:
Edit the osCommerce catalog/checkout_confirmation.php (osCommerce vanilla) or catalog/template/content/checkout_confirmation.tpl.php (creloaded).
Insert the following code either just below the <body> tag or at the top of the creloaded template file.
<!-- PopupConf - Copyright (c) 2010 Michael Calabrese, Dunamis Design -->
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
var percent_progress=0;
var count = 0;
var progress_update_interval = 40; //usec
var progress_delay = 125; //seconds
function reload() {
location.reload();
}
function startProgress() {
jQuery("#progress_bar").progressbar("value", percent_progress);
var max_count= progress_delay*(1000/progress_update_interval)
if(count < max_count) {
count=count+1;
//percent_progress=(count/130) * 100;
percent_progress=(count*100) /max_count;
//alert(percent_progress);
setTimeout("startProgress()", progress_update_interval);
} else {
//timer is up.
jQuery("#dialog_process").empty();
jQuery("#dialog_process").append( jQuery("<div>Processing your order failed. Please press the reload button and try again.<br> <button class=\"ui-state-default ui-corner-all\" onclick=\"reload();\">Reload</button></div>") );
}
}
jQuery(document).ready(function($) {
jQuery("#dialog_process").dialog({ autoOpen: false, closeOnEscape: false, draggable: false, modal: true,resizable: false })
// Code that uses jQuery's $ can follow here.
jQuery("#progress_bar").progressbar({value: count});
jQuery("#popup_test").click(function() {
jQuery("#dialog_process").dialog("open");
startProgress();
});
$(".button_confirm_order").click(function(event) {
jQuery("#dialog_process").dialog("open");
startProgress();
setTimeout("document.forms[0].submit()", 1000);
event.preventDefault();
});
});
</script>
<div id="dialog_process" style="display:none;font-size:70%;" title="Please Wait" >
We are processing your order, it could take up to 2 minutes. Thank you.
<div id="progress_bar"></div>
</div>
<!-- PopupConf - Copyright (c) 2010 Michael Calabrese, Dunamis Design -->
Find the following php code (which generates the confirmation button). Please note that tep_template_image_submit will be tep_image_submit), I would search for IMAGE_BUTTON_CONFIRM_ORDER:
echo tep_template_image_submit('button_confirm_order.gif', IMAGE_BUTTON_CONFIRM_ORDER)
Added the class paramater to look like:
echo tep_template_image_submit('button_confirm_order.gif', IMAGE_BUTTON_CONFIRM_ORDER,'class="button_confirm_order"')
All done, that should be it.
April 30th, 2010 at 1:21 pm
[...] the article here: Dunamis Design Net » Blog Archive » osCommerce Pop on Confirmation If you enjoyed this article please consider sharing [...]