- 3 min read

How to Randomize Items in a Wix Repeater

When building dynamic websites on Wix, one powerful tool at your disposal is the repeater, which allows you to display content from a dataset in a visually appealing and structured way. However, there might be instances where you want to add some randomness to the content, such as showing different items in a random order each time a user visits the page. In this post, I'll walk you through how to shuffle the items in a Wix repeater and limit the number of items displayed on each page load.

Why Randomize Content?

Randomizing content can be beneficial for various reasons:

Increased Engagement: Displaying different content on each visit keeps your website fresh and engaging.
Fair Exposure: If you have a large dataset, randomization ensures that all items get a chance to be seen.
Dynamic User Experience: Randomizing the content can make your website feel more dynamic and less predictable.

Step-by-Step Guide

Here’s how you can set up your Wix repeater to show a random selection of items on every page load.

Step 1: Set Up Your Repeater and Dataset

First, make sure your repeater is connected to a dataset. The dataset should contain the items you want to display. For example, on a vacation rental website, your dataset might be connected to a collection called "Rentals," which includes details about various rental properties.

Example: Vacation Rental Website

Let’s say you have a collection named "Rentals" with fields like rentalName, location, amenities, and image. You want to display 3 featured properties randomly each time a visitor lands on the homepage.

Here’s how you can set up your repeater:

Create a Dataset: Add a dataset to your page and connect it to the "Rentals" collection.
Design the Repeater: Customize the repeater to display property details like the rental name, location, price, and an image.
Connect Repeater Elements: Ensure each element in the repeater (e.g., text, image) is connected to the appropriate field in your dataset.

Step 2: Add the Code to Randomize and Limit Items

Next, you'll need to add some custom Velo code to your page. This code will shuffle the items and limit the number of items displayed to a specific number, such as three.

$w.onReady(function () {
    const dataset = $w("#dataset1");

    // Load the dataset
    dataset.onReady(() => {
        // Get all items from the dataset
        dataset.getItems(0, dataset.getTotalCount())
            .then(result => {
                let items = result.items;

                // Shuffle items randomly
                items = shuffleArray(items);

                // Limit the number of items to 3
                items = items.slice(0, 3);

                // Assign the shuffled and limited items to the repeater
                $w("#repeater1").data = items;
            });
    });
});

// Function to shuffle an array randomly
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;
}

Explanation:

Random Shuffle: The shuffleArray function uses Math.random() to shuffle the items each time the page loads.
Limiting Items: After shuffling, the code uses slice(0, 3) to limit the items to just three, but you can adjust this number to fit your needs.
Repeater Update: The shuffled and limited items are then assigned to the repeater, ensuring that visitors see a different set of items every time they visit.

Step 3: Test and Publish

Once you’ve added the code to your page, test it by previewing the site or publishing it. Each time the page loads, the repeater should display 3 random rental properties from your dataset.

Example in Action

Imagine a visitor lands on your vacation rental website. The homepage has a section titled "Featured Properties" where 3 properties are displayed. Instead of showing the same properties every time, this code ensures that a different combination of properties is highlighted on each visit.

Randomizing and limiting items in a Wix repeater can significantly enhance the user experience on your website, making it feel more dynamic and engaging. Whether you're showcasing products, services, or any other type of content, this method ensures that your visitors always have something new to see.

About WIXCreate

Looking for professional help to build or enhance your Wix website? WIXCreate specializes in designing and developing stunning, high-performing websites tailored to your unique business needs. Whether you’re starting from scratch or need a redesign, WIXCreate offers expert services to bring your vision to life. With a focus on client satisfaction and a deep understanding of the Wix platform, WIXCreate ensures your website not only looks great but also delivers results.