Allow customization in map key/search bar list for background colors for different categories

It would be nice to be able to customize the background colors for the locations listed when searching based on categories. That way when everything is listed together it is easier to differentiate between the categories.

1 Like

Hi there @Kyla_Villa :wave:

Could you please send me a link to the page where your widget is installed or just specify the widget ID?

I’ll be happy to check if there is a custom solution :slightly_smiling_face:

Hey, thanks Max! This is the widget https://dcd79adeba364834ae4b5eb3915f1121.elf.site

1 Like

Thanks!

Your request is with our devs now. I’ll get back to you tomorrow :wink:

Hey there @Kyla_Villa :wave:

Our devs came up with a custom solution for you:

<script>
const WIDGET_ID = 'dcd79ade-ba36-4834-ae4b-5eb3915f1121';
const UPCOMING_NAME = 'Upcoming Event';
const UPCOMING_COLOR = 'red';
const PAST_NAME = 'Past Event';
const PAST_COLOR = 'green';

const widgetClass = '.elfsight-app-' + WIDGET_ID;
const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;
  
    const check = () => {
      const component = root.querySelector(selector);
  
      if (component) {
        res(component);
      } else if (i !== 50) {
        setTimeout(check, 100);
        i++;
      }
    };
  
    check();
  });
  

  function applyColorToElements() {
    const elements = document.querySelectorAll(`${widgetClass} .eapps-google-maps-bar-list-item`);
    elements.forEach((element) => {
        if (element.textContent.includes(UPCOMING_NAME)) {
            element.style.backgroundColor = UPCOMING_COLOR;
        } else if (element.textContent.includes(PAST_NAME)) {
            element.style.backgroundColor = PAST_COLOR;
        }
    });
  }

  const config = { childList: true };
  
  const callback = () => {
    applyColorToElements();
  };
  
  const observer = new MutationObserver(callback);
  

  waitForElement(`${widgetClass} .eapps-google-maps-bar-list`)
  .then(() => {
    const targetNode = document.querySelector(`${widgetClass} .eapps-google-maps-bar-list`);
    applyColorToElements();
    observer.observe(targetNode, config);
  });
</script>

This script should be added right after your widget’s installation code.

UPCOMING_NAME, PAST_NAME - are names of the categories

UPCOMING_COLOR, PAST_COLOR - are the colors of the categories. You can choose any colors to your liking.

If you’d like to apply this code to another widget, change the name of the categories to the relevant ones and replace WIDGET_ID with the ID of the new widget.

Check it out and let me know if it helped :slightly_smiling_face: