Saturday, 21 July 2018

Category Ajax Filter Dropdown WordPress

/*Single category ajax filter dropdown example, Please Subscribe Our Blog And Comment*/
<div class="vh-filter">
  <label class="label-cate">Filter By Category</label>
  <select class="game-select-category" data-taxonomy="game-category">          
    <option class="btn fil-cat" data-rel="all">All</option>
    <?php $terms = get_terms('video_category');
        foreach($terms as $term){
        $term_name = $term->name;
        $term_slug = $term->slug;
        ?>
        <option class="btn fil-cat" data-rel="<?php echo $term_slug; ?>" value="<?php echo $term_slug; ?>"><?php echo $term_name; ?></option>
    <?php } ?>
  </select>    
</div>

<ul id="vh-lobby-posts" class="vh-row-sm">                    
<?php
$args_video = array( 'post_type' => 'PostTypeName', 'posts_per_page' => -1 );
$loop_video = new WP_Query($args_video);

if ($loop_video->have_posts()) : while ($loop_video->have_posts()) : $loop_video->the_post(); ?>              
    <?php            
        $featured_img_url = get_the_post_thumbnail_url($post->ID, 'full');
        $categorys = get_the_terms( $post->ID, 'video_category' );    
        $concats = '';
        foreach ( $categorys as $cats){
           $concats .= $cats->slug.' ';
        }   
    ?>   
    <li id="img<?php echo get_the_ID(); ?>" class="vh-item scale-anm all <?php echo $concats; ?>">
        <a href="<?php the_permalink(); ?>" class="vh-thumb-link">
            <div class="vh-overlay"><img src="<?php echo $featured_img_url; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" onerror="imgError(this);" onload="vhLobbyImage.imageLoaded(<?php echo get_the_ID(); ?>)">
                <span class="play-now">Play Now</span>
            </div>
        </a>
        <div class="vh-game-title"><?php the_title(); ?></div>
    </li>
<?php endwhile; ?><?php endif; ?>
</ul>

<script>
jQuery(document).ready(function(){
    jQuery(function() {       
        var selectedClass = "";               
        jQuery('.game-select-category').change(function(){
           var selectedClass = jQuery('.game-select-category option:selected').attr('data-rel');                     
           if(selectedClass == 'all'){
               jQuery("#vh-lobby-posts li.vh-item").not("."+selectedClass).fadeOut().addClass('scale-anm');          
               setTimeout(function(){
                    jQuery("."+selectedClass).fadeIn().removeClass('scale-anm');
                    jQuery("#vh-lobby-posts").fadeTo(300, 1);
                }, 300);
           }else{          
               jQuery("#vh-lobby-posts li.vh-item").not("."+selectedClass).fadeOut().removeClass('scale-anm');          
               setTimeout(function(){
                    jQuery("."+selectedClass).fadeIn().addClass('scale-anm');
                    jQuery("#vh-lobby-posts").fadeTo(300, 1);
                }, 300);           
           }          
        });               
    });
});
</script>

-------------------------------------------------
Let me know your thoughts and questions in the comments.
Email: vyasankit2008@gmail.com

No comments:

Post a Comment