Hi, Oliver!
Yes, you have too many parentElement
parameters right now 2 will be enough
Hi @sabanna, thanks for you awesome tutorial
Iâm trying to implement the Checkbox Filtering following the steps on your tutorial. Everything seems to be in order in my page. Classes are assigned correctly to the .mix element and mixer.filter(selectorString) seems to be called with the right arguments. However, the filtering doesnât work as nothing happens as I check or uncheck the checkboxes. Iâd very much appreciate some help.
Hereâs the link to the preview:
https://fulbrightpy.webflow.io/full-pages/becarios-example
And hereâs the link to the project:
https://preview.webflow.com/preview/fulbrightpy?utm_source=fulbrightpy&preview=f90c7264511351f42a57412345e27910
Thanks!
Hello, @albsama!
I checked the code on your example and noticed that when you are assigning the containerEl
you are pointing to the element with classname .mix
, which is not correct. The way it is pointed now the plugin is trying to find what items it can filter inside the 1st âmixâ element that it can find on the page. As a result, you have nothing.
containerEl
should be pointed to the element with the class of the div (or container) that is wrapping (contains) all mix-items, in other words, WHERE plugin should look and filter items. In your case, it would be the .becarios-collection-list
If you have more than one div with this class, then you can point it by ID. In your case, it would be
containerEl = document.querySelector('#becarios-collection-list)'
Best regards,
Anna
Hey @sabanna
I hope youâre fine!
Iâm currently building a new project and Iâm facing an issue.
If you check this page, youâll see that the filter is not working.
Iâm probably missing something, but Iâve checked everything I could.
So If you could have a quick look on it, it will be awesome!!
Thanks a lot for your help.
Have a nice day,
Olivier
Hi, @olivierp!
Sorry for the late reply. I checked your project on a published link and it seems works fine. Did you figure out the problem?
Cheers,
Anna
Hello @sabanna,
Thanks for your answer, but Iâm not sure about the link youâve checked, because on my side itâs not working.
Published link is here, and not working.
Let me know if you need more info!
Thank you!
Hey @sabanna,
I really do not want to bother you, but wanted to be sure that youâve read my previous message.
I will understand if youâre busy (or in HolidaysâŠ)
Thank you & have a nice day,
Olivier
I sent you DM that day, check your inbox, please
Hi @sabanna â or anyone else. This is exactly what Iâm looking for: dynamic filter buttons that will update automatically if a category is added or removed in the CMS. However, I cannot find any instructions for how to set this up.
Iâm lookind at âFILTERING AND SORTING CMS CONTENTâ at Filtering CMS content | Webflow+MixitUp3 tutorial, and step 4 only seems to have instructions for building non-dynamic controls.
Iâd be happy if someone could point me into the right direction!
Hi sabana and all,
first of all, thank you so much for a great tutorial!!
however,I have a trouble with webflow cms collection limited list and I have to implement to list over
100 items in my contests section.
is there any idea and solution in this mixitup?
actually, I have seen the website made by webflow and mixitup before, to be over 100 items using mixitup multiFilter and this site is like followed site.
I donât know well⊠I guess he can use the data-ref=âcontainer-1â and the data-ref=âcontainer-2â in cms collection custom attributes.
(I could see this site before, unfortunately, not this time)
I really appreciate it if somebody can inform me like this example siteâŠ
I created a separate topic where I showed a Workaround for Big collections:
Happy Webflowing
Want to try a free version using List.js?
@sabanna I wanted to thank you in the forum for the help you have provided with my project ⊠I took youâre suggestion and simplified my data-values. however, I am still having an issue. could you take a look (hopefully one last time) I would really appreciate it
Hello Anna! @sabanna
Itâs me again, Gabriel.
Thanks to Your help I could move forward and tried the MixItUp multifilter function.
Unfortunately something went wrong, the filtering isnât working.
Would You please check again my read only link, whatâs wrong with the setup?
https://preview.webflow.com/preview/gabriels-amazing-project-9f0517?utm_medium=preview_link&utm_source=dashboard&utm_content=gabriels-amazing-project-9f0517&preview=986d089f6f8fc47a8f5adf20cf993af2&mode=preview&fbclid=IwAR01tmbJFVYTkjFu5Viu3mAojuxLf-4MCpgVQQDShtDqQ_lBXSgYvA3U2hw
published site: https://gabriels-amazing-project-9f0517.webflow.io
Thank You for your time!
Gabriel
Hi, @Gabriel_Hajdok!
You simply lost the letter ânâ in the URL and browser canât get access to the file
Big thank You @sabanna for Your help. This means a lot to me.
Now the first dropdown filter is working, but the others still not. I think I missed something from your âMultidimensional filteringâ tutorial, but donât know what exactly.
Would you please check again whatâs the problem?
-
You canât leave spaces in the values, because they should match CSS classes, any spaces should be replaced by dash (
-
) -
MixitUp automatically transforms all âspecialâ (non ASCI) characters inside its API when you making any filter selection ( changes
ĂŒ
tou
for example), so you will need to make sure your markup matches the sanitised version of any query.
I will try to write a function for doing it automatically, but it will take some time.
Ok @Gabriel_Hajdok, here is what you will need to do:
- Change the function that I showed on the screenshot to the code snippet bellow
var conv = function (str) {
if (!str) {
str = 'empty';
}
return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
.replace(/ /g, "-")
.replace(/[Ă€|Ă |ĂĄ|ĂŠ|ĂŁ]/gi, "a")
.replace(/[Ăł|ö|ĂŽ|ĂČ|Ć]/gi, "o")
.replace(/[ĂŒ|Ăș|Ʊ|Ă»|Ăč]/gi, "u")
.replace(/[Ă|Ăź|ĂŻ|Ä«]/gi, "i" )
.toLowerCase()
.trim();
};
- In all filters, replace all umlauts and accents to the âLatinâ characters accordingly (examples you can see in the code snippet above ) and add dashes instead of spaces.
- Remove values from the âallâ option, it doesnât work properly with word all in the latest MixitUp API