Chunks

All chunks fall into three groups:

• Default — use the xcomm3x-* CSS classes of the built-in theme
• Bootstrap 5 — Bootstrap 5 examples, without xcomm3x-* classes
• UIKit 3 — UIKit 3 examples, without xcomm3x-* classes

The examples can be copied and adapted to any CSS framework — all JS hooks work through data-xc-* attributes, not classes.

Default chunks

xcomm3x_comment_item

Template of one comment in the thread.

Placeholders:

Required data-* attributes (needed by JS):

• data-xc-comment="[[+id]]" — on the root element of the comment
• id="comment-[[+id]]" — on the root element, links in emails point to it
• data-depth="[[+depth]]" — on the root element
• data-xc-edit-area="[[+id]]" — container for the edit form
• data-xc-reply-area="[[+id]]" — container for the reply form

xcomm3x_thread_outer

Wrapper of the whole comment thread.

Placeholders:

Required data-* attributes:

• data-xc-thread — on the wrapper
• data-resource-id="[[+resource_id]]" — on the wrapper
• data-block-key="[[+block_key]]" — on the wrapper

xcomm3x_post_form

New comment form.

Placeholders:

Required data-* attributes:

• data-xc-form — on the <form> tag
• data-resource-id="[[+resource_id]]" — on <form>
• data-block-key="[[+block_key]]" — on <form>
• data-xc-result — on the container for the success/error message
• data-resource-id and data-block-key — also on data-xc-result

Required hidden fields:

<input type="hidden" name="action" value="Web/PostComment">
<input type="hidden" name="resource_id" value="[[+resource_id]]">
<input type="hidden" name="block_key" value="[[+block_key]]">

Honeypot field (spam protection):

<input type="text" name="website" style="position:absolute;left:-9999px" tabindex="-1" autocomplete="off">

xcomm3x_guest_fields

Name and email fields for guests. Output inside [[+guest_fields]] in the form.

Required field names: author_name, author_email.

xcomm3x_reply_form

Reply form. Loaded via AJAX when “Reply” is clicked.

Placeholders:

Required data-* attributes:

• data-xc-reply-form="[[+parent_id]]" — on the <form> tag
• data-xc-reply-result="[[+parent_id]]" — on the result container

Required hidden fields:

<input type="hidden" name="action" value="Web/PostComment">
<input type="hidden" name="resource_id" value="[[+resource_id]]">
<input type="hidden" name="block_key" value="[[+block_key]]">
<input type="hidden" name="parent_id" value="[[+parent_id]]">

The “Cancel” button must have data-xc-cancel="[[+parent_id]]".

xcomm3x_edit_form

Comment edit form. Loaded via AJAX when “Edit” is clicked.

Placeholders:

Required data-* attributes:

• data-xc-edit-form="[[+id]]" — on the <form> tag

Required hidden fields:

<input type="hidden" name="action" value="Web/UpdateOwnComment">
<input type="hidden" name="id" value="[[+id]]">

The “Cancel” button must have data-xc-edit-cancel="[[+id]]".

xcomm3x_reply_btn

The “Reply” button. Output inside [[+reply_btn]] in the comment chunk.

Placeholders: [[+id]], [[+resource_id]], [[+block_key]].

Required data-* attributes:

• data-xc-reply="[[+id]]"
• data-resource-id="[[+resource_id]]"
• data-block-key="[[+block_key]]"

xcomm3x_edit_btn

The “Edit” button. Output inside [[+edit_btn]].

Placeholders: [[+id]].

Required data-* attribute: data-xc-edit="[[+id]]".

xcomm3x_delete_btn

The “Delete” button. Output inside [[+delete_btn]].

Placeholders: [[+id]], [[+token]].

Required data-* attributes:

• data-xc-delete="1"
• data-id="[[+id]]"
• data-token="[[+token]]"

xcomm3x_load_more

The “Load more” button. Output after the comment list if there is a next page.

Placeholders: [[+cursor]], [[+cursor_date]], [[+load_more_tpl]], [[+limit]].

Required data-* attributes:

• data-xc-load-more-wrap — on the button container
• data-xc-load-more="1" — on the button itself
• data-cursor="[[+cursor]]" — on the button
• data-cursor-date="[[+cursor_date]]" — on the button
• data-load-more-tpl="[[+load_more_tpl]]" — on the button; the signed name of this chunk, without it the next pages show the default button
• data-limit="[[+limit]]" — on the button; the size of the next portion, without it xcomm3x.comments_per_page is used

xcomm3x_no_comments

Message shown when there are no comments. Any HTML. The data-xc-no-comments attribute on the root element lets the message be removed after the first comment.

Bootstrap 5 examples

UIKit 3 examples

Notes

Functional classes in [[+body]] and [[+vote_widget]]

These classes are generated by PHP and are present in all themes — JS needs them and they cannot be removed:

Creating your own theme

Copy any set of example chunks (BS5 or UIKit3), rename them your way, replace the CSS classes with your own and pass the new names in the snippet parameters. The JS logic works exclusively through data-xc-* attributes.