Randomize button for Wix Gallery - Connected to CMS

Ask the community
, , , ,
1

Question:
Hello! I am looking to add a randomize button to my gallery, which is connected to a CMS collection. There are over 300 images so I would like the user to be able to randomize the order. Currently, I have the following code which handles a Sort Dropdown by Title. How could I add to this to implement a Random option?

import wixData from 'wix-data';


$w.onReady(function(){

    $w('#sortDropdown').onChange((event) => {

        const sort = $w("#sortDropdown").value;
        switch (sort) {
            case "Title: A-Z":
                $w("#paintingsDataset").onReady(()=>{

                    $w("#paintingsDataset").setSort(
                        wixData.sort().ascending("title")

                    )

                })

                break;
            case "Title: Z-A":
            $w("#paintingsDataset").onReady(()=>{

                    $w("#paintingsDataset").setSort(
                        wixData.sort().descending("title")

                    )

                })

                break;

            default:
             $w("#paintingsDataset").onReady(()=>{

                    $w("#paintingsDataset").setSort(
                        wixData.sort()
                    )

                })


                break;

        
        }



})


});

Product:
Wix Studio Editor.

What are you trying to achieve:
I’m trying to add a Randomize button for my gallery so users can randomize the order of the images and associated titles, descriptions, etc.

2

Great idea to give users the option to randomize a gallery — it definitely adds a fresh experience.

Since your gallery is connected to a CMS collection, here’s how you can extend your current sorting code:

Add a “Random” option to your sort dropdown.

When “Random” is selected, fetch the dataset items and use JavaScript’s sort with a random comparator like this:
Wix datasets don’t support random sorting natively, so the best approach is to fetch all items, shuffle them in code, then feed them into a repeater or your gallery manually.

If you want, I can help you with a full code example or walk you through setting this up!