Merge pull request #13310 from woocommerce/checkout-improvements
Checkout improvements and fixes
This commit is contained in:
Claudio Sanches
GitHub
commit
9a666d23e1
|
|
@ -25,11 +25,14 @@ jQuery( function( $ ) {
|
|||
this.$order_review.on( 'click', 'input[name="payment_method"]', this.payment_method_selected );
|
||||
}
|
||||
|
||||
// Prevent HTML5 validation which can conflict.
|
||||
this.$checkout_form.attr( 'novalidate', 'novalidate' );
|
||||
|
||||
// Form submission
|
||||
this.$checkout_form.on( 'submit', this.submit );
|
||||
|
||||
// Inline validation
|
||||
this.$checkout_form.on( 'blur change', '.input-text, select, input:checkbox', this.validate_field );
|
||||
this.$checkout_form.on( 'input blur change', '.input-text, select, input:checkbox', this.validate_field );
|
||||
|
||||
// Manual trigger
|
||||
this.$checkout_form.on( 'update', this.trigger_update_checkout );
|
||||
|
|
@ -104,6 +107,8 @@ jQuery( function( $ ) {
|
|||
$( 'div.create-account' ).hide();
|
||||
|
||||
if ( $( this ).is( ':checked' ) ) {
|
||||
// Ensure password is not pre-populated.
|
||||
$( '#account_password' ).val( '' ).change();
|
||||
$( 'div.create-account' ).slideDown();
|
||||
}
|
||||
},
|
||||
|
|
@ -163,36 +168,45 @@ jQuery( function( $ ) {
|
|||
reset_update_checkout_timer: function() {
|
||||
clearTimeout( wc_checkout_form.updateTimer );
|
||||
},
|
||||
validate_field: function() {
|
||||
var $this = $( this ),
|
||||
$parent = $this.closest( '.form-row' ),
|
||||
validated = true;
|
||||
validate_field: function( e ) {
|
||||
var $this = $( this ),
|
||||
$parent = $this.closest( '.form-row' ),
|
||||
validated = true,
|
||||
validate_required = $parent.is( '.validate-required' ),
|
||||
validate_email = $parent.is( '.validate-email' ),
|
||||
event_type = e.type;
|
||||
|
||||
if ( $parent.is( '.validate-required' ) ) {
|
||||
if ( 'checkbox' === $this.attr( 'type' ) && ! $this.is( ':checked' ) ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
|
||||
validated = false;
|
||||
} else if ( $this.val() === '' ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
|
||||
validated = false;
|
||||
}
|
||||
if ( 'input' === event_type ) {
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email woocommerce-validated' );
|
||||
}
|
||||
|
||||
if ( $parent.is( '.validate-email' ) ) {
|
||||
if ( $this.val() ) {
|
||||
if ( 'focusout' === event_type || 'change' === event_type ) {
|
||||
|
||||
/* 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);
|
||||
|
||||
if ( ! pattern.test( $this.val() ) ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
|
||||
if ( validate_required ) {
|
||||
if ( 'checkbox' === $this.attr( 'type' ) && ! $this.is( ':checked' ) ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
|
||||
validated = false;
|
||||
} else if ( $this.val() === '' ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
|
||||
validated = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( validated ) {
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field' ).addClass( 'woocommerce-validated' );
|
||||
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);
|
||||
|
||||
if ( ! pattern.test( $this.val() ) ) {
|
||||
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
|
||||
validated = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if ( validated ) {
|
||||
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email' ).addClass( 'woocommerce-validated' );
|
||||
}
|
||||
}
|
||||
},
|
||||
update_checkout: function( event, args ) {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -46,9 +46,8 @@ jQuery( function( $ ) {
|
|||
return wc_country_select_params.i18n_searching;
|
||||
}
|
||||
};
|
||||
|
||||
var language = { 'language' : formatString };
|
||||
|
||||
|
||||
var language = { 'language' : formatString };
|
||||
return language;
|
||||
}
|
||||
|
||||
|
|
@ -62,6 +61,10 @@ jQuery( function( $ ) {
|
|||
}, getEnhancedSelectFormatString() );
|
||||
|
||||
$( this ).select2( select2_args );
|
||||
// Maintain focus after select https://github.com/select2/select2/issues/4384
|
||||
$( this ).on( 'select2:select', function() {
|
||||
$( this ).focus();
|
||||
} );
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
jQuery(function(a){function b(){var a={noResults:function(){return wc_country_select_params.i18n_no_matches},errorLoading:function(){return wc_country_select_params.i18n_ajax_error},inputTooShort:function(a){var b=a.minimum-a.input.length;return 1===b?wc_country_select_params.i18n_input_too_short_1:wc_country_select_params.i18n_input_too_short_n.replace("%qty%",b)},inputTooLong:function(a){var b=a.input.length-a.maximum;return 1===b?wc_country_select_params.i18n_input_too_long_1:wc_country_select_params.i18n_input_too_long_n.replace("%qty%",b)},maximumSelected:function(a){return 1===a.maximum?wc_country_select_params.i18n_selection_too_long_1:wc_country_select_params.i18n_selection_too_long_n.replace("%qty%",a.maximum)},loadingMore:function(){return wc_country_select_params.i18n_load_more},searching:function(){return wc_country_select_params.i18n_searching}},b={language:a};return b}if("undefined"==typeof wc_country_select_params)return!1;if(a().select2){var c=function(){a("select.country_select:visible, select.state_select:visible").each(function(){var c=a.extend({placeholderOption:"first",width:"100%"},b());a(this).select2(c)})};c(),a(document.body).bind("country_to_state_changed",function(){c()})}var d=wc_country_select_params.countries.replace(/"/g,'"'),e=a.parseJSON(d);a(document.body).on("change","select.country_to_state, input.country_to_state",function(){var b=a(this).closest(".woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-shipping-calculator");b.length||(b=a(this).closest(".form-row").parent());var c=a(this).val(),d=b.find("#billing_state, #shipping_state, #calc_shipping_state"),f=d.parent(),g=d.attr("name"),h=d.attr("id"),i=d.val(),j=d.attr("placeholder")||d.attr("data-placeholder")||"";if(e[c])if(a.isEmptyObject(e[c]))d.parent().hide().find(".select2-container").remove(),d.replaceWith('<input type="hidden" class="hidden" name="'+g+'" id="'+h+'" value="" placeholder="'+j+'" />'),a(document.body).trigger("country_to_state_changed",[c,b]);else{var k="",l=e[c];for(var m in l)l.hasOwnProperty(m)&&(k=k+'<option value="'+m+'">'+l[m]+"</option>");d.parent().show(),d.is("input")&&(d.replaceWith('<select name="'+g+'" id="'+h+'" class="state_select" data-placeholder="'+j+'"></select>'),d=b.find("#billing_state, #shipping_state, #calc_shipping_state")),d.html('<option value="">'+wc_country_select_params.i18n_select_state_text+"</option>"+k),d.val(i).change(),a(document.body).trigger("country_to_state_changed",[c,b])}else d.is("select")?(f.show().find(".select2-container").remove(),d.replaceWith('<input type="text" class="input-text" name="'+g+'" id="'+h+'" placeholder="'+j+'" />'),a(document.body).trigger("country_to_state_changed",[c,b])):d.is('input[type="hidden"]')&&(f.show().find(".select2-container").remove(),d.replaceWith('<input type="text" class="input-text" name="'+g+'" id="'+h+'" placeholder="'+j+'" />'),a(document.body).trigger("country_to_state_changed",[c,b]));a(document.body).trigger("country_to_state_changing",[c,b])}),a(function(){a(":input.country_to_state").change()})});
|
||||
jQuery(function(a){function b(){var a={noResults:function(){return wc_country_select_params.i18n_no_matches},errorLoading:function(){return wc_country_select_params.i18n_ajax_error},inputTooShort:function(a){var b=a.minimum-a.input.length;return 1===b?wc_country_select_params.i18n_input_too_short_1:wc_country_select_params.i18n_input_too_short_n.replace("%qty%",b)},inputTooLong:function(a){var b=a.input.length-a.maximum;return 1===b?wc_country_select_params.i18n_input_too_long_1:wc_country_select_params.i18n_input_too_long_n.replace("%qty%",b)},maximumSelected:function(a){return 1===a.maximum?wc_country_select_params.i18n_selection_too_long_1:wc_country_select_params.i18n_selection_too_long_n.replace("%qty%",a.maximum)},loadingMore:function(){return wc_country_select_params.i18n_load_more},searching:function(){return wc_country_select_params.i18n_searching}},b={language:a};return b}if("undefined"==typeof wc_country_select_params)return!1;if(a().select2){var c=function(){a("select.country_select:visible, select.state_select:visible").each(function(){var c=a.extend({placeholderOption:"first",width:"100%"},b());a(this).select2(c),a(this).on("select2:select",function(){a(this).focus()})})};c(),a(document.body).bind("country_to_state_changed",function(){c()})}var d=wc_country_select_params.countries.replace(/"/g,'"'),e=a.parseJSON(d);a(document.body).on("change","select.country_to_state, input.country_to_state",function(){var b=a(this).closest(".woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-shipping-calculator");b.length||(b=a(this).closest(".form-row").parent());var c=a(this).val(),d=b.find("#billing_state, #shipping_state, #calc_shipping_state"),f=d.parent(),g=d.attr("name"),h=d.attr("id"),i=d.val(),j=d.attr("placeholder")||d.attr("data-placeholder")||"";if(e[c])if(a.isEmptyObject(e[c]))d.parent().hide().find(".select2-container").remove(),d.replaceWith('<input type="hidden" class="hidden" name="'+g+'" id="'+h+'" value="" placeholder="'+j+'" />'),a(document.body).trigger("country_to_state_changed",[c,b]);else{var k="",l=e[c];for(var m in l)l.hasOwnProperty(m)&&(k=k+'<option value="'+m+'">'+l[m]+"</option>");d.parent().show(),d.is("input")&&(d.replaceWith('<select name="'+g+'" id="'+h+'" class="state_select" data-placeholder="'+j+'"></select>'),d=b.find("#billing_state, #shipping_state, #calc_shipping_state")),d.html('<option value="">'+wc_country_select_params.i18n_select_state_text+"</option>"+k),d.val(i).change(),a(document.body).trigger("country_to_state_changed",[c,b])}else d.is("select")?(f.show().find(".select2-container").remove(),d.replaceWith('<input type="text" class="input-text" name="'+g+'" id="'+h+'" placeholder="'+j+'" />'),a(document.body).trigger("country_to_state_changed",[c,b])):d.is('input[type="hidden"]')&&(f.show().find(".select2-container").remove(),d.replaceWith('<input type="text" class="input-text" name="'+g+'" id="'+h+'" placeholder="'+j+'" />'),a(document.body).trigger("country_to_state_changed",[c,b]));a(document.body).trigger("country_to_state_changing",[c,b])}),a(function(){a(":input.country_to_state").change()})});
|
||||
|
|
@ -202,7 +202,6 @@ class WC_Checkout {
|
|||
'label' => __( 'Account username', 'woocommerce' ),
|
||||
'required' => true,
|
||||
'placeholder' => esc_attr__( 'Username', 'woocommerce' ),
|
||||
'autocomplete' => 'username',
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +211,6 @@ class WC_Checkout {
|
|||
'label' => __( 'Account password', 'woocommerce' ),
|
||||
'required' => true,
|
||||
'placeholder' => esc_attr__( 'Password', 'woocommerce' ),
|
||||
'autocomplete' => 'password',
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -618,10 +616,10 @@ class WC_Checkout {
|
|||
}
|
||||
}
|
||||
|
||||
if ( in_array( 'email', $format ) ) {
|
||||
if ( in_array( 'email', $format ) && '' !== $data[ $key ] ) {
|
||||
$data[ $key ] = sanitize_email( $data[ $key ] );
|
||||
|
||||
if ( '' !== $data[ $key ] && ! is_email( $data[ $key ] ) ) {
|
||||
if ( ! is_email( $data[ $key ] ) ) {
|
||||
/* translators: %s: email address */
|
||||
$errors->add( 'validation', sprintf( __( '%s is not a valid email address.', 'woocommerce' ), '<strong>' . $field_label . '</strong>' ) );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,8 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
<?php endforeach; ?>
|
||||
|
||||
<?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?>
|
||||
|
||||
</div>
|
||||
<div class="woocommerce-account-fields">
|
||||
<?php if ( ! is_user_logged_in() && $checkout->is_registration_enabled() ) : ?>
|
||||
|
||||
<?php if ( ! $checkout->is_registration_required() ) : ?>
|
||||
|
|
@ -56,32 +57,23 @@ if ( ! defined( 'ABSPATH' ) ) {
|
|||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $checkout->get_checkout_fields( 'account' ) ) : ?>
|
||||
<?php do_action( 'woocommerce_before_checkout_registration_form', $checkout ); ?>
|
||||
|
||||
<div class="create-account">
|
||||
<?php if ( $checkout->get_checkout_fields( 'account' ) ) : ?>
|
||||
|
||||
<p><?php
|
||||
_e( 'Create an account by entering the information below.', 'woocommerce' );
|
||||
if ( 'yes' === get_option( 'woocommerce_enable_checkout_login_reminder' ) ) {
|
||||
echo ' ' . __( 'If you are a returning customer please login at the top of the page.', 'woocommerce' );
|
||||
}
|
||||
?></p>
|
||||
<div class="create-account">
|
||||
|
||||
<?php foreach ( $checkout->get_checkout_fields( 'account' ) as $key => $field ) : ?>
|
||||
<?php foreach ( $checkout->get_checkout_fields( 'account' ) as $key => $field ) : ?>
|
||||
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>
|
||||
<div class="clear"></div>
|
||||
|
||||
<?php endforeach; ?>
|
||||
|
||||
<div class="clear"></div>
|
||||
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue