Display 1st category in Portfolio by default

Ask the Community Customization
1

Hi Max,
This was great to find, thank you! Is there a code I can add so that the default display is the first category in my portfolio?
Thanks! Gina :slightly_smiling_face:

1 Like
3

Hi @Gina_Chong :wave:

Sure! Here is the code you need to add to the Custom JS field on the Style tab of your widget’s settings:

const CATEGORY = 'Discounts';

function waitForElem(selector) {
	return new Promise((resolve) => {
		if (document.querySelector(selector)) {
			return resolve(document.querySelector(selector));
		}

		const observer = new MutationObserver(() => {
			if (document.querySelector(selector)) {
				observer.disconnect();
				resolve(document.querySelector(selector));
			}
		});

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

waitForElem(
	'.elfsight-app-4404fed3-d07b-42c9-8f06-4d23035e8b2f .eapp-portfolio-project-list-categories-component'
).then((categories) => {
	const requiredCategory = [
		...categories.querySelectorAll(
			'.eapp-portfolio-project-list-categories-item'
		),
	].find((c) => c.textContent === CATEGORY);

	if (requiredCategory) {
		requiredCategory.click();
	}
});

Check it out and let me know how it worked :wink:

4

You’ve done it again :smiley:
It works really well. Thank you!!
Gina

2 Likes
7

Awesome! Thank you for the feedback :wink: