Skip to content

product_rating_and_review_modal_form

The product_rating_and_review_modal_form macro is used to render a modal with a form with rating and review for a given product. This module uses consents to determine whether consent to collecting functional cookies has been granted. Basen on that information adding comments will be enabled or disabled for a specific user.

Definition

{% product_rating_and_review_modal_form(product, options) %}

Input parameters

product

Product represents a Product object of a given product.

options

object represents an object of input attributes

Option key Type Default Required Description
options.modalName string "" yes Unique name of the modal required for the macro to work properly
options.instanceId string "" yes An id necessary to make language radio boxes unique. Usually it can just be the module instance id

Example

In this example we render a regular rating and review form for a certain product. To get the product we use an object api method getProduct(). While using this macro inside a module we can pass a moduleInstance as an instanceId parameter. As specified earlier, usually it does the job.

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

{% set product = ObjectApi.getProduct(product_id) %}

{{ product_rating_and_review_modal_form(product, {
    modalName: 'my-rating-and-review-form-1',
     instanceId: moduleInstance
}) }}

Macro source code

{% macro product_rating_and_review_modal_form(product, options) %}
    {% from "@macros/image.twig" import image %}
    {% from "@macros/icon.twig" import icon %}
    {% from "@macros/modal_header.twig" import modal_header %}
    {% from "@macros/control_textarea.twig" import control_textarea %}
    {% from "@macros/control_input.twig" import control_input %}
    {% from "@macros/product_rating_and_review_form.twig" import product_rating_and_review_form %}

    {% set featuredImage = product.featuredImage %}

    <h-modal class="rating-and-review-modal modal-wrapper_s" id="{{ options.modalName }}" hidden>
        {{
            modal_header(translate('Leave feedback on the product'), {
                cssClasses: 'rating-and-review-modal__header'
            })
        }}

        <h-modal-body>
            <div class="rating-and-review-modal__product grid__row grid__row_xs-vcenter mb-xs-2">
                <div class="rating-and-review-modal__product-image-wrapper grid__col grid__col_xs-auto">
                    {{
                        image({
                            img: {
                                src: featuredImage.thumbnailUrl(options.imageSize, options.imageSize),
                                alt: featuredImage.name,
                                title: featuredImage.name,
                                width: options.imageSize,
                                height: options.imageSize,
                                decoding: 'async',
                                loading: 'lazy'
                            }
                        }, [
                            {
                                src: featuredImage.webpThumbnailUrl(options.imageSize, options.imageSize),
                                type:  'image/webp'
                            }
                        ])
                    }}
                </div>

                <div class="rating-and-review-modal__product-name grid__col grid__col_xs-grow">
                    {{ product.name }}
                </div>
            </div>

            <product-rating-form
                module-instance-id="{{ options.instanceId }}"
                product-id="{{ product.id }}"
            >
                <div slot="form">
                    {{ product_rating_and_review_form({ instanceId: options.instanceId }) }}
                </div>
                <div slot="disabled-form">
                    {{ product_rating_and_review_form({ disabled: true, instanceId: options.instanceId }) }}
                </div>
            </product-rating-form>
        </h-modal-body>
    </h-modal>
{% endmacro %}

ObjectApi methods reference

Webcomponents reference