Filtering
Filter and reset an Ajax Load More instance
In this example:
A custom 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’ve recently released the Filters add-on that makes filtering with Ajax Load More easier than ever!
-
-
Introducing the WooCommerce Add-on for Ajax Load More
Infinite scrolling WooCommerce shop and product archives.
-
Join Our Affiliate Program
As a Connekt affiliate you will earn 25% commission on each successful sale.
-
Elementor Infinite Scrolling with Ajax Load More
A guide for infinite scrolling Elementor single post articles with Ajax Load More.
HTML
Filtering is achieved by passing updated shortcode parameters as data attributes to the ajaxloadmore.filter public JavaScript function.
|
1 2 3 4 |
<div class="alm-filter-nav"> <button type="button" data-repeater="template_8" data-post-type="portfolio" data-posts-per-page="3" data-scroll="false" data-button-label="More Work">Recent Work</button> <button type="button" data-repeater="default" data-post-type="post" data-posts-per-page="5" data-scroll="true" data-button-label="More Articles">Recent Articles</button> </div> |
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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/** * Filter button click event. * * @param {*} event */ function filterClick(event) { event.preventDefault(); // Exit if button active. if (this.classList.contains('active')) { return; } // Get .active element. var activeEl = document.querySelector('.alm-filter-nav button.active'); if (activeEl) { activeEl.classList.remove('active'); } // Add active class. this.classList.add('active'); // Set filter params var transition = 'fade'; var speed = 250; var data = this.dataset; // Call core Ajax Load More `filter` function. // @see https://connekthq.com/plugins/ajax-load-more/docs/public-functions/#filter ajaxloadmore.filter(transition, speed, data); } // Get all filter buttons. var filter_buttons = document.querySelectorAll('.alm-filter-nav button'); if (filter_buttons) { // Set initial active item. filter_buttons[0].classList.add('active'); // Loop buttons. [].forEach.call(filter_buttons, function (button) { // Add button click event. button.addEventListener('click', filterClick); }); } |
The following shortcode was used to create the Filtering example.
[ajax_load_more post_type="portfolio" scroll="false" posts_per_page="3" button_label="Load More Work"]