Hide Comments within Lazy Load Comments?

Hi there,

I think this depends on the plugin you're using. Perhaps it's only built to lazy load individual comments instead of the commenting area? It might be worth checking with the plugin author.

Let me know :)

Hi! I would have but their support forum is dead. Author is not active on the forum. So I don't know how long it would take for them to reply.

If you could help me a bit here? Since the overall motive of OptimizePress is Speed and Optimization.

But, Comments is one section which loads scripts and elements without of any use.

To be honest, This is something which should have native support (built inside GP).

Please help.

Thanks.

Hi there,

the comments form you're using is hooked in by the plugin, which is outside of the Themes control. But i am a little unclear ... are you wanting the Form to be hidden ? If so how would users add a comment ?

Yes. I want to hide the form behind the Lazy Load. This way if they want to comment, they will click on the Button 'Load / Show Comments' and then it will load the form.

So basically no matter if the comments are already there or not.

Comments and Form both should be behind the Lazy Load.

Work Flow: I load the website, website loads without comment/form. > I click on Button > It loads form (and if there are comments already, that loads too).

This is what I want.

Would take some JS to do this.
First create a new Hook Element with this content for the button:

<button type="button" class="display-comments">Display Comments</button>

Select the before_comments_container hook.

Then add this JS to your site - you can use another Hook for the WP_footer hook to add it:

<script type="text/javascript">
const displayEl = document.querySelector(".display-comments");
const commentsEl = document.querySelector(".comments-area");

displayEl.addEventListener("click", ()=>{
    commentsEl.classList.toggle("visible");
});
</script>

The button will now toggle the visible class on the comments form when its clicked.

Then this CSS to hide / display:

.comments-area {
    display: none;
}

.comments-area.visible {
    display: block;
}

Note: What i am not sure of is whether this will affect how the lazy load works, as the comments area being hidden on load could mean the lazyload does not work correctly.....

This works great. Is there any way to add the comment count to the button? Such as

0 comments = "Show comment section."
1 comment = "Show comment section. (1 comment.)"
50 comment = "Show comment section. (50 comments.)"

Hi there,

You can use the get_comments_number() function:

https://developer.wordpress.org/reference/functions/get_comments_number/

So your hooked button code would look something like this.

<?php
// Get Comments count
$comments = get_comments_number();

if ( $comments > 0 ) {
    // If comments display Button with comment count
	echo '<button type="button" class="display-comments">Display Comments (' . $comments . ')</button>';
} else {
    // else Display Button without comment count
	echo '<button type="button" class="display-comments">Display Comments</button>';
}
?>

Make sure to check Execute PHP in the Hook.

Works beautifully, thank you!

Glad to be of help