How to change container color based on tag

Ask the community
,
1

Hello!

I’m trying to learn how to construct the code required to change the background colour on a container within a repeater depending on the tag that has been assigned to it.

I am currently connecting the repeater using the standard wix connector so not sure if I will need to build the repeater completely using code to make this work.

I understand that I need to create variable so for example, if the tag = “headline” the background colour = “pink” and then apply it to the container element but i’m not sure how to phrase it.

Can someone help please?

Thank you!

2

Yes you will have to CODE all of it. I don’t think you will be able to do that without any code.

In this example you will see how to do it with → onMouseOver-event
https://russian-dima.wixsite.com/meinewebsite/repeater-video

import wixData from 'wix-data';

$w.onReady(function () {
    wixData.query("Corvid-Video-Tutorials").find()
    .then((res)=>{
        $w('#myRepeater').data=res.items
    })
 
    $w("#myRepeater").onItemReady( ($item, itemData, index) => {
        $item("#TITLE").text = itemData.title;

        $item("#CONTAINER").onMouseIn ((event) => {
            $item("#TITLE").show('float')
            $item('#BOX').style.backgroundColor = "rgb(155,155,155)";
        });

        $item("#CONTAINER").onMouseOut ((event) => {
            $item("#TITLE").hide('float')
            $item('#BOX').style.backgroundColor = "rgb(255,255,255)";
        });
    });
});

You will have to change the code by your own needs, but you already have some basic code :wink:

3

Thanks for getting back to me but I think I explained what i want to do badly.

I have a collection that is for concerts, each concert has been tagged with a specific type, I want to assign a colour to each of the tags without having to manually type in the colour option. Does that make sense?

4

@emilycarabutler
Can you give me a screenshot, so i can imagine better what you have in front of your eyes? Yes i can imagine the Concerts-DB and probably you will have a “tags-collection-field” in your DB, right? Where do you have your colors stored?

You better should just show your DATABASE (screenshot), that would do my thinking much easier.

5

@russian-dima Hi, I haven’t got the database fully set up yet as I’m trying to work out how to achieve what I am trying to do/there are a lot more elements to it including reference fields etc that I haven’t sorted yet. But I will have a tag field to specify genre of concert.

Do I need to create another DB with the colours stored and attached to the tags or can I put it in as a piece of code on the specific page that I need it.

I thought it might be something like

if item.genre = [Jazz] {
then.
$item ( ‘#BOX’ ). style . backgroundColor = “#00000” ;

and then repeat that for the different genres…

Would that work?

6

@emilycarabutler
You can do both ways. The hard-coded one (which will not be so flexible) or use a database for colors (which would be more comfortable on my opinion).

Yes this could work, but you will have to modify/correct the code.

if item.genre = [Jazz] {
then. 
$item('#BOX').style.backgroundColor = "#00000";

Perhaps this can help you too…
https://www.media-junkie.com/one-way-selection-tags

7

You can do it without any code.
Check my website → go to catagories
just added some fast data to 2 databases.
https://volkaertskristof.wixsite.com/helpcenter

Kind regards,
Kristof

8

Thanks for the reply, I’m confused as to how you achieved that. Please can you explain some more? Thank you.

9

@emilycarabutler
Go check again, i added some information under it.

10

@volkaertskristof Thank you. I think that will help. :slight_smile:

11

@emilycarabutler
No problem,
Let me know if you need more help with it.

Btw, the collours are images made with paint :stuck_out_tongue: