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 #13310 from woocommerce/checkout-improvements 

Checkout improvements and fixes
This commit is contained in:
Claudio Sanches 2017-02-23 13:15:06 -03:00 committed by GitHub
parent b17c3c86c6 eb47dc7036
commit 9a666d23e1
6 changed files with 60 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,11 +25,14 @@ jQuery( function( $ ) {
this.$order_review.on( 'click', 'input[name="payment_method"]', this.payment_method_selected ); 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 // Form submission
this.$checkout_form.on( 'submit', this.submit ); this.$checkout_form.on( 'submit', this.submit );
// Inline validation // 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 // Manual trigger
this.$checkout_form.on( 'update', this.trigger_update_checkout ); this.$checkout_form.on( 'update', this.trigger_update_checkout );
@ -104,6 +107,8 @@ jQuery( function( $ ) {
$( 'div.create-account' ).hide(); $( 'div.create-account' ).hide();
if ( $( this ).is( ':checked' ) ) { if ( $( this ).is( ':checked' ) ) {
// Ensure password is not pre-populated.
$( '#account_password' ).val( '' ).change();
$( 'div.create-account' ).slideDown(); $( 'div.create-account' ).slideDown();
} }
}, },
@ -163,36 +168,45 @@ jQuery( function( $ ) {
reset_update_checkout_timer: function() { reset_update_checkout_timer: function() {
clearTimeout( wc_checkout_form.updateTimer ); clearTimeout( wc_checkout_form.updateTimer );
}, },
validate_field: function() { validate_field: function( e ) {
var $this = $( this ), var $this = $( this ),
$parent = $this.closest( '.form-row' ), $parent = $this.closest( '.form-row' ),
validated = true; validated = true,
validate_required = $parent.is( '.validate-required' ),
validate_email = $parent.is( '.validate-email' ),
event_type = e.type;
if ( $parent.is( '.validate-required' ) ) { if ( 'input' === event_type ) {
if ( 'checkbox' === $this.attr( 'type' ) && ! $this.is( ':checked' ) ) { $parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field woocommerce-invalid-email woocommerce-validated' );
$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 ( $parent.is( '.validate-email' ) ) { if ( 'focusout' === event_type || 'change' === event_type ) {
if ( $this.val() ) {
/* https://stackoverflow.com/questions/2855865/jquery-validate-e-mail-address-regex */ if ( validate_required ) {
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 ( 'checkbox' === $this.attr( 'type' ) && ! $this.is( ':checked' ) ) {
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
if ( ! pattern.test( $this.val() ) ) { validated = false;
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' ); } else if ( $this.val() === '' ) {
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
validated = false; validated = false;
} }
} }
}
if ( validated ) { if ( validate_email ) {
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field' ).addClass( 'woocommerce-validated' ); 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 ) { update_checkout: function( event, args ) {

2
assets/js/frontend/checkout.min.js vendored
View File

File diff suppressed because one or more lines are too long

9
assets/js/frontend/country-select.js
View File

@ -46,9 +46,8 @@ jQuery( function( $ ) {
return wc_country_select_params.i18n_searching; return wc_country_select_params.i18n_searching;
} }
}; };
var language = { 'language' : formatString }; var language = { 'language' : formatString };
return language; return language;
} }
@ -62,6 +61,10 @@ jQuery( function( $ ) {
}, getEnhancedSelectFormatString() ); }, getEnhancedSelectFormatString() );
$( this ).select2( select2_args ); $( this ).select2( select2_args );
// Maintain focus after select https://github.com/select2/select2/issues/4384
$( this ).on( 'select2:select', function() {
$( this ).focus();
} );
}); });
}; };

2
assets/js/frontend/country-select.min.js vendored
View File

@ -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(/&quot;/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(/&quot;/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()})});

6
includes/class-wc-checkout.php
View File

@ -202,7 +202,6 @@ class WC_Checkout {
'label' => __( 'Account username', 'woocommerce' ), 'label' => __( 'Account username', 'woocommerce' ),
'required' => true, 'required' => true,
'placeholder' => esc_attr__( 'Username', 'woocommerce' ), 'placeholder' => esc_attr__( 'Username', 'woocommerce' ),
'autocomplete' => 'username',
); );
} }
@ -212,7 +211,6 @@ class WC_Checkout {
'label' => __( 'Account password', 'woocommerce' ), 'label' => __( 'Account password', 'woocommerce' ),
'required' => true, 'required' => true,
'placeholder' => esc_attr__( 'Password', 'woocommerce' ), '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 ] ); $data[ $key ] = sanitize_email( $data[ $key ] );
if ( '' !== $data[ $key ] && ! is_email( $data[ $key ] ) ) { if ( ! is_email( $data[ $key ] ) ) {
/* translators: %s: email address */ /* translators: %s: email address */
$errors->add( 'validation', sprintf( __( '%s is not a valid email address.', 'woocommerce' ), '<strong>' . $field_label . '</strong>' ) ); $errors->add( 'validation', sprintf( __( '%s is not a valid email address.', 'woocommerce' ), '<strong>' . $field_label . '</strong>' ) );
} }

34
templates/checkout/form-billing.php
View File

@ -43,7 +43,8 @@ if ( ! defined( 'ABSPATH' ) ) {
<?php endforeach; ?> <?php endforeach; ?>
<?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?> <?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 ( ! is_user_logged_in() && $checkout->is_registration_enabled() ) : ?>
<?php if ( ! $checkout->is_registration_required() ) : ?> <?php if ( ! $checkout->is_registration_required() ) : ?>
@ -56,32 +57,23 @@ if ( ! defined( 'ABSPATH' ) ) {
<?php endif; ?> <?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 <div class="create-account">
_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>
<?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>
<div class="clear"></div>
</div>
<?php endif; ?>
<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
<?php endif; ?> <?php endif; ?>
<?php do_action( 'woocommerce_after_checkout_registration_form', $checkout ); ?>
</div> </div>