Randomize order button in repeater

Feedback
1

It would be great to have an option to randomize the order of items to appear when users go on a page with a repeater. Each time they refresh or come back to the site at another time the order of items has changed. Just a simple “Toggle Button” in the manage items menu would be sufficient. This is for my wedding directory. So listings are always at the top and the order is random for each visitor.

1740×722 285 KB

2

It is possible with code

Try this (replacing datasetName with the ID of your dataset):

$w.onReady(function (){
$w("#datasetName").onReady(()=>{
const shuffledArray = shuffleArray(result.items);
                    $w('#datasetName').data = shuffledArray;
})
});


function getRandomIndex(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function shuffleArray(dataArray) {

    for (let i = dataArray.length - 1; i > 0; i--) {
        let index = getRandomIndex(0, i);
        const temp = dataArray[i];
        dataArray[i] = dataArray[index];
        dataArray[index] = temp;
    }

    return dataArray;
}

If you need any help, let me know :facepunch:

3

Thanks so much Noah. I have given it a crack but I could be way off here. I have added the code as you can see in the below picture

1869×895 198 KB

But then when I go to run I get an error

1864×794 224 KB

I have tried this way before and could never pull it off so I gave up on it a few years ago. Any suggestions would be greatly appreciated.

Also I should have set all of my pages up as datasets but instead, I make them as repeaters in the wix editor.

4

Ahhhh, so the method I have suggested uses a dataset. But by the looks of it, the repeater you have is not connected to any data. If you need it to shuffle, connecting to data is the best way (and easiest for updating information). If you need any help with understanding/creating datasets, let me know :facepunch:

5

Sorry about the late reply. I have gone and set a page up as a dataset as suggested. I added in the code and then published. It still doesn’t seem to be changing the order when I refresh my page. I have included screenshots and the error messages.

1829×893 260 KB

1828×791 210 KB

6

Okay. So I hadn’t tested it, and forgot some information that also needed to be added:

import wixData from 'wix-data';

$w.onReady(function () {
    $w("#datasetID").onReady(() => {
        wixData.query("CollectionID")
            .find()
            .then((result) => {
                const shuffledArray = shuffleArray(result.items);
                $w('#repeaterID').data = shuffledArray;
            })
            .catch((err) => {
                let errorMsg = err;
            });
    });
});

function getRandomIndex(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

function shuffleArray(dataArray) {

    for (let i = dataArray.length - 1; i > 0; i--) {
        let index = getRandomIndex(0, i);
        const temp = dataArray[i];
        dataArray[i] = dataArray[index];
        dataArray[index] = temp;
    }

    return dataArray;
}

Copy and paste the above code, replacing what you have already added.

Then change the following:
datasetID - change to your dataset ID
CollectionID - change to the ID of the collection
repeaterID - change to the ID of the repeater

I have tested it and it does work. If you need any help with it, let me know :facepunch:

7

I am so so so sorry to be a pest. I have done what you have told me to do but I am getting an error. It is saying my collection does not exist. My collection ID is correct as you can see in the bottom screenshot.

1319×889 174 KB

1730×835 73.3 KB

8

No worries! Well done on finding the correct place to locate the Collection ID. It appears you have put the collection ID in incorrectly though

The 5th line (i think it’s the 5th) should read this:

wixData.query("HAIRSTYLISTS")
9

You are a legend Noah. It has worked. Now I just need to create this for all my categories. Thank you so much for your help. I have been putting this off for years and was a request by a client to make it fair for all my listings. Thanks again Noah.

10

I’m glad I could help. It’s definitely a useful thing to know going forward, as you are able to take that extra step for your clients. If you ever need any help in the future (especially regarding databases etc) post it in the forum and I’ll see what I can do :facepunch: