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?

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:

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:

5

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

So close…

Thanks a lot.

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:

7

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

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?

10

Hi,

After the las update this script is not working. Can you provide me an updated script?

Thanks.

11

Hi @Julio_Pamias :waving_hand:

I deeply apologize for this inconvenience!

I’ve forwarded this issue to the devs and will update you once it’s fixed :slightly_smiling_face:

12

Hi @Julio_Pamias :waving_hand:

The issue has just been fixed! Please check your widget and let me know if the script works fine now :slightly_smiling_face:

13

Hi,

Unfortunately is not working.

14

We’ve looked into this issue again and happy to say that it’s possible to set this custom message without a JS script.

We’ve just added your custom message to the Edit Texts section on the Settings tab:

image
image325×782 17.2 KB
image
image329×979 9.22 KB


Check it out and let me know if it’s fine now :slightly_smiling_face:

15

Hi, thanks a lot for the rapid response.

The issue still there and I think I know why. Use this page as an example: https://www.didaxispr.com/juntas-examinadoras/barberos

I embedded the widget to that page with a preselected filter: data-elfsight-app-filter-venue=“Barberos”. Right now is working because I turned on the option to show Number of Past Events to Display = ‘10’ so the filter knows that there was an event the last month. But as soon as I deactivate the option of Past Events, the filter venue removes the ‘Barberos‘ option from the filter menu so the widget doesn’t know what to do and shows all the events.

Maybe that can help you guys identify the real issue. It was working perfectly before the update.

Thanks a lot!

16

Thanks for sharing the details! Our devs will look into this, and I’ll get back to you once I have their response :slightly_smiling_face:

17

Hi there, @Julio_Pamias :waving_hand:

Apologies for the long wait!

I am coming with the great news - the issue has just been fixed. Please check your website and let me know if it’s been resolved on your end :slightly_smiling_face:

18

Awesome. It works beautifully.

Thanks a lot.

19

Perfect, you’re welcome :wink: