Come fare un filtro Ajax dei post con categorie e checkbox

This article has been written before more than 1 years, information might old.

Nel repo dei plugin ufficiale nè su codecanyon non c’è niente che permetta di filtrare i post a seconda delle categorie selezionate e di aggiornare la pagina in automatico.
Ho perso un pomeriggio intero per trovare una soluzione ma esistono solo dei campi di ricerca in cui si può impostare quali categorie mostrare in un menù a tendina.
Per implementare questa caratteristica non è richiesto molto codice ma mettiamoci all’opera!

Il codice (commentato) che ho realizzato và nel file category.php, inseritelo dove volete che appiano le checkbox:

<?php

//Con questo otteniamo solamente l'elenco delle sottocategorie della categoria che stiamo vedendo
//$now=get_terms( 'category', 'child_of='.get_query_var('cat').'&fields=ids&depth=3');
//Con questo invece otteniamo l'elenco di tutte le categorie
$now=get_terms( 'category', 'fields=ids&depth=3');
//Naturalmente potete personalizzare il filtro che genera l'elenco delle categorie come volete

function checkbox_categories($args){
//Dalle categorie ottenute otteniamo le altre informazioni
$categories = get_categories( $args );
//Creiamo la lista delle checkbox
$select = '<ul id="catSearchFilters">';
foreach ($categories as $category) {
$select .= '<li><input type="checkbox" name="filterCat[]" value="'.$category->cat_ID.'">';
$select .= '<span>'.$category->cat_name.'</span></li>';
}
$select .= '</ul>';
//Stampiamo le checkbox
echo($select);
//Stampiamo il codice jQuery
echo "<script>
jQuery(function() {
jQuery(\"input[name='filterCat[]']\").change(function() {
checked = [];
//Otteniamo un elenco delle checkbox in un array
        jQuery(\"input[name='filterCat[]']:checked\").each(function ()	{
				checked.push(parseInt(jQuery(this).val()));
		});
	loadPostsFromCat(checked);
});
function loadPostsFromCat(category)  {
//svuotiamo lelenco delle categorie
    jQuery(\"#the-posts\").children().remove();
//mostriamo il loader di wordpress
	jQuery('.loaderwp').show();
    jQuery.ajax({
      type: 'POST',
      url: 'http://www.dominio.com/wp-admin/admin-ajax.php',
      data: {
        'action': 'my_get_posts',
        'cat': category
      },
      success: function(data, textStatus, XMLHttpRequest)      {
          // aggiungiamo loutput allelenco
          jQuery(\"#the-posts\").append(data);

      },
      complete: function(XMLHttpRequest, textStatus)      {
//nascondiamo il loader
        jQuery('.loaderwp').hide();
      }
    });

  }
});
</script>";
}
//mostriamo le checkbox
checkbox_categories(array('include'=>implode(',',$now)));

?>

Il codice per mostrare il loader da piazzare dove preferite:

<img src="http://www.dominio.com/wp-includes/images/wpspin-2x.gif" style="display:none;" class="loaderwp">

Per mostrare la lista consiglio di mettere questo codice prima del loop, così viene svuotato al caricamento dajQuery:

<div id="the-posts">
<!-- Loop -->
</div>

Il codice (sempre commentato) che và in functions.php:

function my_get_posts()  {
    //otteniamo lelenco delle categorie
    if(is_array($_POST['cat'])){
		$cat_id = implode(',',$_POST['cat']);
	} else {
		$cat_id = $_POST['cat'];
	}

    //otteniamo lelenco dei post, potete personalizzare queto filtro come volete
    $args = array(
      'post_type' => 'post',
      'post_status' => 'publish',
      'order'=> 'ASC',
      'orderby' => 'date',
      'category' => $cat_id
    );
//global ci serve per poter sfruttare setup_postdata
	global $post;
    $posts =  get_posts($args);

    foreach ($posts as $post)   {
		setup_postdata($post);
//con questo sfruttiamo il codice del file content 
		get_template_part( 'content', get_post_format() ); 
    }
    exit;
  }

  // aggiungiamo la funzione agli hook per ajax

  // per gli utenti loggati
  add_action('wp_ajax_my_get_posts', 'my_get_posts');
  // per gli altri
  add_action('wp_ajax_nopriv_my_get_posts', 'my_get_posts');

Il codice mi sembra molto semplice da capire ma se non è chiaro commentate e vedrò di migliorarlo 🙂

Ci vediamo al codemotion domani!

2 thoughts on “Come fare un filtro Ajax dei post con categorie e checkbox

  1. ciao!!!
    grazie per l’ottimo lavoro.
    posso chiederti un link per vedere come funziona?
    devo preparare una ricerca dei post e pensavo di definire dei tag, oppure per altre variabili.
    grazie mille
    daniele

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

PHP

Come fare un filtro Ajax dei post con categorie e checkbox

time to read: 2 min
2