Sort a CMS collection list by price (and solve Webflow's comma issue)
Want to filter a real estate property list by price but can't figure out how to include a comma? Then watch (or read) this brief tutorial on how to filter a Webflow collection list easily via the CMS.
Estimated reading time:
It's time for another short Webflow tutorial! This time I'm showing you how to filter a collection list (in my case a real estate listings page) by price and how to solve a small but annoying issue with commas in Webflow. This allows you to display the properties either from the most expensive one to the most affordable one or the other way around. While you might know that this can be achieved by using the filter feature in Webflow, you might not know that keeping a comma in your price can be quite tricky. Especially for real estate listings it's important to have keep a comma in your price for better readability and to allow visitors to scan the prices on the "for sale" page more quickly.
Either a comma or filtering – can't I have both?
However, that's where the problem starts. Webflow currently doesn't allow you to include a comma in your "numbers" field in the CMS collection item. But you need the "numbers" field to be able to sort your properties by price – having the price as a "plain text" field (which allow commas) removes the ability to filter by price. Very annoying! So how do you get around this?
This is how I solved the issue:
I created both a numbers field, as well as a plain text field in my CMS collection
The numbers field contains the property price without a comma (e.g. 500000)
The plain text field contains the property price with a comma (e.g. (500,000)
Both fields don't include the dollar (or whatever currency you're listing), the dollar sign is placed as a separate non-CMS text field on the page, net to the price
After you've finished entering the values in your CMS and set up your CMS collection on the page, you place two text fields next to each other on the page (use inline block to make them stay next to each other)
Connect one text field to your numbers field in your CMS collection, connect the other text field to the plain text field in your CMS collection
You should now have to prices, one with comma and one without a comma on your page
Now set your text field without the comma to "display: none"
Lastly select your collection list on the page, go to the sorting options on the right hand side of the screen in the Webflow Designer, select your CMS numbers field and sort either from low to high or high to low
That's it! You should now be able to sort your property list by price, while still keeping the comma in the price. Yay!
Don't want to read? Watch my short video tutorial
Want to know how to set up filtering options so your site visitors can actually filter by price or by newest/oldest properties? I'll do a brief tutorial about this soon. Stay tuned!
Want to know how I got started and became a Webflow designer? Then, listen up! You'll find a brief rundown of how I got to where I am now, as I haven't only switched continents but also moved from print to web/digital design...
Are you based in Perth, Australia? Great - I've just established the city's first Webflow Meetup Group. Check out this post for all the details and for some more info on how to start a meetup group in your own hometown.
Ever heard of Matterport? The service allows you to place virtual walkthroughs on your client's website. This could be especially useful for real estate agents and tourism businesses. Let me show you how to easily integrate this feature into your next Webflow project.