Bug en mobile: Query Loop + FacetWP rompe el layout del card/slider después del AJAX (Bricks 2.1.2)

Bugs
1

Hi Bricks team,

We’re experiencing a layout issue only on mobile when using a Query Loop with a Bricks carousel inside each card, combined with FacetWP (v4.4.1).

Setup

Issue

  • Layout renders correctly on initial page load.

  • Works fine on desktop.

  • But after FacetWP performs an AJAX refresh, the mobile layout breaks:

    • Card design becomes distorted.

    • Carousel shifts left or stretches.

    • Content misaligns inside the Query Loop.

  • Issue appears on Safari, Chrome, and mobile simulators.

What we tried

Removed animations and custom JS.
Currently using:

/**
 * --- FUNCIÓN 1: FORMATEAR NÚMEROS ---
 * (Esta es la función que habías borrado y que necesitamos de vuelta)
 */
function define_number_format(number_value) {
    // 1. Limpiamos el valor: eliminamos espacios, '$', o puntos previos.
    const clean_number = parseFloat(String(number_value).replace(/[^0-9]/g, ""));

    // 2. Si no es un número válido, devolvemos el original.
    if (isNaN(clean_number)) {
        return number_value;
    }

    // 3. Formateamos como peso colombiano (sin decimales).
    return new Intl.NumberFormat("es-CO", {
        maximumFractionDigits: 0
    }).format(clean_number);
}

/**
 * --- FUNCIÓN 2: APLICAR FORMATO DE NÚMEROS ---
 * (Esta también la habías borrado. Busca todas las cards y aplica el formato)
 */
function format_all_project_cards() {
    const price_elements = document.querySelectorAll(".pcard, .pcardr");

    price_elements.forEach(element_price => {
        // Verificamos si ya está formateado para no hacerlo dos veces
        if (!element_price.dataset.formatted) {
            element_price.innerText = define_number_format(element_price.innerText);
            element_price.dataset.formatted = "true"; // Marcamos como formateado
        }
    });
    console.log("✅ NÚMEROS: Formato de separadores de miles aplicado.");
}

/**
 * --- FUNCIÓN 3: CORREGIR CARRUSELES ---
 * (Esta es tu lógica robusta, ahora dentro de una función)
 */
function fix_all_carousels() {
    console.log("Iniciando corrección de carruseles...");
    const resultsContainer = document.querySelector('.facetwp-template');
    if (!resultsContainer) {
        console.warn("Contenedor de FacetWP no encontrado, saltando corrección de carrusel.");
        return;
    }

    const carousels = resultsContainer.querySelectorAll('.brxe-carousel, .brxe-slider, .brxe-nestable-slider');
    console.log(Encontrados ${carousels.length} carruseles para procesar.);

    carousels.forEach(element => {
        // --- A. Corrección de Estilos y Lazy Load (Tu código) ---
        element.querySelectorAll('img').forEach(img => {
            img.style.width = '100%';
            img.style.height = 'auto';
            img.style.objectFit = 'cover';
            if (img.hasAttribute('data-src')) {
                img.setAttribute('src', img.getAttribute('data-src'));
                img.removeAttribute('data-src');
            }
            if (img.hasAttribute('data-srcset')) {
                img.setAttribute('srcset', img.getAttribute('data-srcset'));
                img.removeAttribute('data-srcset');
            }
            img.classList.remove('swiper-lazy', 'swiper-lazy-loaded');
            const slide = img.closest('.swiper-slide');
            if (slide) {
                slide.classList.remove('swiper-lazy-loaded', 'swiper-lazy-preloader-visible');
                slide.style.opacity = 1;
                slide.style.visibility = 'visible';
                slide.style.minHeight = '150px';
            }
        });
        
        const wrapper = element.querySelector('.swiper-wrapper, .splide__list');
        if (wrapper) wrapper.style.display = 'flex';

        // --- B. Destrucción de la Instancia (Tu código) ---
        if (element.swiper) {
            element.swiper.destroy(true, true);
            element.swiper = null;
        } else if (element.splide) {
            element.splide.destroy();
            element.splide = null;
        }

        // --- C. Re-inicialización y Recálculo (Tu código) ---
        setTimeout(() => {
            element.dispatchEvent(new CustomEvent('bricks-load', { bubbles: true, detail: { container: element } }));
            window.dispatchEvent(new Event('resize'));
            
            setTimeout(() => {
                if (element.swiper) {
                    element.swiper.update();
                    element.swiper.autoplay.start();
                    console.log("✅ SWIPER: Re-inicializado y forzado a recalcular.");
                } else if (element.splide) {
                    element.splide.refresh();
                    element.splide.play();
                    console.log("✅ SPLIDE: Re-inicializado y forzado a recalcular.");
                }
            }, 100); 
        }, 50);
    });
}

setTimeout(() => {
  // Recalcula Bricks después del AJAX
  if (typeof bricksFrontend !== 'undefined' && bricksFrontend.renderers) {
    bricksFrontend.renderers.init();
  }
}, 300);


/**
 * --- INICIALIZACIÓN ---
 * Aquí es donde llamamos a las funciones.
 */

// 1. Ejecutar en la carga inicial de la página (para los elementos que se ven al inicio)
window.addEventListener('load', function () {
    console.log("--- Carga inicial (load) ---");
    format_all_project_cards(); // Llama a la función de números
    fix_all_carousels();        // Llama a tu función de carruseles
});

// 2. Ejecutar después de CADA acción de FacetWP (filtrar O limpiar)
document.addEventListener('facetwp-loaded', function() {
    console.log("--- Carga de FacetWP (facetwp-loaded) ---");
    format_all_project_cards(); // Llama a la función de números OTRA VEZ
    fix_all_carousels();        // Llama a tu función de carruseles OTRA VEZ
});

However, the mobile layout still breaks after FacetWP’s AJAX reload.

Steps to reproduce

  1. Open the page on a mobile device.

  2. Apply any FacetWP filter.

  3. The card carousel becomes misaligned after AJAX.

Question

Is there a recommended way to correctly re-initialize the Bricks carousel and Query Loop layout after facetwp-loaded?
Or is this a known issue with Bricks 2.1.2 + FacetWP?

We can provide temporary access if needed.

Thanks!