Display the message if the filter returns no events

Ask the Community Customization
1

I’ll like to display a message if the filter returns no events. Is it possible?

1 Like
3

Happy to see you’ve decided to join our ranks @Julio_Pamias :wave:

Let me discuss this case with the dev team. I’ll immediately get back to you once I receive a response from them :wink:

2 Likes
4

Here is the code you need to add to the Custom JS field on the Settings tab of your widget’s settings:

const CUSTOM_MESSAGE = "No se ha encontrado nada para los filtros seleccionados.";
const customMessageElement = document.createElement('p');
customMessageElement.style.display = 'none';
customMessageElement.textContent = CUSTOM_MESSAGE;

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: (node) => !!node
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: (node) => node?.length > 0
  }
};

function listenStep(args) {
  args.node = args.select(args.selector, args.root);
  if (!args.validate(args.node)) {
    args.step++;
    if (args.step < args.limit)
      setTimeout(() => {
        listenStep(args);
      }, args.delay);
    else
      args.reject();
  } else {
    args.resolve(args.node);
  }
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    node: undefined,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    select: LISTEN_TYPES[type].select,
    validate: LISTEN_TYPES[type].validate,
    ...customArgs
  };
  if (type === 'one' || type === 'all') {
    return new Promise((resolve, reject) => {
      listenStep({
        ...args,
        resolve,
        reject
      });
    });
  }
}

asyncListenFor(".eapp-events-calendar-grid-group .eapp-events-calendar-grid-component").then((container) => {
  container.appendChild(customMessageElement);

  const observer = new MutationObserver(mutationsList => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        if (container.children.length < 2) {
          container.style.marginBottom = '0';
          customMessageElement.style.display = 'block';
        } else {
          if (!customMessageElement) return;
          container.style.marginBottom = '-30px';
          customMessageElement.style.display = 'none';
        }
      }
    }
  });

  const config = {
    childList: true,
    subtree: true
  };
  
  observer.observe(container, config);
});

Note: Custom JS operates only upon widget installation, not in preview mode.

Do not forget to replace “No se ha encontrado nada para los filtros seleccionados.” in the first line of the code with your own message.

Test it out and let me know if it worked for you :wink:

1 Like
5

Awesome, it works. However, it doesn’t work by making a filter selected by default.

So close…

Thanks a lot.

1 Like
6

Could you please send me a direct link to the page where your widget is installed?

I’ll gladly investigate it for you :slightly_smiling_face:

1 Like
7

https://didaxis-web-site.webflow.io/juntas-examinadoras/peritos

1 Like
8

Thank you!

I’ve shared your case with the devs. I’ll get back to you once the solution is provided :slightly_smiling_face:

9

Hello @Julio_Pamias :wave:

We’ve adjusted the code in the Custom JS section and now everything should be working fine:

const CUSTOM_MESSAGE = "No hay convocatorias abiertas";
const customMessageElement = document.createElement('p');
customMessageElement.style.display = 'none';
customMessageElement.textContent = CUSTOM_MESSAGE;

const LISTEN_TYPES = {
  one: {
    select: (selector, root) => root.querySelector(selector),
    validate: (node) => !!node
  },
  all: {
    select: (selector, root) => root.querySelectorAll(selector),
    validate: (node) => node?.length > 0
  }
};

function listenStep(args) {
  args.node = args.select(args.selector, args.root);
  if (!args.validate(args.node)) {
    args.step++;
    if (args.step < args.limit)
      setTimeout(() => {
        listenStep(args);
      }, args.delay);
    else
      args.reject();
  } else {
    args.resolve(args.node);
  }
}
async function asyncListenFor(selector, type = 'one', customArgs = {}) {
  const args = {
    root: document,
    node: undefined,
    selector,
    delay: 100,
    limit: 50,
    step: 0,
    select: LISTEN_TYPES[type].select,
    validate: LISTEN_TYPES[type].validate,
    ...customArgs
  };
  if (type === 'one' || type === 'all') {
    return new Promise((resolve, reject) => {
      listenStep({
        ...args,
        resolve,
        reject
      });
    });
  }
}

asyncListenFor(".eapp-events-calendar-grid-group .eapp-events-calendar-grid-component").then((container) => {
  container.appendChild(customMessageElement);
  if (container.childNodes.length < 2) {
    container.style.marginBottom = '0';
    customMessageElement.style.display = 'block';
  }
  
  const observer = new MutationObserver(mutationsList => {
    for (const mutation of mutationsList) {
      if (mutation.type === 'childList') {
        if (container.children.length < 2) {
          container.style.marginBottom = '0';
          customMessageElement.style.display = 'block';
        } else {
          if (!customMessageElement) return;
          container.style.marginBottom = '-30px';
          customMessageElement.style.display = 'none';
        }
      }
    }
  });

  const config = {
    childList: true,
    subtree: true
  };
  
  observer.observe(container, config);
});

Could you please check your website and let me know if the message is displayed for the pre-selected filter now?