This episode is for members only

Sign up to access "Winging A Laravel Comment System" right now.

Get started
Already a member? Sign in to continue
Playing
07. Pagination navigation

Transcript

00:00
So because we've now added pagination one thing that has come to mind is that when we do navigate we're going to be pushed to the very top of the page naturally within the browser. So what I'm going to do is come over to where we're showing our article here and I'm going to go ahead and create out a block here.
00:16
So let's say class width of full bg grade 100 and we're going to set a manual height in here. So let's just set this to 500 pixels so that's going to be the body of our article just inside of here. We could set a margin on the top so I'm just adding that as a sort of skeleton placeholder and then our comments are at the bottom. Now if within our comments we switch the pagination back
00:38
to one and I hit page two we're bumped to the very top of the page now that's not a great user experience. Obviously if you're building this with something like Livewire or Inertia with Vue or any other front-end technology this is not going to happen because this will be a button where you click to load more comments in but we're just focusing on Blade here because why not. So
00:56
when I do click this I want this to stay at the bottom where the comments are. Now for this and this is going to come in handy later we're going to have an overall id on this. Now we're never going to have more than one set of comments per page so a unique id here of comment is absolutely fine and then what we want to happen is when we build up the links here for the comments we want
01:21
this to go through to this hash. Now to do this we are going to go ahead and use the fragment method on the end and we're going to say comment I'm not sure if we actually need to provide the hash here or not but we'll check it out. Okay so that's not worked so let's try this a different way we might need to actually do this within the method itself that we return let's just check and
01:46
no no we don't we can do that directly on there. Okay great so wherever we are on this page now even if we've got a huge footer what this is going to do let's just get rid of that from here what this is now going to do is when we click page two it's going to keep us at the bottom and of course if we have a huge footer comments will be somewhere around here but either
02:05
way we're keeping the comments in view as we're navigating through them because of the hash that we've got up here. Of course if you're building this like I said in inertia with view or livewire you're going to end up with a much better experience anyway but that is how we solve that issue if we're just using blade.

Episode summary

In this episode, we tackle a common problem that comes up when adding pagination to your comments section: every time you flip to the next page of comments, the browser pushes you all the way back to the top. This can be a little annoying for users, especially on longer pages.

To fix this, we walk through giving the comments section a unique ID so we can use an anchor (hash) link, and then we update the pagination links to jump straight to the comments instead of just paging the whole browser. That way, even if you have a big article or footer, when you go to the next page of comments, you'll always land with the comments still in view.

We do all of this using Blade, Laravel’s templating engine, so it’s still a traditional server-rendered approach. (If you’re using something like Livewire or Inertia, you’d probably have a better, more dynamic solution, but this keeps things nice and simple.) By the end, pagination will feel a lot smoother to your users, making for a better overall experience.

Episode discussion

No comments, yet. Be the first!