Parte I : respondiendo la pregunta "¿Cuál sería la mejor forma de usar los 3 <select>
en un solo llamado ajax?"
Una forma es usar la misma función en el evento onchange para todos los campos del formulario.
- Agrupando todos los select/input en un mismo formulario simplificas el submit ( getposts ).
- Con un setTimeout evitas una petición prematura por cada onchange ( si hay varios campos a seleccionar se pone incómodo el reload )
Ejemplo:
var getPostTimeout = undefined;
const elForm = document.querySelector("form#product-filter")
var camposSelect = elForm.querySelectorAll(
'input[type=date], select, input[type=checkbox], input[type=radio]'
);
var i = camposSelect.length;
while ( i-- ){
camposSelect[i].onchange = cambiaDatos;
}
function cambiaDatos(ev){
clearTimeout( getPostTimeout );
console.log(ev.target.name, ev.target.value);
getPostTimeout = setTimeout( getPostsAjax, 350 );
}
A la función que llaman todos los campos al cambiar su valor (getPostsAjax
) la modificamos para que incluya todos los campos del formulario, en campos hidden se agregan el action
y el nonce
.
function getPostsAjax(){
/* avisamos de la petición al frontend, podes usar un svg inline,
aplicar una class para indicar el loading, o no hacer nada */
document.getElementById("results-wrap")
.innerHTML = "<em>Procesanding aguantame los trapos...</em>";
/* armamos un search params a partir del form data,
esto es para poder usar append y agregar campos extra
o en caso de ser necesario poder (re)construir la url
con los parámetros de búsqueda/ordenamiento utilizados
*/
const formData = new URLSearchParams(
new FormData(
document.querySelector("form#product-filter")
)
);
/* para agregar campos extra usamos append
por ejemplo cuando el form del filtro lo arma un shortcode
que no incluye ni el action ni el nonce, los agregamos aquí
*/
// formData.append( "otrocampo", "otrovalor" );
/* uso fetch por simplicidad, es totalmente adaptable a jQuery.post() */
fetch(
/* si el script es registered/enqueued tomamos la url de admin-ajax.php
desde la propiedad definida por wp_localize_script() */
my_ajax_object.ajax_url,
/* si el script es inline imprimimos directamente la url de admin-ajax.php */
// "<?php echo admin_url('admin-ajax.php');?>",
/* si el script corre en el backend ( admin area ) ajaxurl está definida en el header
y ya apunta a admin-ajax.php */
// ajaxurl,
{
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
body: formData.toString(),
}
)
.then(function(response) {
/* en principio se podría usar la response como .text() y asignar directamente al innerHTML,
al usar json podemos recibir varias cosas separadas como por ejemplo:
el html de la paginación, la cantidad de resultados, info extra, etc... */
return response.json();
})
.then(function(data) {
document.getElementById("results-wrap").innerHTML = data['postsHTML'];
/* al agregar posts via ajax es conveniente disparar el evento "post-load"
así los plugins ( que lo soporten ) se enteran que hay un/os nuevo/s post/s */
jQuery( document.body ).trigger( 'post-load' );
});
}
Parte II : Cuantos select usar en este caso particular?
Se busca traer y mostrar resultados:
- ordenados por fecha de mas nuevo a mas viejo ( de forma descendente )
- ordenados por fecha de mas viejo a mas nuevo ( de forma ascendente )
- ordenados por nombre de forma ascendente
- ordenados por nombre de forma descendente
La aparente redundancia de 2 de los 3 selects ( los que manejan la dirección del ordenamiento) se resuelve ocultando/mostrando el select que no corresponda al concepto por el cual se ordena ( title/date ). Agrego alternativas usando cada vez menos campos de formulario y con resultados visuales diferentes:
- 3 selects, sólo 2 visibles al mismo tiempo
const elForm = document.querySelector("form#product-filter")
const orderBy = elForm.querySelector("select[name=orderby]")
const orderDirs = elForm.querySelectorAll("select[name=sorting]")
/* al inicio
ocultamos el segundo o tercer select que no
correspondan con el valor del primer select */
document.addEventListener('DOMContentLoaded', function() {
switchHiddenByValue(orderBy.value)
/* enlazamos el onchange del primer select */
orderBy.addEventListener('change', function(ev) {
var elValue = ev.target.value;
// ocultamos /mostramos el segundo o tercer select
switchHiddenByValue(elValue)
});
});
function switchHiddenByValue(elValue) {
i = orderDirs.length;
while (i--) {
var classToFind = `select-sorting-by-${elValue}`
if (orderDirs[i].classList.contains(classToFind)) {
orderDirs[i].removeAttribute("hidden");
orderDirs[i].removeAttribute("disabled");
} else {
orderDirs[i].setAttribute("hidden", "hidden");
orderDirs[i].setAttribute("disabled", "disabled");
}
}
}
<div class="filter-container">
<form method="post" id="product-filter">
<div class="filters">
<div class="option-container">
<Strong>Sort by:</Strong>
<select class="select-orderby" name="orderby">
<option value="title">name</option>
<option selected value="date">date</option>
</select>
</div>
<div class="option-container">
<Strong>Order:</Strong>
<select class="select-sorting select-sorting-by-title" name="sorting" hidden>
<option value="asc">ASC</option>
<option value="desc">DESC</option>
</select>
<select class="select-sorting select-sorting-by-date" name="sorting">
<option selected value="new">Newest to Oldest</option>
<option value="old">Oldest to Newest</option>
</select>
</div>
</div>
</form>
</div>
- dos select: uno de concepto ( nombre, fecha ) y uno de dirección ( ascendente/mas viejo, descendente/mas nuevo ), con algún truco para cambiar los textos u ocultarlos en el segundo select, en este caso un javascript que muestra/oculta y des/selecciona las opciones ( tienen mismo valor pero diferente texto )
const elForm = document.querySelector("form#product-filter")
const orderBy = elForm.querySelector("select[name=orderby]")
const orderDir = elForm.querySelector("select[name=orderdir]")
/* evento para disparar onchanges, no necesario en principio */
const changeEvent = new Event('change');
/* al inicio
ocultamos las opciones del segundo select que no
correspondan con el valor del primer select */
document.addEventListener('DOMContentLoaded', function() {
switchHiddenByValue(orderBy.value)
});
function switchHiddenByValue(elValue) {
var orderDirOptions = orderDir.querySelectorAll("option")
var i = orderDirOptions.length;
while (i--) {
var showOn = orderDirOptions[i].getAttribute("data-show");
if (showOn == elValue) {
orderDirOptions[i].removeAttribute("hidden")
} else {
orderDirOptions[i].removeAttribute("selected")
orderDirOptions[i].setAttribute("hidden", "hidden")
}
}
// seleccionamos el primero not hidden
orderDir.querySelector("option:not([hidden])").setAttribute("selected", "selected")
// en caso de que no dispare el evento del select lo podemos explicitar
// orderDir.dispatchEvent(changeEvent);
}
orderBy.onchange = function(ev) {
var elValue = ev.target.value;
// ocultamos /mostramos las opciones del segundo select
switchHiddenByValue(elValue)
}
<form method="post" id="product-filter">
<div class="option-container">
<Strong>Order By:</Strong>
<select class="select-sorting" name="orderby">
<option selected value="date">Date</option>
<option value="name">Name</option>
</select>
</div>
<div class="option-container">
<Strong>Direction:</Strong>
<select class="select-sorting" name="orderdir">
<option value="desc" data-show="date">Newest to Oldest</option>
<option value="asc" data-show="date">Oldest to Newest</option>
<option value="asc" data-show="name">ASC</option>
<option value="desc" data-show="name">DESC</option>
</select>
</div>
</form>
- un solo select con las 4 opciones ( onda el filter de woocommerce )
<div class="option-container">
<Strong>Order By:</Strong>
<form method="post" id="product-filter">
<select class="select-sorting" name="orderby">
<option selected value="date-desc">Newest to Oldest</option>
<option value="date-asc">Oldest to Newest</option>
<option value="name-asc">Name [A-Z]</option>
<option value="name-desc">Name [Z-A]</option>
</select>
</form>
</div>
- un set de radio buttons con las 4 opciones ( te ahorras un click/tap de abrir el select ).
<div class="option-container">
<Strong>Order By:</Strong>
<form method="post" id="product-filter">
<label><input checked type=radio name="orderby" value="date-desc">Newest to Oldest</label>
<label><input type=radio name="orderby" value="date-asc">Oldest to Newest</label>
<label><input type=radio name="orderby" value="name-asc">Name [A-Z]</label>
<label><input type=radio name="orderby" value="name-desc">Name [Z-A]</label>
</form>
</div>
Parte III : Optimizaciones
- te estaría faltando paginación, de lo contrario en listados grandes sólo verías los primeros o los últimos, el html de cambiar de página queda medio fuera del scope de la pregunta pero sería cuestión de usar
a
y un data-pagenum
e interceptar el click para modificar un campo hidden que se use en el getPostAjax
o algún tipo de from/input que dispare el onchange ( en la primer pagina el "pagina anterior" lo pones disabled y no se envía y así ) en la response devolves el html de resultados y el html del nuevo paginado.
- cachear en el cliente las peticiones: lo mas simple, aunque no persistente, es un array global con el par
request = response
, para lograr persistencia entre sesiones podes usar localStorage ; algo mas elaborado ( verificar compatibilidad ) es usar la api de cache; cuando los campos que filtran son muchos y a la vez los posts son muchos pero aparecen en varias combinaciones de búsqueda/filtro podes armar algo con el api IndexedDB
- cachear en el servidor: las queries simples quedan en el object cache, un plugin de cache debería ser suficiente. Para posts con html complejo podes pre-renderizarlos ( al guardar/modificar) o simplemente guardar el resultado en un transient ( por query o por post )