Reputation: 180
I'm really going crazy on this topic. Lots of people provided solutions but none is really working for me. My scenario might match with a lot of people:
I customized to WooCommerce quantity input (/global/quantity-input.php) and added to <input>
to increase or decrease the amount in the quantity field:
<div class="quantity">
<input class="step-btn minus" type="button" value="-">
<input type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" />
<input class="step-btn plus" type="button" value="+">
</div>
I use this jQuery loaded from my functions.php
:
jQuery(document).ready(function($){
$('.quantity .step-btn.plus').on('click', function() {
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$input.val( val + step ).change();
});
$('.quantity .step-btn.minus').on('click', function() {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 1) {
$input.val( val - step ).change();
}
});
});
On the cart page now I'm using this small jQuery snippet, also loaded from functions.php to auto-reload the AJAX after changing the quantity:
jQuery('div.woocommerce').on('click', '.qty, .plus, .minus', function(){
jQuery('[name="update_cart"]').removeAttr('disabled');
});
jQuery('div.woocommerce').on('change', '.qty, .plus, .minus', function(){
jQuery('[name="update_cart"]').trigger('click');
});
Now my Problems:
plus
or/and minus
.Would be awesome to get some support here! :)
Upvotes: 0
Views: 9866
Reputation: 180
The first Problem:
The AJAX only reloads after clicking twice on
plus
or/andminus
.
Problem here was, that I was trying to trigger the same object twice. It first executed the disable
and then the refresh because I had two different jQuery functions for basically the same thing.
The second Problem is a general thing with JS and Ajax, it bassicly kills the the function. What worked for me is to reload on the update_cart
action and reinitialize the function. See the entire code below, tested and working. I also added a small timeout to not call
the AJAX with every click:
function enable_update_cart() {
$('[name="update_cart"]').removeAttr('disabled');
}
function quantity_step_btn() {
var timeoutPlus;
$('.quantity .step-btn.plus').one().on('click', function() {
$input = $(this).prev('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
$input.val( val + step ).change();
if( timeoutPlus != undefined ) {
clearTimeout(timeoutPlus)
}
timeoutPlus = setTimeout(function(){
$('[name="update_cart"]').trigger('click');
}, 1000);
});
var timeoutMinus;
$('.quantity .step-btn.minus').one().on('click', function() {
$input = $(this).next('input.qty');
var val = parseInt($input.val());
var step = $input.attr('step');
step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
if (val > 1) {
$input.val( val - step ).change();
}
if( timeoutMinus != undefined ) {
clearTimeout(timeoutMinus)
}
timeoutMinus = setTimeout(function(){
$('[name="update_cart"]').trigger('click');
}, 1000);
});
var timeoutInput;
jQuery('div.woocommerce').on('change', '.qty', function(){
if( timeoutInput != undefined ) {
clearTimeout(timeoutInput)
}
timeoutInput = setTimeout(function(){
$('[name="update_cart"]').trigger('click');
}, 1000);
});
}
$(document).ready(function() {
enable_update_cart();
quantity_step_btn();
});
jQuery( document ).on( 'updated_cart_totals', function() {
enable_update_cart();
quantity_step_btn();
});
The woocommerce/global/quantity-input.php
was not touched!
Enjoy
Upvotes: 5