▼
Streaming live at 10am (PST)

Need help with applying MixitUp plugin to dynamic collection

#1

hi @samliew, speaking of adding classes to the parent element when using dynamic lists, I've been trying to get mixItUp plugin to work with Webflow dynamic embed widget but had no luck. Btw, before attempting this I had managed to get it to work no problem without using the dynamic embed.

Anyway, here's the public link to the website I've been working on: https://preview.webflow.com/preview/store-cms-76d7d6159d8f7efcd06d82d8a1e7b?preview=75a199060f82dbcc32a1f66c8c69e809

And here is the corresponding live website: http://store-cms-76d7d6159d8f7efcd06d82d8a1e7b.webflow.io

Basically, in order to addlClass to the parent div (.mix) from the child element (.category), I've been using this custom code I found in another post on this forum and which was posted by @sabanna (btw, Anna, you might have a solution for this yourself...):

Obviously, it's not working for me.

Thoughts?

Many thanks in advance.

In-page linking with dynamic lists
#2

You are using "Category" with capital "C" in the code snippet. Change it is small character and it should fix the issue.

#3

hi @sabanna, thanks for your tip. I fixed that but it's still not working :frowning:

#4

by the way, thanks a lot for the great tutorial about integrating mixItUp in Webflow! It worked like a charm for me

#5

:slightly_smiling: You are welcome.

And I may know why on your site it doesn't work now.

Originally that code snippet for dynamic content looking in the element with class "w-dyn-item" (original Webflow dynamic class), taking text from the element with class "category", which is a child, and applying it to the parent (dynamic item). As a result, you have to have a structure, where every dynamic item will have a combo class equal a category name.

In your structure, you added "extra layer/level".

Try to give dynamic item class "mix" and move whole structure one level up. And the Dynamic list should have an ID #mixItUp-container

Don't know if the code snippet will have to be changed, but you can try and check without changing.

#6

Thanks @sabanna, but still no luck with getting this to work...

Had a look at another user's (positive) attempt at making this work and I was under the impression my structure was pretty much the same as his: https://preview.webflow.com/preview/rumi?preview=374b2db797a1e1d771c6b435b6d8bf78.

However, two things need to be noted:

  1. In the above example, he used the Isotope plugin
  2. I can't find any custom code on his website. He must have added it to the website's footer. Tried to ask his help but had no luck yet.

Anyway. I'm stuck.

#7

You almost did it :slightly_smiling: Classes "Recent" and "Selected" been applied... but to the wrong div ...

I am sorry, it was my fault. Apparently he used "extra layer" too. So you can add one more div to wrap all content inside the dynamic item, or simply remove one word from code snippet:

#8

Yesssss!

Thank you so much Anna! I'm weeping tears of joy

PS: I'm going to head straight to your new tut on mixItUp advanced filtering :wink:

#9