Mimeobrad

Ajax Filters

Aug 11th, 2021
92
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. // FAQ Filter in archive-faqs.php
  3. <div class="container">
  4.     <div class="row">
  5.         <div class="col-md-3">
  6.           <div class="bordered shadow-sm rounded">
  7.         <?php $categories = get_terms('faq_cat');?>
  8.         <ul class="cat-list">
  9.           <li><a class="cat-list_item active" href="#!" data-slug="">All projects</a></li>
  10.  
  11.           <?php foreach($categories as $category) : ?>
  12.             <li>
  13.               <a class="cat-list_item" href="#!" data-slug="<?= $category->slug; ?>" data-type="faqs">
  14.                 <?= $category->name; ?>
  15.               </a>
  16.             </li>
  17.           <?php endforeach; ?>
  18.         </ul>
  19.       </div>
  20.     </div>
  21. <div class="col-md-9">
  22. <?php
  23.  
  24.   $projects = new WP_Query([
  25.     'post_type' => 'faqs',
  26.     'posts_per_page' => -1,
  27.     'orderby' => 'menu_order',
  28.     'order' => 'desc',
  29.   ]);
  30. ?>
  31.  
  32. <?php if($projects->have_posts()): ?>
  33.   <h2 class="underline"><?= $category->name; ?></h2>
  34.   <ul class="unstyled faq-cards">
  35.     <?php
  36.       while($projects->have_posts()) : $projects->the_post();
  37.         ?>
  38.         <li>
  39.             <a class="question" data-toggle="collapse" href="#collapse-<?php the_ID(); ?>" role="button" aria-expanded="false" aria-controls="collapseExample">
  40.                 <?php the_title(); ?>
  41.             </a>
  42.             <div class="answer collapse" id="collapse-<?php the_ID(); ?>">
  43.                 <div class="card card-body">
  44.                    <p> <?php the_content(); ?></p>
  45.                 </div>
  46.             </div>
  47.         </li>
  48.         <?php
  49.       endwhile;
  50.     ?>
  51.   </ul>
  52.   <?php wp_reset_postdata(); ?>
  53. <?php endif; ?>
  54. </div></div>
  55. <script>
  56.   jQuery(function($){
  57.    $('.cat-list_item').on('click', function() {
  58.   $('.cat-list_item').removeClass('active');
  59.   $(this).addClass('active');
  60.  
  61.   $.ajax({
  62.     type: 'POST',
  63.     url: '/wp-admin/admin-ajax.php',
  64.     dataType: 'html',
  65.     data: {
  66.       action: 'filter_projects',
  67.       category: $(this).data('slug'),
  68.       type: $(this).data('type'),
  69.     },
  70.     success: function(res) {
  71.       $('.faq-cards').html(res);
  72.     }
  73.   })
  74. });
  75. });
  76.  
  77. </script>
  78.  
  79.  
  80. // FAQ Filter in functions
  81.   function filter_projects() {
  82.     $postType = $_POST['type'];
  83.     $catSlug = $_POST['category'];
  84.  
  85.   $ajaxposts = new WP_Query([
  86.     'post_type' => $postType,
  87.     'posts_per_page' => -1,
  88.     'category_name' => $catSlug,
  89.     'orderby' => 'menu_order',
  90.     'order' => 'desc',
  91.   ]);
  92.   $response = '';
  93.     // print_r($ajaxposts);
  94.   if($ajaxposts->have_posts()) {
  95.     while($ajaxposts->have_posts()) : $ajaxposts->the_post();
  96.       $response = 'result';
  97.     endwhile;
  98.   } else {
  99.     $response = 'empty';
  100.   }
  101.  
  102.   echo $response;
  103.   exit;
  104. }
  105. add_action('wp_ajax_filter_projects', 'filter_projects');
  106. add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');
RAW Paste Data