Woocommerce Results Count not updating

(@fesupportteam)

Hi @nickgajones

You can use a container that contains inside those counters in order to update them via AJAX.

Best Regards – Victor

Thread Starter

(@nickgajones)

Hi Victor,

They are in the same section, but in separate columns. It doesn’t seem possible to add them into the same containers on Breakdance due to the way the plugin works.

Unless I misunderstood what you meant? In which case could you explain further?

Thanks,

Nick

Thread Starter

(@nickgajones)

Just wanted to quickly add before you respond, it does work as intended when you refresh the page after a filter has been applied. It just doesn’t seem to work when the filter is applied without refreshing.

Thanks,

Nick

Plugin Support

(@fesupportteam)

Hi @nickgajones

<container for filters>
<wrap>
    <container with posts counters>
    <conatiner with your posts>
</wrap>

If you used for AJAX conatiner with your posts then only data inside of this container will be updated. If you used wrap it will update both posts and counters.

Also, if this is side functionality, please check this page –

Best Regards – Victor

Thread Starter

(@nickgajones)

Hi Victor! I think you tried to link a page but it didn’t come through?

And to be clear, the results of the products themselves do update if you click “Apply Filter”. It’s just the results counter itself which doesn’t unless you refresh the page.

Thanks,

Nick

Plugin Support

(@fesupportteam)

Yes on this page – https://filtereverything.pro/resources/ajax-instructions-only/#ajax_related_problems

Best Regards – Victor

Thread Starter

(@nickgajones)

Hi Victor,

I followed the above code, but it hasn’t fixed the result count issue. Again, I’m on breakdance so that might be why?

I’m going to post the JS I’m using below, so is it possible I applied the “ready” to the wrong JS snippet?

var enableResetFilterHide = 1;
var enableClickPill = 1;

function displayFilterPills(){
var filters = [];

// Check Search
var searchVal = jQuery(".an-filter-wrapper .wpc-search-field").val();
if(searchVal != "") {
    filters.push("search:-:-:search: " + searchVal);
}

// Price
var fromVal = parseInt(jQuery(".an-filter-wrapper input.wpc-filters-range-min").val());
var fromValMin = parseInt(jQuery(".an-filter-wrapper input.wpc-filters-range-min").attr("data-min"));
if(fromVal > fromValMin) {
    filters.push("from:-:-:From " + fromVal);
}
var toVal = parseInt(jQuery(".an-filter-wrapper input.wpc-filters-range-max").val());
var toValMax = parseInt(jQuery(".an-filter-wrapper input.wpc-filters-range-max").attr("data-max"));
if(toVal < toValMax) {
    filters.push("to:-:-:To " + toVal);
}

// Checks
jQuery(".an-filter-wrapper .wpc-filters-widget-wrapper .wpc-filters-section").each(function(){
    if(jQuery(this).find(".wpc-filters-ul-list").length > 0) {
        jQuery(this).find(".wpc-filters-ul-list .wpc-term-item").each(function(){
            var checks = jQuery(this).find(">.wpc-term-item-content-wrapper>input");
            if(checks.prop('checked')) {
                var text = jQuery(this).find(".wpc-term-name").length > 0 ? jQuery(this).find(".wpc-term-name").text() : jQuery(this).find("label>a").text();
                filters.push(checks.attr("id")+":-:-:" + text);
            }
        });
    }

});

// Display Pills
var pillHtml = ;
if(filters.length > 0) {
    pillHtml += <button class="an-pill reset-filters">Reset all</button>;
    jQuery.each(filters, function(k, v){
        var dt = v.split(':-:-:');
        pillHtml += <button class="an-pill filter-pill" data-an-id="+dt[0]+"><span class="text">+dt[1]+</span><svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg></button>
    });
}
jQuery(".an-filter-pill-wrapper").html(pillHtml);

}

jQuery(function($) {

setTimeout(() => {
    displayFilterPills();
}, 500);

// Show Popup
$(document).on("click", "body:not(:has(#breakdance_canvas)) .show-filter-popup-trigger", function(){

    // Add Class
    setTimeout(() => {
        $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper").addClass("active");
    }, 400);

    // Overlay
    $("body:not(:has(#breakdance_canvas)) .an-filter-popup-overlay").fadeIn(300);

    // Animate the popup to slide down smoothly
    $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper").stop().animate({
        bottom: '0vh'
    }, 400);

    // Animate the button to slide in with the popup
    $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper .wpc-filter-layout-submit-button").stop().animate({
        bottom: '0vh'
    }, 400);

});

// Hide Popup
$(document).on("click", "body:not(:has(#breakdance_canvas)) .hide-filter-popup-trigger, body:not(:has(#breakdance_canvas)) .an-filter-wrapper .wpc-filter-layout-submit-button a", function(){

    if(enableResetFilterHide != 0) {
        // Remove Class
        $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper").removeClass("active");

        // Overlay
        $("body:not(:has(#breakdance_canvas)) .an-filter-popup-overlay").fadeOut(300);

        // Animate the popup to slide up smoothly
        $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper").stop().animate({
            bottom: '-105vh'
        }, 450);

        // Animate the button to slide down with the popup
        $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper .wpc-filter-layout-submit-button").stop().animate({
            bottom: '-13vh'
        }, 450);

    }

    setTimeout(() => {
        enableResetFilterHide = 1;
    }, 500);
});

// Trigger Apply Filter & Reset Filter
$(document).on("click", "body:not(:has(#breakdance_canvas)) .an-filter-wrapper .trigger-apply-filter a", function(){
    enableResetFilterHide = 0;
    $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper .wpc-filter-layout-submit-button .wpc-filters-submit-button").trigger("click");
});
$(document).on("click", "body:not(:has(#breakdance_canvas)) .an-filter-wrapper .trigger-reset-filter a", function(){
    enableResetFilterHide = 0;
    $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper .wpc-filter-layout-submit-button .wpc-filters-reset-button").trigger("click");
});

// Append Overlay
$("body:not(:has(#breakdance_canvas)) .an-filter-wrapper").after("<span class='an-filter-popup-overlay hide-filter-popup-trigger'></span>");

// Detect Filter
// Target the parent element where .wpc-filters-main-wrap might be added
var targetNode = $('body')[0]; // Replace 'body' with the specific parent container if needed

// Configure the MutationObserver
var observer = new MutationObserver(function (mutationsList) {
    mutationsList.forEach(function (mutation) {
        if (mutation.type === 'childList') {
            $(mutation.addedNodes).each(function () {
                if ($(this).hasClass('wpc-filters-main-wrap')) {
                    console.log('Filter Changed!');
                    enableClickPill = 1;
                    displayFilterPills();
                }
            });
        }
    });
});

// Start observing
observer.observe(targetNode, { childList: true, subtree: true });

// Reset Only
$(document).on("click", ".an-filter-pill-wrapper .reset-filters", function(){
    enableResetFilterHide = 0;
    $("body:not(:has(#breakdance_canvas)) .an-filter-wrapper .wpc-filter-layout-submit-button .wpc-filters-reset-button").trigger("click");
});

// Filter Pill
$(document).on("click", ".an-filter-pill-wrapper .filter-pill", function(){
    if(enableClickPill) {
        enableClickPill = 0;
        var id  = $(this).attr("data-an-id");
        // Search
        if(id == "search") {
            $(".an-filter-wrapper .wpc-search-field").val("").trigger("change");
        } else if(id == "from") { // From
            $(".an-filter-wrapper input.wpc-filters-range-min").val($(".an-filter-wrapper input.wpc-filters-range-min").attr("data-min")).trigger("change");
        } else if(id == "to") { // To
            $(".an-filter-wrapper input.wpc-filters-range-max").val($(".an-filter-wrapper input.wpc-filters-range-max").attr("data-max")).trigger("change");
        } else {
            $("#" + id).trigger("click");
        }

        displayFilterPills();
    }
});

});

Plugin Support