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

Checkout form JS. Closes #1954.

This commit is contained in:
Mike Jolley 2012-12-10 11:06:14 +00:00
parent d763b9bf05
commit 2f04ea576d
3 changed files with 91 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,24 +3,24 @@ jQuery(document).ready(function($) {
var updateTimer; var updateTimer;
var dirtyInput = false; var dirtyInput = false;
var xhr; var xhr;
function update_checkout() { function update_checkout() {
if (xhr) xhr.abort(); if (xhr) xhr.abort();
if ( $('select#shipping_method').size() > 0 ) if ( $('select#shipping_method').size() > 0 )
var method = $('select#shipping_method').val(); var method = $('select#shipping_method').val();
else else
var method = $('input[name=shipping_method]:checked').val(); var method = $('input[name=shipping_method]:checked').val();
var payment_method = $('#order_review input[name=payment_method]:checked').val(); var payment_method = $('#order_review input[name=payment_method]:checked').val();
var country = $('#billing_country').val(); var country = $('#billing_country').val();
var state = $('#billing_state').val(); var state = $('#billing_state').val();
var postcode = $('input#billing_postcode').val(); var postcode = $('input#billing_postcode').val();
var city = $('input#billing_city').val(); var city = $('input#billing_city').val();
var address = $('input#billing_address_1').val(); var address = $('input#billing_address_1').val();
var address_2 = $('input#billing_address_2').val(); var address_2 = $('input#billing_address_2').val();
if ( $('#shiptobilling input').is(':checked') || $('#shiptobilling input').size() == 0 ) { if ( $('#shiptobilling input').is(':checked') || $('#shiptobilling input').size() == 0 ) {
var s_country = country; var s_country = country;
var s_state = state; var s_state = state;
@ -36,29 +36,29 @@ jQuery(document).ready(function($) {
var s_address = $('input#shipping_address_1').val(); var s_address = $('input#shipping_address_1').val();
var s_address_2 = $('input#shipping_address_2').val(); var s_address_2 = $('input#shipping_address_2').val();
} }
$('#order_methods, #order_review').block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', opacity: 0.6}}); $('#order_methods, #order_review').block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', opacity: 0.6}});
var data = { var data = {
action: 'woocommerce_update_order_review', action: 'woocommerce_update_order_review',
security: woocommerce_params.update_order_review_nonce, security: woocommerce_params.update_order_review_nonce,
shipping_method: method, shipping_method: method,
payment_method: payment_method, payment_method: payment_method,
country: country, country: country,
state: state, state: state,
postcode: postcode, postcode: postcode,
city: city, city: city,
address: address, address: address,
address_2: address_2, address_2: address_2,
s_country: s_country, s_country: s_country,
s_state: s_state, s_state: s_state,
s_postcode: s_postcode, s_postcode: s_postcode,
s_city: s_city, s_city: s_city,
s_address: s_address, s_address: s_address,
s_address_2: s_address_2, s_address_2: s_address_2,
post_data: $('form.checkout').serialize() post_data: $('form.checkout').serialize()
}; };
xhr = $.ajax({ xhr = $.ajax({
type: 'POST', type: 'POST',
url: woocommerce_params.ajax_url, url: woocommerce_params.ajax_url,
@ -66,56 +66,56 @@ jQuery(document).ready(function($) {
success: function( response ) { success: function( response ) {
if ( response ) { if ( response ) {
$('#order_review').after(response).remove(); $('#order_review').after(response).remove();
$('#order_review input[name=payment_method]:checked').click(); $('#order_review input[name=payment_method]:checked');
$('body').trigger('updated_checkout'); $('body').trigger('updated_checkout');
} }
} }
}); });
} }
// Event for updating the checkout // Event for updating the checkout
$('body').bind('update_checkout', function() { $('body').bind('update_checkout', function() {
clearTimeout(updateTimer); clearTimeout(updateTimer);
update_checkout(); update_checkout();
}); });
$('p.password, form.login, .checkout_coupon, div.shipping_address').hide(); $('p.password, form.login, .checkout_coupon, div.shipping_address').hide();
$('input.show_password').change(function(){ $('input.show_password').change(function(){
$('p.password').slideToggle(); $('p.password').slideToggle();
}); });
$('a.showlogin').click(function(){ $('a.showlogin').click(function(){
$('form.login').slideToggle(); $('form.login').slideToggle();
return false; return false;
}); });
$('a.showcoupon').click(function(){ $('a.showcoupon').click(function(){
$('.checkout_coupon').slideToggle(); $('.checkout_coupon').slideToggle();
return false; return false;
}); });
$('#shiptobilling input').change(function(){ $('#shiptobilling input').change(function(){
$('div.shipping_address').hide(); $('div.shipping_address').hide();
if (!$(this).is(':checked')) { if (!$(this).is(':checked')) {
$('div.shipping_address').slideDown(); $('div.shipping_address').slideDown();
} }
}).change(); }).change();
if (woocommerce_params.option_guest_checkout=='yes') { if (woocommerce_params.option_guest_checkout=='yes') {
$('div.create-account').hide(); $('div.create-account').hide();
$('input#createaccount').change(function(){ $('input#createaccount').change(function(){
$('div.create-account').hide(); $('div.create-account').hide();
if ($(this).is(':checked')) { if ($(this).is(':checked')) {
$('div.create-account').slideDown(); $('div.create-account').slideDown();
} }
}).change(); }).change();
} }
$('.payment_methods input.input-radio').live('click', function(){ $('.payment_methods input.input-radio').live('click', function(){
if ( $('.payment_methods input.input-radio').length > 1 ) { if ( $('.payment_methods input.input-radio').length > 1 ) {
$('div.payment_box').filter(':visible').slideUp(250); $('div.payment_box').filter(':visible').slideUp(250);
@ -126,16 +126,16 @@ jQuery(document).ready(function($) {
$('div.payment_box').show(); $('div.payment_box').show();
} }
}); });
$('#order_review input[name=payment_method]:checked').click(); $('#order_review input[name=payment_method]:checked').click();
/* Update totals */ /* Update totals */
// Inputs/selects which update totals instantly // Inputs/selects which update totals instantly
$('select#shipping_method, input[name=shipping_method], #shiptobilling input, .update_totals_on_change select').live('change', function(){ $('select#shipping_method, input[name=shipping_method], #shiptobilling input, .update_totals_on_change select').live('change', function(){
clearTimeout( updateTimer ); clearTimeout( updateTimer );
$('body').trigger('update_checkout'); $('body').trigger('update_checkout');
}); });
// Inputs which update totals on change // Inputs which update totals on change
function input_changed() { function input_changed() {
dirtyInput = false; dirtyInput = false;
@ -155,33 +155,33 @@ jQuery(document).ready(function($) {
clearTimeout( updateTimer ); clearTimeout( updateTimer );
updateTimer = setTimeout( input_changed, '1000' ); updateTimer = setTimeout( input_changed, '1000' );
}); });
/* AJAX Coupon Form Submission */ /* AJAX Coupon Form Submission */
$('form.checkout_coupon').submit( function() { $('form.checkout_coupon').submit( function() {
var $form = $(this); var $form = $(this);
if ( $form.is('.processing') ) return false; if ( $form.is('.processing') ) return false;
$form.addClass('processing').block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', opacity: 0.6}}); $form.addClass('processing').block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', opacity: 0.6}});
var data = { var data = {
action: 'woocommerce_apply_coupon', action: 'woocommerce_apply_coupon',
security: woocommerce_params.apply_coupon_nonce, security: woocommerce_params.apply_coupon_nonce,
coupon_code: $form.find('input[name=coupon_code]').val() coupon_code: $form.find('input[name=coupon_code]').val()
}; };
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: woocommerce_params.ajax_url, url: woocommerce_params.ajax_url,
data: data, data: data,
success: function( code ) { success: function( code ) {
$('.woocommerce_error, .woocommerce_message').remove(); $('.woocommerce_error, .woocommerce_message').remove();
$form.removeClass('processing').unblock(); $form.removeClass('processing').unblock();
if ( code ) { if ( code ) {
$form.before( code ); $form.before( code );
$form.slideUp(); $form.slideUp();
$('body').trigger('update_checkout'); $('body').trigger('update_checkout');
} }
}, },
@ -189,50 +189,50 @@ jQuery(document).ready(function($) {
}); });
return false; return false;
}); });
/* AJAX Form Submission */ /* AJAX Form Submission */
$('form.checkout').submit( function() { $('form.checkout').submit( function() {
clearTimeout( updateTimer ); clearTimeout( updateTimer );
var $form = $(this); var $form = $(this);
if ( $form.is('.processing') ) if ( $form.is('.processing') )
return false; return false;
// Trigger a handler to let gateways manipulate the checkout if needed // 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 ) { if ( $form.triggerHandler('checkout_place_order') !== false && $form.triggerHandler('checkout_place_order_' + $('#order_review input[name=payment_method]:checked').val() ) !== false ) {
$form.addClass('processing'); $form.addClass('processing');
var form_data = $form.data(); var form_data = $form.data();
if ( form_data["blockUI.isBlocked"] != 1 ) if ( form_data["blockUI.isBlocked"] != 1 )
$form.block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', opacity: 0.6}}); $form.block({message: null, overlayCSS: {background: '#fff url(' + woocommerce_params.ajax_loader_url + ') no-repeat center', opacity: 0.6}});
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: woocommerce_params.checkout_url, url: woocommerce_params.checkout_url,
data: $form.serialize(), data: $form.serialize(),
success: function( code ) { success: function( code ) {
try { try {
result = $.parseJSON( code ); result = $.parseJSON( code );
if (result.result=='success') { if (result.result=='success') {
window.location = decodeURI(result.redirect); window.location = decodeURI(result.redirect);
} else if (result.result=='failure') { } else if (result.result=='failure') {
$('.woocommerce_error, .woocommerce_message').remove(); $('.woocommerce_error, .woocommerce_message').remove();
$form.prepend( result.messages ); $form.prepend( result.messages );
$form.removeClass('processing').unblock(); $form.removeClass('processing').unblock();
if (result.refresh=='true') $('body').trigger('update_checkout'); if (result.refresh=='true') $('body').trigger('update_checkout');
$('html, body').animate({ $('html, body').animate({
scrollTop: ($('form.checkout').offset().top - 100) scrollTop: ($('form.checkout').offset().top - 100)
}, 1000); }, 1000);
} else { } else {
throw "Invalid response"; throw "Invalid response";
} }
@ -240,8 +240,8 @@ jQuery(document).ready(function($) {
catch(err) { catch(err) {
$('.woocommerce_error, .woocommerce_message').remove(); $('.woocommerce_error, .woocommerce_message').remove();
$form.prepend( code ); $form.prepend( code );
$form.removeClass('processing').unblock(); $form.removeClass('processing').unblock();
$('html, body').animate({ $('html, body').animate({
scrollTop: ($('form.checkout').offset().top - 100) scrollTop: ($('form.checkout').offset().top - 100)
}, 1000); }, 1000);
@ -249,12 +249,12 @@ jQuery(document).ready(function($) {
}, },
dataType: "html" dataType: "html"
}); });
} }
return false; return false;
}); });
/* Localisation */ /* Localisation */
var locale_json = woocommerce_params.locale.replace(/"/g, '"'); var locale_json = woocommerce_params.locale.replace(/"/g, '"');
var locale = $.parseJSON( locale_json ); var locale = $.parseJSON( locale_json );
@ -262,44 +262,44 @@ jQuery(document).ready(function($) {
// Handle locale // Handle locale
$('body').bind('country_to_state_changing', function( event, country, wrapper ){ $('body').bind('country_to_state_changing', function( event, country, wrapper ){
var thisform = wrapper; var thisform = wrapper;
if ( locale[country] ) { if ( locale[country] ) {
var thislocale = locale[country]; var thislocale = locale[country];
} else { } else {
var thislocale = locale['default']; var thislocale = locale['default'];
} }
// Handle locale fields // Handle locale fields
var locale_fields = { var locale_fields = {
'address_1' : '#billing_address_1_field, #shipping_address_1_field', 'address_1' : '#billing_address_1_field, #shipping_address_1_field',
'address_2' : '#billing_address_2_field, #shipping_address_2_field', 'address_2' : '#billing_address_2_field, #shipping_address_2_field',
'state' : '#billing_state_field, #shipping_state_field', 'state' : '#billing_state_field, #shipping_state_field',
'postcode' : '#billing_postcode_field, #shipping_postcode_field', 'postcode' : '#billing_postcode_field, #shipping_postcode_field',
'city' : '#billing_city_field, #shipping_city_field' 'city' : '#billing_city_field, #shipping_city_field'
}; };
$.each( locale_fields, function( key, value ) { $.each( locale_fields, function( key, value ) {
var field = thisform.find( value ); var field = thisform.find( value );
if ( thislocale[key] ) { if ( thislocale[key] ) {
if ( thislocale[key]['label'] ) { if ( thislocale[key]['label'] ) {
field.find('label').html( thislocale[key]['label'] ); field.find('label').html( thislocale[key]['label'] );
} }
if ( thislocale[key]['placeholder'] ) { if ( thislocale[key]['placeholder'] ) {
field.find('input').attr( 'placeholder', thislocale[key]['placeholder'] ); field.find('input').attr( 'placeholder', thislocale[key]['placeholder'] );
} }
field.find('label abbr').remove(); field.find('label abbr').remove();
if ( typeof thislocale[key]['required'] == 'undefined' || thislocale[key]['required'] == true ) { if ( typeof thislocale[key]['required'] == 'undefined' || thislocale[key]['required'] == true ) {
field.find('label').append( required ); field.find('label').append( required );
} }
if ( key !== 'state' ) { if ( key !== 'state' ) {
if ( thislocale[key]['hidden'] == true ) { if ( thislocale[key]['hidden'] == true ) {
field.fadeOut(200).find('input').val(''); field.fadeOut(200).find('input').val('');
@ -307,7 +307,7 @@ jQuery(document).ready(function($) {
field.fadeIn(500); field.fadeIn(500);
} }
} }
} else if ( locale['default'][key] ) { } else if ( locale['default'][key] ) {
if ( locale['default'][key]['required'] == true ) { if ( locale['default'][key]['required'] == true ) {
if (field.find('label abbr').size()==0) field.find('label').append( required ); if (field.find('label abbr').size()==0) field.find('label').append( required );
@ -316,12 +316,12 @@ jQuery(document).ready(function($) {
field.fadeIn(500); field.fadeIn(500);
} }
} }
}); });
var postcodefield = thisform.find('#billing_postcode_field, #shipping_postcode_field'); var postcodefield = thisform.find('#billing_postcode_field, #shipping_postcode_field');
var cityfield = thisform.find('#billing_city_field, #shipping_city_field'); var cityfield = thisform.find('#billing_city_field, #shipping_city_field');
// Re-order postcode/city // Re-order postcode/city
if ( thislocale['postcode_before_city'] ) { if ( thislocale['postcode_before_city'] ) {
if (cityfield.is('.form-row-first')) { if (cityfield.is('.form-row-first')) {
@ -342,17 +342,17 @@ jQuery(document).ready(function($) {
}); });
} }
} }
}); });
// Init trigger // Init trigger
$('body').bind('init_checkout', function() { $('body').bind('init_checkout', function() {
$('#billing_country, #shipping_country, .country_to_state').change(); $('#billing_country, #shipping_country, .country_to_state').change();
$('body').trigger('update_checkout'); $('body').trigger('update_checkout');
}); });
// Update on page load // Update on page load
if ( woocommerce_params.is_checkout == 1 ) if ( woocommerce_params.is_checkout == 1 )
$('body').trigger('init_checkout'); $('body').trigger('init_checkout');
}); });

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

File diff suppressed because one or more lines are too long

4
templates/checkout/review-order.php
View File

@ -203,11 +203,11 @@ $available_methods = $woocommerce->shipping->get_available_shipping_methods();
foreach ($available_gateways as $gateway ) : foreach ($available_gateways as $gateway ) :
?> ?>
<li> <li>
<input type="radio" id="payment_method_<?php echo $gateway->id; ?>" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php if ($gateway->chosen) echo 'checked="checked"'; ?> /> <input type="radio" id="payment_method_<?php echo $gateway->id; ?>" class="input-radio" name="payment_method" value="<?php echo esc_attr( $gateway->id ); ?>" <?php checked( $gateway->chosen, true ); ?> />
<label for="payment_method_<?php echo $gateway->id; ?>"><?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?></label> <label for="payment_method_<?php echo $gateway->id; ?>"><?php echo $gateway->get_title(); ?> <?php echo $gateway->get_icon(); ?></label>
<?php <?php
if ( $gateway->has_fields() || $gateway->get_description() ) : if ( $gateway->has_fields() || $gateway->get_description() ) :
echo '<div class="payment_box payment_method_' . $gateway->id . '" style="display:none;">'; echo '<div class="payment_box payment_method_' . $gateway->id . '" ' . ( $gateway->chosen ? '' : 'style="display:none;"' ) . '>';
$gateway->payment_fields(); $gateway->payment_fields();
echo '</div>'; echo '</div>';
endif; endif;