JavaScript Filtering | Examples

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 ajaxloadmore.filter() public function.

1

2

3

4

<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

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

// Animation flag

var alm_is_animating = false;

// Set initial active item

document.querySelector('.alm-filter-nav li:first-child').classList.add('active'); // Set initial active state

// Click Event

function filterClick(){

// Get parent `<li/>`

var parent = this.parentNode;

if(parent.classList.contains('active') && !alm_is_animating){ // Exit if active

return false;

}

alm_is_animating = true; // Animation flag

var active = document.querySelector('.alm-filter-nav li.active'); // Get `.active` element

if(active){

active.classList.remove('active');

}

parent.classList.add('active'); // Add active class

// Set filters

var transition = 'fade';

var speed = 250;

var data = this.dataset;

// Call core Ajax Load More `filter` function

ajaxloadmore.filter(transition, speed, data);

}

// Event Handlers

var filter_buttons = document.querySelectorAll('.alm-filter-nav li a');

if(filter_buttons){

[].forEach.call(filter_buttons, function(button) {

button.addEventListener('click', filterClick);

});

}

// Callback

window.almFilterComplete = function(){

alm_is_animating = false; // Clear animation flag

};

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