Streaming live at 10am (PST)

Previous/Next CMS pagination buttons visibility

Is it possible to show the button grayed out on the first page of a paginated collection – and the button grayed out on the last page – instead of having them not show up at all?

3 Likes

Hi there. I realise I might not have been entirely clear in my question. What I meant to ask is this: Is it possible to show the -previous- button grayed out on the first page of a paginated CMS collection – and the -next- button grayed out on the last page – instead of having them not show up at all?

I’d love to hear a solution for that! I haven’t found a workaround, as the buttons always disappear. Is there a possibility for them not to disappear?

1 Like

Hi, there @Vivedia. I hadn’t got any feedback from anyone on this and moved on… will give you a shout if I ever revisit the issue and find a solution…

Hi @spincinconi, I was hoping to find some answers but have come up short, so I had to create a hacky way to do it. Not sure how familiar you are with HTML and JavaScript, but I will try my best to explain so that others in the same dilemma can follow along that are.

I’ll do the steps for the previous button:

  1. Copy the previous element from the HTML (to see, open inspector tool), we would have to get the element from the second page. The previous button will have this attribute: class=“w-pagination-previous previous”. By deleting the href attribute, you are removing the link.

  2. Insert the Embed component onto the page (or wherever you have your custom code)
    Screen Shot 2020-06-21 at 3.28.07 AM

  3. Enter this code:

<script>
    // ADD DISABLED PREVIOUS AND NEXT BUTTONS
    let paginationWrapper = document.getElementsByClassName('w-pagination-wrapper')[0]; // where the pagination buttons are

    // checks if the previous button is missing
    if (!paginationWrapper.getElementsByClassName('w-pagination-previous')[0]) {
        const previousElStr = ` YOUR CODE THAT YOU COPIED TO YOUR CLIPBOARD `
        paginationWrapper.insertAdjacentHTML('afterbegin', previousElStr);  
    }
</script>

and voila! If copy and pasted correctly, the previous button should be shown.

This is the code that I added in my website as an example. This has the previous and next button.

<script>
    // ADD DISABLED PREVIOUS AND NEXT BUTTONS
	let paginationWrapper = document.getElementsByClassName('w-pagination-wrapper')[0]; // parent element of the buttons

    // checks if the previous button is missing
	if (!paginationWrapper.getElementsByClassName('w-pagination-previous')[0]) {
  	    const previousElStr = `<a class="w-pagination-previous previous isDisabled"><svg class="w-pagination-previous-icon paginator-icon" height="12px" width="12px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" transform="translate(0, 1)"><path fill="none" stroke="currentColor" fill-rule="evenodd" d="M8 10L4 6l4-4"></path></svg></a>`
		paginationWrapper.insertAdjacentHTML('afterbegin', previousElStr);	// adds before the next button
	}
    // checks if the next button is missing
	if (!paginationWrapper.getElementsByClassName('w-pagination-next')[0]) {
        const nextElStr = `<a class="w-pagination-next next isDisabled"><svg class="w-pagination-next-icon paginator-icon" height="12px" width="12px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" transform="translate(0, 1)"><path fill="none" stroke="currentColor" fill-rule="evenodd" d="M4 2l4 4-4 4"></path></svg></a>`;
		paginationWrapper.insertAdjacentHTML('beforeend', nextElStr);	 // adds after previous button
	}
</script>

Note: the changes will only take effect in the live website after it is published.

1 Like

Many thanks for this, @gradius. The site I needed this for went online a while ago, but I will definitely revisit your solution if this requirement resurfaces in future. Cheers!

2 Likes

@gradius Awesome! thanks for this!!!

1 Like

@spincinconi @Vivedia No problem! Let me know if you need help :slight_smile: