Portfolio: How to make specific category selected by default

Pro Tips Elfsight Widgets Tips
1

Interested in having a specific filter of your Portfolio widget automatically pre-selected on the page? We’ve got a solution!

This code should do the trick for you:


const CATEGORY = 'Category Name';

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

Here are the steps you should follow to make it work correctly:

Replace Category Name in the 1st line of the code with the name of your category

image
image721×513 23.5 KB


Replace WIDGET ID with the ID of your widget

image
image726×516 19.9 KB

Here is how you can find the ID of your widget - Where to get your widget ID - Elfsight Help Center


Add the resulted code to the Custom JS field and publish changes

image


image
image1918×887 112 KB


Guys, we’d be so grateful if you could check out the Portfolio category in the Wishlist and vote your favorite ideas. It would be incredibly helpful for the development of our widgets and services.

And of course, feel free to share your own ideas too!


Got questions or faced difficulties? Tell us in the comments :wink:

1 Like