Display collection data outside of data collection

HI everyone,

I’m working on a client website at the moment which has 20-30 stats they want to sprinkle throughout their website with some being used multiple times across different pages. I initially thought, no problem, I can create a ‘stats’ collection and then add them to the website with the collection list element and add some formatting so it’ll only show 1 item per collection list and then I can repeat that collection list element multiple times across a page. Unfortunately, that’s not going to work for this situation because some of their pages already make use of multiple collection lists reaching the limit of collection lists per page and additionally as they’re each individual collection lists I’m unable to randomise them as there is a likelihood the same stat would be duplicated multiple times on one page. Unfortunately, I’m unable to share a link to the site currently.

Is there a way to add a collection list to list all stats on a page, hide it so its not visible, and then pull that information into various locations on the page without the use of multiple collection lists?

I thought this sort of thing would be beneficial for larger websites as well with multiple contact details for different parts of a company so if you update the phone number or email in one place it then updates elsewhere.

Any help would be appreciated. Matt

Collection is nothing else that response from DB request. So IMO you can receive data via API. Not sure about if this will collide with WF collections on page. May be @memetican can have other idea.

If I understand right, you want to embed your stats randomly through your page in selected locations, while minimizing collection list use so you stay under 20?

I’d do it this way-

1 collection, containing yours stats
1 collection list, on each page needing this ( if it’s all pages, stick it in your footer component ).
Design the list so that each item is already prepared, e.g. a “stats card” or whatever you want it to look like.
Randomize the list, and hide it.
Wherever you want stats to appear, stick a DIV, with a custom attribute like stat-placement, no value needed.
On page load , run some JS that looks for those, and for each one, grabs the next “card” off the deck in your hidden collection list. This is just a DOM element move.

If you needed zero collection lists in use, you could store your CL on a hidden page and JS fetch it, but that introduces a delay, and all pages would have the same stats ordering ( re-randomized every 12 hours ).

If you needed to avoid them all looking the same, e.g. small “stats cards”, it’s possible to extract the data, merge it, etc. also using JS, but require some more work.

Hi @memetican that sounds exactly like what I need.

Do you have an example of JS you’ve used before for this use case? I’ll use ChatGPT to help me if not haha.

ChatGPT is your friend.

I’ve not needed to build this exact setup before, it’s an interesting use case.
The closest I’ve built is SA5’s Layout lib, which reorganizes your page using an item/slot tagging model with custom attributes.

What you’re doing here is similar,

I’ve made some notes about this use case in the Future section under distributed layouts. I’ll need to think about that for awhile, but I like the concept.