Learn how to update repeater items with Wix code. Use dynamic item and category pages, datasets and all Velo features. It is a powerful tool to code your Wix website. Now, apply this tutorial to your website to unlock that excellent power.
What Is Wix Repeater and Why Is It Used?
The Wix repeater item is a built-in item in Wix that is only accessible when the Velo development environment is activated. It allows users to populate hundreds of contents on a regular page within the pre-made template and is mostly used with dynamic item pages and dynamic category pages. Below, there is a sample from our resouces library that shows you what a repeater looks like.
Content that generates these repeater item fields is retrieved from a data collection. Data collection can store data in various types such as images, videos, texts, booleans, etc.
What Is a Dynamic Category Page in Wix?
Dynamic category pages are used with repeaters for more structured URLs and improved SEO.
When you try to create a dynamic category page, you have to add a path first likewise you see at the left side photo. "resources" is the prefix for resources collection. Of course, you are eligible to name this field as whatever you want.
What Is Dynamic Item Page In Wix?
The dynamic item page receives one of the contents that is added to the data collection and showcases it in a template.
In addition to the URL prefix, once you create a dynamic item page, you will set an actual URL. In this case, it is "howto-contribute-resources-library".
How to Update Wix Repeater Items with Velo by Wix
In default or for a beginner, it is very simple to update a repeater item by opening the data collection tab. But for an advanced user or for a user that has hundreds of contents, updating a field from the data collection tab may become a real deal. To make this process as easy as possible, we have to use Wix Velo and its features.
Normally, Wix repeater data is populated automatically by the dataset's data. But in this, we examine changing the data by code.
When populating a repeater using code, a common issue that people experience is that when they update the repeater's data, what's displayed in the repeater is not updated automatically. To understand why this happens, you need to first understand how a repeater's elements get populated when you set its data with code.
You set a repeater's data using the data property.
$w('#myRepeater').data = someDataArray;If that is all you do, the repeater does not know how you want to apply that data to the repeater's elements. That's why, you need to define an onItemReady event handler before setting the data, . For example, you might do something like this:
$w("#myRepeater").onItemReady( ($item, itemData, index) =>{
$item("#repeatedImage").src = itemData.pic;
$item("#repeatedText").text = itemData.words;
});What happens when you later reset the data property?
$w('#myRepeater').data = someOtherDataArray;Well, it depends. If the new data contains new IDs, the onItemReady handler will run again and everything will work as expected. However, if you've just changed some of the data, but the IDs stay the same, nothing will happen. That's because the repeater only checks IDs when data is set. If an item's ID already exists in the repeater data, it is not considered a new item, and therefore the onItemReady handler does not run.
So what do you do to update the repeater's elements with the new data? That's where the forEachItem comes in. You can run a function on each repeater item to populate it with the new data. So, using the same example as above, if you've updated the pictures in your data, you would code something like this:
$w("#myRepeater").forEachItem( ($item, itemData, index) => {
$item("#repeatedImage").src = itemData.pic;
});Last half of this article was taken from a post in Wix Velo Forum.
Wix Velo Services
Bizim Muhit offers a variety of Wix services. Velo coding is one of them. If there is a case you can't handle, just let us know. Hire a Wix website professional.