Custom Comments

Create your own custom post comments section.

Code Level

Beginner

Published

 

Example Description

In this example we created a custom comments section that does not require prior registration.

Example Code

How We Built It

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

  6. 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

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER