Skip to content

product_rating_modal_form

The product_rating_modal_form macro is used to render a rating form for a product in a modal.

Definition

{% product_rating_modal_form(product, options) %}

Input parameters

product

Product represents a Product object from Object Api of the product we want to rate.

options

object represents an object of rating modal form options

Option key Type Default Required Description
options.modalName string "" yes Unique name of the modal, required for a modal to open properly every time
options.instanceId string "" yes An id necessary to make internal macro elements unique. Usually it can just be the module instance id

Example

In this example we render a basic product rating modal form. If using the 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_modal_form.twig" import product_rating_modal_form %}

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

{{ product_rating_modal_form(product, {
    modalName: 'product-modal-1',
    instanceId: moduleInstance
}) }}

Macro source code

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

    {% set featuredImage = product.featuredImage %}

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

        <h-modal-body>
            <div class="rating-modal__product grid__row grid__row_xs-vcenter mb-xs-2">
                <div class="rating-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="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">    
                    <control-connector class="control">  
                        <h-control>
                            <h-control-label class="control__label">
                                <label class="label">{{ translate('Rate the product') }}</label>
                            </h-control-label>

                            <h-control-content class="control">
                                <h-control-element class="control__element">
                                    <star-rating-control></star-rating-control>

                                    <h-input 
                                        controlId="rating" 
                                        controlName="rating"
                                        type="hidden">
                                            <h-input-control type="hidden"></h-input-control>
                                    </h-input>
                                </h-control-element>
                            </h-control-content>
                        </h-control>
                    </control-connector>

                    <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 btn_full-width">{{ translate('Add feedback') }}</button>
                        </div>
                    </div>
                </div>
            </product-rating-form>
        </h-modal-body>
    </h-modal>
{% endmacro %}

Webcomponents reference