According to backgroundColor documentation, it cannot be applied to Shape objects
However, if as you say, it also didn’t work for Box elements, then there might be another problem
I don’t see any major flaws in the code that would prevent it from executing the intended functionality - so let’s rubber-duck it!
// after line 3
console.log(itemData, category)
For each item on the repeater, this should print an object containing its data, and whatever was saved within category, though those will probably show as “pro” and “free”, it never hurts to ensure that is the case
If indeed the data is correct, then it’s probably an error on Wix’s side.
A different approach could be to use the global styles and set up a CSS class for the pro shapes, then apply that class conditionally
global.css:
.proShape {
backgroundColor: 'red'
}
page code:
$item('#labelShape').customClassList.add('proShape')
And, minor note - There is no need for 2 if statements for multiple reasons:
- Since
category cannot be both “pro” and “free” at the same time, you do not need to check twice, use else or else if (if there’s more than 2 possibilities). As it currently stands, even if the category was “pro”, your code will still try comparing it with “free” afterwards
- HOWEVER - If you do only have two possibilities, then even the
else wouldn’t be necessary, as you could set up the default styling to be as one of the categories, and simply change it when the item is of the other one.
e.g. in the editor, set the shape color to #7118e1, then in code, alter it only if the category is “pro”
And, also negligeable, you do not really need to run all this within $w.onReady, you can remove the first and last lines of code
$w('#repeater1').onItemReady(($item, data) => {
if (data.mainCategory.toLowerCase().trim() === 'pro')
$item('#labelShape').customClassList.add('proShape')
})
