Skip to main content

article

The article template renders the article page, which contains the full content of the article, as well as an optional comments section for customers. This template is used for items like individual posts in a blog.

Tip

Refer to the article template and its main section in Dawn for an example implementation.

An example of the article template in Dawn

Anchor to LocationLocation

The article template is located in the templates directory of the theme:

└── theme
├── layout
├── templates
| ├── 404.json
| ├── article.json
| ...
...

Anchor to ContentContent

You should include the following in your article template or a section inside of the template:

Anchor to The article objectThe article object

You can access the Liquid article object to display the article details.

Anchor to The comment formThe comment form

The comment form can be added with the Liquid form tag and accompanying 'new_comment', article parameter. Within the form tag block, you need to include the following:

Inputtypename
Nametextcomment[author]
Emailemailcomment[email]
Commenttextareacomment[body]

For example:

{% form 'new_comment', article %}
{{ form.errors | default_errors }}

<div className="name">
<label for="name">Name</label>
<input type="text" name="comment[author]" value="{{ form.author }}" />
</div>

<div className="email">
<label for="email">Email</label>
<input type="email" name="comment[email]" value="{{ form.email }}" />
</div>

<div className="comment">
<label for="comment">Comment</label>
<textarea name="comment[body]">{{ form.body }}</textarea>
</div>

<div className="submit">
<input type="submit" value="Post" />
</div>
{% endform %}
Tip

When a customer posts a comment, your code should provide feedback indicating whether it was posted successfully, or if there were any errors.

Anchor to UsageUsage

When working with the article template, you should familiarize yourself with paginating article comments.

Tip

If you're using a JSON template, then any HTML or Liquid code needs to be included in a section that's referenced by the template.

Anchor to Paginate article commentsPaginate article comments

Article comments can be accessed through the article object, and have a limit of 50 per page. For this reason, you should paginate article comments to ensure that they're all accessible:

Example

{% paginate article.comments by 20 %}
{% for comment in article.comments %}
<!-- comment info -->
{% endfor %}

{{ paginate | default_pagination }}
{% endpaginate %}
Was this page helpful?