Quantity Issue with Ajax

@fesupportteam
any updates?

Hi @fesupportteam ,
I get it your point here. When generating html in client side we need “ready” event to display it on ajax filtering BUT thats not my case as I am not rendering the HTML on client side but server side.

I tried mixing the php with jQuery to re-render my html but I am failing so far.
I think if maybe a specific ajax call is being made when filtering is done with the plugin I should then again invoke the add_filter function responsible for custom quantity selector html in products archive page.

I initially came here with a hope that you might provide me with any such ajax call using which i can re-invoke the function , here is that function:

add_filter('woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 20, 2);
function quantity_inputs_for_loop_ajax_add_to_cart($html, $product) {
        if ($product && $product->is_type('simple') && $product->is_purchasable() && !$product->is_sold_individually()) {
            // Get product stock quantity and stock status
            $stock_quantity = $product->get_stock_quantity();
            $stock_status = $product->is_in_stock() ? 'in-stock' : 'out-stock';

            // Get the necessary classes for the button
            $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' : '',
            )));

            if ($product->is_in_stock()) {
                // If product is in stock, display quantity and add to cart
                
                $html = sprintf('%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
                    woocommerce_quantity_input(array(
                        'min_value' => 1, // Minimum value
                        'max_value' => $stock_quantity, // Maximum value based on stock
                        'input_value' => 1, // Default value
                    ), $product, false),
                    esc_url($product->add_to_cart_url()),
                    esc_attr(1),
                    esc_attr($product->get_id()),
                    esc_attr($product->get_sku()),
                    esc_attr($class),
                    esc_html($product->add_to_cart_text())
                );
            } else {
                // If product is out of stock, display "View Product" button
                $html = sprintf('<a href="%s" class="button view_product view-product-btn-archive">%s</a>',
                    esc_url(get_permalink($product->get_id())), // Link to the product page
                    esc_html__('View Product', 'woocommerce') // Text for the button
                );
            }
        }

        return $html;
    
}

Hi @fesupportteam

So I was finally able to solve the issue , leaving the code here for anyone having the same issue as me!

//re-add quantity on prodcuts archive page on filtering with ajax with filter everything plugin
function addQuantityOnAjax() {
    ?>
    <script>
		jQuery(document).on('ready', function(e){
            // check if you are in products archive
            if(document.body.classList.contains("woocommerce-shop") && document.body.classList.contains("post-type-archive-product")){
                // iterate thorough all quantity elements in prodcut details!
                document.querySelectorAll(".products > li .product-details .product-action-wrap .quantity").forEach( quantityContainer =>{
                    //save dynamic values , like min,max,id & name
                    const minValue = parseFloat(quantityContainer.querySelector(".input-text").getAttribute('min'));
                    const maxValue = parseFloat(quantityContainer.querySelector(".input-text").getAttribute('max'));
                    const id =  quantityContainer.querySelector(".input-text").id;
                    const name = quantityContainer.querySelector("label").textContent;
                    //add quantity added class for styling purposes
                    quantityContainer.classList.add("spinners-added");
                    //add html to re-render the part which was not rendering previously

                    quantityContainer.innerHTML = <br>                    <input type="button" value="-" class="minus"><br>                    <label class="screen-reader-text" for="${id}">${name}</label><br>                    <input type="number" id="${id}" class="input-text qty text" name="quantity" value="1" aria-label="Product quantity" min="${minValue}" max="${maxValue}" step="1" placeholder="" inputmode="numeric" autocomplete="off"><br>                    <input type="button" value="+" class="plus"><br>;   
                });
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'addQuantityOnAjax');

• This reply was modified 1 year, 6 months ago by mohammedmalleck. Reason: typos :/