Article
The article template displays an article page, including the full content of the article and a section for customers to leave comments. This template is used for each post in a blog collection.
Location
The article template is in the theme's templates folder:
└── theme
├── layout
├── templates
| ...
| ├── article.json
| ...
...
Usage
Include the following in the article template or within a part of the template:
Article Object
You can use the Handlebars article object to show article details.
Comment Form
You can add a comment form using the Handlebars form helper with the 'new_comment', article parameters. Inside the form helper, include the following:
| Input | Type | Name |
|---|---|---|
| Name | text | comment[author] |
email | comment[email] | |
| Comment | textarea | comment[body] |
For example:
{{#form 'new_comment' article}}
{{form.errors.messages}}
<div class="input-item__name">
<label for="name">Name</label>
<input name="comment[author]" type="text" value="{{ form.author }}">
</div>
<div class="input-item__email">
<label for="email">Email Address</label>
<input name="comment[email]" type="email" value="{{ form.email }}">
</div>
<div class="input-item__comment">
<label for="comment">Comment Content</label>
<textarea name="comment[body]">{{ form.body }}</textarea>
</div>
<div class="control__submit">
<button class="button" type="submit">Submit Comment</button>
</div>
{{/form}}
When customers post a comment, your code should give feedback to show if the comment was successfully posted or if there were any errors.
Usage
When using the article template, remember paginating article comments.
If you use JSON templates, any HTML or Handlebars code needs to be in the section referenced by the template.
Paginating Article Comments
Article comments can be accessed via the article object, with a limit of 50 comments per page. Therefore, you should paginate article comments to ensure all comments can be viewed:
{{#paginate article.comments by=50}}
{{#for article.comments as |comment|}}
<!-- comment info -->
{{/for}}
{{#if paginate.pages > 1}}
<a href='{{paginate.previous.url}}'>previous</a>
<span>{{paginate.current_page}}/{{paginate.pages}}</span>
<a href='{{paginate.next.url}}'>next</a>
{{/if}}
{{/paginate}}
