Quantity Issue with Ajax

Hi @mohammedmalleck

Please check this page – https://filtereverything.pro/resources/ajax-instructions-only/ under AJAX-related problems.

Some of the functions (JS code) are not AJAX compatible by default, so you need to make them AJAX compatible.

Best Regards – Victor

ty for the response ,
From what I can understand from the guide it says me to add “ready” listener in the jQuery function if only the “functionality” is not working after ajax…
the theme toggler example explains that it is not a rendering issue but a functionality issue…

Whereas for me , it appears to be my custom quantity is not being re-rendered on filter ajax…
let me know if I mis read something

@mohammedmalleck

AJAX updates all of the elements of the chosen container, those new elements that appear do not have applied counters JS code on them with the needed event listeners.

So you can use this “wrapper” to re-init your JS code that will place the needed event listeners on those new elements.

jQuery(document).on('ready', function(e){
    /* Plugin function to re-init, e.g. jQuery("[data-fancybox]").fancybox(); */
});

Best Regards – Victor

I am not sure if I am following correctly , when you say

those new elements that appear do not have applied counters JS code on them with the needed event listeners.

you mean that the elements are being added they are just not interactive right?? if yes , that is not the case since as I said the elements are in fact not being added in the HTML after the ajax filtering….

You can inspect dev tools to see that the html structure is different after and before the filtering…

Although , I did made my JS have that “ready”listener but that did not help either
heres the code

add_action('wp_footer', 'archives_quantity_fields_script');
function archives_quantity_fields_script() {
    ?>
    <script type='text/javascript'>
        jQuery(function($) {
            // Update data-quantity on input change
            $(document.body).on('click input ready', '.wpsf-cart-button input.qty, .product-action-wrap input.qty', function() {
                var quantityInput = $(this);
                var quantityValue = parseInt(quantityInput.val(), 10);
                var maxQuantity = parseInt(quantityInput.attr('max'), 10); // Get max value from attribute
                
                // Ensure quantity does not exceed max
                if (quantityValue > maxQuantity) {
                    quantityInput.val(maxQuantity);
                }
                
                // Update data-quantity on the corresponding add to cart button within the same parent
                quantityInput.closest('.wpsf-cart-button, .product-action-wrap').find('a.ajax_add_to_cart').attr('data-quantity', quantityInput.val());
                $(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            });

            // Ensure data-quantity is updated on button click
            $(document.body).on('click ready', '.add_to_cart_button', function() {
                var button = $(this);
                var quantityInput = button.closest('.wpsf-cart-button, .product-action-wrap').find('input.qty');
                var quantityValue = quantityInput.val(); // Get the current quantity value

                // Ensure the button has the correct quantity
                button.attr('data-quantity', quantityValue);

                setTimeout(function() {
                    quantityInput.val(1); // reset quantity to 1 after adding to cart
                }, 2000); // After 1 second
            });
        });
    </script>
    <?php
}

@mohammedmalleck

Something more like this, we just:

jQuery(document).on('ready', function (e) {
    // Update data-quantity on quantity input change
    jQuery(document.body).on('click input ready', '.wpsf-cart-button input.qty, .product-action-wrap input.qty', function() {
        var quantityInput = jQuery(this);
        var quantityValue = parseInt(quantityInput.val(), 10);
        var maxQuantity = parseInt(quantityInput.attr('max'), 10); // Get max value from attribute
        
        // Ensure quantity does not exceed max
        if (quantityValue > maxQuantity) {
            quantityInput.val(maxQuantity);
        }
        
        // Update data-quantity on the corresponding add to cart button within the same parent
        quantityInput.closest('.wpsf-cart-button, .product-action-wrap').find('a.ajax_add_to_cart').attr('data-quantity', quantityInput.val());
        jQuery(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
    });

    // Ensure data-quantity is updated on button click
    jQuery(document.body).on('click ready', '.add_to_cart_button', function() {
        var button = jQuery(this);
        var quantityInput = button.closest('.wpsf-cart-button, .product-action-wrap').find('input.qty');
        var quantityValue = quantityInput.val(); // Get the current quantity value

        // Ensure the button has the correct quantity
        button.attr('data-quantity', quantityValue);

        setTimeout(function() {
            quantityInput.val(1); // reset quantity to 1 after adding to cart
        }, 2000); // After 1 second
    });
});

Best Regards – Victor

Same result on my end :/ , the issue still persists
Updated code:

add_action('wp_footer', 'archives_quantity_fields_script');
function archives_quantity_fields_script() {
    ?>
    <script type='text/javascript'>

        jQuery(document).on('ready', function (e) {
            // Update data-quantity on quantity input change
            jQuery(document.body).on('click input ready', '.wpsf-cart-button input.qty, .product-action-wrap input.qty', function() {
                var quantityInput = jQuery(this);
                var quantityValue = parseInt(quantityInput.val(), 10);
                var maxQuantity = parseInt(quantityInput.attr('max'), 10); // Get max value from attribute
                
                // Ensure quantity does not exceed max
                if (quantityValue > maxQuantity) {
                    quantityInput.val(maxQuantity);
                }
                
                // Update data-quantity on the corresponding add to cart button within the same parent
                quantityInput.closest('.wpsf-cart-button, .product-action-wrap').find('a.ajax_add_to_cart').attr('data-quantity', quantityInput.val());
                jQuery(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            });

            // Ensure data-quantity is updated on button click
            jQuery(document.body).on('click ready', '.add_to_cart_button', function() {
                var button = jQuery(this);
                var quantityInput = button.closest('.wpsf-cart-button, .product-action-wrap').find('input.qty');
                var quantityValue = quantityInput.val(); // Get the current quantity value

                // Ensure the button has the correct quantity
                button.attr('data-quantity', quantityValue);

                setTimeout(function() {
                    quantityInput.val(1); // reset quantity to 1 after adding to cart
                }, 2000); // After 1 second
            });
        });
    </script>
    <?php
}