Input fields with incrementing buttons Jquery not working properly
Kadir B. The question was asked: Apr 15, 2020. 03:08
1 answer
I have a A plus minus and a input button. Input starts at 1 and if you click on + button it has to add +1 and if you click - it decreseas 1. Now I have this html div 35x:
35x same div because there are 35 products each product has a +/- button. The crazy thing is if I click + with this code it adds up 35 (counts products), I just want the clicked one to increase with 1. What am I doing wrong?
jQuery( function( $ ) { if ( ! String.prototype.getDecimals ) { String.prototype.getDecimals = function() { var num = this, match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/); if ( ! match ) { return 0; } return Math.max( 0, ( match[1] ? match[1].length : 0 ) - ( match[2] ? +match[2] : 0 ) ); } } // Quantity "plus" and "minus" buttons $( document.body ).on( 'click', '.plus, .minus', function() { var $qty = $( this ).closest( '.quantity' ).find( '.qty'), currentVal = parseFloat( $qty.val() ), max = parseFloat( $qty.attr( 'max' ) ), min = parseFloat( $qty.attr( 'min' ) ), step = $qty.attr( 'step' ); // Format values if ( ! currentVal || currentVal === '' || currentVal === 'NaN' ) currentVal = 0; if ( max === '' || max === 'NaN' ) max = ''; if ( min === '' || min === 'NaN' ) min = 0; if ( step === 'any' || step === '' || step === undefined || parseFloat( step ) === 'NaN' ) step = 1; // Change the value if ( $( this ).is( '.plus' ) ) { if ( max && ( currentVal >= max ) ) { $qty.val( max ); } else { $qty.val( ( currentVal + parseFloat( step )).toFixed( step.getDecimals() ) ); } } else { if ( min && ( currentVal <= min ) ) { $qty.val( min ); } else if ( currentVal > 0 ) { $qty.val( ( currentVal - parseFloat( step )).toFixed( step.getDecimals() ) ); } } // Trigger change event $qty.trigger( 'change' ); }); });
PHP:
/** * Adjust the quantity input values */ add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 ); function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) { if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) { // Get the necessary classes $class = implode( ' ', array_filter( array( 'button', 'product_type_' . $product->get_type(), $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '', $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '', ) ) ); // Adding embeding <form> tag and the quantity field $html = sprintf( '%s%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>%s', '<form class="cart">', woocommerce_quantity_input( array(), $product, false ), esc_url( $product->add_to_cart_url() ), esc_attr( isset( $quantity ) ? $quantity : 1 ), esc_attr( $product->get_id() ), esc_attr( $product->get_sku() ), esc_attr( isset( $class ) ? $class : 'button' ), $product->add_to_cart_text(), '</form>' ); } return $html; }