tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 8: article.liquid

Shopify Theme from Scratch Part 8: in this tutorial we’re going to be building the article.liquid template, where users can view full blog articles and read/add comments.


part8_banner

Once a user clicks on an article listed on the blog.liquid template, they are taken to the article.liquid template. The article.liquid template is where the full article is shown. Users also have the option to leave comments to articles through this template.

Let’s butter some biscuits!

1. Output the article content and information

Let’s start off by outputting the article’s content and information (publish date, number of comments, tags). I won’t go into too much detail here as it’s essentially the same code from Part 7 :). A for-loop is not necessary here because we’re only outputting one article, i.e. the one that we’re currently viewing. We’re also replacing {{ article.excerpt_or_content }} with just {{ article.content }}, because there is no need to output the excerpt here.

Open the article.liquid template, and replace its contents with the following code:


{{ article.title }}

{{ article.published_at | date: '%b %d, %Y' }} {% if blog.comments_enabled? %} - {{ article.comments_count }} {{ article.comments_count | pluralize: 'comment','comments' }} {% endif %}
{{ article.content }}
{% if article.tags.size > 0 %}
tags: {% for tag in article.tags %} {{ tag }}{% unless forloop.last %}, {% endunless %} {% endfor %}
{% endif %}

You should now see the contents of the article being output, as well as the date, the number of comments, and tags (if the article contains tags), as shown in Figure 8.1.

article template

Figure 8.1: Contents of a single article being output.

2. List the article comments

Let’s start off by writing some Liquid to check if the storeowner has comments enabled. After all, there’s no point in outputting comments or a comment form if the storeowner has blog comments disabled! Blog comments are enabled in the Blog details page in the admin (Figure 8.2)

blog comment settings

Figure 8.2: Blog details page of the admin

At the bottom of the article.liquid, add the code in red below:


...
  
tags: {% for tag in article.tags %} {{ tag }}{% unless forloop.last %}, {% endunless %} {% endfor %}
{% endif %}
{% if blog.comments_enabled? %} {% endif %}

This if-statement checks to see if comments are enabled in the blog’s settings.

Now let’s go ahead and output the comments that have been added to the blog. Between the if-statement that we just added, insert the following code in red:


{% if blog.comments_enabled? %}

{% if article.comments.size > 0 %}

Comments ({{ article.comments_count }})

{% for comment in article.comments %}
{{ comment.author }} on {{ comment.created_at | date: "%B %d, %Y" }}
{{ comment.content }}
{% endfor %}
{% endif %}
{% endif %}

Here, we’re looping through the ‘comments’ array of the current article, and accessing the variables of each ‘comment’ object. This includes information such as the author of the comment, the email of the author of the comment, when it was written, etc. To see a full list of the comment object’s variables, please see this page.

If you’re working on a fresh shop, you may not have any article comments to display yet. If this is the case you can add some through the form that we’re going to be creating in the next step.

3. Add the comment form

Directly below the if-statement that checks for “article.comments.size > 0”, paste the code in red below.


...

{% if article.comments.size > 0 %}

Comments ({{ article.comments_count }})

{% for comment in article.comments %}
{{ comment.author }} on {{ comment.created_at | date: "%B %d, %Y" }}
{{ comment.content }}
{% endfor %}
{% endif %}
{% form article %}

Leave a comment:

{% endform %}
{% endif %}

This will give you a snazzy comment form that will allow visitors to leave comments to articles (Figure 8.3).

article comment form

Figure 8.3: The blog comments form

4. Adding error/success messages

Next, we need to add some error checking to prevent visitors from submitting incomplete forms. This is made easy thanks to the form objects’ “errors” variable.

Still inside article.liquid, insert the code in red below:


...
{% form article %}

Leave a comment:

{% if form.errors %}
{{ settings.comments_error_message }} {% for field in form.errors %} The {{ field | capitalize | replace: 'Body', 'Message' }} field {{ form.errors.messages[field] }}. {% endfor %}
{% endif %} {% if form.posted_successfully? %}
{% if blog.moderated? %} Your comment needs to be approved by the blog owner. {% else %} Successfully posted your comment. {% endif %}
{% endif %}
...

Now, when you try to submit a comment without properly filling out the form, you will be shown an error message (Figure 8.4).

form error

Figure 8.4: An error message is returned if a customer does not complete the comment form

5. Add the CSS

Let’s go ahead and pretty up the article page. Open style.css, and insert the CSS code below at the very bottom of the CSS file.


/**** article.liquid ****/ 

.single-article{border-bottom:none; margin-bottom: 0;}

.comments{border-top:1px solid #ccc; margin-bottom:30px;}
.comment{margin-bottom: 30px;}
.comment-author{font-weight:bold; font-size:20px;}

.comment-entries label, .comment-entries input, .comment-entries textarea{ display:block;}
.comment-entries label{font-size:14px;}
.comment-entries input, .comment-entries textarea{border: 1px solid #ccc; padding:5px;}
.comment-entries textarea{width:350px; height:180px;}

.errors{color:#e00000;}
.error{border: 1px solid #e00000 !important;}
.success{color:#5BB85E;}

Your article page should now look like this:

article final 1

The CSS includes styles for the form and its error/success messages as well :)

errors styled

That’s it for this week!

← Back to table of contents

5 Comments

  • Ben
    Ben on June 4th, 2013

    Woohoo! Finally caught up with you :). You really need to tell the devs to make a Desktop Editor for Windows…broke my mac and waiting for the new one to come out and I can only do the next best thing here, which is write all this up in Sublime and then copy and paste the entire file every time into Shopify.

    One question – if someone builds an entire theme from scratch through this tutorial (and up to this part), how comprehensive is it, exactly? What I mean by that is will all core functionality be covered to the extent that no links/options should break anywhere on a site?

  • tetchi
    tetchi on June 4th, 2013

    A Windows Editor would be nice, for sure.

    All core functionalities will be in the theme, i.e. customers will be able to browse through products, add products to the cart, make customer accounts, etc. through this basic theme.

  • Are
    Are on July 31st, 2013

    Hi, I’m working now on article.liquid, i’m trying to change the way how the images and the text of the article are shown, Like a grid of the images and all the text of the article aligned to de right. I just can’t access to the images, for putting a css on . Or this just can be made at the moment when you are making the post? Thanks!

  • tetchi
    tetchi on August 3rd, 2013

    Hey Are, sorry man I’m not sure if I understand your question.

  • Raniel
    Raniel on July 17th, 2016

    YEAH!!!! nice TUTS TETCHI!!!

    http://prntscr.com/btzvgq

Post a comment