Hola @alba_auto, y gracias a @danielaonline48 y @patricia_96 por las observaciones.
El problema que describes es muy común con el módulo ps_facetedsearch en PrestaShop 8.2.4 (y versiones anteriores), ya que realmente reemplaza la sección de filtros por completo en cada actualización AJAX. Esto significa que los estilos que dependen de una estructura DOM muy específica o de elementos que se ocultan y luego se recrean pueden fallar.
Tu CSS para el checkbox es correcto en cuanto a la técnica, pero quizás necesita un poco más de especificidad o asegurarse de que el label es el hermano directo del input. Para el slider, los selectores son buenos. El truco es a veces forzar la importancia o ser más específico para que no haya conflictos.
Aquí te propongo una versión de tu custom.css que debería funcionar de manera más robusta. He añadido algunos selectores para el conteo de productos y para el slider, y me he asegurado de que las reglas para los checkboxes sean muy específicas:
/* Estilos para filtros de búsqueda facetada - Checkboxes */
.js-facet-item input[type="checkbox"] {
position: absolute; /* Oculta el checkbox original de forma accesible */
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.js-facet-item .facet-label {
position: relative;
Explicación de los cambios:
- Checkboxes: En lugar de
input[type="checkbox"] + label, ahora usamos input[type="checkbox"] + .facet-label. facet-label es una clase más específica que el módulo ps_facetedsearch utiliza para el contenedor del texto de la etiqueta, lo que hace el selector más robusto. He cambiado display: none; por position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; para ocultar el checkbox de forma que sea más accesible y no afecte al layout, mientras se sigue usando su estado :checked para estilizar el pseudo-elemento ::before del .facet-label.
- Badge de conteo: He añadido estilos para la clase
.facet-count que es el número entre paréntesis (X) para darle un aspecto de 'badge' moderno y redondeado.
- Slider: Los selectores para
.noUi-horizontal, .noUi-handle y .noUi-connect son bastante estándar de noUiSlider. He ajustado los top del noUi-handle y los height y background del noUi-horizontal para lograr una apariencia de barra de slider más fina y con los botones centrados. El box-shadow añade un toque de profundidad a los mangos.
Asegúrate de limpiar la caché de PrestaShop después de guardar el custom.css para que los cambios se reflejen. Con estos ajustes, los estilos deberían aplicarse y persistir correctamente incluso después de las actualizaciones AJAX del bloque.