Product Review

The <product-review> webcomponent is used to render product reviews section, and especially rate and review button or information that this product was already reviewed.

Usage requires to add two <product-vote> elements. One of them contain rate and review button which triggers review modal, and the other one contain information that product was already reviewed and this element must have disabled attribute. Based on information getting from the API by selectHasBeenReviewed$ proper element is displayed. All the other information used in this webcomponent can be use to display e.g. star rating or reviews added by other users.

Attributes

Attribute name	Type	Default	Description
product-id	number	null	product id of the product we want to add to favourites

Event Bus events

This webcomponent dispatches the following events with the Event Bus:

• productReview.reviewsRendered

Example

sourceoutputoutput

<product-review product-id="1" class="product-review">
     <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter">
        <div class="grid__col">
            {{ 
                star_score(product.rate, 5, {
                    size: 'xl'
                }) 
            }}
        </div>

        <div class="grid__col">
            <span class="font_semibold">{{ product.rate }}</span>
        </div>
    </div>

    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-4">
        <div class="grid__col">
            <span class="product-review__rate-count">Liczba ocen: {{ product.rateCount }}</span>
        </div>
    </div>

    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-6">
        <div class="grid__col">
            <product-vote>
                <h-modal-opener class="btn btn_secondary btn_s" name="{{ modalName }}">
                    <svg class="icon btn__icon  btn__icon_left">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-star"></use>
                    </svg>
                    Oceń i opisz
                </h-modal-opener>
            </product-vote>

            <product-vote class="info-box" disabled hidden>
                <header class="info-box__header">
                    Dodano już opinię o tym produkcie
                </header>

                <p class="info-box__content">
                    Jeśli dodałeś/-aś recenzję, a nie pojawiłą się na liście, być może oczekuje na moderację.
                </p>
            </product-vote>

            {{ product_rating_and_review_modal_form(product, { instanceId: moduleInstance, modalName }) }}
        </div>
    </div>

    <div class="grid__row">
        <div class="grid__col">
            {% for comment in product.comments %}
                {{ comment(comment) }}
            {% endfor %}
        </div>
    </div>
</product-review>

Displayed when product was not reviewed by this user

<product-review product-id="1" class="product-review">
    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter">
        <div class="grid__col">
                <div class="star-score">     
                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-4">
        <div class="grid__col">
            <span class="product-review__rate-count">Liczba ocen: 0</span>
        </div>
    </div>

    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-6">
        <div class="grid__col">
            <product-vote>
                <h-modal-opener class="btn btn_secondary btn_s" name="product-rating-review-modal-1">
                    <svg class="icon btn__icon  btn__icon_left">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-star"></use>
                    </svg>
                    Oceń i opisz
                </h-modal-opener>
            </product-vote>

            <product-vote class="info-box" disabled hidden>
                <header class="info-box__header">
                    Dodano już opinię o tym produkcie
                </header>

                <p class="info-box__content">
                    Jeśli dodałeś/-aś recenzję, a nie pojawiłą się na liście, być może oczekuje na moderację.
                </p>
            </product-vote>
        </div>
    </div>

    <div class="grid__row">
        <div class="grid__col">
            <!-- Komentarze -->
        </div>
    </div>
</product-review>

Displayed when product was already reviewed by this user

<product-review product-id="1" class="product-review">
    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter">
        <div class="grid__col">
                <div class="star-score">     
                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>

                    <svg aria-hidden="true" class="icon icon_xl icon_no-stroke star-icon" viewBox="0 0 24 24"   fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="..."/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-4">
        <div class="grid__col">
            <span class="product-review__rate-count">Liczba ocen: 0</span>
        </div>
    </div>

    <div class="grid__row grid__row_xs-hcenter grid__row_xs-vcenter mb-xs-6">
        <div class="grid__col">
            <product-vote disabled hidden>
                <h-modal-opener class="btn btn_secondary btn_s" name="product-rating-review-modal-1">
                    <svg class="icon btn__icon  btn__icon_left">
                        <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-star"></use>
                    </svg>
                    Oceń i opisz
                </h-modal-opener>
            </product-vote>

            <product-vote class="info-box">
                <header class="info-box__header">
                    Dodano już opinię o tym produkcie
                </header>

                <p class="info-box__content">
                    Jeśli dodałeś/-aś recenzję, a nie pojawiłą się na liście, być może oczekuje na moderację.
                </p>
            </product-vote>
        </div>
    </div>

    <div class="grid__row">
        <div class="grid__col">
            <!-- Komentarze -->
        </div>
    </div>
</product-review>