Hi everyone, i’ve been trying to find the solution to this for hours but given up, I really hope someone can help.
I have a repeater on a clients homepage which I need to display the “Registration status” of Wix events. The problem is because it’s Wix Events the “Registration status” text field is “OPEN_TICKETS”, “CLOSED” or “CLOSED_MANUALLY”.
I need the text to be able to change to these to “BOOKINGS OPEN” or “BOOKINGS CLOSED”
I thought it would be simple to find some code to modify as I am not good at writing code from scratch but I have been getting by using found code and editing to suit my needs.
I am sure it could be done by pulling the text in from the collection and coding a if text is “OPEN_TICKETS” then change to “BOOKINGS OPEN”. I just have no clue how to do it…
Hello! You can do this by using wixData to query the collection and then make your adjustments to populate the repeater. Here is an example of what I mean to get you started:
import wixData from 'wix-data';
$w.onReady(function() {
wixData.query("Events/Events")
.find()
.then((results) => {
if (results.totalCount > 0) {
$w("#repeater4").data = results.items;
}
})
.catch((error) => {
console.log("Error:", error.message);
});
//here you are applying the returned data from above to the repeater elements
$w("#repeater4").onItemReady(($item, itemData, index) => {
//use a switch statement to manage your cases and adj the text
switch(itemData.status) {
case 'OPEN_TICKETS':
itemData.status = 'Open'
break;
case 'Other Status':
itemData.status = 'Other'
break;
default:
itemData.status = 'default status'
}
//here you are manually pointing the repeater elements to each value you want
$item("#status").text = itemData.status;
$item("#eventTitle").text = itemData.title;
});
});
Amanda, you are an absolute star, I can’t thank you enough. After modifying the code to suite it has worked perfectly.
It has however created a small problem, this particular repeater is limited to 6 events in the dataset settings and also sorted from old to new via start date of event.
Since inputting the code it now seems to override those settings and show all the events in the repeater and its also ignoring the sort setting.
Is there a way for this to honour the dataset settings?
Ok, thank you I think I have managed to do that. Just one more thing that has just cropped up. The dataset has a filter set to “is Scheduled” so it does not display past events. Can you point me in the right direction to add that into the code please?
import wixData from 'wix-data';
$w.onReady(function() {
wixData.query("Events/Events")
.ascending("start")
.limit(8)
.find()
.then((results) => {
if (results.totalCount > 0) {
$w("#upcomingrepeater").data = results.items;
}
})
.catch((error) => {
console.log("Error:", error.message);
});
//here you are applying the returned data from above to the repeater elements
$w("#upcomingrepeater").onItemReady(($item, itemData, index) => {
//use a switch statement to manage your cases and adj the text
switch(itemData.registrationStatus) {
case 'OPEN_TICKETS':
itemData.registrationStatus = 'BOOKINGS OPEN'
break;
case 'CLOSED_MANUALLY':
itemData.registrationStatus = 'BOOKINGS CLOSED'
break;
case 'CLOSED':
itemData.registrationStatus = 'BOOKINGS CLOSED'
break;
case 'OPEN_EXTERNAL':
itemData.registrationStatus = ''
break;
default:
itemData.registrationStatus = 'default status'
}
//here you are manually pointing the repeater elements to each value you want
$item("#bookingstatustext").text = itemData.registrationStatus;
});
});
Amanda, thank you I added .eq(“scheduled”) and it has worked perfectly. You have absolutly made my day. I’ve spend hours trying to figure this out thinking it would only be a few lines of code and I got nowhere.
I honestly can’t thank you enough.
Is it possible to change the colour of just the BOOKINGS CLOSED text in this code or does that need to be seperate? Sorry to keep asking for more…
No problem at all! You have to know the API’s exist to know what to search for. Hopefully it will be easier in the future.
As far as setting the color, this should work. Adjust as needed…
//after you set the item text place this code
if (itemData.status === 'SOME_CONDITION'){
let value = $item("#status").text;
$item("#status").html = "<p style='color: #FF0000;'>" + value + "</p>";
}
Yes so…the downside of starting to take control over things is that you now have to do it all yourself. Look up the different css properties you need and then you will be able to add them where I added the color style. Might take a little massaging, but you are almost there
So I tried to customise a second if statement but it will only honour the first one. I am sure this will be a simple fix for someone who knows what they are doing.
//here you are applying the returned data from above to the repeater elements
$w ( “#upcomingrepeater” ). onItemReady (( $item , itemData , index ) => {
//use a switch statement to manage your cases and adj the text switch ( itemData.registrationStatus ) { case ‘OPEN_TICKETS’ :
itemData.registrationStatus = ‘BOOKINGS OPEN’ break ; case ‘CLOSED_MANUALLY’ :
itemData.registrationStatus = ‘BOOKINGS CLOSED’ break ; case ‘CLOSED’ :
itemData.registrationStatus = ‘RALLY FULL’ break ; case ‘OPEN_EXTERNAL’ :
itemData.registrationStatus = ‘BOOK EXTERNALLY’ break ; default :
itemData.registrationStatus = ‘default status’
}
if ( itemData.registrationStatus === ‘RALLY FULL’ ){ let value = $item ( “#bookingstatustext” ). text ;
$item ( “#bookingstatustext” ). html = “
” + value + “
” ;
if ( itemData.registrationStatus === ‘BOOKINGS CLOSED’ ){ let value = $item ( “#bookingstatustext” ). text ;
$item ( “#bookingstatustext” ). html = “
” + value + “
” ;
}
}
//here you are manually pointing the repeater elements to each value you want
$item ( “#bookingstatustext” ). text = itemData.registrationStatus ;
Hello. To have different code running on mobile/desktop you will have to reconfigure your if statements that style the text a little and make conditions for mobile. Take a look at this article first and see if you can get the hang of it and let us know if you need some help!
Amanda, I have a quick question regarding this code, which has been working perfectly.
I now need to also add an option to have the text on the repeater and the ribbon on wix events show “NEARLY FULL” when there are only 5 tickets remaining.
Hi Richard! I am off this week, but didn’t want to leave you completely hanging. Can you start a new post with your question and what code you have attempted thus far, if any. That way, otehrs from the community are more likely to see it and help. You can also provide a link to this post for context.