Comments Management in Power Content

Power Content offers a commenting engine out of the box. It has many cool features that you can use and we’ll review them in a few seconds. Just note the following: This comments engine allows unlimited nested comments. This means that you can set up a comments feature where users can reply to one another and actually start a conversation.

This article will cover the following topics:

1. Comment Configuration
2. Anti-Spam Protection Explanation
3. Available Extra Fields
4. Comments View in Admin – Managing Your Comments
5. Comments Code Explanation (For Your Custom Themes and Layouts)

 Comments Configuration

Let’s start settings up our comments engine. Navigate to Power Content’s configuration view by clicking the “Configuration” button in any Power Content view. And then click the “Comments Settings” tab.

You will see that the configuration is separated into three sections:

1. Comments Settings – Some general and global options for your comments engine
2. Re-Captcha Settings – Settings for setting up Google’s “I’m Not a Bot” captcha
3. Fields Settings – Additional fields that you can include in your comments form

Comments Settings:

Comments Order – You can choose if new comments are at the top or at the bottom

Commenting Clears Cache – This one is a very cool option. Usually, if you have a cache on your website, new comments won’t instantly appear, they will appear only after the cache has been cleaned. If you set this option to “Yes,” the cache will be cleared automatically any time someone posts a comment, and the comment will instantly be shown. If you set this to “No,” your users will get a message that their comment will be published shortly.

Auto Publish Comments – If you set this to “Yes”, comments will be auto published. If you set this to “No", new comments will be unpublished until you manually review and publish them. Users will get the message that their comment is being reviewed and will be published shortly.

Notify Admins on Comments – You can choose to be notified by email each time a new comment has been added. This is especially useful if you have chosen to review the comments before publishing them. To set up the emails that will be notified, navigate to the tab “Power Content,” and you’ll see the Admin Emails field.

Re-Captcha Settings:

Google Re-Captcha – This field is a Yes / No question for whether or not to use Google’s “I’m Not a Bot” captcha.

Re-Captcha Site Key + Re-Captcha Secret Key – To set this captcha, Google requires you to create a domain and site keys; you do this here: https://www.google.com/recaptcha When you’re done, simply copy the site key and secret key to those fields.

Fields Settings:

Other than “Name” and “Comment”, which are the basic fields for each comment engine, you can set up three additional fields: Email, URL, and Profession (I’ll explain this in further detail later in this documentation). This option here lets you make those fields required or not.

Anti-Spam Protection Explanation

Other than Google’s “I’m Not a Bot” captcha, explained in the previous section, there’s an additional powerful anti-spam method that is built into the comments engine and basically, it should solve most if not all of your spam. This method is called “The Honeypot Trap”. The idea behind it is that bots that come to spam are automatically filling all the comments fields that are of a type other than “hidden.” This trap sets a field of type text but it’s hidden with display: none; (so users won’t see and touch it), and this field MUST be empty at all times. If it is not empty, than the comment won’t go through. As explained earlier, users who are not bots don’t see this field so they can’t fill it in. Bots, however, don’t “see.” They are simply a JavaScript that fills out forms. If a bot fills this field in, the comment won’t go through.

You don’t need to do anything to set this up; it is automatically set, and the only thing you need to do is, if you make a custom theme, DON’T remove this field from the HTML. This is the mentioned field: You can see that it has a display: none; style so it won’t be shown. The “Name” attribute of this field is “epc_malkodet_dvash”, which is Hebrew for “The Honeypot Trap”. The reason for this is that there are smarter bots who are looking for this trap and know how to escape it. They are doing so by trying to figure out if this is a trap, using the name, class, or ID of the field, so any word like “Honey” or “Trap” will give this field up. And as far as I know, bots don’t speak Hebrew. :)

<input type="text" style="display:none;" name="epc_malkodet_dvash">

Available Extra Fields

As shown in the configuration of the comments, you can set up additional fields for your users to fill in. The built-in fields are “Email”, “URL”, and “Profession”. This is also automatically set up in the HTML. If you want these fields, keep them in the HTML. If you don’t want them, remove them from the HTML but don’t forget to set them to “Not Required” in the configuration; otherwise, the comments validation will look for their values and will show an error if it isn’t found.

<input name="epc[email]" type="text">
<input name="epc[url]" type="text">
<input name="epc[profession]" type="text">

You can change / add / tweak their HTML however you like; just keep the “Name” attribute or else they won’t be stored.

Something extra: You can, if you want, change the data you wish your users to enter. You can ask that instead of a “Profession”, they will enter their dog’s name, for example. Simply put, it’s using a different label.

Comments View in Admin – Managing Your Comments

There’s a dedicated view in the admin for your comments, where you can view, add, edit, publish, unpublish, trash, archive, and delete comments.

As you can see in the picture, in the “Comments” view, you can view, filter, sort, and change the states (published, trashed…) of comments. Comments that have the little arrow before them are replies to the closest comment above them that doesn’t have that indentation arrow.

In this picture, you are looking at a reply to the comment with the ID 8. Basically, you can’t move replies from item to item. You can move only regular comments. The options here are completely editable. Note that if the user who has commented on your item is logged in, he will be connected to his Joomla user automatically. If not, the name that he entered will appear.

Comments Code Explanation (For Your Custom Themes and Layouts)

If you have made your own theme or layout using the Power Content’s “Themes Engine”, this section of the documentation explains what this code does and how to work with it.

Take a look at the following file:
root/components/com_epc/views/item/tmpl/default.php 

You will find the div with the class “.epc-comments” there. From the beginning of this element to its closing corresponding tag, you will find the entire code that corresponds to the comments engine.

Most of this code is simple HTML, and there is also some PHP logic—the beginning of this section has some PHP logic to determine what message the user should see with the comments form: “Join the Discussion” if there is more than one comment (also shows the amount of comments) or “Start a Conversation” if there are no comments at all. The code sample:

After this part, you will find the comments form and, below that, the comments list. The comments form part:

This is a simple HTML form, but there are a few things you must keep in order for all the cool features to work properly. Basically, just like in many other cool features of Power Content, the JavaScript that handles them is looking for data attributes. For this specific form, it will look for the data attribute “data-epc-comments-form” that is placed in the opening tag of the form itself:

< form method="POST" data-epc-comments-form enctype="multipart/form-data">

This attribute will tell the JavaScript to perform AJAX requests when this form is submitted, and will start the processing part (validations, anti-spam checks, etc.). Below this part are the form fields themselves, you can change how they look and work but keep the “name” attribute. PHP will look for those names when the form is submitted in order to properly understand what is what and validate and store them correctly. Another rule this data attribute has is that when a user wants to reply to a comment of another user, the JavaScript code will look for the form with his attribute to show the replying user.

Then goes the Google “I’m Not a Bot” captcha snippet:

<? php echo $this->item->comments->reCaptcha; ?>

Keep it as is. If you have chosen not to display the captcha, this won’t affect anything, it will simply do nothing.

After that we’ve got the following container:

< div data-epc-comments-messages-container class="epc-comments-messages-container">

This container is used to display messages to your users “You comment was successfully added”, “You didn’t pass the spam check”, etc. You can change whatever you like here, just keep the data attribute: data-epc-comments-messages-container

After that we have the submit button. Inside the submit button you will see a span that is responsible for showing a loading animation for when the comment is processing. You can keep it or remove it; it’s totally up to you. Just note that if you don’t load Power Content’s CSS, you may not see this animation since it’s CSS based.

The last part is two hidden fields: One is the field ID, and you must keep it. And the second is the anti-spam “Honey Pot Trap”, which I explained earlier.

The second part of this code is the comments themselves. You can see the line that calls the layout of the comment:

You don’t have to use a sub layout for the comments, but this makes more sense and is better organized and, in future releases, there might be additional features that will depend on this layout, such as live (AJAX) pagination for comments and more.

The layout for the comment can be found here: 
root/components/com_epc/views/item/tmpl/listComment.php

Its code is very straightforward and simple. It’s a good old < li > that contains the comment data. But, there are three things you need to understand about this:

1#. Each comment has a level. Root comments (top level comments) are at level 0, their replies are level 1, and the reply to the reply is level 2, and so on. The following PHP line contains the true level of the comment:

<? php echo $comment->level; ?>

So if you will look at the opening of the < li > tag, it has this line with her class. Meaning, each reply will have its level as a class. So, you can make different CSS styles for levels, such as indentations and more (look at the image at the beginning of this documentation, it shows exactly that).

< li class="epc-comment-level-<? php echo $comment->level; ?>">

2#. Look at the following line:

<? php echo nl2br($comment->comment); ?>

This simply puts the comment itself in the paragraph tag that wraps it. But, if you will look closely, you will see that some PHP function is applied to this: nl2br(). What It does is simply allow your comments to have line breaks. Without this line, there won’t be any line breaks available for your comments.

3#. At the end of this < li >, you will see some PHP conditional (IF - ENDIF). This condition says: If the comment level is 0 (top level comment), show a reply button. That means that only top level comments can be replied to. You can change this to level 1, 2, 3, 4, 5, or 1,000 if you want. Simply change the number 0 to a different one. My common sense says: Any level deeper than the first will just be bad UX and will cause confusion. Note that Facebook itself doesn’t let you reply deeper than the first level, for a good reason. But, you can, if you want.

Another important thing about this reply line: Once again, you can change anything you want about it, just keep the data-attributes. In this case, keep these:

data-epc-comment-reply

/// AND

data-epc-comment-reply-id="<? php echo $comment->id; ?>"