woocommerce/assets/js/frontend/checkout.js

433 lines
13 KiB
JavaScript
Raw Normal View History

jQuery(document).ready(function($) {
var updateTimer;
2012-07-20 12:46:05 +00:00
var dirtyInput = false;
var xhr;
2012-12-10 11:06:14 +00:00
function update_checkout() {
2012-12-10 11:06:14 +00:00
if (xhr) xhr.abort();
2012-12-10 11:06:14 +00:00
if ( $('select#shipping_method').size() > 0 )
var method = $('select#shipping_method').val();
else
var method = $('input[name=shipping_method]:checked').val();
2012-12-10 11:06:14 +00:00
var payment_method = $('#order_review input[name=payment_method]:checked').val();
var country = $('#billing_country').val();
var state = $('#billing_state').val();
2012-09-23 16:16:39 +00:00
var postcode = $('input#billing_postcode').val();
2012-12-10 11:06:14 +00:00
var city = $('input#billing_city').val();
var address = $('input#billing_address_1').val();
var address_2 = $('input#billing_address_2').val();
if ( $('#shiptobilling input').is(':checked') || $('#shiptobilling input').size() == 0 ) {
var s_country = country;
var s_state = state;
var s_postcode = postcode;
2012-09-23 16:16:39 +00:00
var s_city = city;
var s_address = address;
var s_address_2 = address_2;
} else {
var s_country = $('#shipping_country').val();
var s_state = $('#shipping_state').val();
var s_postcode = $('input#shipping_postcode').val();
2012-09-23 16:16:39 +00:00
var s_city = $('input#shipping_city').val();
var s_address = $('input#shipping_address_1').val();
var s_address_2 = $('input#shipping_address_2').val();
}
2012-12-10 11:06:14 +00:00
2012-12-13 15:53:36 +00:00
$('#order_methods, #order_review').block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6}});
2012-12-10 11:06:14 +00:00
var data = {
action: 'woocommerce_update_order_review',
security: woocommerce_params.update_order_review_nonce,
2012-12-10 11:06:14 +00:00
shipping_method: method,
payment_method: payment_method,
2012-12-10 11:06:14 +00:00
country: country,
state: state,
postcode: postcode,
2012-09-23 16:16:39 +00:00
city: city,
address: address,
address_2: address_2,
2012-12-10 11:06:14 +00:00
s_country: s_country,
s_state: s_state,
s_postcode: s_postcode,
2012-09-23 16:16:39 +00:00
s_city: s_city,
s_address: s_address,
s_address_2: s_address_2,
post_data: $('form.checkout').serialize()
};
2012-12-10 11:06:14 +00:00
xhr = $.ajax({
type: 'POST',
url: woocommerce_params.ajax_url,
data: data,
success: function( response ) {
if ( response ) {
$('#order_review').after(response).remove();
$('body').trigger('updated_checkout');
}
}
});
2012-12-10 11:06:14 +00:00
}
2012-12-10 11:06:14 +00:00
// Event for updating the checkout
$('body').bind('update_checkout', function() {
clearTimeout(updateTimer);
update_checkout();
});
2012-12-10 11:06:14 +00:00
$('p.password, form.login, .checkout_coupon, div.shipping_address').hide();
2012-12-10 11:06:14 +00:00
$('input.show_password').change(function(){
$('p.password').slideToggle();
});
2012-12-10 11:06:14 +00:00
$('a.showlogin').click(function(){
$('form.login').slideToggle();
return false;
});
2012-12-10 11:06:14 +00:00
$('a.showcoupon').click(function(){
$('.checkout_coupon').slideToggle();
2013-02-20 18:20:28 +00:00
$('#coupon_code').focus();
return false;
});
2012-12-10 11:06:14 +00:00
$('#shiptobilling input').change(function(){
$('div.shipping_address').hide();
if (!$(this).is(':checked')) {
$('div.shipping_address').slideDown();
}
}).change();
2012-12-10 11:06:14 +00:00
2012-12-28 13:02:12 +00:00
if ( woocommerce_params.option_guest_checkout == 'yes' ) {
2012-12-10 11:06:14 +00:00
$('div.create-account').hide();
2012-12-10 11:06:14 +00:00
$('input#createaccount').change(function(){
$('div.create-account').hide();
if ($(this).is(':checked')) {
$('div.create-account').slideDown();
}
}).change();
2012-12-10 11:06:14 +00:00
}
2012-12-10 11:06:14 +00:00
2012-12-28 13:02:12 +00:00
// Used for input change events below
function input_changed() {
var update_totals = true;
if ( $(dirtyInput).size() ) {
$required_siblings = $(dirtyInput).closest('.form-row').siblings('.address-field.validate-required');
if ( $required_siblings.size() ) {
$required_siblings.each(function(){
if ( $(this).find('input.input-text').val() == '' || $(this).find('input.input-text').val() == 'undefined' ) {
update_totals = false;
}
});
}
}
if ( update_totals ) {
dirtyInput = false;
$('body').trigger('update_checkout');
}
2012-12-28 13:02:12 +00:00
}
2013-01-14 16:53:55 +00:00
$('form.checkout, #order_review')
2012-12-28 13:02:12 +00:00
/* Payment option selection */
.on( 'click', '.payment_methods input.input-radio', function() {
2012-11-07 21:23:45 +00:00
if ( $('.payment_methods input.input-radio').length > 1 ) {
$('div.payment_box').filter(':visible').slideUp(250);
if ($(this).is(':checked')) {
$('div.payment_box.' + $(this).attr('ID')).slideDown(250);
}
2012-11-07 21:23:45 +00:00
} else {
$('div.payment_box').show();
}
2013-02-05 10:46:31 +00:00
})
// Trigger initial click
.find('input[name=payment_method]:checked').click();
2012-12-10 11:06:14 +00:00
2013-01-14 16:53:55 +00:00
$('form.checkout')
2012-12-10 11:06:14 +00:00
/* Update totals/taxes/shipping */
2012-12-28 13:02:12 +00:00
2012-07-20 12:46:05 +00:00
// Inputs/selects which update totals instantly
2012-12-28 13:02:12 +00:00
.on( 'change', 'select#shipping_method, input[name=shipping_method], #shiptobilling input, .update_totals_on_change select', function(){
clearTimeout( updateTimer );
dirtyInput = false;
2012-07-20 12:46:05 +00:00
$('body').trigger('update_checkout');
2012-12-28 13:02:12 +00:00
})
2012-12-10 11:06:14 +00:00
// Address-fields which refresh totals when all required fields are filled
.on( 'change', '.address-field input.input-text', function() {
2012-07-20 12:46:05 +00:00
if ( dirtyInput ) {
input_changed();
2012-07-20 12:46:05 +00:00
}
2012-12-28 13:02:12 +00:00
})
.on( 'change', '.address-field select', function() {
dirtyInput = this;
input_changed();
})
.on( 'keydown', '.address-field input.input-text', function( e ){
2012-07-20 12:46:05 +00:00
var code = e.keyCode || e.which;
if ( code == '9' )
return;
dirtyInput = this;
2012-07-20 12:46:05 +00:00
clearTimeout( updateTimer );
updateTimer = setTimeout( input_changed, '1000' );
2012-12-28 13:02:12 +00:00
})
2012-12-10 11:06:14 +00:00
2012-12-10 14:50:49 +00:00
/* Inline validation */
2012-12-28 13:02:12 +00:00
.on( 'blur change', '.input-text, select', function() {
2012-12-10 14:50:49 +00:00
var $this = $(this);
var $parent = $this.closest('.form-row');
var validated = true;
if ( $parent.is( '.validate-required' ) ) {
if ( $this.val() == '' ) {
2013-01-03 11:40:10 +00:00
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-required-field' );
2012-12-10 14:50:49 +00:00
validated = false;
}
}
if ( $parent.is( '.validate-email' ) ) {
if ( $this.val() ) {
/* http://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() ) ) {
2013-01-03 11:40:10 +00:00
$parent.removeClass( 'woocommerce-validated' ).addClass( 'woocommerce-invalid woocommerce-invalid-email' );
2012-12-10 14:50:49 +00:00
validated = false;
}
}
}
if ( validated ) {
2013-01-03 11:40:10 +00:00
$parent.removeClass( 'woocommerce-invalid woocommerce-invalid-required-field' ).addClass( 'woocommerce-validated' );
2012-12-10 14:50:49 +00:00
}
2012-12-28 13:02:12 +00:00
} )
2012-12-10 14:50:49 +00:00
/* AJAX Form Submission */
2012-12-28 13:02:12 +00:00
.submit( function() {
2012-07-20 12:46:05 +00:00
clearTimeout( updateTimer );
2012-12-10 11:06:14 +00:00
var $form = $(this);
2012-12-10 11:06:14 +00:00
if ( $form.is('.processing') )
return false;
// Trigger a handler to let gateways manipulate the checkout if needed
if ( $form.triggerHandler('checkout_place_order') !== false && $form.triggerHandler('checkout_place_order_' + $('#order_review input[name=payment_method]:checked').val() ) !== false ) {
2012-12-10 11:06:14 +00:00
$form.addClass('processing');
var form_data = $form.data();
2012-12-10 11:06:14 +00:00
if ( form_data["blockUI.isBlocked"] != 1 )
2012-12-13 15:53:36 +00:00
$form.block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6}});
2012-12-10 11:06:14 +00:00
$.ajax({
type: 'POST',
url: woocommerce_params.checkout_url,
data: $form.serialize(),
success: function( code ) {
try {
2012-12-13 16:59:33 +00:00
// Get the valid JSON only
var code = code.split("<!--WC_END-->")[0];
// Parse
var result = $.parseJSON( code );
2012-12-10 11:06:14 +00:00
if (result.result=='success') {
2012-12-10 11:06:14 +00:00
window.location = decodeURI(result.redirect);
2012-12-10 11:06:14 +00:00
} else if (result.result=='failure') {
2012-12-10 11:06:14 +00:00
$('.woocommerce-error, .woocommerce-message').remove();
$form.prepend( result.messages );
2012-12-10 11:06:14 +00:00
$form.removeClass('processing').unblock();
2012-12-10 14:50:49 +00:00
$form.find( '.input-text, select' ).blur();
2012-12-10 11:06:14 +00:00
if (result.refresh=='true') $('body').trigger('update_checkout');
2012-12-10 11:06:14 +00:00
$('html, body').animate({
scrollTop: ($('form.checkout').offset().top - 100)
}, 1000);
2012-12-10 11:06:14 +00:00
} else {
throw "Invalid response";
}
}
catch(err) {
$('.woocommerce-error, .woocommerce-message').remove();
$form.prepend( code );
2012-12-10 11:06:14 +00:00
$form.removeClass('processing').unblock();
2012-12-10 14:50:49 +00:00
$form.find( '.input-text, select' ).blur();
2012-12-10 11:06:14 +00:00
$('html, body').animate({
scrollTop: ($('form.checkout').offset().top - 100)
}, 1000);
}
},
dataType: "html"
});
2012-12-10 11:06:14 +00:00
}
2012-12-28 13:02:12 +00:00
return false;
2013-02-05 10:46:31 +00:00
});
2012-12-28 13:02:12 +00:00
/* AJAX Coupon Form Submission */
$('form.checkout_coupon').submit( function() {
var $form = $(this);
if ( $form.is('.processing') ) return false;
$form.addClass('processing').block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', backgroundSize: '16px 16px', opacity: 0.6}});
var data = {
action: 'woocommerce_apply_coupon',
security: woocommerce_params.apply_coupon_nonce,
coupon_code: $form.find('input[name=coupon_code]').val()
};
$.ajax({
type: 'POST',
url: woocommerce_params.ajax_url,
data: data,
success: function( code ) {
$('.woocommerce-error, .woocommerce-message').remove();
2012-12-28 13:02:12 +00:00
$form.removeClass('processing').unblock();
if ( code ) {
$form.before( code );
$form.slideUp();
$('body').trigger('update_checkout');
}
},
dataType: "html"
});
return false;
});
2012-12-10 11:06:14 +00:00
/* Localisation */
var locale_json = woocommerce_params.locale.replace(/&quot;/g, '"');
var locale = $.parseJSON( locale_json );
2012-12-10 13:11:05 +00:00
var required = ' <abbr class="required" title="' + woocommerce_params.i18n_required_text + '">*</abbr>';
2012-12-28 13:02:12 +00:00
$('body')
// Handle locale
2012-12-28 13:02:12 +00:00
.bind('country_to_state_changing', function( event, country, wrapper ){
2012-12-10 11:06:14 +00:00
var thisform = wrapper;
2012-12-10 11:06:14 +00:00
if ( locale[country] ) {
var thislocale = locale[country];
} else {
var thislocale = locale['default'];
}
2012-12-10 11:06:14 +00:00
// Handle locale fields
2012-12-10 11:06:14 +00:00
var locale_fields = {
'address_1' : '#billing_address_1_field, #shipping_address_1_field',
'address_2' : '#billing_address_2_field, #shipping_address_2_field',
'state' : '#billing_state_field, #shipping_state_field',
'postcode' : '#billing_postcode_field, #shipping_postcode_field',
'city' : '#billing_city_field, #shipping_city_field'
2012-12-10 11:06:14 +00:00
};
$.each( locale_fields, function( key, value ) {
var field = thisform.find( value );
2012-12-10 11:06:14 +00:00
if ( thislocale[key] ) {
2012-12-10 11:06:14 +00:00
if ( thislocale[key]['label'] ) {
field.find('label').html( thislocale[key]['label'] );
}
2012-12-10 11:06:14 +00:00
if ( thislocale[key]['placeholder'] ) {
field.find('input').attr( 'placeholder', thislocale[key]['placeholder'] );
2012-12-10 11:06:14 +00:00
}
field.find('label abbr').remove();
if ( typeof thislocale[key]['required'] == 'undefined' || thislocale[key]['required'] == true ) {
field.find('label').append( required );
}
2012-12-10 11:06:14 +00:00
if ( key !== 'state' ) {
if ( thislocale[key]['hidden'] == true ) {
field.hide().find('input').val('');
} else {
field.show();
}
}
2012-12-10 11:06:14 +00:00
} else if ( locale['default'][key] ) {
if ( locale['default'][key]['required'] == true ) {
if (field.find('label abbr').size()==0) field.find('label').append( required );
}
if ( key !== 'state' && (typeof locale['default'][key]['hidden'] == 'undefined' || locale['default'][key]['hidden'] == false) ) {
field.show();
}
}
2012-12-10 11:06:14 +00:00
});
var $postcodefield = thisform.find('#billing_postcode_field, #shipping_postcode_field');
var $cityfield = thisform.find('#billing_city_field, #shipping_city_field');
2013-01-07 13:07:01 +00:00
var $statefield = thisform.find('#billing_state_field, #shipping_state_field');
2012-12-10 11:06:14 +00:00
if ( ! $postcodefield.attr('data-o_class') ) {
$postcodefield.attr('data-o_class', $postcodefield.attr('class'));
$cityfield.attr('data-o_class', $cityfield.attr('class'));
$statefield.attr('data-o_class', $statefield.attr('class'));
}
// Re-order postcode/city
if ( thislocale['postcode_before_city'] ) {
$postcodefield.add( $cityfield ).add( $statefield ).removeClass('form-row-first form-row-last').addClass('form-row-wide');
$postcodefield.insertBefore( $cityfield );
} else {
// Default
$postcodefield.attr('class', $postcodefield.attr('data-o_class'));
$cityfield.attr('class', $cityfield.attr('data-o_class'));
$statefield.attr('class', $statefield.attr('data-o_class'));
2013-01-07 13:07:01 +00:00
$postcodefield.insertAfter( $statefield );
}
2012-12-10 11:06:14 +00:00
2012-12-28 13:02:12 +00:00
})
2012-12-10 11:06:14 +00:00
2012-09-03 15:45:09 +00:00
// Init trigger
2012-12-28 13:02:12 +00:00
.bind('init_checkout', function() {
$('#billing_country, #shipping_country, .country_to_state').change();
2012-09-03 15:45:09 +00:00
$('body').trigger('update_checkout');
});
2012-12-10 11:06:14 +00:00
2012-09-03 15:45:09 +00:00
// Update on page load
2012-12-10 11:06:14 +00:00
if ( woocommerce_params.is_checkout == 1 )
2012-09-03 15:45:09 +00:00
$('body').trigger('init_checkout');
2012-12-10 11:06:14 +00:00
});