Banner Showing Status

[Writside]

Hi guys,

I have A database: Vehicles
On it, I have a TXT entry that has “Available” and “Sold” as the items. I want to use this to show vehicles that are sold and those that are still available on a banner, like the site below;

The site I want to add this feature is https://www.boomagmotors.co.ke/

On the WIX Editor Currently, I have added a box on the repeater and added a txt file to it. The txt file is then connected to the database and connects to the TXT entry above.

If a vehicle is sold, I want the box color to change to light green #41dc8e
If a vehicle is available I want the box colour to change to red #FF7F7F
If there is no entry on the database, the box to change to grey #F2F2F2

I don’t know if this is the right direction with this issue, but if someone can help me with the code for this I will appreciate.

I found this code on the forum for something similar but not what I want:

---

// Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction

import wixData from “wix-data”;

wixData.get(“dataset1”, “Status”);

$w.onReady(function() {
$w(“#repeater2”).onItemReady(($item, itemData, index) => {
const textStatus = itemData.Status;
switch(textStatus) {
case “Available”:
$item(“#box3”).style.backgroundColor = “#41dc8e”;
break;
case “Sold”:
$item(“#box3”).style.backgroundColor = “#FF7F7F”;
break;
default:
$item(“#box3”).style.backgroundColor = “transparent”;
break;
}
});
});

---

I have no code know-how. I use examples and tweak them and this works most of the time, but In this case, I am not able to get anything.

[CMSblocks.com]

The provided code is on the right track!

Because you only need two boxes.
For more visual aspect two boxes can be a better solution for you.

Why Two Boxes?
This approach allows you to completely customize the design of each box. Unlike color changes, you can leverage Wix Editor’s full design capabilities:

$w.onReady(function () {
  $w("#repeater2").onItemReady(($item, itemData, index) => {
    const status = itemData.Status;

    if (status === "Available") {
      $item("#boxAvailable").show();
      $item("#boxSold").hide();
    } else if (status === "Sold") {
      $item("#boxAvailable").hide();
      $item("#boxSold").show();
    }
  });
});

Benefits of this Approach:

• Simple Implementation: This method is easier to set up and requires less code compared to using a CMS connection for colors.
• Design Flexibility: You have complete control over the design of each box, allowing you to create visually distinct elements for “Sold” and “Available” states.
• Positioning: You can choose how to position the boxes within your repeater item, allowing for creative layouts.

[Writside]

This seems promising. I am trying this now.

[CMSblocks.com]

I fixed the code of the previous answer you can use the Boolean (true/false) field for a better management instead of the status label.
import wixData from “wix-data”;

$w.onReady(function () {
$w(“#repeater2”).onItemReady(($item, itemData, index) => {
const isAvailable = itemData.isAvailable; // Use the Boolean field

if (isAvailable) {
  $item("#boxAvailable").show();
  $item("#boxSold").hide();
} else {
  $item("#boxAvailable").hide();
  $item("#boxSold").show();
}

});
});

[Writside]

Okay, thank you. I will try the above and get back to you

[Writside]

I am getting an invalid character error;

I also found this; CMS Request: Conditional Visibility for Elements Connected to Collection Fields | Help Center | Wix.com

[CMSblocks.com]

Change the question mark from ” to this "

import wixData from "wix-data";
$w("#repeater2")

[Writside]

It works now, but it only shows sold when I run it;

This is the data as is on the CMS table;

This is the code as it is now;

The available box and sold box overlap each other on the editor;

[CMSblocks.com]

const isAvailable = itemData.isAvailable; // Use your Boolean field id

change it to your id field ,i believe it status but i can only see the name

const isAvailable = itemData.status ; /

[Writside]

You are a lifesaver! I appreciate the help.

Final working code;

---

import wixData from “wix-data”;

$w.onReady(function () {
$w(“#repeater2”).onItemReady(($item, itemData, index) => {
const isAvailable = itemData.status1; // Use the Boolean field

if (isAvailable) {
$item(“#boxAvailable”).show();
$item(“#boxSold”).hide();

} else {
$item(“#boxAvailable”).hide();
$item(“#boxSold”).show();

}
});
});

[CMSblocks.com]

My pleasure! I’m happy to help