Filtering
Filter and reset an Ajax Load More instance
In this example:
A custom navigation menu will filter Ajax Load More between recent work and recent articles.
By utilizing Ajax Load More public and callback JavaScript functions you can create an intuitive filtering engine that adjusts shortcode parameters with the click of a button.
🔥 We have just released a new Filters add-on that makes filtering with Ajax Load More easier than ever!
HTML
Filtering is achieved by passing updated shortcode parameters as data attributes to the $.fn.almFilter() function.
1 2 3 4 |
<ul class="alm-filter-nav"> <li><a href="#" data-repeater="template_8" data-post-type="portfolio" data-posts-per-page="3" data-scroll="false" data-button-label="More Work">Recent Work</a></li> <li><a href="#" data-repeater="default" data-post-type="post" data-posts-per-page="5" data-scroll="true" data-button-label="More Articles">Recent Articles</a></li> </ul> |
Note: Shortcode parameters with underscores must be converted to dashes while using data attribute binding. e.g. post_type will be data-post-type.
JavaScript
The following code snippet should copied and placed inside your website JavaScript file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$(function() { var alm_is_animating = false; // Animating flag $('.alm-filter-nav li').eq(0).addClass('active'); // Set initial active state // Btn Click Event $('.alm-filter-nav li a').on('click', function(e){ e.preventDefault(); var el = $(this); // Our selected element if(!el.hasClass('active') && !alm_is_animating){ // Check for active and !alm_is_animating alm_is_animating = true; el.parent().addClass('active').siblings('li').removeClass('active'); // Add active state var data = el.data(), // Get data values from selected menu item transition = 'fade', // 'slide' | 'fade' | null speed = '300'; //in milliseconds $.fn.almFilter(transition, speed, data); // Run the filter } }); $.fn.almFilterComplete = function(){ alm_is_animating = false; // clear animating flag }; })(jQuery); |
The following shortcode was used to create the Filtering example.
[ajax_load_more repeater="template_8" post_type="portfolio" scroll="false" posts_per_page="3" button_label="Load More Work"]