Recursive comments not rendering in template properly

[jeffwhitfield]

Hi there! Got a few other bugs so I'm posting them up one at a time.

This one involves the recursive comments template placeholder. For some reason or another, with Statamic v2.11.15 (I even tried downgrading to v2.11.10) the recursive comments aren't rendered the way they should. Everything worked at one point so…not sure what the culprit is. Here's a screenshot of what's happening:

Basically, the reply above the one that is from bikeman is the reply that's supposed to go where the recursive comments placeholder is supposed to go. It's like all the replies are going under the first post with replies and all others get ignored for some reason. Really odd! :P

[jeffwhitfield]

Any updates on this? I'm looping back around to see if I can implement Meerkat again. Still stuck. If needed, I can provide you with a link to a copy of my full site for testing. Thx! :D

[jeffwhitfield]

I did find a simple workaround. For the code within the comments loop, I added a partial with the same code. Then, within that partial, instead of using the recursive comments tag, I simply reference the same partial which effectively creates the same recursive functionality anyways. :P

[jeffmckeand]

I did find a simple workaround. For the code within the comments loop, I added a partial with the same code. Then, within that partial, instead of using the recursive comments tag, I simply reference the same partial which effectively creates the same recursive functionality anyways. :P

@jeffwhitfield I've run into the same issue. Do you mind sharing a little more detail on how you got there? Is the partial you created referencing itself?

[jeffwhitfield]

@jeffwhitfield I've run into the same issue. Do you mind sharing a little more detail on how you got there? Is the partial you created referencing itself?

Exactly! So, I created a comments.html partial with this (sorry about my custom code in there):

{{ comments }}
    <article class="comment" itemscope itemtype="https://schema.org/Comment">
      <div class="comment-content">
        <div class="comment-author">
          <figure class="author-image">
            <div class="image is-64x64">
              <img src="{{ meerkat:gravatar email="{email}" }}"
                class="media-object is-rounded" data-holder-rendered="true"
                style="width: 64px; height: 64px;">
            </div>
          </figure>
          <div class="author"><strong itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">{{ name }}</span></strong> <small>on <time datetime="{{ date format="Y-m-d" }}" itemprop="dateCreated">{{ date format="F j, Y g:i A" }}</time></small> {{ in_reply_to }}</div>
          {{ if is_reply }}
          <div class="icon-reply">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M8.309 189.836L184.313 37.851C199.719 24.546 224 35.347 224 56.015v80.053c160.629 1.839 288 34.032 288 186.258 0 61.441-39.581 122.309-83.333 154.132-13.653 9.931-33.111-2.533-28.077-18.631 45.344-145.012-21.507-183.51-176.59-185.742V360c0 20.7-24.3 31.453-39.687 18.164l-176.004-152c-11.071-9.562-11.086-26.753 0-36.328z"/></svg>
          </div>
          {{ /if }}
        </div>
        {{ if is_deleted }}
        <p>This comment was removed.</p>
        {{ else }}
        <div class="comment-text" itemprop="text">
        {{ comment }}
        </div>
        {{ /if }}
        <div class="reply">
          <a href="#" class="button is-small" data-meerkat-form="reply" data-meerkat-reply-to="{{ id }}">Reply</a>
        </div>
        {{ if has_replies }}
          {{ partial:comments is_reply="true" }}
        {{ /if }}
      </div>
    </article>
{{ /comments }}

Then, in my blog post template, I start the comments loop:

          {{ meerkat:responses show_hidden="true" as="comments" }}
              {{ if no_results }}
                  <p><em>Be the first to leave a reply!</em></p>
              {{ else }}
                  {{ partial:comments }}
              {{ /if }}
          {{ /meerkat:responses }}

So, yeah, it basically creates a recursive loop on itself, which works out quite well. Granted, it would be nice to do it the other way, but this way works too. :P

[jeffmckeand]

Thanks for sharing!

[JohnathonKoster]

@jeffmckeand @jeffwhitfield

This issue has been addressed in v1.5.72 (now available in the Statamic Marketplace). Going forward, we will need to specify the wrapper element (ul in the following example) when requesting the recursive behavior:

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

    <ul>
        {{ replies }}
        <li>
            {{ id }} - {{ comment }}

            {{ if has_replies }}

            <ul>{{ *recursive replies* }}</ul>

            {{ /if }}
        </li>

        {{ /replies }}
    </ul>

{{ /meerkat:responses }}

If you find anything else, please do create another issue and I'll see what we can do. Thanks!