Jump to content
frankl

Prevent double clicks on order confirmation with Bootstrap

Recommended Posts

I want to prevent double clicks on the confirm order button so that impatient customers don't click twice and get their credit cards charged twice.

 

I am wonderingif I have the right logic that will change the 'Confirm Order' button to a stateful button

 

http://getbootstrap.com/javascript/#buttons-stateful

 

Currently the button code is

<div class="buttonSet">
    <span class="buttonAction">
      <?php
      if (is_array($payment_modules->modules)) {
        echo $payment_modules->process_button();
      }
      ?>

 
<?php
      echo tep_draw_button(IMAGE_BUTTON_CONFIRM_ORDER, 'glyphicon glyphicon-ok', null, 'primary');
      ?>
      
    </span>
</div>

which gives html

<div class="buttonSet">
    <span class="buttonAction">
     
<button  type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-ok"></span> Confirm Order</button>	  
    </span>
  </div>

adding an id to the div and parameters to the button

<div id="confirmation" class="buttonSet">
    <span class="buttonAction">
      <?php
      if (is_array($payment_modules->modules)) {
        echo $payment_modules->process_button();
      }
      ?>

 
<?php
      //echo tep_draw_button(IMAGE_BUTTON_CONFIRM_ORDER, 'glyphicon glyphicon-ok', null, 'primary');
      echo tep_draw_button(IMAGE_BUTTON_CONFIRM_ORDER, 'glyphicon glyphicon-ok', null, 'primary', array('params' => 'id="confirmation" data-loading-text="Loading..." autocomplete="off"'));
      ?>
      
    </span>

ouputs

<div id="confirmation" class="buttonSet">
    <span class="buttonAction">
      
 
<button  type="submit" id="confirmation" data-loading-text="Loading..." autocomplete="off" class="btn btn-default"> <span class="glyphicon glyphicon-ok"></span> Confirm Order</button>	  
    </span>
  </div>

Next need to add the required javascript above the div with id="confirmation"

<script type="text/javascript">
$(function() {
     $("#confirmation .btn").click(function(){
        $(this).button('loading').delay(100000).queue(function() {
        });
     });
  });
</script>

Not too sure if that is the correct Javascript - it certainly works and the button does as intended but may need to be changed?


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

Hi, first its not valid to have same ids in one page. id="confirmation" must be placed one time.

 

I would suggest you not to use delay...

 

One approch is to load a popup saying loading processing, that locks the screen input via overlay modal.

 

Another approach is to hide the button 

 

Another is to change the button status to disabled so user cannot press it.

 

All those can easily be done via javascript....


Check out the great Alternative Administration System addon for osCommerce!

Share this post


Link to post
Share on other sites

@@gadlol Thanks for your input!

 

I meant to take the id=confirmation off the button and only have it on the div by the way!

 

I would prefer to use what is already there (i.e. Bootstrap) and your idea with the modal sounds good. I will try that and report back.

 

Another option is to add different javascript in this line

$(this).button('loading').delay(100000).queue(function() {

Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

Hi. I am using a Must Accept Terms and Conditions on my checkout page.

 

The code that checks if the tick on MATC is ticked or not is:

<script type='text/javascript'>
$(function(){
  $('form[name=checkout_confirmation]').submit(function(){
  var return_value = false;

  if (!$('#matc').is(':checked')){
    alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
  }else{
    return_value = true;
  }

  return return_value;
  });
});
</script>

if put the JavaScript code above   <div id="confirmation" class="buttonSet"> then if someone doesn't place a tick and press the submit button, the submit button changes to a disabled loading and doesnt change back.

 

I need to implement the javascript function to the above MATC script so that the function is activated only when MATC return_value = true;

 

I tried putting the javascript code above return return_value; and what that did was change the submit button to loading but doesnt disable the button.

 

Here is what i did:

<script type='text/javascript'>
$(function(){
  $('form[name=checkout_confirmation]').submit(function(){
  var return_value = false;

  if (!$('#matc').is(':checked')){
    alert(unescape('<?php echo MATC_TERMS_ALERT;?>'));
  }else{
    return_value = true;
  }
      $('button').button( {
      loadingText: 'Processing...'
    });

    $("#confirmation .btn").click(function() {
      $(this).button('loading').delay(100000).queue(function() {
      });
    });
  return return_value;
  });
});
</script> 

Im not much a coder but trying to learn and understand things.

 

Any help is much appreciated.

Edited by CGhoST

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×