Random sorting of multiple repeaters in page

I’m having trouble with

Thank you in advance for your time and suggestions!

We have a webpage with 3 repeaters, each linked to a separate collection in the CMS. Each repeater displays all the items in the corresponding collection. The collections have no links to dynamic pages, only to static pages with a repeater. Cache is disabled.

I’m trying to establish a random sorting for each of these 3 repeaters but without success. I’ve gone through multiple forum entries and I’ve tried two different paths as detailed below:

  1. According to the documentation, we should be able to see a “Random Sort” toggle in the settings for the Repeater ( CMS: About Filtering and Sorting Live Site Content with Datasets | Help Center | Wix.com ). This would be the ideal solution, for the other website user/maintainer. However, the toggle is not visible at all; i can’t determine whether our datasets are “regular” datasets or “dynamic page” datasets - the distinction is made on the documentation but the difference is no indicated on the settings/properties. None of them have links to dynamic pages, that’s certain.

  2. I’ve tried a code-based solution, using solutions listed in the forum to capture (here, for example: Can't shuffle/randomize order of repeater items as dataset forces its current sort onto repeater items ), shuffle and present the items in the repeater. I can make it work for one repeater alone, but cannot make it work for 2 or 3 repeaters on the same page. I’ve tried adapting the code, without success.

Working in
Wix Studio Editor, Premium account

Site link

Development link, not public

What I’m trying to do

Be able to randomly sort several repeaters in the same page.

What I’ve tried so far

See description above.

Hi, @user6858 !!

It’s interesting that the code-based solution is only working for one specific repeater. If you share the actual code you used, the community members might be able to jump in and help you out. :innocent:

2 Likes

When viewing your page datasets, you should see them split between “Dynamic Page Dataset” and “Datasets” like below:

As @onemoretime suggested, if you can share your code, that would be a huge help for understanding your setup and what the potential issue might be :slight_smile:

Thank you both for your feedback.

Referring to your screenshot, the Datasets we have are all listed as “Datasets”, not “Dynamic page dataset” - that answers my doubt, thanks! Still, the toggle is not visible :frowning:

In any case, the code solution has moved forward. i included it below, in case it’s useful for others.

  • I have one solution “A”, based on the Datasets API, which works and allows me to have multiple repeaters being shuffled.
  • I also tried another solution “B”, based on querying the collection directly using wix-data, which should be faster, but i have a problem in getting the Collection attribution working.

Here they are:

Solution A

$w.onReady(() => {
    shuffleDatasetToRepeater("#dataset1", "#repeater1");
    shuffleDatasetToRepeater("#dataset2", "#repeater2");
    shuffleDatasetToRepeater("#dataset3", "#repeater3");
});

function shuffleDatasetToRepeater(datasetId, repeaterId) {
    const dataset = $w(datasetId);

    dataset.onReady(async () => {
        const total = dataset.getTotalCount();
        if (total === 0) return;

        const { items } = await dataset.getItems(0, total);
        $w(repeaterId).data = shuffleArray(items);
    });
}

// Fisher–Yates shuffle function
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

Solution B

import wixData from 'wix-data';

$w.onReady(() => {
    shuffleCollectionToRepeater("Collection1", "#repeater1");
    shuffleCollectionToRepeater("Collection2", "#repeater2");
    shuffleCollectionToRepeater("Collection3", "#repeater3");
});

async function shuffleCollectionToRepeater(collectionName, repeaterId) {
    const result = await wixData.query(collectionName)
        .limit(1000) // Wix max per query
        .find();

    if (!result.items.length) return;

    $w(repeaterId).data = shuffleArray(result.items);
}

// Fisher–Yates shuffle function
function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

It looks like you’re missing the onItemReady handler for Solution B. :face_in_clouds: