Portfolio Customization

[Jordi_Sabate (Jordi Sabaté)]

Besides hiding the ‘All’ tab, is it possible to hide all the content and only show the content of the first category created? Displaying all content together looks chaotic on my website, and it would be better to view the content category by category.

[Max]

Hi there @Jordi_Sabate

I am afraid I didn’t quite get your idea.

If you hide the All tab, you’ll see the tabs for specific categories only. Thus, if you click, for example, Web Design tab, you’ll see the projects for the Web Design category. So, you can do this category by category and projects won’t be mixed:

Could you please elaborate on your idea?

[Jordi_Sabate (Jordi Sabaté)]

Let me try to explain more clearly. When I browse, I can view items by categories by clicking on each one individually. However, when I go to the portfolio, I see all the items from different categories mixed together before I can select specific categories. What I would like is for the portfolio to initially display only the items from the first category, rather than showing everything at once.

[Jordi_Sabate (Jordi Sabaté)]

Portofolio

[Max]

Ah, got it, thanks!

I however have to mention that this forum is dedicated to Elfsight cloud apps, thus we can assist with only cloud apps-related questions here. As far as I see, you’re using our app from Shopify which works a bit differently.

Please contact our Support Team at https://help.elfsight.com/?contact=1. They’ll be happy to help

[Clique_Agency]

Hi. Would you be able to provide the code to tackle this task in the elfsight cloud apps?

I’m having the same concern where after hiding the “all” category, the default still loads images from all categories; I’d like for the default to load images of the true first category instead of the hidden “all” category.

Thanks for the help.

[Max]

Hi there, @Clique_Agency

Sure! Please use this script in the Custom JS on the Style tab of your widget’s settings:

const ACTIVE_TAB = "Your Category name";

const waitForElements = (selector, root = document) => new Promise(res => {
  let i = 0;

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

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

  check();
});

waitForElements(".eapp-portfolio-project-list-categories-item").then(tabs => {
  tabs.forEach(tab => {
    if (ACTIVE_TAB.toLowerCase() === tab.textContent.toLowerCase()) {
      tab.click();
    }
  });
});

In the 1st line of the code, please replace Your Category name with the name of the category you’d like to open by default:

Give it a try and let me know if it helped

[Clique_Agency]

It worked!! Thank You so much!

[Max]

No sweat

In the meantime, I’d like to remind you about our Giveaway, where you can win 3 FREE months for your subscription.

Check the details and join in - April Giveaway: Celebrate 80K Members with Us & Win 3 FREE Months!