Чанки

Все чанки разделены на три группы:

• Дефолтные — используют CSS-классы xcomm3x-* из встроенной темы
• Bootstrap 5 — примеры на Bootstrap 5, без xcomm3x-* классов
• UIKit 3 — примеры на UIKit 3, без xcomm3x-* классов

Примеры можно скопировать и адаптировать под любой CSS-фреймворк — все JS-хуки работают через data-xc-* атрибуты, не через классы.

Дефолтные чанки

xcomm3x_comment_item

Шаблон одного комментария в треде.

Плейсхолдеры:

Обязательные data-* атрибуты (нужны JS):

• data-xc-comment="[[+id]]" — на корневом элементе комментария
• id=\"comment-[[+id]]\" — на корневом элементе, на него ведёт ссылка из писем
• data-depth="[[+depth]]" — на корневом элементе
• data-xc-edit-area="[[+id]]" — контейнер для формы редактирования
• data-xc-reply-area="[[+id]]" — контейнер для формы ответа

xcomm3x_thread_outer

Обёртка всего треда комментариев.

Плейсхолдеры:

Обязательные data-* атрибуты:

• data-xc-thread — на обёртке
• data-resource-id="[[+resource_id]]" — на обёртке
• data-block-key="[[+block_key]]" — на обёртке

xcomm3x_post_form

Форма добавления нового комментария.

Плейсхолдеры:

Обязательные data-* атрибуты:

• data-xc-form — на теге <form>
• data-resource-id="[[+resource_id]]" — на <form>
• data-block-key="[[+block_key]]" — на <form>
• data-xc-result — на контейнере для сообщения об успехе/ошибке
• data-resource-id и data-block-key — также на data-xc-result

Обязательные скрытые поля:

<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-поле (защита от спама):

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

xcomm3x_guest_fields

Поля имени и email для незарегистрированных пользователей. Выводится внутри [[+guest_fields]] в форме.

Обязательные имена полей: author_name, author_email.

xcomm3x_reply_form

Форма ответа на комментарий. Загружается по AJAX при клике «Ответить».

Плейсхолдеры:

Обязательные data-* атрибуты:

• data-xc-reply-form="[[+parent_id]]" — на теге <form>
• data-xc-reply-result="[[+parent_id]]" — на контейнере для результата

Обязательные скрытые поля:

<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]]">

Кнопка «Отмена» должна иметь data-xc-cancel="[[+parent_id]]".

xcomm3x_edit_form

Форма редактирования комментария. Загружается по AJAX при клике «Редактировать».

Плейсхолдеры:

Обязательные data-* атрибуты:

• data-xc-edit-form="[[+id]]" — на теге <form>

Обязательные скрытые поля:

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

Кнопка «Отмена» должна иметь data-xc-edit-cancel="[[+id]]".

xcomm3x_reply_btn

Кнопка «Ответить». Выводится внутри [[+reply_btn]] в чанке комментария.

Плейсхолдеры: [[+id]], [[+resource_id]], [[+block_key]].

Обязательные data-* атрибуты:

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

xcomm3x_edit_btn

Кнопка «Редактировать». Выводится внутри [[+edit_btn]].

Плейсхолдеры: [[+id]].

Обязательный data-* атрибут: data-xc-edit="[[+id]]".

xcomm3x_delete_btn

Кнопка «Удалить». Выводится внутри [[+delete_btn]].

Плейсхолдеры: [[+id]], [[+token]].

Обязательные data-* атрибуты:

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

xcomm3x_load_more

Кнопка «Загрузить ещё». Выводится после списка комментариев если есть следующая страница.

Плейсхолдеры: [[+cursor]], [[+cursor_date]], [[+load_more_tpl]], [[+limit]].

Обязательные data-* атрибуты:

• data-xc-load-more-wrap — на контейнере кнопки
• data-xc-load-more="1" — на самой кнопке
• data-cursor="[[+cursor]]" — на кнопке
• data-cursor-date="[[+cursor_date]]" — на кнопке
• data-load-more-tpl="[[+load_more_tpl]]" — на кнопке; подписанное имя этого чанка, без него следующие страницы выводят кнопку по умолчанию
• data-limit="[[+limit]]" — на кнопке; размер следующей порции, без него берётся xcomm3x.comments_per_page

xcomm3x_no_comments

Сообщение когда комментариев нет. Произвольный HTML. Атрибут data-xc-no-comments на корневом элементе позволяет убрать сообщение после первого комментария.

Примеры Bootstrap 5

Примеры UIKit 3

Примечания

Функциональные классы в [[+body]] и [[+vote_widget]]

Следующие классы генерируются PHP-кодом и присутствуют во всех темах — они нужны JS и не могут быть удалены:

Создание собственной темы

Скопируй любой набор example-чанков (BS5 или UIKit3), переименуй по своему принципу, замени CSS-классы на свои, укажи новые имена в параметрах сниппетов. JS-логика работает исключительно через data-xc-* атрибуты.