WAIT: Filters don't work with isotope masonry gallery

Bugs
1

New fIlters work great, except when interacting with a masonry layout using isotope.js

The page initially loads a post query loop into a masonry layout fine, but when choosing a taxonomy category with the radio filter element, the masonry becomes disabled.

This does not happen with the Pagination element though. (if AJAX disabled)

v. 1.9.6.1
(using isotope because need to mix video and images in a masonry grid)

2

Hi @happytobereal ,

Please may I know how you set up the masonry layout? You have your own custom JavaScript code, right?

In Bricks, the filters are made in AJAX calls, old DOMs will be erased and new DOMs will be added after the AJAX calls. Hence, your JavaScript needs to reinit again after the call.

You could listen to this custom JS event bricks/ajax/query_result/displayed and run your logic.
Please note that this custom JS event is not documented as Query Filter is still an experimental feature. It might be changed at any point.

Example:
queryId is your query loop element ID without brxe- (NOT CSS ID)

document.addEventListener('bricks/ajax/query_result/displayed', (event) => {
  // Get the queryId from the event
  const queryId = event.detail.queryId || false

  if (!queryId || queryId != 'q1w2e3') {
    return
  }

  // Do your magic here
})

Regards,
Jenn

3

Thanks @itchycode

Here’s the code used in Page Settings / Custom Code.


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<script>

$('.grid').isotope({
  itemSelector: '.grid-item' 
});

</script>


<style>
  
* { box-sizing: border-box; }
  
.grid {
  background: #DDD;
  max-width: 1060px;
  margin: 0 auto;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 33.333%;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}
</style>

Not sure how I would implement your suggestion, so if have any quick tips :slight_smile:

Still loving the new filters. Good job!

4

I tried using the EventListener in page settings - custom code - Body (footer) scripts, but it disabled the masonry altogether.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

<script> document.addEventListener('bricks/ajax/query_result/displayed', (event) => {
    const queryId = event.detail.queryId || false;
    if (!queryId || queryId !== 'hzmmzj') {
      return;
    }
    $('.grid').isotope({
      itemSelector: '.grid-item' 
    });
  })
</script>