Basically the current structure: I have city-level pages currently, but I plan to start creating suburb-level pages under those cities. However, I have a swiper slider at the bottom that’s currently filtering to exclude any suburb-level page, and I would ideally want to show other suburbs nearby on suburb-level pages. What’s the best way to go about it?
Example: Under Melbourne, I will create multiple neighbourhood-specific pages. Once you visit a neighbourhood page, I want to show only other neighbourhoods under Melbourne, and not show cities/neighbourhoods in other cities. Will I need a separate template for this?
Without digging much, here’s the cleanest native-focused approach…
Neighbourhood collection would have a “nearby neighbourhoods” multi-ref, pointing to Neighbourhood. In it, you’d list whatever you want, including the current Neighbourhood. So Melbourne would list Melbourne, plus other nearby neighbourhoods.
On the Neighbourhood collection page, drop a collection list. You can probably bind it directly to that multi-ref, or else bind it to Neighbourhood, and filter it to “where nearby neighbourhoods includes current”.
Build your swiper off of that collection list content.
This sidesteps custom code for the data-acquisition and ensures that the right items already exist in the page at load, so you can init swiperjs immediately.
Admin is relatively simple, and highly controlled.
It’s also possible to make this automatic, and actually determine “nearby” e.g. “where centroid lat/long is within 10km of current neighbourhood’s centroid” but that means fetching all the data hidden, doing the distance calcs and manual filtering with custom code and deleting all of the irrelevant data before you init swiperjs.
You can even sort by distance so that the nearest are shown in the first slides.
It’s a lot more of a lift but these are fun builds and of course your admins will love you, though it slows the page init performance slightly.
Is there a way to filter the swiper to include only CMS items with a specific value in the item, like a category? I think that would be the easiest fix for me. I have the actual filter value set up on the CMS item, just uncertain how to dynamically filter based on the current value
You used the term “swiper” which typically refers to swiperJS. You can build it from a Webflow collection list, so yes, that’s how you filter the neighborhoods the way I’ve described.
If you’re unsure of this just read up on collection list filtering.
If instead you meant the Webflow slider, it does not support CMS data binding. You could learn to integrate Finsweet CMS Slider.
Heya, thanks a lot for your tip re: the reference field, I was able to do it using existing tags + filtering based on those through the field. Appreciated!