Skip to content

Commit

Permalink
Improved UX for slow payment gateways/shipping methods as loading but…
Browse files Browse the repository at this point in the history 
…ton resets when checkout step is properly loaded
  • Loading branch information
David Teal committed Sep 24, 2015
1 parent abea974 commit 2b475e1
Showing 1 changed file with 34 additions and 18 deletions.
52 changes: 34 additions & 18 deletions upload/catalog/view/theme/default/template/checkout/checkout.tpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,16 +212,15 @@ $(document).delegate('#button-register', 'click', function() {
beforeSend: function() {
$('#button-register').button('loading');
},
complete: function() {
$('#button-register').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('.form-group').removeClass('has-error');
if (json['redirect']) {
location = json['redirect'];
} else if (json['error']) {
$('#button-register').button('reset');
if (json['error']['warning']) {
$('#collapse-payment-address .panel-body').prepend('<div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> ' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
}
Expand Down Expand Up @@ -317,6 +316,9 @@ $(document).delegate('#button-register', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/payment_address',
dataType: 'html',
complete: function() {
$('#button-register').button('reset');
},
success: function(html) {
$('#collapse-payment-address .panel-body').html(html);
Expand Down Expand Up @@ -436,15 +438,14 @@ $(document).delegate('#button-shipping-address', 'click', function() {
beforeSend: function() {
$('#button-shipping-address').button('loading');
},
complete: function() {
$('#button-shipping-address').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['redirect']) {
location = json['redirect'];
} else if (json['error']) {
$('#button-shipping-address').button('reset');
if (json['error']['warning']) {
$('#collapse-shipping-address .panel-body').prepend('<div class="alert alert-warning">' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
}
Expand All @@ -465,6 +466,9 @@ $(document).delegate('#button-shipping-address', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/shipping_method',
dataType: 'html',
complete: function() {
$('#button-shipping-address').button('reset');
},
success: function(html) {
$('#collapse-shipping-method .panel-body').html(html);
Expand Down Expand Up @@ -519,15 +523,14 @@ $(document).delegate('#button-guest', 'click', function() {
beforeSend: function() {
$('#button-guest').button('loading');
},
complete: function() {
$('#button-guest').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['redirect']) {
location = json['redirect'];
} else if (json['error']) {
$('#button-guest').button('reset');
if (json['error']['warning']) {
$('#collapse-payment-address .panel-body').prepend('<div class="alert alert-warning">' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
}
Expand All @@ -552,6 +555,9 @@ $(document).delegate('#button-guest', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/shipping_method',
dataType: 'html',
complete: function() {
$('#button-guest').button('reset');
},
success: function(html) {
// Add the shipping address
$.ajax({
Expand Down Expand Up @@ -584,6 +590,9 @@ $(document).delegate('#button-guest', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/guest_shipping',
dataType: 'html',
complete: function() {
$('#button-guest').button('reset');
},
success: function(html) {
$('#collapse-shipping-address .panel-body').html(html);
Expand All @@ -604,6 +613,9 @@ $(document).delegate('#button-guest', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/payment_method',
dataType: 'html',
complete: function() {
$('#button-guest').button('reset');
},
success: function(html) {
$('#collapse-payment-method .panel-body').html(html);
Expand Down Expand Up @@ -636,15 +648,14 @@ $(document).delegate('#button-guest-shipping', 'click', function() {
beforeSend: function() {
$('#button-guest-shipping').button('loading');
},
complete: function() {
$('#button-guest-shipping').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['redirect']) {
location = json['redirect'];
} else if (json['error']) {
$('#button-guest-shipping').button('reset');
if (json['error']['warning']) {
$('#collapse-shipping-address .panel-body').prepend('<div class="alert alert-warning">' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
}
Expand All @@ -665,6 +676,9 @@ $(document).delegate('#button-guest-shipping', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/shipping_method',
dataType: 'html',
complete: function() {
$('#button-guest-shipping').button('reset');
},
success: function(html) {
$('#collapse-shipping-method .panel-body').html(html);
Expand Down Expand Up @@ -696,22 +710,24 @@ $(document).delegate('#button-shipping-method', 'click', function() {
beforeSend: function() {
$('#button-shipping-method').button('loading');
},
complete: function() {
$('#button-shipping-method').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
if (json['redirect']) {
location = json['redirect'];
} else if (json['error']) {
$('#button-shipping-method').button('reset');
if (json['error']['warning']) {
$('#collapse-shipping-method .panel-body').prepend('<div class="alert alert-warning">' + json['error']['warning'] + '<button type="button" class="close" data-dismiss="alert">&times;</button></div>');
}
} else {
$.ajax({
url: 'index.php?route=checkout/payment_method',
dataType: 'html',
complete: function() {
$('#button-shipping-method').button('reset');
},
success: function(html) {
$('#collapse-payment-method .panel-body').html(html);
Expand Down Expand Up @@ -742,9 +758,6 @@ $(document).delegate('#button-payment-method', 'click', function() {
beforeSend: function() {
$('#button-payment-method').button('loading');
},
complete: function() {
$('#button-payment-method').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
Expand All @@ -758,6 +771,9 @@ $(document).delegate('#button-payment-method', 'click', function() {
$.ajax({
url: 'index.php?route=checkout/confirm',
dataType: 'html',
complete: function() {
$('#button-payment-method').button('reset');
},
success: function(html) {
$('#collapse-checkout-confirm .panel-body').html(html);
Expand Down

0 comments on commit 2b475e1

Please sign in to comment.