Dynamic filtering/sorting for portfolio items

I’ve created a section using MixitUp for sorting portfolio items. On this page:
https://guildworks.webflow.io/portfolio

I was feeling hopeful, but no matter what I’ve tried to fix it, it’s not working. I’ve probably made it worse! What am I doing wrong?!

I think that the tutorial changed verbiage mid-explanation, but that could just be my stupidity. :wink:


Here is my site Read-Only: [LINK][1]

My fingers are crossed that some kind soul has a moment to look at this code for me.

Can I send out a bat signal of sorts to @anna-sabatini ?

Hello @Denise_Dambrackas

This is the way you filter in CMS

Hi Bimbi. I appreciate your response, but this is not what I’m trying to do. I’m attempting to use a multi-reference collection to filter a portfolio collection. When you click on the filter-button, it would only show the portfolio items that have that multi-reference “category” applied. Here’s the URL for the tutorial. It uses Javascript!

Hey Denise. The embed code on the link you shared is invalid, you need to close the the first link to the javascript, then open a new script tag for the following code like so:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>

<script>
	var conv = function (str) {
		if (!str) {
			str = 'empty';
		}
		return str
			.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
			.replace(/ /g, '-')
			.toLowerCase()
			.trim();
	};

	var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
	catArray.forEach(function (elem) {
		var text = elem.innerText || elem.innerContent;
		var className = conv(text);
		elem.parentElement.parentElement.classList.add(className);
	});

	var containerEl = document.querySelector('.mix-container');

	mixitup(containerEl);
</script>
1 Like

David, you’re my hero! I say this, as I cling to your cape… The script has fixed SOMETHING, but my filters still aren’t working.

The full list link (data filter=“all”) is working, but the filter-category links are not…

The filter-category is being displayed as text inside of a div inside (child of) the portfolio item to be filtered, which is normally display=“hidden”, but now “block” for development.

What am I doing wrong? Thank you!

The coolest thing happened! I reached out to a random guy on upwork with a few good reviews and Javascript and Webflow at the top of his list of skills. I didn’t really know how to just reach him, so I just made an offer, sent money and everything. He replied to me saying that he didn’t want my money and that he’d just help me out. <3 Turned out that the Javascript needed to be told to put the class a couple of extra layers up, because of the multi-reference that the value came from. Also, there was a class referenced in the code that did not appear in the tutorial. It works now!!!