Modify repeater items using Wix Code

good morning good evening good day buenas Dias hello this is Andres Phoebe from week show and this is two days weeks code today in this episode we are going to talk about and try out to work with the repeater items so a very focused tutorial on how to manage handle and modify at the repeater items through code so as you might have seen I am doing some redesign and re in the Wix show.com site and we are relaunching the blog we are relaunching a
whole lot of the other stuff the upcoming weeks here during the Christmas and New Year’s Eve first of all I would like to send my thank you to all the week’s code forum users that have given me more than a thousand likes and more than 107 top comments it’s very nice of you very very very nice so as you might also have seen if you have got any newsletter from me this is me in the corner I am in great need of making some financial result on the
site your in the next year so please click on buy me coffee in the site or the sponsor me many tab and please sign up for a subscription and week showed to be a tiny sponsor small one normal or gold I would really be happy if you would be a tiny sponsor or a small sponsor for that matter we have also read launched the get help section today and you can get a price quote directly on that page and you can also join in on different services like
performance optimization and stuff like that we also launched the weekly weeks code for a 12 seat seating every Friday and you can ask questions and we will answer questions for these weeks with code today tutorials so please go to today and videos on week show.com or go to VIX code dot today and you’ll end up on this page automatically so let us move back into our demo site where we feel great so an empty page and with a headline working with
repeaters so first of all we are going to drag out the data set to our page like this here and in this tutorial we are going to use the products from the week stores shop we are going to show 20 of the products and then we go to add and we are going to lists and grids and let’s try the first one here just drag it out click the connect to data icon choose the data set you have here on the store on the page and then go in and click connect data to
the different elements that you want to connect into to the repeater this is something that you are probably used to do because this is one of the most powerful things with weeks and weeks code to use the the repeaters it’s very whoops it’s a very amazingly nice thing I think to use so we are going to change this button to add to cart’ I’m not too going to tell you any more about that at the moment we are going to delete the date and we are going
to move things up a bit and like this like that we’re going to keep the space in between let’s hit save and do a quick preview of the page so we just see that it works as we want so we can see the demo product and you can see the currency symbol will be in Swedish because I am from Sweden and so you will see that here so let’s go into the code now and how are we going to okay we take some user questions from the forum so how can I change this
button depending on the price is that possible okay so let’s go into the code now and I have the D comment some code here and we are going to jump into wish studio not official studio which is doing a code to make you see the text better and we are going to increase this a lot so you will see it better so when I work with repeaters I always create a function that will loop through the items that we have and then I can do the modifications inside
so let’s just go like this create a new file we should pseudocode and that’s not very fast so let’s do like this export function make repeater and we are going to have that function and inside that we are going to take the dataset that we have on the page if you don’t know the ID of the data set you will click the data set on your page you will see here in the properties panel ID data set 1 so when you are working the code you know that it’s data
set 1 that you will need for this and the repeater ID which we are going to have here is repeater 1 so not the data set but the repeater so repeater for each item we are going to move those in a bit so it looks a little bit better and so if you have been working with week’s code earlier or if you have copied a code that is not working you might have seen here on line 9 just after the for each item and the double parenthesis you can see that in my
code it says dollar I them string and in older code samples and the first version of week’s code this was dollar W as in everywhere else in weeks so now it’s dollar item so if you for some reason copy some code from a former older video that I did or someone else and there’s a dollar W there it will affect all the items in your repeater if you add a button or modify a button it will modify all the buttons because it has a dollar W so make sure
that you use the dollar item instead okay so when we are looping through a repeater using the for each item this for each item that will get it will make us loop through every item that has been inserted using the data property in the repeater and for every item we loop through the items value and themes are in item data so if we are going to check the price we can always do if item data and we need to know the price field in our products table
which is let’s see it’s this one price and I think that’s whoops that’s a number field yes price is a number field so if price are lower than 30 we are going to do something and what are we going to do we are going to change the label on this button so this button is called button 11 and I and rename it to add to cart’ so we will use the the item and then we will get the add to cart’ and we will set the enable to cheap product like that and we
will delete those so when the repeater is ready and on the page we want to make sure that we run the make repeater function so we know that the when the data set is ready it will populate the repeater so we can go into the data set and say already and then oops and then we can use that function to hit our code here let’s try that make repeater and let’s preview the page now you can see here that the price here is 20 and it says cheap product
here’s the price 13 it says Add to Cart and we are walking through here you can see 28 20 it’s a lot of cheap products here so a lot of cheap products so let us say think about another thing here so let’s make that 20 and let’s preview that again so we get a little bit yeah then she product 28 at the cart when it’s gone okay so let’s say that you have you have a description text here that is called text 23 here we will rename that to the
description and let’s say that this text is super huge in your database and you just want to display a smaller part of that text so what we can do here is that we are let me make sure you can see that the same thing here we check the item the item data and what is the product description field it’s called description and it’s a rich text format so let’s make sure that if description length is more than 50 so if the description has more than 50
characters inside we will need to make that smaller okay so how do we do that well we can just grab this description so we do as we did beneath here so we grab the description and the text property on that will be set so we we need to get the description and we will do a substring on that and we will make that from the first position and the length of description length – no sorry sorry sorry sorry we will do from 0 to 15 and then we will add the
dots so this is a we will see what happens now because this as you can see here it says on my private description I’m a great place – and then it cuts the text so if we are going to increase this to a hundred and to a hundred here and we will see it will cut the description at the hundred so you can see it cuts it here instead so this way you can modify a lot of things within the repeater I suggest you do a function like I do here because
sometimes you want to reload or you know put new data into the repeater and you end up doing all kinds of functions like this in all kinds of places in in the page so make sure you make one function that populates formats you know do whatever you need to do so another user question here that we are going to check now is that we are going to go to this and we are going to copy this code here and we are going to show you let’s see here so let’s do
like this and then we will do oops like this and we will have the add add to cart’ and we win console.log clicked this code will hopefully add an on click event for each and every button inside the repeater and it will console.log clicked every time we click a button so when I click here it says click here and click then click thing like so but how do I know that this is unique I want the clicked button to be unique for every repeated item so you
clicked and then I take the item data and the name which is the product and then I’m going to hit save and preview and now hopefully I will click here and you say you clicked I’m a product so everyone is cold I’m a product so that’s a it’s a stupid thing you click wait wait costs and we are going to use a item data formatted price I think that’s called formatted price and we stores we would see so I click this one and it says you clicked I’m a
product which cost 20 and we go and click something here for 28 or cam or 20 or 23 so you can see here that we can use the click event but some sometimes or if you are a beginner it’s very easy that you do like you do in weeks you click this button here and you go here and you click on click and you add an event that event handler will be used for all your butters on inside the repeater so anytime you want to click event or something to happen
per item you will need to add that code or logic or whatever it is within the for each item or D on item ready and the on item read is triggered when you set data to the data property so that’s why I’m using the for each item in my make repeater function because I don’t have to start by setting the data to the repeater it will use the data already inside the repeater so another user asked how to you know to make the click event add something or
add a number so if let’s say let’s say we add a variable for every digit so we are going to that counter or click click counter that will be 0 and if someone clicks the button the click counter will be increased by one click counter plus plus that will increase this value by one and you click blah blah which costs you click this button click counter to string because that’s a number all the times so if we preview this now and see we click the add
here and you can see that I clicked the one with the 20 Kroners you click this button zero times because the click counter will started on zero and now you can see it’s 1 it’s 2 unless as long as I click here it will increase the value but what happens when I click on this one so now you can see you click this button zero times and you clicked it six times and then the other one was clicked 15 times so let’s click that once more and you can see
it’s clicked 16 times so even if you define a variable with the same name like this click counter it will be uniquely created and usable for each item in the repeater it’s beautiful I know so it’s super super super super great so that was about it today and I hope that you have learned a bit how to modify and work with the items within a repeater and if you have any requests on the week’s code today tutorials please go to Wix code dot today or
the week show calm and go to that today videos and then on that page you can have fill in a form and ask me to do special tutorials that you think would suit this series so see you tomorrow and hope you are happy coding now thank you