Merge pull request #24609 from JohnTendik/feature/24429
Added unload event to prevent reload during checkout (#24429)
This commit is contained in:
Gerhard Potgieter
GitHub
commit
8827dfb3a4
|
|
@ -41,10 +41,10 @@ jQuery( function( $ ) {
|
|||
this.$checkout_form.on( 'update', this.trigger_update_checkout );
|
||||
|
||||
// Inputs/selects which update totals
|
||||
this.$checkout_form.on( 'change', 'select.shipping_method, input[name^="shipping_method"], #ship-to-different-address input, .update_totals_on_change select, .update_totals_on_change input[type="radio"], .update_totals_on_change input[type="checkbox"]', this.trigger_update_checkout );
|
||||
this.$checkout_form.on( 'change', 'select.shipping_method, input[name^="shipping_method"], #ship-to-different-address input, .update_totals_on_change select, .update_totals_on_change input[type="radio"], .update_totals_on_change input[type="checkbox"]', this.trigger_update_checkout ); // eslint-disable-line max-len
|
||||
this.$checkout_form.on( 'change', '.address-field select', this.input_changed );
|
||||
this.$checkout_form.on( 'change', '.address-field input.input-text, .update_totals_on_change input.input-text', this.maybe_input_changed );
|
||||
this.$checkout_form.on( 'keydown', '.address-field input.input-text, .update_totals_on_change input.input-text', this.queue_update_checkout );
|
||||
this.$checkout_form.on( 'change', '.address-field input.input-text, .update_totals_on_change input.input-text', this.maybe_input_changed ); // eslint-disable-line max-len
|
||||
this.$checkout_form.on( 'keydown', '.address-field input.input-text, .update_totals_on_change input.input-text', this.queue_update_checkout ); // eslint-disable-line max-len
|
||||
|
||||
// Address fields
|
||||
this.$checkout_form.on( 'change', '#ship-to-different-address input', this.ship_to_different_address );
|
||||
|
|
@ -231,7 +231,7 @@ jQuery( function( $ ) {
|
|||
event_type = e.type;
|
||||
|
||||
if ( 'input' === event_type ) {
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email woocommerce-validated' );
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email woocommerce-validated' ); // eslint-disable-line max-len
|
||||
}
|
||||
|
||||
if ( 'validate' === event_type || 'change' === event_type ) {
|
||||
|
|
@ -249,7 +249,7 @@ jQuery( function( $ ) {
|
|||
if ( validate_email ) {
|
||||
if ( $this.val() ) {
|
||||
/* https://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */
|
||||
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
|
||||
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); // eslint-disable-line max-len
|
||||
|
||||
if ( ! pattern.test( $this.val() ) ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
|
||||
|
|
@ -259,7 +259,7 @@ jQuery( function( $ ) {
|
|||
}
|
||||
|
||||
if ( validated ) {
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email' ).addClass( 'woocommerce-validated' );
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email' ).addClass( 'woocommerce-validated' ); // eslint-disable-line max-len
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -335,6 +335,7 @@ jQuery( function( $ ) {
|
|||
if ( false !== args.update_shipping_method ) {
|
||||
var shipping_methods = {};
|
||||
|
||||
// eslint-disable-next-line max-len
|
||||
$( 'select.shipping_method, input[name^="shipping_method"][type="radio"]:checked, input[name^="shipping_method"][type="hidden"]' ).each( function() {
|
||||
shipping_methods[ $( this ).data( 'index' ) ] = $( this ).val();
|
||||
} );
|
||||
|
|
@ -423,7 +424,7 @@ jQuery( function( $ ) {
|
|||
|
||||
// Add new errors returned by this event
|
||||
if ( data.messages ) {
|
||||
$form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-updateOrderReview">' + data.messages + '</div>' );
|
||||
$form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-updateOrderReview">' + data.messages + '</div>' ); // eslint-disable-line max-len
|
||||
} else {
|
||||
$form.prepend( data );
|
||||
}
|
||||
|
|
@ -443,6 +444,26 @@ jQuery( function( $ ) {
|
|||
|
||||
});
|
||||
},
|
||||
handleUnloadEvent: function( e ) {
|
||||
// Modern browsers have their own standard generic messages that they will display.
|
||||
// Confirm, alert, prompt or custom message are not allowed during the unload event
|
||||
// Browsers will display their own standard messages
|
||||
|
||||
// Check if the browser is Internet Explorer
|
||||
if((navigator.userAgent.indexOf('MSIE') !== -1 ) || (!!document.documentMode)) {
|
||||
// IE handles unload events differently than modern browsers
|
||||
e.preventDefault();
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
attachUnloadEventsOnSubmit: function() {
|
||||
$( window ).on('beforeunload', this.handleUnloadEvent);
|
||||
},
|
||||
detachUnloadEventsOnSubmit: function() {
|
||||
$( window ).unbind('beforeunload', this.handleUnloadEvent);
|
||||
},
|
||||
blockOnSubmit: function( $form ) {
|
||||
var form_data = $form.data();
|
||||
|
||||
|
|
@ -468,12 +489,16 @@ jQuery( function( $ ) {
|
|||
}
|
||||
|
||||
// Trigger a handler to let gateways manipulate the checkout if needed
|
||||
// eslint-disable-next-line max-len
|
||||
if ( $form.triggerHandler( 'checkout_place_order' ) !== false && $form.triggerHandler( 'checkout_place_order_' + wc_checkout_form.get_payment_method() ) !== false ) {
|
||||
|
||||
$form.addClass( 'processing' );
|
||||
|
||||
wc_checkout_form.blockOnSubmit( $form );
|
||||
|
||||
// Attach event to block reloading the page when the form has been submitted
|
||||
wc_checkout_form.attachUnloadEventsOnSubmit();
|
||||
|
||||
// ajaxSetup is global, but we use it to ensure JSON is valid once returned.
|
||||
$.ajaxSetup( {
|
||||
dataFilter: function( raw_response, dataType ) {
|
||||
|
|
@ -509,6 +534,9 @@ jQuery( function( $ ) {
|
|||
data: $form.serialize(),
|
||||
dataType: 'json',
|
||||
success: function( result ) {
|
||||
// Detach the unload handler that prevents a reload / redirect
|
||||
wc_checkout_form.detachUnloadEventsOnSubmit();
|
||||
|
||||
try {
|
||||
if ( 'success' === result.result ) {
|
||||
if ( -1 === result.redirect.indexOf( 'https://' ) || -1 === result.redirect.indexOf( 'http://' ) ) {
|
||||
|
|
@ -537,11 +565,14 @@ jQuery( function( $ ) {
|
|||
if ( result.messages ) {
|
||||
wc_checkout_form.submit_error( result.messages );
|
||||
} else {
|
||||
wc_checkout_form.submit_error( '<div class="woocommerce-error">' + wc_checkout_params.i18n_checkout_error + '</div>' );
|
||||
wc_checkout_form.submit_error( '<div class="woocommerce-error">' + wc_checkout_params.i18n_checkout_error + '</div>' ); // eslint-disable-line max-len
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function( jqXHR, textStatus, errorThrown ) {
|
||||
// Detach the unload handler that prevents a reload / redirect
|
||||
wc_checkout_form.detachUnloadEventsOnSubmit();
|
||||
|
||||
wc_checkout_form.submit_error( '<div class="woocommerce-error">' + errorThrown + '</div>' );
|
||||
}
|
||||
});
|
||||
|
|
@ -551,7 +582,7 @@ jQuery( function( $ ) {
|
|||
},
|
||||
submit_error: function( error_message ) {
|
||||
$( '.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message' ).remove();
|
||||
wc_checkout_form.$checkout_form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">' + error_message + '</div>' );
|
||||
wc_checkout_form.$checkout_form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-checkout">' + error_message + '</div>' ); // eslint-disable-line max-len
|
||||
wc_checkout_form.$checkout_form.removeClass( 'processing' ).unblock();
|
||||
wc_checkout_form.$checkout_form.find( '.input-text, select, input:checkbox' ).trigger( 'validate' ).blur();
|
||||
wc_checkout_form.scroll_to_notices();
|
||||
|
|
|
|||
Loading…
Reference in New Issue