Full example in Twig

Integration example

This is a full example of how your _entry template with comment support may look like.
It shows a comment form for an entry, and the latest 50 comments.

After a comment was posted, a message is shown instead of the form.

You can use parts of the code in an include or embed for reusability and customizability.


{% extends '_layout.twig' %}

{% block main %}

<h1>{{ entry.title }}</h1>
<p>entry contents...</p>

{# start comments #}
{# you may want to put this code in an include or embed for reusability #}

<div id="comments"><!-- anchor --></div>
{# @var commentsWork \twentyfourhoursmedia\commentswork\services\CommentsWorkService #}
{% set commentsWork = craft.commentsWork.service %}
{# check if the user has just posted a comment and provide feedback #}
{% set justPosted = commentsWork.checkJustPosted() %}

{% if justPosted %}
    {# show a message not the form #}
    {% if justPosted.error %}
        <div class="alert alert-danger">
            <p>The comment could not be posted.</p>
        </div>
    {% else %}
        {% if justPosted.status == 'APPROVED' %}
            <div class="alert alert-success"><p>Your comment has been published.</p></div>
        {% elseif justPosted.status == 'PENDING' %}
            <div class="alert alert-warning"><p>Your comment has been posted and is awaiting moderation.</p></div>
        {% else %}
            {# the status is either trashed or spam for some reason,, #}
            <div class="alert alert-danger"><p>Your comment has been posted but has not been not published..</p>
            </div>
        {% endif %}
    {% endif %}
{% else %}
    {# show the form #}
    {% if not currentUser and not commentsWork.allowAnonymous(entry) %}
        <p>Anonymous commenting is not allowed. Please login.</p>
    {% else %}
        <div class="card bg-light">
            <div class="card-header">
                Leave a comment
            </div>
            <div class="card-body">
                <form method="post" action="{{ url('/actions/comments-work/default/post-comment') }}">
                    {{ csrfInput() }}
                    {{ signCommentForm(entry) }}
                    <input name="redirect" value="{{ craft.app.request.url }}#comments" type="hidden"/>
                    <input name="elementId" value="{{ entry.id }}" type="hidden"/>
                    <input name="siteId" value="{{ entry.siteId }}" type="hidden"/>
                    <input name="commentFormat" value="text" type="hidden"/>

                    <div class="form-group">
                        <label for="comment-title">Title</label>
                        <input name="title" id="comment-title" type="text" class="form-control"/>
                    </div>
                    <div class="form-group">
                        <label for="comment-content">Comment</label>
                        <textarea name="comment" rows="5" id="comment-content" class="form-control"></textarea>
                    </div>

                    <div>
                        <input type="submit" class="btn btn-primary" value="Post comment"/>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}
{% endif %}

{# show latest 50 comments#}
<p>{{ commentsWork.countComments(entry) }} total comments</p>

{% set comments = commentsWork.fetchComments(entry, 0, 50) %}
{% for comment in comments %}
    {# @var comment \twentyfourhoursmedia\commentswork\models\CommentModel #}
    <div class="card card bg-light">
        <div class="card-body">
            <div class="row">
                <div class="col-md-2">
                    <img src="https://image.ibb.co/jw55Ex/def_face.jpg" class="img img-rounded img-fluid"
                         width="64">
                    <p class="text-secondary text-center">{{ comment.dateCreated | date }} {{ comment.dateCreated | date('H:i') }}</p>
                </div>
                <div class="col-md-10">
                    {%- if comment.user %}<p><a
                                href="https://maniruzzaman-akash.blogspot.com/p/contact.html"><strong>{{ comment.user.friendlyName }}</strong></a>
                        </p>{% endif -%}
                    {%- if comment.title is not empty %}
                        <p><strong>{{ comment.title }}</strong></p>
                    {% endif -%}
                    {%- if comment.comment is not empty %}
                        <p>
                            {{ comment | commentAsHtml }}
                        </p>
                    {% endif -%}
                </div>
            </div>
        </div>
    </div>
    <br/>
{% endfor %}
{# end comments #}

{% endblock %}