Using our fellow eZ crew member Kristof Coomans' powercontent extension, we recently enhanced the blog commenting feature on ezsystems.ca. The powerful eZ Publish versioning system (see the documentation or an article about it) means that there was a "New comment" button on each blog post. However, we wanted to put the comment forms directly on the blog post pages. And while we were at it, we decided to make a few more minor tweaks to the blog...

The blog comment form is a different matter than the "contact us" form that has been built into eZ Publish since its creation. This is because a blog comment is a content object, while a message sent through a contact us form is either sent to someone via email, stored in a separate section of the system, or both.

But enough background! Here's how we made commenting more accessible on ezsystems.ca:

Download the powercontent extension

First, we downloaded the powercontent extension by Kristof Coomans and placed the powercontent folder in the extension folder in our eZ Publish installation.

(This extension allows the publication of content objects without first having to go through the Draft stage. There are some good instructions and examples on that extension's page.)

Activate the extension, create the appropriate access policies

For the initial setup, we must do three things:

• Activate the powercontent extension. In the Administration Interface, click the Setup tab, then the Extensions link. Then, mark the Active checkbox beside the extension and click the Apply changes button.
• Grant access to Anonymous users to be able to create comments (by default, you have to be a registered user to comment). In the Administration Interface, click the User accounts tab, then the Roles and Policies link. Grant access to Anonymous users to the content module, to the create function, to the Comment class, under an object of the Blog post class.
• Grant access to Anonymous users to the powercontent module, to all functions.

Policies for the Anonymous role

Edit the Comment content class

Edit the Comment content class to add the Email (required) and URL (not required) attributes. This is done under the Classes link under the Setup tab.

Elements of the comment form

Gather a few pieces of information that will be needed to implement a form that uses the extension.

• The Class ID of the Comment class (13).

  <input type="hidden" name="ClassID" value="13" />

• Construct the Comment button that goes at the bottom of the form (since the Send for publishing or Discard draft buttons are not needed in this case).

  <input class="button" type="submit" name="CreateButton" value="Comment" />

• Construct a hidden field that specifies the parent Node ID.

  <input type="hidden" name="NodeID" value="{$node.main_node_id}" />

• Construct a hidden field that specifies that the object should be published immediately.

  <input type="hidden" name="DoPublish" value="yes" />

Edit the Blog post template

Now that we have all the necessary pieces set up, here is the code we implemented in the /extension/ezwebin/design/ezwebin/override/templates/full/blogpost.tpl template, to show the comment form:

<div class="class-comment">
<form method="post" action={"powercontent/action"|ezurl} enctype="multipart/form-data">

<div class="attribute-header">
       <h1 class="long">New Comment</h1>
</div>

{def $current_user=fetch( 'user', 'current_user' )}
{if $current_user.is_logged_in}
<input type="hidden" name="powercontent_author_ContentObjectAttribute_ezstring_data_text_pcattributeid" value="{$current_user.contentobject.name|wash}" />
<input type="hidden" name="powercontent_email_ContentObjectAttribute_data_text_pcattributeid" value="{$current_user.email|wash}"/>
{else}
    <div class="block">
              <label>Name (required)</label><div class="labelbreak"></div>
       <input class="box" type="text" size="70" name="powercontent_author_ContentObjectAttribute_ezstring_data_text_pcattributeid" value="" />
    </div>
    <div class="block">
              <label>Email address (required) (will not be published)</label><div class="labelbreak"></div>
       <input class="box" type="text" size="70" name="powercontent_email_ContentObjectAttribute_data_text_pcattributeid" value="" />
    </div>
{/if}
    <div class="block">
              <label>Website</label><div class="labelbreak"></div>
       <input class="box" type="text" size="70" name="powercontent_url_ContentObjectAttribute_ezurl_url_pcattributeid" value="" />
    </div>
    <div class="block">
              <label>Subject (required)</label><div class="labelbreak"></div>
       <input type="hidden" name="NodeID" value="{$node.main_node_id}" />
 <input type="hidden" name="ClassID" value="13" />
<input type="hidden" name="DoPublish" value="yes" />
<input type="hidden" name="powercontent_url_ContentObjectAttribute_ezurl_text_pcattributeid" value="URL" />
       <input class="box" type="text" size="70" name="powercontent_subject_ContentObjectAttribute_ezstring_data_text_pcattributeid" value="" />
    </div>

    <div class="block">
              <label>Message (required)</label><div class="labelbreak"></div>
       <textarea class="box" cols="70" rows="10" name="powercontent_message_ContentObjectAttribute_data_text_pcattributeid"></textarea>

    </div>

    <div class="buttonblock">
        <input class="button" type="submit" name="CreateButton" value="Comment" />
    </div>
</form>
</div>

Tweak the comment display

To use the user-supplied URL as a link to their name whenever their comment is displayed, we tweaked the comment template at extension/ezwebin/design/ezwebin/override/templates/line/comment.tpl:

<p class="author">{if is_string($node.data_map.url.content)}<a href="{$node.data_map.url.content}" rel="nofollow">{$node.data_map.author.content|wash}</a>
{else}{$node.data_map.author.content|wash}{/if}</p>

Display comments in ascending order by date

For a usability tweak, we want to display the latest comments at the bottom of the list of comments, so that comments display in ascending order based on date. Therefore, we added the following to settings/override/fetchalias.ini.append.php:

[comments]
Module=content
FunctionName=list
Constant[sort_by]=published;1
Parameter[parent_node_id]=parent_node_id
Constant[class_filter_type]=include
Constant[class_filter_array]=comment

More user-friendly error messages

As another usability tweak, we edited the comment edit view template at extension/ezwebin/design/ezwebin/override/templates/edit/comment.tpl so that whenever someone forgets to fill in a required field (such as their name or email address) or mistypes some information (such as if they supply an invalid email address), they are redirected to an error page that keeps the values in the form fields that they have already filled in.

Form feedback with filled in fields

It is frustrating when you make a mistake on a comment form and you find that all of the information you entered has been erased!

<div class="content-edit">
<div class="class-comment">
<form method="post" action={"powercontent/action"|ezurl} enctype="multipart/form-data">

<div class="attribute-header">
       <h1 class="long">New Comment</h1>
</div>

{include uri="design:content/edit_validation.tpl"}
{def $current_user=fetch( 'user', 'current_user' )}
{if $current_user.is_logged_in}
<input type="hidden" name="powercontent_author_ContentObjectAttribute_ezstring_data_text_pcattributeid" value="{$current_user.contentobject.name|wash}" />
<input type="hidden" name="powercontent_email_ContentObjectAttribute_data_text_pcattributeid" value="{$current_user.email|wash}"/>
{else}
    <div class="block">
              <label>Name (required)</label><div class="labelbreak"></div>
       <input class="box" type="text" size="70" name="powercontent_author_ContentObjectAttribute_ezstring_data_text_pcattributeid" value="{ezhttp(
'powercontent_author_ContentObjectAttribute_ezstring_data_text_pcattributeid', 'post' )|wash()}" />
    </div>
    <div class="block">
              <label>Email address (required) (will not be published)</label><div class="labelbreak"></div>
       <input class="box" type="text" size="70" name="powercontent_email_ContentObjectAttribute_data_text_pcattributeid" value="{ezhttp(
'powercontent_email_ContentObjectAttribute_data_text_pcattributeid', 'post' )|wash()}" />
    </div>
{/if}
    <div class="block">
              <label>Website</label><div class="labelbreak"></div>
       <input class="box" type="text" size="70" name="powercontent_url_ContentObjectAttribute_ezurl_url_pcattributeid" value="{ezhttp(
'powercontent_url_ContentObjectAttribute_ezurl_url_pcattributeid', 'post' )|wash()}" />
    </div>
    <div class="block">
              <label>Subject (required)</label><div class="labelbreak"></div>
       <input type="hidden" name="NodeID" value="{ezhttp('NodeID', 'post' )|wash()}" />
 <input type="hidden" name="ClassID" value="13" />
<input type="hidden" name="DoPublish" value="yes" />
<input type="hidden" name="powercontent_url_ContentObjectAttribute_ezurl_text_pcattributeid" value="URL" />
       <input class="box" type="text" size="70" name="powercontent_subject_ContentObjectAttribute_ezstring_data_text_pcattributeid" value="{ezhttp(
'powercontent_subject_ContentObjectAttribute_ezstring_data_text_pcattributeid', 'post' )|wash()}" />
    </div>

    <div class="block">
              <label>Message (required)</label><div class="labelbreak"></div>
       <textarea class="box" cols="70" rows="10" name="powercontent_message_ContentObjectAttribute_data_text_pcattributeid">{ezhttp(
'powercontent_message_ContentObjectAttribute_data_text_pcattributeid', 'post' )|wash()}</textarea>

    </div>

    <div class="buttonblock">
        <input class="button" type="submit" name="CreateButton" value="Comment" />
    </div>
</form>
</div>
</div>