Setup Documentation | Aspiresoft Documentation

Adding Comments to the Site

✔ How to add comments to a CMS page?

Usually, the ability to make comments is a nice feature to have on the News or Blog pages. However, you may even decide to have it on regular CMS pages too.

To decide how to implement it, first ask yourself if you want to add it just to a page or two or are you going to allow your site's visitors to leave comments on a regular basis under many of your articles. If it’s just one or two pages, there is a simple way that you willl find describes below.

If not, it’s better to take a couple of extra-steps once, than copy/pasting things over and over again.

Make sure the “Comments” Module is installed. If you don’t see the Comments module, please contact support.

Open the CMS module, find the page where you want comments, then just place the following snippet to your CMS page in “Source View”

<h2>Comments</h2>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

/*]]>*/</script>

Congratulations, you are done!

However, there is a cleaner way that will make it easier for you to reuse it on other CMS pages without copy / pasting so much code every time.

1. First, make sure that “Comments” Module is installed. If you don't see it on your website's dashboard, contact support.

2. Add the following snippet to “Custom Settings” of CMS Module

<label data-help-id="page-header-options-label" for="show-comments">Show Comments</label>

</div>

3. Add the following code to Library Module and name it “CMS Comments”:

<h2>Comments</h2>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

/*]]>*/</script>

4. Add the following snippet to the “Designer” Module (usually under <sys:content/> tag)

<sys:if tags="show-comments"><sys:variable name="CMS Comments"/></sys:if>

That’s all, you are done!

So from now on, to display comments under your article, go to Settings of your CMS and check the “Show Comments” checkbox.

✔ How to add comments to News or Blog?

If you have News, Events or Webinars on your website, you may want people to share their views below the posts.

1. First, make sure that “Comments” Module is installed. If you don't see it on your website's dashboard, contact support

2. Insert the following snippet into the XSLT template wherever you want the comments to show:

<sys:cmt-comments-messages/>

<sys:cmt-comments xslt="comments-responsive.xsl" external-id="news-{@id}"/>

</div>

<sys:cmt-post-comment xslt="post-comment-form-responsive.xsl" external-id="news-{@id}"/>

</div>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

]]></script>

Usually “News” XSLT Template is named “Content” and layout in blog field is “Single Post”

You are done :)

Caution: XSLT Templates are not that complicated if you just want to insert some snippet, but it’s not as straightforward as classic HTML files either, so be careful when editing XSLT.

✔ How to add comments to E-commerce?

Usually when E-commerce is already part of your site, you have the comments working already. If for some reason you don’t, it’s not that hard.

In e-commerce, it makes sense to add rating and comments under “Reviews”.

1. Again, first make sure that Comments Module is installed.If you don't see it on your website's dashboard, contact support

2. Insert the following snippet into e-commerce's itempage template wherever you want to show the Comments section.

<sys:cmt-comments-messages/>

<sys:cmt-post-comment external-id="ecs-product-{id}" xslt="post-comment-form-bootstrap.xsl" mode="*" access="public" rating="1..5"/>

<sys:cmt-comments external-id="ecs-product-{id}" xslt="comments-product.xsl" moderated="no" sortby="date" sortorder="desc"/>

Caution: XSLT Templates are not that complicated if you just want to insert some snippet, but it’s not as straightforward as classic HTML files either, so be careful when editing XSLT.

✖ Changing layout and styling of comments?

Currently there is no administration for changing comments layout.

Ratings

✔ Hiding Ratings

1. For hiding product rating (usually above comments form), you need to remove the following tag from your product XSLT template

2. For hiding stars from comments form and above each comment you can use CSS in Designer module.

Comments Module Administration

1.1. Comments

In this section, you can see a list of all comments. The following details are available:

ID – unique identification of a comment (there is low chance you gonna use it)

Date – date, when comment was actually added.

Author – who posted specific comment.

Comment – text of comment or review.

Post – link to blog post or product frontend.

CRM – link to user details in CRM (if comment was added by registered user).

Mail – e-mail address of the person, who posted comment or review.

Watched – you will see if the comment is "followed" by the submitter, in which case he/she would be notified if a response is made.

Response – shows that the comment was a response to an original comment already on the website.

Module – Defines the module, in which comment was added (E-commerce, Blog and so on).

As in many other modules, you can decide what columns you want to see in the table by clicking “Columns” button or sort by a column by clicking on its title.

Click on a comment to view comment details and change its content or settings.

Comments are separated into two categories, “Unapproved” and “Approved”.

1.1.1. Unapproved

These comments are waiting for an administrator's approval before they can appear on website.

Here you can:

- Approve unapproved comment

- or Remove comment that you consider to be inappropriate.

Just mark the checkbox next to the comment(s), whose status you want to change and click “Approve” if you think it’s relevant to your website content or click “Remove”, if you think that it is not supposed to be seen by your site's visitors.

1.1.2 Approved

These comments are already approved and are displayed on your website.

Here you can:

- Revoke Approval from approved comment if you changed your mind or it was approved by mistake

- Or Remove comment that you consider to be inappropriate.

Just mark the checkbox next to the comment(s), whose status you want to change and click “Remove Approval” if you think the comment got approved by mistake or click “Remove”, if you think that it is not supposed to be seen by your site's visitors.

1.2. Setup

In this section you can find common settings for the module that will influence comments throughout the site (under blog posts, e-commerce products etc.).

1.2.1 Settings

The Settings window contains a bunch of very useful settings:

1.2.1.1. E-mail(s) for approval notification

When a user posts a comment, you will be notified at the e-mail address that is set in this field.

1.2.1.2. Enable SPAM protection

Suspicious comments will not trigger a notification to you for approval, but you will still see them in your list of "unapproved" comments when you open up the Comments module in the admin.

1.2.1.3. Disable CAPTCHA

The reason for having captcha in your comments' submission form disallows robots from posting comments on your website. Downside of it is that it is less clean and makes for a more cluttered layout.

1.2.1.4. Allow Images

Allow users to upload images along with their comments.

1.2.1.5. Maximum Image Width

If you don’t want people to overload your site with huge photos, you can set maximum width in pixels. For example “1000px”.

1.2.1.6. Maximum Image Height

If you don’t want people to overload your site with huge photos, you can set maximum height in pixels. For example “1000px”.

1.2.1.7. Watch Mail Template

Here you can customize content of the e-mail that you will receive when a new reply is posted on your comment.

From

Do-not-reply@YOURSITE.com

Subject

New Reply To Your Comment

Template

You can use the following variables in your content:

${name}

${replyName}

${url}

${unsubscribe}

<p>Hello ${name},</p>

<p>${replyName} has replied to your comment on this page: <a href="${url}">${url}</a> . </p>

<p>"${replyComment}"</p>

<p>Please click on the following link to unsubscribe from such notifications: <a href="${unsubscribe}">${unsubscribe}</a></p>

<p>Have a great day! </p>

If you have a multi-lingual website, there will be fields for each available language.

1.2.2. Access Rights

These are just General Access settings for a group or groups.

Comments Module Usage

This describes usage of Comments Module. Mostly it will be for advanced users or for administrators.

2.1. sys:cmt-comments

Outputs list of comments:

Related to specific product / article / post

Related to module

All the comments for all modules

Global supported variables:

${pageId} - current CMS-page ID

/comments/setup-documentation/ - current url path (for virtual pages).

To list comments for current page use next external-id:

<sys:cmt-comments external-id="cms-page-${pageId}" xslt="comments.xsl" />

<sys:cmt-comments external-id="directory-item-/comments/setup-documentation/" xslt="comments.xsl" />

2.1.1 @external-id

External ID is the id of the item comments belong to: for example product-1236 or page60

External ID is the id of the item

To output product comments, put into the e-commerce item page template

<sys:cmt-comments external-id="ecs-product-{id}" xslt="comments.xsl" />

2.1.2 @xslt

It’s just a name of the xslt template that is located in the folder here:

/html/www.yourwebsite.com/_sitedata/data/comments/xsl

For example:

<sys:cmt-comments external-id="ecs-product-{id}" xslt="comments.xsl" />

2.1.3 @modules

Define the source of comments (from which module) you want to show:

all

blog

news

ecs

cms

or use @external-id attribute instead

2.1.4 @sortby (order-by)

date

submitter

comment

2.1.5 @sortorder (order-dir)

asc

desc

2.2. sys:cmt-post-comment

Creates a new Comment Form

2.2.1. @external-id

@external-id="COMMENT_OWNER_OBJECT"

2.2.2. @external-title

@external-title="COMMENT_OWNER_PAGE_TITLE"

2.2.3. @xslt

@xsl="post-comment-form.xsl”

2.2.4. @rating

@rating="1..5"

@rating is an optional attribute if you want rated comments.

2.2.5. @mode

No idea what is it, but it is used as mode="*"

2.3. sys:cmt-comments-summary

Outputs summary on all comments - average rating and number of comments

2.3.1. @external-id

@external-id="COMMENT_OWNER_OBJECT"

2.3.2. @xslt

@xslt="summary.xsl"

2.4. sys:cmt-comments-messages

Outputs comments module messages inside

</div>

Examples

3.1. CMS

3.1.1. Single page

If you want to set comments to one or a couple of pages, the fastest way is just to place the following code to the content of the CMS page you want to have comments on.

<h2>Comments</h2>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

/*]]>*/</script>

But a cleaner way is to place it to “Library” Module, name it “CMS Comments”, for example...

… and then place the following code to content (source) of CMS page you want to show comment on.

<sys:variable name=”CMS Comments”/>

3.1.2. Multiple pages

If you want to easily switch on comments on a page you want…

Add the following snippet to “Custom Settings” of CMS Module

<label data-help-id="page-header-options-label" for="show-comments">Show Comments</label>

</div>

Add the following code to Library Module and name it “CMS Comments”, for example:

<h2>Comments</h2>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

/*]]>*/</script>

Add the following snippet to Designer Module

<sys:if tags="show-comments"><sys:variable name="CMS Comments"/></sys:if>

And then use checkbox “Show Comments” in custom settings to display it.

3.2. News / Blog

Add the following code to a new variable in the Library Module and name it “CMS Comments”, for example:

<h2>Comments</h2>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

/*]]>*/</script>

Insert the following snippet to “content” of the XSLT template:

<xsl:template name="comments">

<sys:cmt-comments-messages/>

<sys:cmt-comments xslt="comments-responsive.xsl" external-id="news-{@id}"/>

</div>

<sys:cmt-post-comment xslt="post-comment-form-responsive.xsl" external-id="news-{@id}"/>

</div>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

]]></script>

</xsl:template>

3.3. E-commerce

Add the following code to the Library Module and name it “CMS Comments”, for example:

<h2>Comments</h2>

$(document).ready(function() {

var $cmtCommentsMessagesPopup = $('.cmtMessages').not(':empty').html();

$.fn.iPop($cmtCommentsMessagesPopup, 'comments-message-ipop');

});

/*]]>*/</script>

Insert the following snippet to “item” XSLT template:

<sys:cmt-comments-messages/>

<sys:cmt-post-comment external-id="ecs-product-{id}" xslt="post-comment-form-bootstrap.xsl" mode="*" access="public" rating="1..5"/>

<sys:cmt-comments external-id="ecs-product-{id}" xslt="comments-product.xsl" moderated="no" sortby="date" sortorder="desc"/>

3.4. All Comments

You may need to create a page where you would like to see all the comments.

Create a CMS page and place the following snippet there:

You can also show all the comments from a specific module. In this case, use module name instead of “all” in modules attribute

blog

news

ecs

cms