HTMX & Webflow 100+ items on 1 page


I am experimenting with HTMX as an alternative to regular AJAX/ fetch queries.
My goal is to fetch and inject data from a collection list that has more than 100 items into 1 single page.

So far I can fetch some data using the hx-get attribute and then the dynamic slug but how do we create a loop that goes through all the items of a given collection list to execute that hx-get request ?

Any idea, leads ?

My read only link
I followed this tutorial.

Thank you :slight_smile:

You’d probably need a more Turing-complete language in order to solve for the looping requirements. As far as I’m aware, HTMX doesn’t offer this functionality itself, so you likely need to use JS and pair it with HTMX events.

If you can do that, you’ll have functionality to fill the gaps. With foreach, could display page numbers below the collection list, and then use them to get the individual page paths+query. With JS you’d be able to just get the first item, the last item, and then determine the full range of page numbers needed.

Another option might be to use the auto-gen sitemap as your source, filter it to the exact collection items e.g. /blog/* and then you have individual item links to HTMX-AJAX from.

Hi @memetican ,

Thank you very much for the insights !
I couldn’t find a way to use hmtx in combination with javascript but I might have found another method with a fetch request that fetches the url of the pagination button of a collection list, then parse the entire DOM, copies and pastes the content of the rest of the collection list.

It is working.

However, all webflow interactions on the copied collection list item aren’t being trigged (on simple hover effect). I think webflow ignores those DOM items because they didn’t came on page load…

My question:

Is there a way to wait for webflow until my function has copy pasted all items into the dom, before launching the webflow interactions ?

The HTMX docs cover those integration points.

You’ll need to reset IX2 for those interactions to be established on the newly created elements. Search the forum for that, you’ll find the code you need.