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

**URL:** <https://forum.bricksbuilder.io/t/bug-en-mobile-query-loop-facetwp-rompe-el-layout-del-card-slider-despues-del-ajax-bricks-2-1-2/36822>\
**Category:** Bugs\
**Tags:** v2-0-1\
**Created:** [November 14, 2025, 6:16am UTC](https://forum.bricksbuilder.io/t/bug-en-mobile-query-loop-facetwp-rompe-el-layout-del-card-slider-despues-del-ajax-bricks-2-1-2/36822 "2025-11-14T06:16:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Constructora](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/c/ad7895/32.png) [@Constructora](https://forum.bricksbuilder.io/u/Constructora)\
**Post date:** [November 14, 2025, 6:16am UTC](https://forum.bricksbuilder.io/t/bug-en-mobile-query-loop-facetwp-rompe-el-layout-del-card-slider-despues-del-ajax-bricks-2-1-2/36822/1 "2025-11-14T06:16:35Z")

</div>

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**

- Bricks **2.1.2**

- FacetWP **4.4.1**

- ACF Pro (fields only)

- Affected page:  
[https://darkgrey-boar-122087.hostingersite.com/](https://darkgrey-boar-122087.hostingersite.com/)

### **Issue**

- Layout renders correctly on **initial page load**.

- Works fine on **desktop**.

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

- Issue appears on **Safari, Chrome, and mobile simulators**.

### **What we tried**

Removed animations and custom JS.  
Currently using:

```auto
/**
 * --- 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!