Is there a way to display separate team showcase categories on webpages?

Ask the Community General Questions
1

I’d like to display only one category of team members on individual WordPress pages. Is this possible?

1 Like
3

Hi there, @user16663 :wave:

Yes, it’s possible! Could you please specify which category are you going to use for each specific page and send links to these pages?

4

Thanks!

DJ/MCs
Photographers
Videographers
Photo Booth Add-Ons

Its only allowing me to add two links since I’m a new user?

5

Photo Booth Rental for Weddings and Events at PortaPixie (I still need to build this page)

1 Like
6

Thank you @user16663!

I’ve passed it on to the dev team. I’ll report back once done!

Please let us know when the widget is installed to the last page (Photo Booth) and we’ll be happy to apply this feature there too :slightly_smiling_face:

7

Our devs have customized your widget. We’ve added this code to the Custom JS section on the Settings tab to show specific groups on the right pages:

document.querySelector('.elfsight-app-55a27b39-74e7-4e9c-a516-9e59fc7d8aac').style.display = 'none';

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();
  });

waitForElement(".eapp-team-showcase-tabs-tabsCategory").then(() => {
  const tabs = document.querySelectorAll(".eapp-team-showcase-tabs-tabsCategory");
  const urlPath = window.location.pathname;
  const elems = urlPath.split('/').filter((el) => el);

  let tabName = '';
  switch (elems[elems.length - 1]) {
    case 'dj-mc':
      tabName = 'DJ/MCs';
      break;
    case 'photographers':
      tabName = 'Photographers';
      break;
    case 'videographers':
      tabName = 'Videographers';
      break;
  }
  for (let i = 0; i < tabs.length; ++i) {
    if (tabs[i].textContent.toLowerCase() === tabName.toLowerCase()) {
      tabs[i].click();
      break;
    }
  }
  document.querySelector('.elfsight-app-55a27b39-74e7-4e9c-a516-9e59fc7d8aac').style.display = '';
});

And this code was added to the Custom CSS field on the Style tab to hide the tabs:

.eapp-team-showcase-tabs-tabs {
  display:none;
}

Check it out and let me know if you like the result :slightly_smiling_face:

9

This is great, thank you! The other pages are below. Is there still an option to show all categories on one page? I’m not sure if that code is gone now? Thank you. I would like to have all vendors on one page as well. https://www.portapixie.com/vendor-team/all/

1 Like
10

Okay! I’ll ask the devs and will get back once I have their response :wink:

11

Hi there, @user16663 :wave:

We’ve adjusted the code and now the needed categories will appear on the requested pages.

If you install the widget to another pages (except for the 5 requested ones), all categories will be displayed by default. So, you won’t have to do anything additionally when installing the widget to this page.

Check it out and let me know if you like the result :slightly_smiling_face:

12

That is great! Thanks for the awesome support.

2 Likes
13

Awesome! If anything else comes, we are always here to help :slightly_smiling_face:

By the way, we’d like to invite you to join our new challenge. This time, you should create a slogan for Elfsight to win a 6-month extension to your subscription.

Check the details and join in: October Challenge: Create Slogan for Elfsight and Win 6 Free Months! (+2 weeks guaranteed)

We’ll be super happy to see you as a participant :wink: