Skip Navigation

[Resuelto] Filtros agrupados

Este es el foro de soporte técnico para Toolset: un paquete de plugines para el desarrollo de sitios WordPress sin escribir PHP.

Cualquier persona puede leerlo, pero solo los clientes de Toolset pueden publicar en este foro. El soporte de Toolset atiende 6 días a la semana, 19 horas por día.

Etiquetado: 

This topic contains 10 respuestas, has 2 mensajes.

Last updated by aitorS hace 2 meses, 3 semanas.

Assigned support staff: Nigel.

Autor
Mensajes
#2033289
Captura de pantalla 2021-04-26 a las 20.09.22.png
Captura de pantalla 2021-04-26 a las 20.10.55.png

Buenas;

Quiero crear una view con filtros de búsqueda para un CPT (cursos) que tiene vario campos personalizados en un solo grupo (adjunto captura de los campos como ejemplo), me gustaría que se añadiesen todos estos filtros dentro de una lista desplegable (adjunto captura de como debería quedar) pero no encuentro la forma de hacerlo...

#2034269

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01:00)

Screenshot 2021-04-27 at 15.15.52.png

Creo que lo que necesitas es algo como en mi pantalla, ¿correcto?

Es de un sitio básico sin aplicar muchos estilos pero que tiene la funcionalidad he preparado.

Puedes ver como aquí: hidden link

Editar la página "Buscar cosas".

Los pasos son:

1. Agrupar los filtros que quieres esconder dentro de un bloque container, y asignar el id "hidden-filters"

2. Añadir un bloque HTML para mostrar el enlace que muestra más filtros. Usa un p elemento con id="js-more-filters".

3. Añadir otro bloque HTML (no importa donde) que usaremos incluir JS y CSS en la página, y meter el siguiente:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
    (function ($) {
        $(document).on( 'ready js_event_wpv_pagination_completed js_event_wpv_parametric_search_form_updated js_event_wpv_parametric_search_results_updated', function () {
            $('#js-more-filters').on('click', function(e){
                $('#hidden-filters').toggle();
            });
        });
        $(document).on( 'ready', function(){
            $('#hidden-filters').toggle();
        });
    })(jQuery);
});
</script>
 
<style type="text/css">
#js-more-filters {
  cursor: pointer;
}
</style>
#2035295
Captura de pantalla 2021-04-28 a las 12.08.49.png
Captura de pantalla 2021-04-28 a las 12.08.40.png
Captura de pantalla 2021-04-28 a las 12.08.33.png

Exactamente ese es el funcionamiento, pero he añadido el código en la view y no hace nada en el front ni muestra ningún error la consola...

Adjunto pantallazos de como tengo los códigos para que te sirva de ayuda,

#2036989

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01:00)

¿Tienes un enlace al front-end donde puedo ver?

#2037447

Aquí tienes: hidden link

#2037569

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01:00)

Me parece que funciona: hidden link

¿Ya está solucionado?

#2037677

Sigue sin funcionar, al menos en mi navegador del móvil y del ordenador...

hidden link

#2037909

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01:00)

Ya no encuentro la página, me da 404, pero en el video tuyo me parece que en el móvil has puesto los filtros dentro de un pop-up, es probablamente por que no funcionan.

En el ordenador, puede ser un problema de cache, que puedes confirmar si intentas por otra navegador.

#2044031

Ya encontré el problema pero no tengo clara la solución, en este tipo de páginas los filtros aparecen dos veces, uno en desktop y otro en mobile, ya que la forma en que se visualiza es diferente, esto genera un conflicto y hace que no se despliegue, puedes verlo aquí: hidden link

#2044965

Nigel
Supporter

Languages: Inglés (English ) Español (Español )

Timezone: Europe/London (GMT+01:00)

Al visitar a esta página veo en el fuente (view-source:hidden link) que tiene el div con id="filtros-agrupados" y su contenido añadido cuatro veces, y has usado un class "hidden-filters" en lugar de un id, resulta que el código de JavaScript no puede apuntar un div de hidden-filters en concreto.

No es válido usar un id más que una vez por página, y no es una buena práctica incluir el mismo contenido multiples veces en la página. Si quieres como aparece los filtros en móvil y desktop lo mejor es modificar su aparencia utilisando CSS.

Si no es posible y sea necesario añadir este contenido dos veces (cuatro??) será necesario modificar el código. Si no puedes, puede ser necesario usar un desarrollador para tal personalización...

#2044995

Ya lo he arreglado, el tema es que el campo de búsqueda es una view que comparte el mismo funcionamiento aunque tiene los filtros ocultos, he cambiado las clases y nombres y ya funciona todo correctamente.
Gracias por la ayuda!