How to make repeater items pages have their own URL

Ask the community
,
1

Hi, I have created a database collection and connected it with repeater to display 20 items per page But i have noticed when user clicks on the next page button the results in repeater replaces with new results But the URL of the page doesn’t change and shows nothing like /page/3 in the URL
So what do i do so the every single page have it’s own URL so if anyone copies that URL he can use it to go direct to that page

2

Try pagination.
Follow the link below.
You need to connect with same dataset…

https://www.wix.com/corvid/forum/news-announcements/new-element-introducing-pagination
3

Hi Muthu i really appreciate your help but That’s not what I’ve been trying to do

4

I just want to make something like this

1751×808 177 KB

In this image i searched keyword “mobile” and it showed me the result page and i clicked on the next page here you can see the url in the bar changes to pg_2 what indicates that tpage 2 has it’s own URL so in case of repeater on wix the results reloads in repeater without changing the url of the page So if user want to copy url for the specific page he cannot do this

5

Hey @ssaurabhsinghind762 :raised_hand_with_fingers_splayed:

You can do this with query parameters , basically, what you need to do is updating the query each and every time the pagination bar is changed, to do so, you need to configure an onChange() event handler on the pagination bar.

// First of all, import wix location module.
import wixLocation from 'wix-location';

// Define the event handler
$w('#paginationBar').onChange((event) => {
    let pageNum = String($w('#paginationBar').currentPage);
    let query = wixLocation.queryParams;
    
    if (query.hasOwnProperty('page') {
        query.remove(['page']);
        query.add({page: pageNum});
    } else {
        query.add({page: pageNum});
    }
})

The URL of the page will change from:
www. domain .com/products

To:
www. domain .com/products?page=6

You’ll need to write a function that runs when the page is ready that reads the number of page and navigate to the specified one too.

Hope this helps~!
Ahmad

6

Thanks! Ahmad for all of your efforts and It worked perfect.

7

@ssaurabhsinghind762 You’re welcome buddy :wink:

8

@ahmadnasriya Hey Ahmad! I have exactly the same problem as Saurabh Singh but I can’t get your proposed solution to work. I have a page with a repeater showing items from my products collection and I’m trying to get the url to change when the pagination is used and the repeater shows the next page of items. Do you have any idea what the issue could be?

9

Solved the problem myself! For anyone else who has the same issue:
I think I solved it by replacing
query.remove and query.add with
wixLocation . queryParams.remove wixLocation . queryParams.add.
That did the trick.

10

@kath0722 the query is already defined above the if statement, perhaps you forgot to declare it, otherwise it should work.

11

Hello @ahmadnasriya I was wondering if you know how to do this same code but for Editor X? I tried using it to create page #'s for my repeater pages, but with Editor X, there isn’t a paginationBar. There’s only the previousButton & nextButton, and unfortunately .onChange and .currentPage is not available for buttons. I appreciate any help you can give.

12

The code will work for both editors.

13

Hey @ahmadnasriya , thanks for the reply! They don’t have pagination on Editor X yet, only buttons that you can link “next/previous”. So I’m curious how it would work on Editor X without the paginationBar?