Skip to content

blog-add-comment-modal

The blog_add_comment_modal macro is used to render a form in a modal responsible for adding comments on a blog article page. Internally it uses blog-article-comment-form webcomponent.

Definition

{% blog_add_comment_modal(blogArticle, options) %}

Input parameters

blogArticle

BlogArticle BlogArticle object represents a single blog article in the storefront.

options

object

Option key Type Default Required Description
options.modalName string null yes unique name of the modal.
options.instanceId string null yes unique identifier - commonly provided by special module variable moduleInstance

Example

Renders modal with form to add comment to blog article with ID equal 1.

Remember that modals always comes hidden!

This modal will render, but You have to open it with javascript or h-modal-opener webcomponent. 

{% from "@macros/blog_add_comment_modal.twig" import blog_add_comment_modal %}

{% set blogArticle = ObjectApi.getBlogArticle(1) %}

{{
    blog_add_comment_modal(blogArticle, {
        instanceId: 'some-unique-id',
        modalName: 'some-modal-name'
    })
}}

Example

Renders add comment blog modal form with modal opener button. 

{% from "@macros/blog_add_comment_modal.twig" import blog_add_comment_modal %}

{% set blogArticle = ObjectApi.getBlogArticle(1) %}

<h-modal-opener name="some-modal-name">
    <button class="btn btn_secondary btn_s">
        Write a comment
    </button>
</h-modal-opener>

{{
    blog_add_comment_modal(blogArticle, {
        instanceId: 'some-unique-id',
        modalName: 'some-modal-name'
    })
}}

h-modal-opener "name" and "modalName" must be the same!

Macro source code

{% macro blog_add_comment_modal(blogArticle, options) %}
    {% from "@macros/image.twig" import image %}
    {% from "@macros/control_textarea.twig" import control_textarea %}
    {% from "@macros/control_input.twig" import control_input %}
    {% from "@macros/modal_header.twig" import modal_header %}

    <h-modal class="blog-article-comments__modal modal-wrapper_s" id="{{ options.modalName }}" hidden>
        {{
            modal_header(translate('Comment the entry'), {
                cssClasses: 'blog-article-comments__modal-header'
            })
        }}

        <h-modal-body>
            <blog-article-comment-form module-instance-id="{{ options.instanceId }}" blog-article-id="{{ blogArticle.id }}">
                <div slot="form">
                    {{
                        control_textarea({
                            label: translate('Write a comment'),
                            id: "blog-article-comments-form-comment-#{ post.id }",
                            name: 'comment'
                        })
                    }}

                    {{
                        control_input({
                            label: translate('Your name'),
                            id: "blog-article-comments-form-username-#{ post.id }",
                            name: 'username'
                        })
                    }}

                    <flash-messenger class="flash-messenger control" name="blog-article-comments-form-{{ options.instanceId }}"></flash-messenger>

                    <div class="mb-xs-4">
                         <button type="submit" class="modal__btn btn btn_primary btn_full-width">{{ translate('Add comment') }}</button>
                    </div>
                </div>
            </blog-article-comment-form>
        </h-modal-body>
    </h-modal>
{% endmacro %}

Webcomponents reference