2017-09-27 2 views
1

J'ai un type de publication WordPress appelé Annuaire des employés qui répertorie les employés de 3 catégories différentes dans 3 carrousels bxslider - chaque poste dans un li. J'ai un seul filtre de recherche live jQuery qui recherche toutes les 3 catégories. J'ai aussi une requête qui compte combien de messages de ce type et de cette catégorie il y a et j'ai besoin du nombre de post pour mettre à jour quand l'utilisateur tape dans la barre de recherche.jQuery live search filter - Afficher le message 'Nothing Found' et mettre à jour le compte WordPress

Je dois également afficher un message indiquant «Aucun employé trouvé» lorsque aucun résultat n'est renvoyé.

Mon JS dans un document prêt dans mon footer.php:

// live search 
    $('.live-search-list li').each(function(){ 
    $(this).attr('data-search-term', $(this).text().toLowerCase()); 
    }); 

    $('.live-search-box').on('keyup', function(){ 

    var searchTerm = $(this).val().toLowerCase(); 

     $('.live-search-list li').each(function(){ 

      if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { 
       $(this).show(); 
      } else { 
       $(this).hide(); 
      } 

     }); 
    }); 

Ma boucle de WordPress (il y a 3 tous les mêmes, sauf la catégorie):

<div class="title-count"> 
 
    <h4>New Flyer</h4> 
 
    <span> 
 
<!-- Count number of posts in type and category --> 
 
\t <?php $args1 = array(
 
\t 'cat' => 2, 
 
\t 'post_type' => 'employee-directory', 
 
\t); 
 
\t $the_query = new WP_Query($args1); 
 
\t echo $the_query->found_posts; ?> People 
 
</span> 
 
</div> 
 
<!-- Loop through New Flyer Category --> 
 
<ul class="carousel"> 
 
    <?php 
 
$query1 = new WP_Query(array(
 
\t 'post_type' => 'employee-directory', 
 
\t 'posts_per_page' => -1, 
 
\t 'cat' => 2, 
 
\t 'orderby' => 'title', 
 
\t 'order' => 'ASC' 
 
    ) 
 
); 
 
while ($query1->have_posts()) : $query1->the_post(); ?> 
 
    <li class="nf"> 
 
     <a href="#" data-featherlight="<?php the_permalink(); ?>"> 
 
     <div class="content-box"> 
 
      <div class="content-image"> 
 
      <?php if (has_post_thumbnail()) { 
 
\t \t \t \t the_post_thumbnail('staff', array('class' => 'img-fluid')); 
 
\t \t \t \t } else { ?> 
 
      <img src="<?php bloginfo('template_url'); ?>/img/placeholder_profile_photo.png" alt="<?php the_title(); ?>" /> 
 
      <?php } ?> 
 
      </div> 
 
      <div class="content-info"> 
 
      <h5> 
 
       <?php the_title(); ?> 
 
      </h5> 
 
      <p> 
 
       <?php the_field('position'); ?> 
 
      </p> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </li> 
 
    <?php endwhile; wp_reset_postdata(); ?> 
 
</ul>

Je sais que je pourrais combiner mon tw o requêtes dans un, mais à cause du carrousel, j'ai besoin de la boucle pour commencer à l'intérieur du ul et le nombre de postes et le nom de la catégorie pour être en dehors de cette boucle, si cela est logique.

Here is a link to that page on the dev site I'm working on.

Je sais que je pouvais le faire avec un certain JS si les déclarations, mais je ne suis pas tout à fait sûr de savoir comment mettre en oeuvre. Fondamentalement, j'ai besoin de WP Query et de mon JS pour travailler ensemble pour compter les messages, mais je ne sais pas par où commencer. Toute aide est grandement appréciée!

Répondre

0

Après un peu d'aide de mon collègue, j'ai réussi à le faire fonctionner. Voici ce que nous avons fait:

dépollués mes WP_queries en les mettant tous dans le haut du document, suivi par les boucles:

<?php 
 
\t $query1 = new WP_Query(array(
 
\t \t 'post_type' => 'employee-directory', 
 
\t \t 'posts_per_page' => -1, 
 
\t \t 'cat' => 2, 
 
\t \t 'orderby' => 'title', 
 
\t \t 'order' => 'ASC' 
 
\t \t) 
 
\t); 
 
\t $query1count = $query1->post_count; 
 
\t 
 
\t $query2 = new WP_Query(array(
 
\t \t 'post_type' => 'employee-directory', 
 
\t \t 'posts_per_page' => -1, 
 
\t \t 'cat' => 3, 
 
\t \t 'orderby' => 'title', 
 
\t \t 'order' => 'ASC' 
 
\t \t) 
 
\t); 
 
\t $query2count = $query2->post_count; 
 

 
\t $query3 = new WP_Query(array(
 
\t \t 'post_type' => 'employee-directory', 
 
\t \t 'posts_per_page' => -1, 
 
\t \t 'cat' => 4, 
 
\t \t 'orderby' => 'title', 
 
\t \t 'order' => 'ASC' 
 
\t \t) 
 
\t); 
 
\t $query3count = $query3->post_count; 
 
<div class="title-count"> 
 
\t <h4>New Flyer</h4> 
 
\t <span class="nf-count middle"><?php echo $query1count; ?></span> 
 
\t <span>People</span> <span class="nf-message"></span> 
 
\t 
 
</div> 
 
<!-- Loop through New Flyer Category --> 
 
\t <ul class="carousel"> \t \t 
 
\t <?php \t while ($query1->have_posts()) : $query1->the_post(); ?> 
 
\t \t <li class="nf"> 
 
\t \t \t <a href="#" data-featherlight="<?php the_permalink(); ?>"> 
 
\t \t \t \t <div class="content-box"> 
 
\t \t \t \t \t <div class="content-image"> 
 
\t \t \t \t \t \t <?php if (has_post_thumbnail()) { 
 
\t \t \t \t \t \t \t the_post_thumbnail('staff', array('class' => 'img-fluid')); 
 
\t \t \t \t \t \t \t } else { ?> 
 
\t \t \t \t \t \t \t <img src="<?php bloginfo('template_url'); ?>/img/placeholder_profile_photo.png" alt="<?php the_title(); ?>" /> 
 
\t \t \t \t \t \t <?php } ?> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="content-info"> 
 
\t \t \t \t \t \t <h5><?php the_title(); ?></h5> 
 
\t \t \t \t \t \t <p><?php the_field('position'); ?></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t <?php endwhile; wp_reset_postdata(); ?> 
 
\t </ul>

Ensuite, nous avons ajouté des cours à la li de chaque diapositive de carrousel et les span compte et les référencés dans les nouveaux JS:

$('.live-search-list li').each(function(){ 
 
\t $(this).attr('data-search-term', $(this).text().toLowerCase()); 
 
\t }); 
 
\t \t 
 
\t $('.live-search-box').on('keyup', function(){ 
 
\t \t 
 
\t var searchTerm = $(this).val().toLowerCase(); 
 
\t var countNF = 0, 
 
\t \t \t countNFI = 0, 
 
\t \t \t countMCI = 0, 
 
\t \t \t totalItems = $('li').length, 
 
\t \t \t currentLoop = 0; 
 
\t 
 
\t \t $('.live-search-list li').each(function(){ 
 
\t \t \t \t var $this = $(this); 
 
\t \t \t \t \t \t \t 
 
\t \t  if ($this.filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) { 
 
\t \t   $this.show(); 
 
\t \t   // count different items 
 
\t \t \t \t \t if($this.hasClass('nf')) { 
 
\t \t \t \t \t \t countNF++; 
 
\t \t \t \t \t \t } else if($this.hasClass('nfi')) { 
 
\t \t \t \t \t \t countNFI++; 
 
\t \t \t \t \t \t } else { 
 
\t \t \t \t \t \t countMCI++; 
 
\t \t \t \t \t \t } 
 
\t \t   } else { 
 
\t \t    $this.hide(); 
 
\t \t   } 
 
\t \t \t \t \t currentLoop++; 
 
\t \t \t \t \t \t \t 
 
\t \t \t \t // last loop 
 
\t \t \t \t \t if(currentLoop == totalItems) { 
 
\t \t \t \t \t $('.nf-count').text(countNF); 
 
\t \t \t \t  $('.nfi-count').text(countNFI); 
 
\t \t \t \t \t $('.mci-count').text(countMCI); 
 
\t \t \t \t \t 
 
       // do this for each category 
 
\t \t \t \t \t if(countNF > 0) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t $('.nf-message').text(''); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t $('.nf-message').text('No employees found!'); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(countNFI > 0) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t $('.nfi-message').text(''); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t $('.nfi-message').text('No employees found!'); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(countMCI > 0) { 
 
\t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t $('.mci-message').text(''); 
 
\t \t \t \t \t } else { 
 
\t \t \t \t \t $('.mci-message').text('No employees found!'); 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t });
Cela met à jour le nombre de publications et affiche un message "Aucun employé trouvé" lorsque l'utilisateur tape dans la zone de recherche.