Displaying Responses

Front End
Version 1.5.8+
9 min read

You are viewing the documentation for Meerkat version 1 for Statamic 2. The latest version is Meerkat 2 for Statamic 3.

Read v2 docs

Overview

The {{ meerkat:responses }} tag is your view into the comments your visitors leave on your site. This tag operates very much like Statamic's clever {{ collection }} tag (you can catch up this tag by reading the relevant documentation here) but with some special magic added just for interacting with your site's comments.

The Basics

The following code snippet will display all of the comments that are available on the current page as an unordered list:

<ul>
{{ meerkat:responses }}
    <li>{{ name }} says... {{ comment }}</li>
{{ /meerkat:responses }}
</ul>

To make things simple, Meerkat will automatically determine which comments to load based on the page being requested by the client. This is referred to as the comment stream's context, and can be overridden to accomplish some really cool things, such as sharing one comment section for blog posts that belong to a common series.

Available Variables

The following table highlights the data that is available to you by default when integrating a collection of comments. It should be noted, however, that because of the extensible nature of Meerkat, this is not an exhaustive list:

Variable Description
{{ comment }} The comment's content.
{{ name }} The name of the comment's author.
{{ email }} The email address of the comment's author.
{{ id }} The internal ID of the comment.
{{ date }} A Carbon date instance representing when the comment was submitted.
{{ has_replies }} Indicates whether or not the comment has any replies.
{{ is_reply }} Indicates whether or not the current comment is a reply to someone else's comment.

Scoping

Comment scoping works in exactly the same way as scoping in Statamic collections; you can find more information by reading the official documentation. The following code snippet demonstrates how you may display comments when scoping the data set:

<ul>
{{ meerkat:responses as="comments" }}
    {{ comments }}
        <li>{{ name }} says... {{ comment }}</li>
    {{ /comments }}
{{ /meerkat:responses }}
</ul>

Variables When Scoping

The following table highlights the data that is available to you when you are using scoped collections:

Variable Description
{{ comments }} A collection containing the comment's replies, if any. The name of this variable will change depending on the scope name.
{{ total_results }} The total number of comments returned by Meerkat.
{{ first }} Indicates whether or not the current comment is the first comment in the collection.
{{ last }} Indicates whether or not the current comment is the last comment in the collection.
{{ zero_index }} The number/index of the current loop iteration, starting at 0.
{{ index }} The number/index of the current loop iteration, starting at 1.
{{ no_results }} Indicates whether or not there are any comments to display. This will be true if total_results is greater than zero.

Displaying a Message When There Are No Comments

To offer the best user experience, you may wish to display a message to users to encourage them to leave the first comment on a blog post or page. To do this, we will need to scope the the comments (so they are available as their own collection within the tag). When we do this, we get access to some useful meta-data about the response collections that we can use in our templates. For example, the following will display the message Be the first to leave a reply! to visitors when there are no comments on the page they are visiting:

{{ meerkat:responses as="comments" }}

    {{ if no_results }}
    <p>Be the first to leave a reply!</p>

    {{ else }}

    {{ comments }}
    <!-- Implement your comment thread here. -->
    {{ /comments }}

    {{ /if }}

{{ /meerkat:responses }}

Recursively Displaying Comments

Displaying comments recursively, or as "nested" comments is a common visual pattern on web pages; often, this task can be complicated. Luckily, Meerkat understands this requirement and has provided some Statamic-style wizardry to make the process easier. The following example demonstrates how we can display nested comments using a simple unordered list:

{{ meerkat:responses as="comments" }}

    {{ if no_results }}
        <p>Be the first to leave a reply!</p>
    {{ else }}
        <ul>
        {{ comments }}
            <li>{{ name }} says... {{ comment }}</li>
        
            {{# The next bit of code does all the work of displaying nested comments. #}}
            {{ if has_replies }}
                <ul>{{ *recursive comments* }}</ul>
            {{ /if }}

        {{ /comments }}
        </ul>
    {{ /if }}

{{ /meerkat:responses }}

Paginating Comments

Meerkat's comment streams are built on top of Statamic's lovely collections; all of their documentation about paginating collections applies to Meerkat comments. Yes, all of it! You can find out more about paginating collections with Statamic by reading the official documentation. However, to get you up and running as soon as possible we will cover pagination here as well.

The following example showcases using Statamic's auto_links tag when working with Meerkat comments; it simply cannot get any easier than this:

{{ meerkat:responses as="comments" limit="10" paginate="true" }}

    {{ comments }}
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">{{ name }}</h4>
            {{ comment }}
        </div>
    </div>
    {{ /comments }}

    {{ paginate }}
        {{ auto_links }}
    {{ /paginate }}

{{ /meerkat:responses }}

Note: Statamic's {{ auto_links }} tag renders a pagination link set using the Bootstrap framework markup and class names (specifically, at the time of writing, Statamic will render Bootstrap 3.x markup and class names); if this does not meet your requirements, you will have to implement the UI yourself.

In the example above, Meerkat will display ten root, or first-level comments on the page. A root comment is any comment that is left on a page that is not a reply to some other visitor's comment (clever, yea?). This means that even though we are displaying only ten root comments per page, each comment may or may not have more than ten replies (we can use some JavaScript wizardry to do some amazing things here though; what's possible here is only limited by your imagination and technical ability [if you have great imagination and lack technical ability, visit the contact page to get in touch and we might be able to work together to build something amazing]). The results of our efforts are this:

Not bad for a couple minutes of quick work!