Focal - button to show all the items inside the collection on one page

[PK2023]

Hello,

I am trying to find a solution to add a button on collection page to show all collection items in one page.

Currently we have the setting to show 24 products in one page and we want to keep that as default. However we would love to have a button that when clicked would change the settings so that all the collection products are shown as one page.

As example, we have collection flowers which has 57 items all together and now this collection has 3 pages. With the view all button all 57 items will be shown in one page.

[PK2023]

Hello, I am very familiar with the code but for some reason this doesn’t seem to work Would you have a code piece I could just add to the collection page inside a button to trigger the setting change?

[PK2023]

I tested the goven code but it did not work for the purpose. I have executed the show all button by adding id=”original-section” to the <section> that wraps the pagination in  original main-collection.liquid then added a snippet with same code but replaced the pagination by and added a new section to the main-collection with id=”alternate-section”. Then added following script at the end of main-collection:

<script>
document.getElementById("replace-section-button").addEventListener("click", function() {
// Hide the original section
document.getElementById("original-section").style.display = "none";

// Show the alternate section
document.getElementById("alternate-section").style.display = "block";

})
</script>

So when customer clicks button with id=”replace-section-button” it will shift from pagination to show all. However I now have faiced the problem that when customer opens any product from these sections and return to the collection with previous page browser button, it will show the original paginated collection. 

would you have any idea what to add to the script to make it so that if customer clicks the product from the original collection it would return them to the right paginated page and vice versa if they have clicked the view all button and went to product from there and then return it would show the show all type of page?