[Resolved] Personalizar filtros

[Author]

Posts

[nandomerino]

Buenas;

Tengo una vista que me carga todos los restaurantes, y se filtra por una taxonomía personalizada de localización, el filtro funciona correctamente, puedes verlo aquí: hidden link

Lo que quiero es personalizar como se visualiza el filtro a algo más parecido a como se muestra en la imagen adjunta, la idea sería que en una primera línea se muestre la taxonomia padre y cuando pulsemos sobre el nombre de esta se muestre la taxonomia hija y se filtre.

[Nigel]

Hola Nando

Este es bastante complicado.

Tendrás que generar los filtros como radio, y saldrán todos—de ambos niveles—a la vez.

Ve pantallazo.

Entonces tienes que usar JavaScript para esconder los filtros de la segunda nivel.

Efectivamente tienes que construir un array en JavaScript que corresponde a la estrutura de la taxonomía, que puedes usar para revelar ó esconder secciones según la elección del primer nivel.

Se puede construir tal array por analizar el DOM, ó preparar un array en PHP con la estructura requerida y hacer el array disponible en el front end por medio de wp_localize_script (https://developer.wordpress.org/reference/functions/wp_localize_script/ y hidden link).

No puedo preparar el código requerido, lo siento, tendría que consultar con un desarrollador si no puedes hacerlo tú mismo.

Si intentas y tienes dudas, dime.

[nandomerino]

Buenas,

Entiendo lo que comentas, lo que si me sería de mucha ayuda, sería saber si puedo formatear el filtro para que en lugar de radio, la palabra quede dentro de un enlace que sea el que active el filtro ¿es esto posible?

[Nigel]

Hola Nando

Los filtros funciona por medio de un formulario, y los controles siempre son un elemento input, no es opción usar texto como enlaces.

Cuando ves soluciones que parecen así son inputs tipo radio ó checkbox manipulado por CSS para que tienen aspecto de texto sencillo (ó una imagen).

Lo difícil es que este necesita una estructura así:

<div class="input-wrapper">
  <input type="radio" etc...>
  <label for= etc...>
</div>

para poder controlar la apariencia del label según el estado del input (p.j. input:checked).

Pero el formato de los controles de los filtros es así:

<div class="input-wrapper">
  <label for= etc...>
    <input type="radio" etc...>
  </label>
</div>

No es posible personalizar la apariencia de los filtros con el HTML así.

He creado una solicitud para poder modificar el HTML de los filtros.

De momento el único alternativo es usar JS para modificar el HTML para tener la estructura requerida para soluciones CSS, pero puede salir un poco feo si recargas los resultados por ajax.

Un ejemplo de tal código sería:

/**
 * Convert markup structure so label follows input for radio fields
 */
(function($) {
    $(document).ready(function() {

        $('div.radio').each(function(i) {

            var input = $(this).find('input');

            $(this).prepend(input);
        });

    });
})(jQuery);


/**
 * Repeat if results updated via ajax
 */
(function($) {

    $(document).on('js_event_wpv_parametric_search_results_updated', function(event, data) {

        $('div.radio').each(function(i) {

            var input = $(this).find('input');

            $(this).prepend(input);
        });
    });

})(jQuery);