3

Sucede que tengo un catálogo el cual es generado por una wp_query, debería ser posible hacer sorting en éste catálogo de acuerdo a los siguientes parámetros:

  • por fecha o nombre
  • del más viejo al más nuevo y viceversa
  • ASC/DESC

Para eso, estoy usando 3 <select> en donde el value de cada option es recibido en mi función de JQuery para ser enviado vía ajax. Inicialmente pensaba hacer un llamado ajax por cada <select> fijándolo en un evento change, pero creo que no es lo ideal y el sorting no funcionaría.

¿Cuál sería la mejor forma de usar los 3 <select> en un solo llamado ajax? Adjunto el código que ya he trabajado. (hasta ahora el llamado ajax sólo funciona en el <select> que define el orden (ASC/DESC))

MI HTML Y PHP QUE GENERA EL CATALOGO

<div class="catalogue-container_w container">
  <div class="filter-container">
    <div class="filters">

      <div class="option-container">
        <Strong>Show Category:</Strong>
        <select name="category" id="cat">
          <option value="new">Newest to Oldest</option>
          <option value="old">Oldest to Newest</option>
        </select>
      </div>

      <div class="option-container">
        <Strong>Sort by:</Strong>
        <select class="orderby">
          <option value="title">name</option>
          <option selected value="date">date</option>
        </select>
      </div>

      <div class="option-container">
        <Strong>Order:</Strong>
        <form method="post" id="product-filter"
          action="<?php echo home_url($wp->request); ?>">
          <select class="select-sorting" name="category" id="cat" name="sorting">
            <option value="asc">ASC</option>
            <option selected value="desc">DESC</option>
          </select>
        </form>
      </div>

    </div>
  </div>

  <div id="results-wrap" class="catalogue_w">
    <?php
    $args = array(
      'post_type' => 'product',
      'status' => 'published',
    );

    $loop = new WP_Query($args);
    if ($loop->have_posts()):
      while ($loop->have_posts()) : $loop->the_post(); ?>
      <div class="product-container">
        <div class="img-container">
          <?php the_post_thumbnail(); ?>
        </div>

        <div class="content">
          <div class="product-info">
            <strong><?php the_title(); ?> </strong>
          </div>
        </div>
      </div>
    <?php endwhile;
    else :
    echo __('No se encontraron productos');
    endif;
    wp_reset_postdata();
    ?>
  </div>

</div>

Mi función JS y llamado Ajax

selector.change(function () {
  var filter_val = jQuery(this).val();
  jQuery.ajax({
    method: 'POST',
    url: my_ajax_object.ajax_url,
    data: {
      'action': 'product_filter',
      'filter': filter_val,
    },
    beforeSend: function () {
    },
    success: function (data) {
      jQuery('#results-wrap').html(data);
    }
  })
})

Mi función Ajax

function product_filter()
{
  if (!empty($_POST['filter'])) {
    $filter_val = $_POST['filter'];
    $sequence = "";
    $meta_val = '';

    if ($filter_val) {
      if ($filter_val == 'asc') {
        $sequence = 'ASC';
      } else {
        $sequence = 'DESC';
      }
      $filter_val = '';
    } else {
    }
    global $post;
    $args = array('post_type' => 'product',

    'order' => $sequence);

    $loop = new WP_Query($args);
    if ($loop->have_posts()):
      while ($loop->have_posts()):
        $loop->the_post(); ?>

        <div class="product-container">
          <div class="img-container">
            <?php the_post_thumbnail(); ?>
          </div>

          <div class="content">
            <div class="product-info">
              <strong><?php the_title(); ?> </strong>

            </div>

          </div>
        </div>

      <?php endwhile;
    else:
      //do nothing
    endif;
  }
}

add_action('wp_ajax_product_filter', 'product_filter');
add_action('wp_ajax_nopriv_product_filter', 'product_filter');
10
  • No queda claro lo que quieres hacer. ¿Quieres ordenar por uno u otro campo? ¿Quieres cambiar de ASC a DESC? Primero explica el problema y luego como intentas resolverlo. Si la explicación del problema es poco clara significa que hay una dificultad para entender el propio problema y resolver algo que no sabes explicar es mucho más difícil. En muchos casos el principal problema es no saber explicar el problema.
    – A. Cedano
    Commented el 30 jul. 2020 a las 14:08
  • Dado que los 3 select son opcionales, agrega un botón para hacer el filtrado. De hecho, sobra el primero, va a hacer los mismo que el último.
    – Triby
    Commented el 30 jul. 2020 a las 14:20
  • @A.Cedano El sorting funciona con los 3 <select> que se mencionan en el título de la pregunta, la idea, es hacer funcionar el sorting por medio de los 3 <select> que se mencionan en el título y cuerpo de la pregunta, ya que cada <select> tiene un parámetro de orden. Como expliqué en el cuerpo de la pregunta, ahora mismo el sistema sólo funciona con el <select> que tiene los parámetros de ASC/DESC, pero me gustaría integrar los otros 2 en 1 solo llamado ajax.
    – Yaro Oka
    Commented el 30 jul. 2020 a las 14:21
  • He leído el título y la pregunta, pero no se entiende. No estás explicando el problema con claridad y creo que es un paso importante para llegar a una solución. Por favor pulsa en editar y explica con la mayor simplicidad posible lo que quieres hacer, olvidándote por ahora del cómo lo quieres hacer. Por ejemplo, ni siquiera dices para qué son esos tres select que mencionas.
    – A. Cedano
    Commented el 30 jul. 2020 a las 14:30
  • Por ejemplo, tratando de adivinar el contexto que debiste haber explicado tú claramente: si la intención es ordenar por fecha o nombre y luego por ASC o DESC, quizá solo necesites dos select, no tres, uno donde pongas fecha, nombre y otro donde pongas ASC,DESC. Luego, puedes escuchar cualquiera de los cambios de los select y hacer el orden recogiendo los dos criterios actuales. En cuanto a los datos, deberías tenerlos en el cliente en una estructura fácilmente ordenable, para no tener que ir al servidor cada vez. Imagino (advininado de nuevo) que no hace falta actualizarlos cada vez.
    – A. Cedano
    Commented el 30 jul. 2020 a las 14:40

1 respuesta 1

1

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 )

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.