Previous / Next item buttons only within the item-set

I have done this for a project in the past. My solution is a little cumbersome but it works. Basically, I added query params to all links that lead to an item record from a collection or item type view.

For example, if the user is viewing items with the item type Text (id 1) and the collection with an id of 2, the url is modified like items/show/1?type=1&collection=2. Then I read those parameters using html_escape($_GET['collection']) and html_escape($_GET['type']) on the items/show page to create a scoped navigation.

See link below…

The easiest way to add those query params is via JavaScript, e.g.

addEventListener('DOMContentLoaded', event => {
    let params = new URLSearchParams(window.location.search);
    // if user is browsing by type or collection, add value as param to each item link
    if(params.get("collection") || params.get("type") || window.location.pathname.includes('collections/show')){
    var itemlinks = document.querySelectorAll('.item a'); // you might need to change this selector
    itemlinks.forEach(link=>{
        if(link.pathname.includes('items/show')){
            link.href += (params.get("collection") ? '?collection='+params.get("collection") : '');
            link.href += (params.get("type") ? (link.href.includes('?') ? '&' : '?')+'type='+params.get("type") : '');
            link.href += (window.location.pathname.includes('collections/show') ? '?collection='+window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1): '')
        }
    })      
})