Isotope + CMS code not quite working

Design help Custom code
1

Hi,

I have been following some tutorials on here about how to integrate Isotope filtering with CMS by using some custom code to dynamically add a class to an item to allow filtering. I cloned another users Isotope tutorial and added the custom code by another member, but it doesn’t quite seem to work. The bike wheel photos I added are not working with the filtering menu. Can anyone tell me why?

Public link - https://preview.webflow.com/preview/isotope-site-b620f1?preview=1dfc4e0202db7c60d7f52ffd2a00272c

Here is the code I added to the footer section:

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


<script>
  
    // add dynamic class
jQuery
( '.w-dyn-item .category' ).each
(
	function( index, element )
	{
		var _this = jQuery( element );
			_this.parent().parent().addClass( _this.text().toLowerCase() );
	}
);

</script>


<script>  
  
$(document).ready( function() {
  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.item'
  });
  
  // layout Isotope after each image loads
  $grid.imagesLoaded().progress( function() {
    $grid.isotope('layout');
  }); 

  // store filter for each group
  var filters = {};

  $('.filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });
  
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}
  
</script>

Thanks!

2

It seems fine over here http://isotope-site-b620f1.webflow.io

Do note that custom code will NOT preview in the designer. You have to publish every time you make a change to check it on the live site.

3

Sorry, should have explained the problem more thoroughly. When you click the ‘bike’ button, it should display only the bike photos. I am trying to get that code to use the category that the photos are assigned to via CMS as their class, and the buttons should filter the photos by the class. However, the bike photos do not seem to have any specific class, and are only displaying under the ‘all’ selection.

It’s this that doesn’t seem to be working:

    // add dynamic class
jQuery
( '.w-dyn-item .category' ).each
(
	function( index, element )
	{
		var _this = jQuery( element );
			_this.parent().parent().addClass( _this.text().toLowerCase() );
	}
);
4

There doesn’t seem to have any classes named category, in w-dyn-item. Did you forget them?

1 Like
5

Ah okay, I guess I don’t understand that. Do I put in my CMS category names, like .bike? Right now I just have a ‘bike’ category. Thanks for your help!

6

You need to have a div inside each dynamic item, with a class of category, the text inside must be the category name.

1 Like
7

Right, but isn’t this code to make assign each div a the class name dynamically from CMS categories? I’m trying to copy this site, who seems to have it so that the code is assigning each item div a class name based on what category that item was assigned in the CMS. That way, you don’t have to go in and manually assign a category class for each item you add with CMS, and the filtering will still work.

8

What that code is trying to do is, copy the text content from the h3 tag, make it lowercase, and set it as the class for the .w-dyn-item. If you want to use the same code, then you have to set up your site the same way.

9

Thanks for your reply. I’ve got mine set up now identical to how Rumi’s is set up, with the h3 tag dynamically connected to the category name, but it still doesn’t seem to work. Here’s my code now:

1374×446 82.1 KB

10

That is because the code you are using can’t mix dynamic list items with non-dynamic list items.

  // init Isotope
  var $grid = $('.grid').isotope({
    itemSelector: '.item'
  });

What the above code is selecting, is all direct descendent (children) elements that has a class of item, from the element with class grid. The items in the dynamic list doesn’t have a class item, AND it is not a child of grid element (is is a “great-grand”-children).

11

On the site you are copying from,

You can see that the isotope code is probably like this:

  // init Isotope
  var $grid = $('.listagemdinamica').isotope({
    itemSelector: '.itemdinamico'
  });

You have to follow exactly.

12

Got it! It’s working now. Thank you very much for your help. Much appreciated!

13

Not sure if you are aware. Mitchell? spelling and #f0f0f0 background with white is only seen by people with perfectly calibrated monitors. Which is like 30% of population.

14

@klubjunk who are you replying to?

15

Oh, thanks. I haven’t started working on the design yet, I’ll be sure to change that.

16

Hey guys,

I’m having the same problem. I tried recreating the code from Sidney Ottelohe @ https://webflow.com/website/Isotope-Search-and-Filter-Webflow-CMS

I have spent a long time trying to figure out why my button filter isn’t working with my CMS, which is structured identically to Sidney’s. The search works fine.

Any help is greatly appreciated! My preview link is below.

https://preview.webflow.com/preview/kyle-s-amazing-site?preview=1049efc55c0c6d3ebdbf263e1920a3d4

17

@moofawsaw class name selectors are case-sensitive. Make them lowercase.

1 Like
18

Thanks! That worked.

In the custom code for the button, how do I get each button to return the color chosen for each category I chose in the CMS? Right now I have it as:

Thanks again for the help!

19

Well it seems like it is already working, just that the class selector is so broad, it is affecting ALL the elements with a class button. So that style is printed out once for each button, and the last button’s style is overriding the previous selectors.

You could try changing the button selector to this so that it will affect the button that is in the same category

.button[data-filter=“.<Name>”] {

1 Like
20

This worked perfectly. Thank you.

For anyone in the future, I added the code below to have the background color of my button appear only when the button is selected.

Result:

.button {
    background-color: #fdfdfd;
    color: gray;
    width: 130px;
    padding: 10px;
    border-radius: 30px;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    text-transform: capitalize;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    }    
    .button.active[data-filter=".<Name>"],
    .button:focus[data-filter=".<Name>"],
    .buttonactive[data-filter=".<Name>"]
    {
      background-image: none;
      outline: 0;
      -webkit-box-shadow: none;
              box-shadow: none;
                  background-color: <Background>; 
                   color: white;
    }

The Name & Background are the field names from my CMS. Just replace the <…> with the CMS field from the dropdown of the custom code editor