Custom Comments

Collections

In addition to the database collections automatically added to your site if you have a blog, we added a collection for storing custom comments:

• Post Comments Data collection: Contains information about your custom comments

Note: To simplify this example we set the collection permissions for adding and removing items to “anyone”, but best practice is to restrict permissions on the collection and use backend code with suppressAuth to read and write data to your collection.

Page Elements

In our site we added the following page elements:

• Leave a Comment strip: Contains a customized form for adding comments: 

• 2 text boxes: for user’s name and comment

• Submission button

• Hidden success message

• Comment List repeater with the following items: 

• User name text

• User comment text

• Comment date

Code

1. When the page is ready, use the blog getPost() function to get the current post’s data and save it in a global variable.

2. Query the the Post Comments Data collection for post comments relating to the current post.

3. Assign the queried comments as the commentsList repeater data, triggering the onItemReady() function.

4. Bind the comment items to their relevant repeating items.

5. Add an onClick event handler to the submission button that generates a new comment and adds it to the collection. Each comment item contains:

• The current post ID

• User’s name from the input

• User’s comment from the input

1. Insert this item into the collection and then do the following:

• Show the success message

• Reload the post comments including the new one

• Clear the comment inputs