Portfolio categories with target ID

Ask the Community Customization
1

im using the portfolio widget with categories for my wordpress web, i want to create a selector ID in every category so i can browse the page in wich the portfolio is on but with the tab i want active. This so i can create a button or a direct link to the diferent categories i got. Is there a way to add HTML to the widget or an option no make the selection that i havent seen?

Link to the page with the widget in question: https://ivanz38.sg-host.com/portfolio-seijo

1 Like
3

Hi @Ivan_Zavala :wave:

I’ve relayed your request to our devs. I’ll let you know once any news come up :slightly_smiling_face:

4

Thanks!
an example could be when in wordpress inside elementor you use a “Tabs” section you can specify an id to navigate through the specific tab, the link look something like “www.mysite.com/pagename#tab-id” and it will open the pag with that specific tab active

5

Thank you for waiting!

We’ve added the code that assigns the specific ID to each tab. We’ve added this code to the Custom JS field on the Style tab of your widget’s settings:


const openTab = () => {
  const waitForElements = (selector) => new Promise(res => {
  let i = 0;

  const check = () => {
    const components = document.querySelectorAll(selector);

    if (components.length) {
      res(components);
    } else if (i !== 50) {
        setTimeout(check, 100);
        i++;
      }
    };

    check();
  });

  const hash = location.hash.split("#").pop();
  const decodedHash = hash ? decodeURIComponent(hash) : '';
  
  waitForElements('.eapp-portfolio-project-list-categories-item').then(tabs => {
    const tab = [...tabs].find(tab => decodedHash === tab.textContent.toLowerCase().replace(/ /g, "_"));
    tab?.click();
  });
};

openTab();
window.addEventListener("hashchange", openTab);

The id for each tab is its name where the space is replaced by an underscore. For example, Usos mixtos y comercio id is usos_mixtos_y_comercio.

So, if you want to get the link where the specific tab will be opened by default, you need to add this part to your link: #your_tab_id

Please check it out and let me know if it helped :slightly_smiling_face:

6

I work perfectly, thank you so much! You guys are awesome. :metal:

1 Like
7

Great! You are always welcome :wink: