Dunamis Design Net » OS Commerce http://dunamisdesign.net Our work, forums, and play. Sat, 12 Jun 2010 08:22:47 +0000 en hourly 1 http://wordpress.org/?v=3.0.4 osCommerce Pop on Confirmation http://dunamisdesign.net/archives/17 http://dunamisdesign.net/archives/17#comments Fri, 30 Apr 2010 17:15:07 +0000 Administrator http://dunamisdesign.net/archives/17

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.

]]> http://dunamisdesign.net/archives/17/feed 1