Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24609 from JohnTendik/feature/24429 

Added unload event to prevent reload during checkout (#24429)
This commit is contained in:
Gerhard Potgieter 2019-12-06 14:57:59 +02:00 committed by GitHub
parent b8217fa080 0a9563dacd
commit 8827dfb3a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
assets/js/frontend/checkout.js
View File

@ -41,10 +41,10 @@ jQuery( function( $ ) {
this.$checkout_form.on( 'update', this.trigger_update_checkout ); this.$checkout_form.on( 'update', this.trigger_update_checkout );
// Inputs/selects which update totals // 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 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( '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 ); 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 // Address fields
this.$checkout_form.on( 'change', '#ship-to-different-address input', this.ship_to_different_address ); 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; event_type = e.type;
if ( 'input' === event_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 ) { if ( 'validate' === event_type || 'change' === event_type ) {
@ -249,7 +249,7 @@ jQuery( function( $ ) {
if ( validate_email ) { if ( validate_email ) {
if ( $this.val() ) { if ( $this.val() ) {
/* https://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */ /* 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() ) ) { if ( ! pattern.test( $this.val() ) ) {
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' ); $parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
@ -259,7 +259,7 @@ jQuery( function( $ ) {
} }
if ( validated ) { 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 ) { if ( false !== args.update_shipping_method ) {
var shipping_methods = {}; 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() { $( '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(); shipping_methods[ $( this ).data( 'index' ) ] = $( this ).val();
} ); } );
@ -423,7 +424,7 @@ jQuery( function( $ ) {
// Add new errors returned by this event // Add new errors returned by this event
if ( data.messages ) { 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 { } else {
$form.prepend( data ); $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 ) { blockOnSubmit: function( $form ) {
var form_data = $form.data(); var form_data = $form.data();
@ -468,12 +489,16 @@ jQuery( function( $ ) {
} }
// Trigger a handler to let gateways manipulate the checkout if needed // 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 ) { if ( $form.triggerHandler( 'checkout_place_order' ) !== false && $form.triggerHandler( 'checkout_place_order_' + wc_checkout_form.get_payment_method() ) !== false ) {
$form.addClass( 'processing' ); $form.addClass( 'processing' );
wc_checkout_form.blockOnSubmit( $form ); 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 is global, but we use it to ensure JSON is valid once returned.
$.ajaxSetup( { $.ajaxSetup( {
dataFilter: function( raw_response, dataType ) { dataFilter: function( raw_response, dataType ) {
@ -509,6 +534,9 @@ jQuery( function( $ ) {
data: $form.serialize(), data: $form.serialize(),
dataType: 'json', dataType: 'json',
success: function( result ) { success: function( result ) {
// Detach the unload handler that prevents a reload / redirect
wc_checkout_form.detachUnloadEventsOnSubmit();
try { try {
if ( 'success' === result.result ) { if ( 'success' === result.result ) {
if ( -1 === result.redirect.indexOf( 'https://' ) || -1 === result.redirect.indexOf( 'http://' ) ) { if ( -1 === result.redirect.indexOf( 'https://' ) || -1 === result.redirect.indexOf( 'http://' ) ) {
@ -537,11 +565,14 @@ jQuery( function( $ ) {
if ( result.messages ) { if ( result.messages ) {
wc_checkout_form.submit_error( result.messages ); wc_checkout_form.submit_error( result.messages );
} else { } 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 ) { 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>' ); wc_checkout_form.submit_error( '<div class="woocommerce-error">' + errorThrown + '</div>' );
} }
}); });
@ -551,7 +582,7 @@ jQuery( function( $ ) {
}, },
submit_error: function( error_message ) { submit_error: function( error_message ) {
$( '.woocommerce-NoticeGroup-checkout, .woocommerce-error, .woocommerce-message' ).remove(); $( '.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.removeClass( 'processing' ).unblock();
wc_checkout_form.$checkout_form.find( '.input-text, select, input:checkbox' ).trigger( 'validate' ).blur(); wc_checkout_form.$checkout_form.find( '.input-text, select, input:checkbox' ).trigger( 'validate' ).blur();
wc_checkout_form.scroll_to_notices(); wc_checkout_form.scroll_to_notices();