How to Create a Multi-Column Layout with Repeaters in Wix Using Code
When working with repeaters in Wix, you may find yourself needing more control over how the data is displayed, especially if you want to arrange content into multiple columns. While Wix repeaters are flexible, they don't natively support creating multi-column layouts. However, by using a combination of custom code and some creative workarounds, you can split data into multiple columns within repeaters.
In this post, we’ll walk through a step-by-step process to create a 4-column layout, where each column displays 40 items from a dataset. We’ll also handle data assignment dynamically with code.
Step 1: Set Up Your Repeaters in Wix
Before diving into code, make sure your Wix page is ready:
Add 4 Repeaters to your page in the Wix Editor. Name these repeaters:
﹟repeater1
﹟repeater2
﹟repeater3
﹟repeater4
Add Text Elements inside each repeater's container to display the dataset items. For this example:
The text element inside ﹟repeater1 is named ﹟text1.
The text element inside ﹟repeater2 is named ﹟text2.
The text element inside ﹟repeater3 is named ﹟text3.
The text element inside ﹟repeater4 is named ﹟text4.
Link Your Repeaters to the Dataset: In this example, we’ll use a dataset called ﹟dataset1 that contains member names, sorted alphabetically. However, do not set the dataset to automatically load data into the repeaters because we’ll handle that via code.
Step 2: Write the Code to Split Data Across Repeaters
Now that the repeaters are set up, it’s time to write the code that will split your data into four equal chunks (columns) and assign the data to the appropriate repeater.
Here’s the complete code to make that happen:
$w.onReady(() => {
// Ensure the dataset is fully loaded
$w("#dataset1").onReady(() => {
// Fetch all the items from the dataset
$w("#dataset1").getItems(0, 160) // Fetch the first 160 items from the dataset
.then(result => {
const allItems = result.items; // Get all the items from the result
// Check if data was retrieved properly
if (allItems.length > 0) {
// Split the data into 4 chunks, each with 40 items
const firstColumnItems = allItems.slice(0, 40);
const secondColumnItems = allItems.slice(40, 80);
const thirdColumnItems = allItems.slice(80, 120);
const fourthColumnItems = allItems.slice(120, 160);
// Log each set of items to the console to check the data
console.log("First Column Items: ", firstColumnItems);
console.log("Second Column Items: ", secondColumnItems);
console.log("Third Column Items: ", thirdColumnItems);
console.log("Fourth Column Items: ", fourthColumnItems);
// Assign the data to the 4 repeaters and bind to the correct text elements
$w("#repeater1").data = firstColumnItems; // First column
$w("#repeater2").data = secondColumnItems; // Second column
$w("#repeater3").data = thirdColumnItems; // Third column
$w("#repeater4").data = fourthColumnItems; // Fourth column
// Ensure each repeater text element gets its proper data
$w("#repeater1").onItemReady(($item, itemData) => {
$item("#text1").text = itemData.memberName;
});
$w("#repeater2").onItemReady(($item, itemData) => {
$item("#text2").text = itemData.memberName;
});
$w("#repeater3").onItemReady(($item, itemData) => {
$item("#text3").text = itemData.memberName;
});
$w("#repeater4").onItemReady(($item, itemData) => {
$item("#text4").text = itemData.memberName;
});
} else {
console.error("No items found in the dataset.");
}
})
.catch(error => {
console.error("Error fetching items from the dataset:", error);
});
});
});Step 3: Understanding the Code
Let’s break down what this code does:
Dataset Loading:
We wait for the dataset (#dataset1) to be ready using the onReady() method.
We then fetch the first 160 items from the dataset using the getItems(0, 160) method.
Data Splitting:
The result returned by getItems() contains an array of items. This array is split into four equal parts, each containing 40 items. The slice() method is used to divide the items into chunks.
Data Assignment:
Each chunk of 40 items is assigned to one of the four repeaters (﹟repeater1, ﹟repeater2, ﹟repeater3, ﹟repeater4).
We use the onItemReady() function to populate each repeater’s text element (﹟text1, ﹟text2, ﹟text3, ﹟text4) with the memberName field from the dataset.
Error Handling:
The code includes error handling that will log an error to the console if the dataset fails to load or if no items are found.
Step 4: Customize and Test
You can now adjust this setup based on your specific needs:
Change the Number of Columns: If you need more or fewer columns, you can add or remove repeaters and adjust the data splitting logic accordingly.
Change the Dataset: If your dataset contains more or fewer than 160 items, modify the getItems() call to fetch the appropriate number of items.
Add More Elements: You can add other elements inside the repeater container, such as images, buttons, or links, and bind them to additional dataset fields in a similar manner.
By following these steps, you can create a flexible multi-column layout using repeaters in Wix. Although Wix doesn’t have a built-in grid layout for repeaters, this method allows you to achieve a similar result using custom code. Once set up, the repeaters will dynamically load data from the dataset and display it in a structured, multi-column format.
Comments