Mixitup 2 elements with same category

So I implemented @sabanna 's mixitup filtering for dynamic content. When I set two elements in the “mix” collection item with the same category, it doesn’t work. It only works when only one element has the category. How can we make it work for two elements?

Secondly, how can we make it bring up an element that partially matches the category? For example, if the control button has the category/data attribute “large” , but in the “mix” item the text is “large box”, it still should pull up. How to ago about that?

Thank you!

http://mixitup-filtering.webflow.io/mixitup-plugin-dynamic-content

Hello, @simmyd

Can you please provide the following information so we could take a closer look?

  1. Read-only Link: How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow
  2. Screenshots of issue: Learn web design with free video courses and tutorials | Webflow University

Respectfully,
Anna

Hi @sabanna

Here you go

  1. https://preview.webflow.com/preview/chart-7b7fc3?preview=05d03acfb8cf2ea7c9dfd8e8673f0bab
  2. I’m not sure what to screenshot. The code is within the custom code of the page settings.
  3. The page is : http://chart-7b7fc3.webflow.io/mix

Issue 1: When you filter by “title” in the controls up top, it works great cause only 1 element in the collection items down below has the corresponding class (.mix-title). But when you filter by “office” up top, since 2 elements below have the corresponding class of .mix-office, it doesn’t work.

Secondly, if you try to filter by Practice up top (such as clicking on “Mediation” up top) , I’d like it to filter the records that have the word “Mediation” included in the rich text (which has the class mix-practice).

Thank you!!

Hi, @simmyd!

I see the source of the problem.

Each filter button has a data-filter attribute that has its own value. Plugin is searching through the items inside the container, that has the classnames matching those values.

For example: clicking on the button with data-filter=".miami-fl"
will make the plugin look for the item that has exact same classname miami-fl.


In your example, there is no such classname exist, because generated classname contains some other words in it, which makes it not matching the plugin request

The reason is that you have 2 elements with same class .mix-office. The code snippet, that you are using for generate classnames for dynamic items, putting text from both of them in ONE CLASS, which causes extra words in the classname and, as a result, does not match any data-filter attributes.
55%20AM

One of the ways to fix it: rename class on the 2nd element with the office address

As I described above, filtering plugin looking for the items with the certain classnames and it will not work the way you are requesting, unless you will make sure such specific classes applied to your dynamic items.

Currently, since it is several paragraphs inside ONE element with the class mix-practice it takes all the text inside the rich text and create ONE class from it.

27%20PM

With the code snippet that you are using, each of those paragraphs has to be a separate field with it’s own classname

Best regards,
Anna

Thank you @sabanna ! Very helpful!

1 Like