Randomize and Sort CMS Items before loading them

Design help Custom code
1

Hey Guys,

I was already trying to contact the support in order to get some help with my problem here, they adviced me to try and post it within the forum here, so let me start by explaining my problem:

Quality Personal Website should display job-posts for potential B2B customers in order to get in touch with potential upcoming employees. These job-posts are CMS items, that are shown in a masonry grid with isotope filtering and sorting. (https://isotope.metafizzy.co/)

To the problem:
Let’s say we have 100 CMS Items (e.g. job posts of B2B customers).
We use the Webflow Pagination Feature with 10 Items per Page.
Within the CMS Collection the items need to get randomized (best case on every page load, if it is only possible every few days I am also fine with that.).

With the help of custom code I am able to randomize the items on each page load, the issue with that is that with the active pagination it only randomizes the first 10 items. I need to make it work that the cms items get randomized, before they get loaded on the page with the first 10 items. That is why I asked, if there is any possible way to edit the SQL queries. Or any other way to get that done with webflow.

The next issue is that there are 2 different types of job posts, basic and premium.
If we say out of the 100 items we got 15 premium job posts, these need to be shown on the first 2 pages and best case randomized on every page load.

The problem with the pagination again is that, the items get loaded from the webflow cms created by date. So if Item 95, 96, 97 and 98 are premium job-posts, they will only be displayed at page 10 of the pagination. They should be displayed on page 1 or 2 if executed correctly.

Another questions is, if it is possible to get a seemless pagination with webflow, without loading a new page by GET and changing the URL?

Looking forward for any help here, as I was already trying with a friend of mine who got some coding experience and helped me setting up isotope with the masonry + the filtering.
But we cannot make it work to get all the CMS Items randomized and sorted by premium first, before it gets loaded to the page.

Looking forward to every help possible.
Best,
Joshy

Read-only-link: Webflow - Quality Personal GmbH)

Here is the link to the published page: Bildungsangebote - Finde das passende Unternehmen

2

You should look into using something like Wized and pull the data in the way you need from an external REST data source. Webflow is not going to meet your requirements as stated.

3

Jeff’s recommendation is the only way you can do this in a proper scalable fashion.

But if you’re talking about a reasonable number of job posts, not more than say 2000 total, you can build a version of this using Webflow + Finsweet’s tooling.

To do that I’d swap out Isotope for Finsweet CMS Filter and add Finsweet CMS Load. With a bit of custom coding you can make it load quickly and still restrict your number of items per page to 10 ( but you’ll want to set it at 100 per page for load performance ).

Plus you’ll have a full filtering capability.

Randomization might be the trickier bit, due to caching. You might be able to just use Webflow’s native randomization which randomizes every 12 hours. Custom code is another approach. You might also be able to use Finsweet CMS Sort to randomize, but I think I’d approach it differently. Newest job listing as the top, with good filtering and sorting so users can change that.

4

Hi Michael,

thanks for your reply, but Finsweet tooling cannot help me out here as they do not support masonry in combination with their CMS Filter and Load. After Finsweet did not work I did try out Refokus but sadly they did not work either. So I ended up trying isotope which did solve a lot of issues, but none of the mentioned issues above.

I did take a short look into Wized, what Jeff recommended, but I might need to hire someone to help me out with custom coding anyway, so I am trying to achieve that right now.

Still thank you for your response and help here guys, appreciate it.
Cheers
Joshy

5

All good. For future reference, both FS Filter and FS Load have client-side APIs, which have change events you can hook into. You should be able to trigger whatever masonry lib layout function you’re using. Macy.js is a good one.

Isotope is very capable however the FS libs exist because they are shaped to Webflow’s specific collection list pagination design. Very handy, I use them now almost exclusively.