Connect multiple collections in a single repeater

Ask the community
,
1

Question:
Hi, I would like to connect multiple collections in a single repeater. Can I do that? I can’t find out how to do it. Thank you!

Product:
Wix Studio Editor

What are you trying to achieve:
In a “news page”, I want to add a repeater displaying my News collection, AND my projects collections.

2

Connect both collections using a reference field. That will work.

3

Thank you for answering! How can I do that?

4

Go to your main collection, Add a Field, select field type as reference. It will show a pop up, in it select the other collection you want to link.

Watch this tutorial before doing it to make sure it is the same result -

5

I don’t think it answer my problem.

As in the image linked, I have a repeater with boxes showing items of my News collection, and in the red boxes I drew, I want to show also items of my Projects collection. The informations are independent of each other.

Capture d’écran 2024-09-11 à 13.57.59
Capture d’écran 2024-09-11 à 13.57.591254×813 136 KB

6

Ah… Yeah, that’s hard to do. In this case, You need to build a Query that combines both collections. The field IDs should be the same for both collections.

Here is the code for that. If you are using the presets of Wix, this should work close enough. Replace the Element IDs though.

$w.onReady(function () {
    let projectItems = [];
    let newsItems = [];

    $w("#dataset1").onReady(() => {
        $w("#dataset1").getItems(0, 100)
            .then((projectResult) => {
                projectItems = projectResult.items;

                $w("#dataset2").onReady(() => {
                    $w("#dataset2").getItems(0, 100)
                        .then((newsResult) => {
                            newsItems = newsResult.items;
                            
                            let combinedItems = combineItemsInPattern(projectItems, newsItems);
                            
                            $w("#repeater1").data = combinedItems;
                        })
                        .catch((err) => {
                            console.error("Error fetching news items: ", err);
                        });
                });
            })
            .catch((err) => {
                console.error("Error fetching project items: ", err);
            });
    });

    $w("#repeater1").onItemReady(($item, itemData, index) => {
        $item("#image1").src = itemData.image; 

        $item("#text1").text = itemData.title;

        $item("#button1").label = "Learn More";
        $item("#button1").link = itemData["link"]; 
    });
});

function combineItemsInPattern(projectItems, newsItems) {
    let combined = [];
    let projectIndex = 0;
    let newsIndex = 0;

    while (projectIndex < projectItems.length || newsIndex < newsItems.length) {
        // Add 5 project items
        for (let i = 0; i < 5 && projectIndex < projectItems.length; i++) {
            combined.push(projectItems[projectIndex]);
            projectIndex++;
        }

        for (let i = 0; i < 2 && newsIndex < newsItems.length; i++) {
            combined.push(newsItems[newsIndex]);
            newsIndex++;
        }
    }

    return combined;
}
7

You can also try using Tabs or Multi State Box to use 2 repeaters in each box/tab

9

Thank you, that’s what I am going to do. It’s not ideal but kind of a workaround :slight_smile:

10

Thanks so much, but I am a designer not a developer, I don’t want to mess with code…