product_rating_and_review_form

The product_rating_and_review_form macro is used to render a rating and review form for a given product.

Definition

{% product_rating_and_review_form(options) %}

Input parameters

options

object represents an object of input attributes

Option key	Type	Default	Required	Description
options.instanceId	string	""	yes	An id necessary to make language radio boxes unique. Usually it can just be the module instance id
options.disabled	boolean	false	no	If set to true the form will be disabled

Example

In this example we render a regular rating and review form for a certain product. 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_form.twig" import product_rating_and_review_form %}

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

{{ product_rating_and_review_form({
    instanceId: moduleInstance
}) }}

Macro source code

{% macro product_rating_and_review_form(options) %}
    {% from "@macros/control_textarea.twig" import control_textarea %}
    {% from "@macros/control_input.twig" import control_input %}

    {% set isDisabled = options.disabled %}

    <control-connector class="control">
        <h-control>
            <h-control-label class="control__label label {% if isDisabled %} label_disabled {% endif %}">
                <label>{{ translate('Rate the product') }}</label>
            </h-control-label>

            <h-control-content class="control">
                <h-control-element class="control__element">
                    <star-rating-control {% if isDisabled %}disabled{% endif %}></star-rating-control>

                    <h-input
                        controlId="rating-{{ options.instanceId }}"
                        controlName="rating"
                        type="hidden">
                            <h-input-control type="hidden"></h-input-control>
                    </h-input>
                </h-control-element>
            </h-control-content>
        </h-control>
    </control-connector>

    {{
        control_textarea({
            id: "rating-and-review-review-#{options.instanceId}",
            name: 'review',
            label: translate('Review the product'),
            controlValidators: {
                disabled: isDisabled
            }
        })
    }}

    {{
        control_input({
            id: "rating-and-review-reviewer-#{options.instanceId}",
            name: 'reviewer',
            label: translate('Your name'),
            disabled: isDisabled
        })
    }}

    <flash-messenger
        class="flash-messenger control"
        name="product-rating-form-{{ options.instanceId }}"
    ></flash-messenger>

    <div class="grid__row grid__row_xs-hright mb-xs-4">
        <div class="grid__col grid__col_xs-12">
            <button
                type="submit"
                class="
                    modal__btn
                    btn
                    btn_primary
                    {% if isDisabled %}btn_primary-disabled{% endif %}
                    btn_full-width
                "
            >
                {{ translate('Add feedback') }}
            </button>
        </div>
    </div>
{% endmacro %}

Webcomponents reference

• h-control
• h-input
• h-textarea
• control-connector
• flash-messenger