â–Ľ
Streaming live at 10am (PST)

Dynamic linking to prev/next CMS items WITHOUT collection list

If you do not need the titles in the links, this is currently the easiest workaround for linking to previous and next CMS items WITHOUT using a hidden collection list, so it importantly does not have the 100-item limitation.

Previously we had these workarounds if we wanted to link to the previous/next items:


Pros:

  • Won’t break links if you publish/unpublish items
  • No 100-item collection list limitation, users can actually navigate through ALL items with this method

Cons:

  • You won’t have dynamic prev/next links displaying the item title (but I have a possible idea to add on to below script to enable it)
  • Sorted by item creation date, cannot be changed
  • Need hosting plan, cannot be implemented on free plans

Here are the three simple steps:

  1. Project settings > SEO > Sitemap > Auto-generate Sitemap: YES

  2. Add a div element with class cms-pagination, inside it drop two links: first for previous, and second for next. Design it as you wish.
    Screenshot_2021-04-02_150441

  3. Project settings > Custom Code > Footer Code, paste this:

     <script>
     Webflow.push(function() {
       // CMS auto pagination based on sitemap
       const cmspager = $('.cms-pagination');
       if(location.pathname.split('/').length === 3 && cmspager.length > 0) {
         const collectionUrl = location.href.replace(/[^/]+$/, '');
         $.get('/sitemap.xml').done(function(data) {
           const items = $('loc', data).get().map(v => v.textContent).filter(v => v.indexOf(collectionUrl) === 0);
           const currentIndex = items.indexOf(location.href);
           if(currentIndex <= 0) cmspager.children().first().css({ visibility: 'hidden', 'pointer-events': 'none' });
           else cmspager.children().first().attr('href', items[currentIndex - 1]);
           if(currentIndex >= items.length - 1) cmspager.children().last().css({ visibility: 'hidden', 'pointer-events': 'none' });
           else cmspager.children().last().attr('href', items[currentIndex + 1]);
         });
       }
     });
     </script>
    

Example on my website, single cms item pagination Project: HealthXchange

3 Likes

That’s a clever technique although “Sorted by item creation date, cannot be changed” is a real dealbreaker :frowning:

Well for others the 100-item limit method is an even bigger dealbreaker.

1 Like

This post was flagged by the community and is temporarily hidden.