[Support request] Hide Comments within Lazy Load Comments?

Home Forums Support Hide Comments within Lazy Load Comments?

  • This topic has 9 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1098090
    optimizeit

    Hi! I have read your FAQs and I am using Lazy Load Comments Plugin to hide/lazy-load the comments.

    But there is one issue.

    It doesn’t hide the comment section if there is no comments.

    When There is No Comment: https://i.imgur.com/b3zGix0.png

    When There is/are Comment(s): https://i.imgur.com/b3zGix0.png

    How do I hide the comment section even if there is/are no comment(s)?

    Thanks.

    P.S.: I am using GeneratePress Child Theme.

    #1098187
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1098325
    optimizeit

    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.

    #1098530
    David
    Staff
    Customer Support

    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 ?

    #1098541
    optimizeit

    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.

    #1098874
    David
    Staff
    Customer Support

    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…..

    #1340704
    David

    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.)”

    #1341184
    David
    Staff
    Customer Support

    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.

    #1341583
    David

    Works beautifully, thank you!

    #1341691
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.