Problem Solving Threaded Comments in Shopify Blogs

Problem Solving Threaded Comments in Shopify
I recently had a potential client ask for threaded comments (where replies are shown below the original comment) in a Shopify blog, which is not a feature the platform offers natively. It got me thinking about how we might be able to make it work.

I thought it’d be interesting to share the thought process I went through when approaching this problem, since one of the key components of a web developer’s job is tackling implementation problems like this but the actual problem solving is not something we talk about as much as we probably should.

The Problem

Shopify blog comments are a single level, with no reply hierarchy. WordPress does offer threaded comments, and it’s what many blogs use so that’s become a familiar feature. Beyond familiarity, threaded comments are excellent for building community and generating a real conversation with readers.

How can we get comment replies in Shopify to be visually linked to the original comment so as to show the conversation?

The Thought Process

The first set of questions that came up when I started thinking about this problem:

  • Is there a way to have a reply link on the comments like you’d see on WordPress so anyone can reply to any top level comment (we’re only aiming for one level of replies for now)?
  • If not, is there a way to have the site owner able to reply to comments, even if it isn’t something the general public is able to do?

A Potential HTML & jQuery End Model

My initial thought was that we could associate replies to the original comment in the thread using the comment id, which is something Shopify stores for each comment (accessed via the liquid tag {{ comment.id }}).

My thought was that if we put the parent comment ID in the markup for both the parent comment and any reply comments, we could then use jQuery to move the replies up just under the parent (using append() or something similar).

This would look something like this:

<div id="comment-1">
    I'm the parent comment.
</div>
<div id="comment-2">
    I'm an unrelated comment.
</div>
<div id="comment-3" class="comment-1">
    I'm a response to the first comment.
</div>
<div id="comment-4" class="comment-1">
    I'm another reply to the first comment.
</div>

With that structure, we could use jQuery to find all the comments with the class comment-1 and then move them after the comment with the matching ID.

Getting the Comment ID in the Markup

The problem now is that we’ve got to associate a different comment’s ID with the replies somehow. Some ways this could potentially work (depending on Shopify’s system constraints):

  1. We include a hidden field in the comment form that contains the parent ID (probably put there by jQuery when the reply link is clicked?) and that pushes that information to the comment object or to a metafield. Then we pull that out from the comment object in the class.
  2. Only the shop owner can submit replies, using the backend to write them and including the parent comment ID as a metafield on their comments. We use that metafield for the class.
  3. Only the shop owner can submit replies, including the parent comment ID in the body of their comment in a way that we can strip out and use in jQuery but that doesn’t look terrible if the jQuery fails for some reason (javascript off, future bug, etc.).
  4. The comment ID gets submitted in the body of the comment, put there somehow when the reply button is clicked, and in a way that we can strip it out and use it but it doesn’t look terrible if jQuery fails (maybe invisible or on submit).

That list makes it seems like those ideas all came up together, but really it was a little more linear. The first one was my ideal case, but was quickly shot down because the comment form can’t be modified to submit information that way (womp womp).

That led me to think about the second idea, since for a lot of content types in Shopify we can add custom metafields in the admin. Unfortunately, it seems as though metafields are not a thing for comments (womp womp again).

Those two dead ends lead me to the final two choices, where we’re submitting the values via the field we do have (which is pretty much just the comment content area). The fourth is likely preferable as it’s the most flexible and the most automated (less chance of things breaking), so that’s what we’ll be tackling.

Further Considerations

Did you read this far hoping for a solution? Sorry, I don’t have one for you yet. As of this writing we haven’t tackled the problem any further, but if/ when we do I’ll be sure to write it up.

For now here the things on my mind for the next phase of tackling this problem:

  • How do I put information from my parent content markup (the ID) into the comment textarea on a link click? (Here’s a Stack Overflow thread that may help)
  • What does that information in the textarea look like, if it’s even visible? How can I make sure it gets submitted without getting accidentally edited first?
  • How does that information get parsed in the printed comment so that it isn’t in the comment content and is in the markup.
  1. Gavin

    I can highly recommend Disqus for this type of thing.

    • Zoe

      Yep, that’s certainly one option! I have some clients who are really anti-Disqus, which I can understand having run into issues with it not loading or loading erratically.

      The point of the post is less about the threaded comments (which are a pretty low priority for this project) and more the thought exercise of thinking through a CMS’ capabilities and the options for solving a problem. For this particular problem, I’m mostly now curious whether I can make it happen (seems doable).

      But yeah, for anyone just wanting threaded comments and/ or upvoting, Disqus is one way to go with Shopify comments!

  2. The thing I love about this, which you mentioned in the comment above, is that the real goal here is to really think through all the options available to you in a CMS. The platform I normally work with — NationBuilder — afford you a bucketload of options when solving a problem, and they’re not always obvious at a first glance.

    In the end, I think one of the things that separates good developers from the average ones is their ability to perceive the CMS as a toolkit, rather than a prescribed solution. So high fives for being one of the good ones. ;)

  3. What if you add a comment-{{ comment.id }} class to every comment div, and clicking on reply somehow replaces the ID number with the parent comment’s ID? Maybe the reply link url can be parsed to add the parent’s ID? I’m not sure what that link would be, so that might not work.

Leave a Comment

Your email address will not be published. Required fields are marked *

About posting code: Please use a Gist or similar to share any extended code samples, and any code other than basic HTML, CSS, or jQuery/ JS, so as to keep the comments clean and readable. Basic HTML, CSS & jQuery can be shared in the comment surrounded by <code> tags. Thanks for commenting!