OpenCart Community

Posted: **Fri Nov 19, 2010 11:48 am**

I was contacted by a customer who thought the "Confirm" button didn't work. I, too, have experienced what he did. You click the button and nothing seems to be happening. If you wait long enough, though, the process continues.

I proposed that, when clicked, the "Confirm" button be replaced with a different graphic or words such as "Please wait". This will at least let the user know that something is happening. It might even be beneficial to have a spinning ball or other indicator that the page is being processed. As is, impatient people think it doesn't work.

Posted: **Fri Nov 19, 2010 7:06 pm**

I agree, I've seen this happening on quite a few sites, due to the confirm click sending an AJAX request to the server

Posted: **Fri Nov 19, 2010 10:39 pm**

I agree, there's been a couple times I thought the confirm button didn't work but it was just because my connection was slow..

I might suggest that Fido-X has a messages Mod that might be useful in this situation. You can create a message on the confirm page that says something like "Please click the confirm button only once". At least this might be a solution until something else comes along.

Posted: **Fri Nov 19, 2010 10:53 pm**

It's not that hard to fix to be honest. Just need the little ajax loader gif and a test in the js code for the image showing, so that it doesn't send again (or even just a static variable)

Posted: **Fri Nov 19, 2010 11:32 pm**

i'm with jay.. I'm looking at adding an ajax loader image

Posted: **Sat Nov 20, 2010 12:01 am**

Here's an example of how to do it with the current paypal standard...
the file is located at

Code: Select all

/catalog/view/theme/your-theme-name/template/payment/pp_standard.tpl

Code: Select all

<!--
//-----------------------------------------
// Author: Qphoria@gmail.com
// Web: http://www.unbannable.com/ocstore
//-----------------------------------------
-->
<?php if (isset($error)) { ?>
<div class="warning"><?php echo $error; ?></div>
<?php } ?>
<?php if ($testmode) { ?>
  <div class="warning"><?php echo $this->language->get('text_testmode'); ?></div>
<?php } ?>
<form action="<?php echo $action; ?>" method="post" id="checkout">
  <?php foreach ($fields as $key => $value) { ?>
    <input type="hidden" name="<?php echo $key; ?>" value="<?php echo $value; ?>" />
  <?php } ?>
</form>
<div class="buttons">
  <table>
    <tr>
      <td align="left"><a onclick="location='<?php echo $back; ?>'" class="button"><span><?php echo $button_back; ?></span></a></td>
      <td align="right"><a onclick="confirmSubmit();" class="button"><span><?php echo $button_confirm; ?></span></a> <img class="confirm_image" src="catalog/view/theme/default/images/ajax_load.gif" style="display: none;" alt="spinner" /></td>
    </tr>
  </table>
</div>
<script type="text/javascript"><!--
var submitted = false;
function confirmSubmit() {
    if(submitted) return;
    submitted = true;
    $('.confirm_image').css({'display': 'inline'})
    $.ajax({
        type: 'GET',
        url: 'index.php?route=payment/pp_standard/confirm',
        success: function() {
            $('#checkout').submit();
        }
    });
}
//--></script>

As you can see, there's 4 lines added to the javascript at the bottom and this image html is inserted next to the button

Code: Select all

<img class="confirm_image" src="catalog/view/theme/default/images/ajax_load.gif" style="display: none;" alt="spinner" />

The image can actually be placed anywhere, but works the same. This is live on my web store now for those that want to test it out

Posted: **Sat Nov 20, 2010 1:10 am**

weak sauce...

Global solution:

1. EDIT: catalog/view/theme/default/template/checkout/confirm.tpl

2. FIND:

Code: Select all

<div id="payment"><?php echo $payment; ?></div>

3. AFTER, ADD:

Code: Select all

<script type="text/javascript">
	$(document).ready(function() {
		$('body').prepend('<div id="loading" style="display: none;">Loading...</div>');
		var submitted = false;
		$('#payment form').submit(function() {
			if (submitted) return;
			submitted = true;
			$('div#loading').show();
		});
	});
</script>

4. EDIT: catalog/view/theme/default/stylesheet/stylesheet.css

5. AT THE BOTTOM, ADD:

Code: Select all

#loading {
    background: url("../image/spinner3-black.gif") no-repeat scroll center center #FFFFFF;
    border: 1px solid #666666;
    font: 16px Tahoma,Geneva,sans-serif;
    height: 100px;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
    overflow: auto;
    padding: 10px;
    position: fixed;
    text-align: center;
    top: 50%;
    width: 100px;
    z-index: 2;
}

6. UPLOAD THIS FILE (or any other loading animation):

TO: catalog/view/theme/default/image/

Works for ALL form-based payment methods

Posted: **Sat Nov 20, 2010 8:17 am**

Spinning ball in place. Thank you very much.

Posted: **Tue Nov 23, 2010 11:05 pm**

ok I've cleaned up the mod (and the thread).
You can find a fully working dynamic version that works with all page loads and form submits here:
http://forum.opencart.com/viewtopic.php ... 86#p114186

Posted: **Wed Nov 24, 2010 1:22 am**

I like the checkout-only one myself...not that you'll see the loader for very long. My store is Not Magento.

Thank you again for a neat contribution.

Posted: **Wed Nov 24, 2010 1:28 am**

perhaps I can add a magento-mode option (add 5-secs of delay to the script

)

Posted: **Wed Nov 24, 2010 1:35 am**

5 seconds? and the rest!

Posted: **Wed Nov 24, 2010 3:00 am**

Qphoria wrote:perhaps I can add a magento-mode option (add 5-secs of delay to the script )

Better: add a generaly delay, so the animation is not shown always (if the loading speed is less than x milliseconds).

Instead of having:

$('div#body_loading').show();

use this (here 300 ms):

setTimeout("$('div#body_loading').show()", 300);

Posted: **Mon Jan 17, 2011 7:50 am**

If it doesn't show because it already too fast.. then there is no real point in showing it at all since the actual loading will be the notifier. I don't really want to make a website any slower than it needs to be

Posted: **Fri Feb 18, 2011 3:18 pm**

I like this a lot. Thanks Q.

Is there a way to make the page darken like it does when you open an image with thickbox?

Maybe something like this in the stylesheet:

Code: Select all

#loading_overlay {
	position: fixed;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
	height:100%;
	width:100%;

But how would we activate it?

Posted: **Fri Aug 26, 2011 3:53 am**

Hey guys, thanks to Qphoria for a great solution. I know this is an old thread, but I found that the last post before this one was in February, indicating OpenCart 1.4.x - I did not even know about OC back then and have OpenCart 1.5.0. I tried Qphoria's solution and of course it did not work on 1.5, but I just had to try and I was hoping.

Here is QPhoria's original code for confirm.tpl:

Qphoria wrote:weak sauce...

3. AFTER, ADD:

Code: Select all

<script type="text/javascript">
	$(document).ready(function() {
		$('body').prepend('<div id="loading" style="display: none;">Loading...</div>');
		var submitted = false;
		$('#payment form').submit(function() {
			if (submitted) return;
			submitted = true;
			$('div#loading').show();
		});
	});
</script>

Which much struggling, I finally got it working for 1.5.0. Use Qphoria's solution and change one line of jQuery in confirm.tpl:

Change $('#payment form').submit(function() {
To: $('#button-confirm').click(function() {

That worked for me.

Bruce

Posted: **Fri Aug 26, 2011 3:54 am**

Ah great news

Posted: **Fri Aug 26, 2011 3:57 am**

Qphoria wrote:Ah great news

Yes sir!

Posted: **Tue Aug 30, 2011 8:30 pm**

Correction to make it work: in Qphoria's step 3 insert this code instead:

Code: Select all

<script type="text/javascript"><!--
    $('#checkout').click(function() {
        $('body').prepend('<div id="loading" style="display: none;">Loading...</div>');
        $('div#loading').show();
});
//--></script>

Posted: **Thu Feb 07, 2013 9:56 pm**

I tried making a vQmod for this, to use on 1.5.4.1, but it's not working.

Customers are getting really bad delays after clicking the Confirm Order button.

Any suggestions what to do?

Later edit: you can also check this: http://forum.opencart.com/viewtopic.php ... 71#p380371

OpenCart Community

give some feedback with "Confirm" button click

give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click

Re: give some feedback with "Confirm" button click