product_rating_modal_form¶
The product_rating_modal_form
macro is used to render a rating form for a product in a modal.
Definition¶
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 %}