2017-09-27 48 views
1

我有一個WordPress的帖子類型稱爲員工目錄,列出3個bxslider轉盤中的3個不同類別的員工 - 每個帖子在li。我有一個jQuery實時搜索過濾器,可以搜索所有3個類別。我還收到了一個查詢,其中包含該類型和類別的帖子數量,當用戶輸入搜索欄時,我需要更新帖子數量。jQuery實時搜索過濾器 - 顯示'沒有發現'的消息和更新WordPress的帖子數

我還需要在沒有結果返回時顯示一條消息,指出'No Employees Found'。

我準備在我的footer.php文檔中的JS:

// 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(); 
      } 

     }); 
    }); 

我的WordPress迴路(有3個不同的類別都一樣):

<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>

我知道我可以結合我的tw o查詢到一個,但由於傳送帶,我需要循環在ul內啓動,並且後期計數和類別名稱在該循環之外,如果這樣做合理的話。

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

我知道我可以做一些JS if語句,但我不是很確定如何實現這一點。基本上我需要WP Query和我的JS一起工作來計算帖子,但不知道從哪裏開始。任何幫助非常感謝!

回答

0

經過我同事的一點幫助後,我設法讓它工作。這就是我們所做的:

通過把他們都在該文件的頂部打掃了我WP_queries,其次是循環:

<?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>

然後我們添加類的li每個旋轉木馬幻燈片和span計數並在新的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 });

這會更新帖子數並在用戶鍵入搜索框時顯示'找不到員工'消息。

相關問題