I added two toggles to my collection, one “First” and one “Last” that I turn on if the lesson (my site is an online course) is the first or last in the unit.
This allows me to show or hide the Previous and Next buttons when appropriate. Maybe that’ll help someone else, too!
Guys, i know its holiday time… and your working on great stuff… but please when that is finished do some small projects like this kind of things it would make the community love your more!
It might be worth noting that I had to refresh after adding the “next” reference field to the collection before I was able to link it from my template. Just throwing that out there in case anyone else runs into this same issue I thought it wasn’t working at first.
I solved this issue without manually assigning anything in the CMS. If the post order is changed or if posts are deleted, the buttons update automatically. A working version of this can be found here: http://www.hammerhouse.io/post/jonathanroy
How it works:
-A dynamic list containing your posts is added to the post template page.
-Webflow automatically adds the class ‘w–current’ to the current post.
-jQuery searches the dynamic list for that class and the posts that come before and after it.
-jQuery updates your next / previous button anchor tags.
Step A - Add the the post list:
At the bottom of the post template page, add a Dynamic List containing all posts
Step B - Add dynamic links:
3) Add a Text Link element inside the Dynamic Item
4) Set the link to Current Post
5) Set the text to the post’s Name field
Step D - Paste the code:
8) In the post template page settings, add the following code inside the head tag section:
-CSS is included to hide the post list on the published page
<style>#post_list{display: none;}</style>
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
var next_href = $('#post_list .w--current').parent().next().find('a').attr('href');
var previous_href = $('#post_list .w--current').parent().prev().find('a').attr('href');
//if last post in list
if(next_href == undefined) {
next_href = $('#post_list').children().children().first().find('a').attr('href');
$('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
}
//if first post in list
if(previous_href == undefined) {
previous_href = $('#post_list').children().children().last().find('a').attr('href');
$('#previous_button').fadeOut(); //optional - remove if you want to loop to end
}
//apply hrefs to next / previous buttons
$('#next_button').attr('href', next_href);
$('#previous_button').attr('href', previous_href);
});
</script>
Note:
If you put links to next and previous. Use a relative path like /albums/pallets-and-knives.
Otherwise, once you publish live this will redirect to the web flow domain.
Hi @hammerhouse I followed the steps and tried implementing this code as-is but my previous & next buttons don’t appear to show up? I’m using normal buttons with class name “group” as in your screenshots and applied the previous_button/next_button id’s. Let me know if there’s something I’m missing or if this script has changed at all? Thanks!
Thanks a lot for this. But just to confirm, if you have, say, over 100 items (blog posts), this means you’ll need to manually link each post to the previous & next items? Seems like a lot of work.
Check out microfiber sheets. These microfiber bed sheets are made from a soft, lightweight fabric that is perfect for those who want to get a good night’s sleep.
Here’s a non-jQuery (vanilla JS) solution for those looking for it:
<script>
// Enables Prev / Next portfolio post links at bottom of page
let next_href = document.querySelector('#post_list .w--current').parentElement.nextElementSibling.querySelector('a').getAttribute('href');
let previous_href = document.querySelector('#post_list .w--current').parentElement.previousElementSibling.querySelector('a').getAttribute('href');
//if last post in list, get first one
if(next_href == undefined) {
next_href = document.querySelector('#post_list .w-dyn-item a').getAttribute('href');
}
//if first post in list, get last one
if(previous_href == undefined) {
previous_href = document.querySelectorAll('#post_list .w-dyn-item:last-child a').getAttribute('href');
}
//apply hrefs to next / previous buttons
document.querySelector('#next_button').setAttribute('href', next_href);
document.querySelector('#previous_button').setAttribute('href', previous_href);
</script>
I noticed this same bug was happening to me. When I was checking the instructions I thought I did everything just like he said. Then I figured out for one of the IDs I did “#post-list”(this is wrong). When I corrected the ID to “#post_list” my buttons reappeared. Not doing a underscore was the thing that was causing the buttons to disappear. Hopefully this helps.