comments

Container Layout

<div class="cms_style_holder">
    <div class="cms_container">
        <div class="cms_comments cmsCommentsHolder">
            <div class="comment-list">
                <div class="cms_add_comment_form">
                    {% if request.is_logged %}
                        <form class="cmsCreateThreadForm cms_comments-form" action="/public/api/comment/{{ this.moduleItemId }}?layout={{ this.CommentLayout }}&threadLayout={{this.CommentLayout}}&commentLayout={{this.commentLayout}}">
                            <div class="cms_add_comment_form__top">
                                <h3 class="cms_add_comment_form__heading">Add a Comment</h3>
                                <div class="cms_star cms_star__holder cms_star__holder--right">
                                    <label for="r1" class="cms_star__title">Rating</label>
                                    <div class="cms_star__rating">
                                       
                                        <input type="radio" value="100" name="rating" id="r5">
                                        <label for="r5"></label>

                                        <input type="radio" value="80" name="rating" id="r4">
                                        <label for="r4"></label>

                                        <input type="radio" value="60" name="rating" id="r3">
                                        <label for="r3"></label>

                                        <input type="radio" value="40" name="rating" id="r2">
                                        <label for="r2"></label>

                                        <input type="radio" value="20" name="rating" id="r1">
                                        <label for="r1"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="cms_comments-form__body">
                                <textarea name="postComment" placeholder="Comment" class="cms_comments-form__textarea"></textarea>
                                <input type="submit" class="system_button" value="Post"/>
                            </div>
                        </form>
                    {% endif %}
                </div>
                <hr>
                <div class="cmsCommentsThreadsHolder">
                    {% if this.Items.size > 0 %}
                        {% include "/{{this.CommentLayout}}" %}
                    {% else %}
                        <p class="cmsNoCommentsMessage">No comments yet</p>
                    {% endif %}
                </div>
                {% if this.Pagination.CurrentPage < this.Pagination.NumberOfPages %}
                    <a href="/public/api/comment/flat/load-more/{{ this.moduleItemId }}" data-current_page="{{ this.Pagination.CurrentPage }}" data-number_of_pages="{{ this.Pagination.NumberOfPages }}" data-page="2" data-comment_limit="{{ this.Params.limit }}" data-comment_layout="{{ this.CommentLayout }}" class="cms_comment__button cms_comment__button cms_comment__button--indent cmsFlatLoadMoreButton">
                        <svg width="14" height="14" aria-hidden="true" focusable="false" data-prefix="fas"
                             data-icon="caret-down" class="svg-inline--fa fa-caret-down fa-w-10" role="img"
                             xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                            <path fill="currentColor"
                                  d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
                        </svg>
                        SHOW MORE</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

Comment Layout

{% for comment in this.items %}
    <div class="cms_comment cmsCommentHolder">
        <div class="cms_comment__top">
            <div class="cms_comment__title">
                <h3 class="cms_comment__user">{{ comment.AuthorFirstName }} {{ comment.AuthorLastName }}</h3>
                <time class="cms_comment__date" datetime="2020-02-04">{{ comment.DateAdded | date: '%B %d, %Y at %l:%M %P' }}</time>
            </div>
            <div class="cms_star cms_star__holder cms_star__holder--right">
                <label for="comment-r1-{{comment.Id}}" class="cms_star__title">Rating</label>
                <div class="cms_star__rating cms_star__rating--onlyread">
                    
                    <input type="radio" value="100" name="rating-{{comment.Id}}" id="comment-r5-{{comment.Id}}" {% if comment.Rating == 100 %} checked {% endif %} >
                    <label for="comment-r5-{{comment.Id}}"></label>
                    
                    <input type="radio" value="80" name="rating-{{comment.Id}}" id="comment-r4-{{comment.Id}}" {% if comment.Rating == 80 %} checked {% endif %} >
                    <label for="comment-r4-{{comment.Id}}"></label>
                    
                    <input type="radio" value="60" name="rating-{{comment.Id}}" id="comment-r3-{{comment.Id}}" {% if comment.Rating == 60 %} checked {% endif %} >
                    <label for="comment-r3-{{comment.Id}}"></label>

                    <input type="radio" value="40" name="rating-{{comment.Id}}" id="comment-r2-{{comment.Id}}" {% if comment.Rating == 40 %} checked {% endif %} >
                    <label for="comment-r2-{{comment.Id}}"></label>

                    <input type="radio" value="20" name="rating-{{comment.Id}}" id="comment-r1-{{comment.Id}}" {% if comment.Rating == 20 %} checked {% endif %} >
                    <label for="comment-r1-{{comment.Id}}"></label>
                </div>
            </div>
        </div>
        <div class="cms_comment__content">
            <p> {{ comment.body | replace: "\n", "<br>" }}</p>
        </div>
        <div class="cms_comment__bottom">
            {% if comment.Author.Id == request.currentmember.id %}
                <div class="cms_comment__buttons">
                    <a href="javascript:" class="cms_comment__button cms_comment__button--light cmsOpenEditCommentFormButton">Edit</a>
                    <a href="/public/api/comment/delete/{{ comment.Id }}" class="cms_comment__button cms_comment__button--light cmsDeleteCommentButton">Delete</a>
                </div>
            {% endif %}
        </div>
        {% if comment.Author.Id == request.currentmember.id %}
            <div class="cms_comment__form cmsEditCommentFormHolder" style="display: none;">
                <form class="cmsEditCommentForm" action="/public/api/comment/{{ comment.Id }}?layout={{this.CommentLayout}}&threadLayout={{this.CommentLayout}}&commentLayout={{this.commentLayout}}">
                    <textarea name="postComment" id="" cols="30" rows="10" class="cms_comment__textarea">{{ comment.body }}</textarea>
                    <input type="submit" value="Save" class="system_button">
                </form>
            </div>
        {% endif %}
    </div>
{% endfor %}

JSON Output

You can output the full JSON for your component data by referencing the root Liquid object {{this}} in your module’s layouts, or directly on your page, if using the collectionVariable parameter in your component tag.

For example:

{% component type: ... collectionVariable: "myData" %}

You can then render the JSON like so:

{{myData}}

For more details on using this approach, see Part 2 of the free ‘Learning Liquid Course’.

Rendering Property Values

This data is also accessible directly on the Page or Template via a Liquid Collection by adding collectionVariable to the Component.

An example using collectionVariable with value "commentsData":

{% component moduleItemId: "2280", type: "comments", collectionVariable: "commentsData" %}

Accessing a specific item within the collection. In this case the third item (zero based index), which in our example would render the value Love the writing style. Keep it up.

{{commentsData.items[2]['Body']}}