Dynamic filtering/sorting for portfolio items

Design help Custom code
1

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]

2

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

3

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

4

Hello @Denise_Dambrackas

image
image235×573 12.4 KB

This is the way you filter in CMS

5

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!

6

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
7

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!

8

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!!!

9

Hi Denise! Would you mind sharing a link to the webflow guy you found on upwork?