Option to display only a specific number of comments

Wishlist Comments
1

I showcase the comments at the top of my site. However, doing so takes up a considerable amount of site real estate because I am unable to collapse the majority of the comments section. Is it possible to add a feature within the settings to customize how much of the comments section is visible between collapses? Thank you for your consideration.

1 Like
2

Hi there, @joe_on_Spencer_Count :waving_hand:

Great suggestion, thanks for sharing! If more users support your idea, it might be considered in the future :slightly_smiling_face:

As for now, our devs came up with a custom solution for you. This code creates a custom Load More button and should be placed in the Custom CSS field on the Style tab of your widget’s settings:


.es-custom-button {
	border: 1px solid rgb(25, 123, 255);
	border-radius: 100px;
	display: flex;
	width: fit-content;
	padding: 8px 18px;
	line-height: 16px;
	color: rgb(25, 123, 255);
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
}

Feel free to adjust the button’s appearance to your liking :wink:

And this script should be added to the Custom JS field on the Settings tab of your widget’s settings:

const WIDGET_ID = 'YOUR_WIDGET_ID';
const MAX_VISIBLE = 5;
let currentVisible = MAX_VISIBLE;

const ROOT = `.elfsight-app-${WIDGET_ID}`;
const COMMENT = '.es-comment-container';
const DEFAULT_BUTTON = '.es-widget-load-more-button';

const getComments = () =>
	Array.from(document.querySelectorAll(`${ROOT} ${COMMENT}`));
const getDefaultButton = () =>
	document.querySelector(`${ROOT} ${DEFAULT_BUTTON}`);

const createCustomButton = () => {
	const btn = document.createElement('div');
	btn.className = 'es-custom-button';
	btn.textContent = 'View more comments';
	btn.style.cursor = 'pointer';
	btn.style.textAlign = 'center';
	btn.style.margin = '16px auto';
	return btn;
};

const processComments = () => {
	const comments = getComments();
	if (!comments.length) return;

	const defaultBtn = getDefaultButton();

	comments.forEach((comment, index) => {
		comment.style.display = index < currentVisible ? '' : 'none';
	});

	const hasHidden = comments.length > currentVisible;

	if (defaultBtn) defaultBtn.style.display = hasHidden ? 'none' : '';

	let customBtn = document.querySelector(`${ROOT} .es-custom-button`);

	if (!customBtn && hasHidden) {
		customBtn = createCustomButton();
		(defaultBtn?.parentElement || comments[0].parentElement).appendChild(
			customBtn
		);

		customBtn.addEventListener('click', () => {
			currentVisible += MAX_VISIBLE * 2;
			processComments();
			customBtn.remove();
		});
	}
};

const waitForFirstComment = () =>
	new Promise((resolve) => {
		const obs = new MutationObserver(() => {
			const first = document.querySelector(`${ROOT} ${COMMENT}`);
			if (first) {
				obs.disconnect();
				resolve(first);
			}
		});
		obs.observe(document.body, { childList: true, subtree: true });
	});

const start = async () => {
	await waitForFirstComment();

	const container = document.querySelector(ROOT);
	if (container) {
		const observer = new MutationObserver(processComments);
		observer.observe(container, { childList: true, subtree: true });
	}

	processComments();
};

start();

Do not forget to replace YOUR_WIDGET_ID in the 1st line of the code with the ID of your widget.

Here you can change the button text to any custom text you need:

image
image606Ă—454 24.8 KB


Please try it out and let me know if you like the result :wink: