Post by FFJim » 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.

User avatar
New member

Posts

Joined
Wed Jul 21, 2010 6:44 am

Post by JAY6390 » 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

ImageImageImage

SEO MEGA KIT PLUS - Get your site ranking higher in the search engines
Better Product SEO URL's - Perfectly structured product links
SEO URL's Route Editor PRO - Make ANY url on your site have clean keywords - even third party extensions (remove index.php)


Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by HTMLCSSNoob » 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.

Active Member

Posts

Joined
Fri Aug 20, 2010 7:53 am

Post by JAY6390 » 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)

ImageImageImage

SEO MEGA KIT PLUS - Get your site ranking higher in the search engines
Better Product SEO URL's - Perfectly structured product links
SEO URL's Route Editor PRO - Make ANY url on your site have clean keywords - even third party extensions (remove index.php)


Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by Qphoria » Fri Nov 19, 2010 11:32 pm

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

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by JAY6390 » 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 :)

ImageImageImage

SEO MEGA KIT PLUS - Get your site ranking higher in the search engines
Better Product SEO URL's - Perfectly structured product links
SEO URL's Route Editor PRO - Make ANY url on your site have clean keywords - even third party extensions (remove index.php)


Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by Qphoria » 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):
Image
TO: catalog/view/theme/default/image/

Works for ALL form-based payment methods


Image

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by FFJim » Sat Nov 20, 2010 8:17 am

Spinning ball in place. Thank you very much.

User avatar
New member

Posts

Joined
Wed Jul 21, 2010 6:44 am

Post by Qphoria » 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

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Moggin » 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.

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by Qphoria » Wed Nov 24, 2010 1:28 am

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

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by JAY6390 » Wed Nov 24, 2010 1:35 am

5 seconds? and the rest! ;)

ImageImageImage

SEO MEGA KIT PLUS - Get your site ranking higher in the search engines
Better Product SEO URL's - Perfectly structured product links
SEO URL's Route Editor PRO - Make ANY url on your site have clean keywords - even third party extensions (remove index.php)


Image


User avatar
Guru Member

Posts

Joined
Wed May 26, 2010 11:47 pm
Location - United Kingdom

Post by OSWorX » 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 :D )
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);

Image


User avatar
Expert Member

Posts

Joined
Mon Jan 11, 2010 10:52 pm
Location - Austria

Post by Qphoria » 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

OpenCart 2.0.x Mod Update Info

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by philbydevil » 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?

I Image cmd-f, cmd-c, cmd-v, cmd-z + vQmod.
My favourite page...
v1.5.4.1


User avatar
Active Member

Posts

Joined
Fri Dec 03, 2010 5:20 am
Location - Sunshine Coast, Australia

Post by hotwebideas » 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

New member

Posts

Joined
Wed Jun 29, 2011 11:44 pm

User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by hotwebideas » Fri Aug 26, 2011 3:57 am

Qphoria wrote:Ah great news :)
Yes sir!

New member

Posts

Joined
Wed Jun 29, 2011 11:44 pm

Post by net-vor » 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>

tvorba webových stránek | webdesign


Newbie

Posts

Joined
Thu Jan 27, 2011 10:38 pm

Post by Lao » 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

I'm using Open Cart 1.5.4.1 on http://www.importpieseauto.ro


User avatar
Lao
Active Member

Posts

Joined
Tue Nov 23, 2010 3:31 pm
Location - Craiova, Romania
Who is online

Users browsing this forum: No registered users and 2 guests