Streaming live at 10am (PST)

Help! Filter content with MixitUp3 not working! :(


#1

My project:


http://heritage-ceramics-pte-ltd.webflow.io/collections

Any kind soul please. I’m a beginner. I have followed this tutorial below but it’s not working. I’m not sure what is wrong with codes. https://mixitup-webflow-tutorial.webflow.io/filtering-cms-content-select


#2

Hi @junephua

Can you please check your read-only link?


#3

Hi @donaldsv

Thanks for the help! Here is the link: https://preview.webflow.com/preview/heritage-ceramics-pte-ltd?utm_source=heritage-ceramics-pte-ltd&preview=73191694654f6683898371a98715c90b


#4

I think @sabanna would be the best to help with this!


#5

Hello, @junephua!

From what I can see on the page and custom code, you most likely misunderstood how ORDER and FILTERING works.

FILTERING let user select particular category in the list (select, checkboxes, etc, etc.) and plugin will show elements that belongs to that category.

ORDERING can only re-arrange filtered content in Ascending Order (E.g. 5, 9, 13, 17 and 21 are arranged in ascending order, similar with words it would be alphabetically) or Descending order (E.g. 25, 21, 17, 13 and 9 are arranged in descending order, with words it would be reverse-alphabetically).

You should make a decision either you want to control ORDERING by color/surface/rating/etc. or you want FILTER content by those categories.

Currently your controls presented as filters, but custom code modified (even with errors) as for the ordering. Depends on your decision, some structural changes should be made.

If you can let me know what is expected functionality in your project, I will do my best to help you setup correct structure and custom code.

Respectfully,
Anna


#6

Hi @sabanna!

Thank you so much for your help! Sorry for not stating my problem clearly. I want FILTER content by those categories.


#7

Hi @sabanna

Here is an example what I wanted to do. Their advance search is what I am looking for. https://www.keope.com/en/collections.


#8

I see.

It is possible to do with the mixitUp, except the functionality when available categories get excluded from the selects depending on the previous choices.

If you are okay with that here are steps you will need to do:

  1. each category-type should be applied to the item separately, as a separate text element. It means that your collection structure probably needs to be changed. You can use option fields for each category or just plain text or even reference, but not a multi-reference (unfortunately).

  2. each text element with the bound category have to have same classname that you can access at the custom code, if you need to style them different you can use combo-classes.

  3. use the custom code from the page you mention at the beginning just remove those lines that related to ORDER

Let me know if you will have more questions.

Cheers,
Anna


#9

Hi @sabanna

For No.2, how do I insert the bound category in the dropdown list in the form? Or should I create using individual dropdown component?

Thanks,
June


#10

how do I insert the bound category in the dropdown list in the form

It is not necessary. The filter categories can be a static elements. You only need dynamic categories inside the items, each category as a separate text element.


#11

Thanks @sabanna

I have given up the idea of multi dropdown. I realized I must have multireference for this filter otherwise it doesn’t make sense.

By the way I tried to clone from SidneyOttelohe’s work.

But having difficulty to style and remove the orange background of the html button. Any idea how?
52%20PM

When I change the background to white. The orange color doesn’t change.


#12

I guess you are changing the background color on the wrong element