Not all filter options show up in the widget

[Kj_Bradshaw]

How do I get this to work on my widget ? There seems to be a maximum of 6 options that appear on the filter even though there is more. Just not sure if there is a setting I’ve missed to allow all options to be available in the filter.

UPDATE - It seems to work on a mobile, not on desktop

[Max]

Hi there and welcome to the Community, @Kj_Bradshaw

You’re talking about the Comedy Crates Event widget, right? If so, only 6 options appear right away and the other ones will be displayed on the Show More button click.

The color of the Show More button depends on the color of the Active Filter. Since you’ve set black color for the Active filters, the Show More button is invisible:

If you change the color of Active Filters, the button will show up:

In case you wish to keep the active filters black and set a different color for the Show More button, this CSS will do the trick:

.global-styles,
.es-more-less-button-button {
  color: white;
}

If you’d like to show all filter options without the Show More button, please:

1. Add this code to the Custom CSS field on the Style tab of your widget’s settings:

.global-styles,
.es-more-less-button-button {
  display: none;
}

2. Paste this script to the Custom JS field on the Settings tab of your widget’s settings:

a) For Inline Filter style:

(function () {
    const WIDGET_ID = 'YOUR_WIDGET_ID';

    const clickShowMoreButton = (filtersContainer) => {
        const showMoreButtons = filtersContainer.querySelectorAll(
            '.es-more-less-button-button'
        );

        showMoreButtons.forEach((button) => {
            if (button.textContent === 'Показать больше') {
                button.click();
            }
        });
    };

    const addFiltersHandler = () => {
        const filtersContainer = document.body.querySelector(
            `.elfsight-app-${WIDGET_ID} .eapp-events-calendar-controls-component`
        );

        if (!filtersContainer) {
            requestAnimationFrame(addFiltersHandler);
            return;
        }

        const inlineFiltersObserver = new MutationObserver(() => {
            clickShowMoreButton(filtersContainer);
        });

        inlineFiltersObserver.observe(filtersContainer, {
            childList: true,
            subtree: true,
        });

        const popupFiltersObserver = new MutationObserver((mutations) => {
            for (const mutation of mutations) {
                for (const node of mutation.addedNodes) {
                    if (
                        node.nodeType !== Node.ELEMENT_NODE ||
                        !node.matches?.('[class*="Popup__PopupWrapper-sc"]')
                    ) {
                        continue;
                    }

                    clickShowMoreButton(node);
                }
            }
        });

        popupFiltersObserver.observe(document.body, {
            childList: true,
        });
    };

    addFiltersHandler();
})(
);

Do not forget to replace YOUR_WIDGET_ID in the 2nd line of the code with the ID of your widget

b) And here is a Custom JS script if you decide to switch to the Popup filter style:

(function() {
  const popupObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      for (const node of mutation.addedNodes) {
        if (
          node.nodeType !== Node.ELEMENT_NODE ||
          !node.matches?.('[class*="Popup__PopupWrapper-sc"]')
        ) {
          return;
        }

        const showMoreButtons = node.querySelectorAll(
          '.es-more-less-button-button'
        );

        showMoreButtons.forEach((button) => {
          button.click();
        });
      }
    }
  });

  popupObserver.observe(document.body, {
    childList: true,
  });
})();

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link

Please check it out and let me know if it worked for you

[Kj_Bradshaw]

Hi Max,

That worked! Thank you, I thought it might be something simple I was missing.

Many thanks

[Max]

Great, you’re always welcome