Dynamic Blog Navigation | Prev/Next Buttons?

Helpdesk Collections
,
1

Trying to get my website up and running has been brutal while trying to figure out all this stuff on my own with no prior knowledge, but I’ve spent too much time on it to turn back to Wordpress or something now.

I’m basically done and I’m just in the process now of uploading all my old comics from my previous website but I don’t see any way for me to have a button under//over each comic that would let the user go to the next or previous blog post/comic.

Deepseek AI was telling me there’s a thing called Dynamic Blog Navigation, but for the life of me I can’t seem to find what it’s talking about. It said maybe because my Sitejet subscription is integrated with my InMotionHosting plan I don’t have access?

Is there any way for me to incorporate a relatively simple navigation need or am I gonna have to manually create buttons and then put each respective link in each individual page, cause I gotta say that might be a deal breaker for me.

2

Hey there,

very good idea.

Unfortunately, we do not offer a dynamic navigation between collection items yet. You might want to head over to the Feature Request list and look if there is such a request or open one. I do agree this is a great feature and needed.

3

Hi,
I think this might work out to be a smooth fix until sitejet provides navigation. Basically You create the buttons in the single page layout and this script will update the href of your buttons or disable them as appropriate.

Note the button IDs, also note your collectionId for the API call and your slug for the collection then update the script. Then paste the script after the HTML {{content}} in the code editor.

<script>
document.addEventListener('DOMContentLoaded', () => {
// UPDATE THESE VALUES
  const collectionId = '<your id>';
  const collectionSlug = '<your collection slug>' ;
  const prevBtnId = '<previous button id>';
  const nextBtnId = '<next button id>';
  
  const api = `https://api.sitehub.io/collection/${collectionId}/items?order=createdAt_ASC`;

  fetch(api)
    .then(r => r.json())
    .then(({ collection }) => {
	
	  if (!Array.isArray(collection) || !collection.length) return; // nothing returned – abort
	  
	  const slugs = collection.map(item => item.columns?.slug).filter(Boolean);  
      const current = window.location.pathname.split('/').filter(Boolean).pop();
      const idx = slugs.indexOf(current);
      if (idx === -1) {
	    console.error('Collection Index Out of Range');
		return; // current page not found in collection – abort
      }
      const prevBtn = document.getElementById(prevBtnId);
	  const prevLink  = prevBtn.querySelector('a');
      const nextBtn = document.getElementById(nextBtnId);
	  const nextLink  = nextBtn.querySelector('a');

      // Previous link
      if (slugs[idx - 1]) {
        prevLink.href = `/${collectionSlug}/${slugs[idx - 1]}`;
      } else {
        prevBtn.style.display = 'none';
      }

      // Next link
      if (slugs[idx + 1]) {
        nextLink.href = `/${collectionSlug}/${slugs[idx + 1]}`;
      } else {
        nextBtn.style.display = 'none';
      }
    })
    .catch(err => console.error('Navigation fetch error:', err));
});
</script>
2 Likes
4

Hey Matthew,

Awesome. Can you maybe do a favor and add a more step by step with screens? I would pin this as the solution then :slight_smile: Just bear in mind that most Sitejetters are not familiar with code.