Skip to content

Product Rating Form

This webcomponent is responsible for rendering rating form for a product. To render form fields we have to add children element with slot="form" attribute and add form fields there. Two mandatory attributes (productId and moduleInstanceId) are used in form-connector and action attribute in form element which are used in this component.

This webcomponent requires the consent to collecting functional cookies to be granted. Otherwise children inside slot="disabled-form" will be rendered along with a message box that reminds to accept those cookies.

Attributes

Attribute name Type Description
productId (mandatory) string id of the product that component should refer to
moduleInstanceId (mandatory) string instance id of the module that component should refer to
consents (optional) boolean Indicates whether the consents are active in the shop or not. If set to true and consent to functional cookies is not granted, a link that opens the consents-modal will appear in the appropriate message box. If set to false no link will appear in the message box.

DOM events

This webcomponent listens to the following DOM events:

Example

<product-rating-form product-id="5" module-instance-id="15" consents>
    <div slot="form">
        <control-connector class="control">  
            <h-control>
                <h-control-label class="control__label">
                    <label class="label">Rate the product</label>
                </h-control-label>

                <h-control-content class="control">
                    <h-control-element class="control__element">
                        <h-input controlId="rating" controlName="rating">
                            <h-input-control></h-input-control>
                        </h-input>
                    </h-control-element>
                </h-control-content>
            </h-control>
        </control-connector>

        <button type="submit" class="modal__btn btn">Add feedback</button>
    </div>
</product-rating-form>

<product-rating-form product-id="5" module-instance-id="15" consents>
    <form-connector submit-strategy="frontApi" id="product-rate-and-review-form-connector-15">
        <form method="post" id="product-rate-and-review-form-15" action="/webapi/front/pl_PL/products/5/review/" novalidate="">
            <control-connector class="control">  
                <h-control>
                    <h-control-label class="control__label">
                        <label class="label">Rate the product</label>
                    </h-control-label>

                    <h-control-content class="control">
                        <h-control-element class="control__element">
                            <h-input controlid="rating" controlname="rating">
                                <h-input-control class="input__control">
                                    <input type="text" id="rating" name="rating" value="">
                                </h-input-control>
                            </h-input>
                        </h-control-element>
                    </h-control-content>
                </h-control>
            </control-connector>

            <button type="submit" class="modal__btn btn">Add feedback</button>
        </form>
    </form-connector>
</product-rating-form>

Webcomponents reference