Product Rating

product_rating module is used to display rating of the product and link to the product reviews section, link appears only when review module exist on the page, if not, user can use this module only to rate the product by using rating stars

Configuration parameters

none

Module source code

{% set reviewsSettings = ObjectApi.getProductReviewsSettings() %}
{% set shopUrls = ObjectApi.getShopUrls() %}

{% if reviewsSettings.isReviewingEnabled %}
    {% from "@macros/star_score.twig" import star_score %}
    {% from "@macros/product_rating_modal_form.twig" import product_rating_modal_form %}
    {% set product = ObjectApi.getProduct(product_id) %}
    {% set featuredImage = product.featuredImage %}
    {% set modalName = 'product-rating-modal-' ~ moduleInstance %}

    {% if product.comments.count <= 0 and product.rateCount <= 0 %}
        {% set ratingLabel = translate('No ratings and reviews. Go to the Reviews section to rate the product.') %}
    {% elseif product.comments.count <= 0 %}
        {% set ratingLabel = translate('Product rating: %s out of 5 stars. Number of ratings: %s, Number of reviews: %s. Go to the Reviews section to rate the product.', [product.rate|number_format(2), product.rateCount, product.comments.count]) %}
    {% elseif product.rateCount <= 0 %}
        {% set ratingLabel = translate('No product rating. Number of reviews: %s. Go to the Reviews section.', [product.comments.count]) %}
    {% else %}
        {% set ratingLabel = translate('Product rating: %s out of 5 stars. Number of ratings: %s, Number of reviews: %s. Go to the Reviews section.', [product.rate|number_format(2), product.rateCount, product.comments.count]) %}
    {% endif %}

    <product-rating product-id="{{ product.id }}" class="product-rating">
        <div aria-label="{{ ratingLabel }}" slot="rating-with-reviews">
            <h-scroll-to class="product-rating__content link link_no-underline" to="product-reviews">
                <div class="product-rating__stars product-rating__element">
                    {{ star_score(product.rate, { numberOfStars: 5 }) }}
                </div>

                <h-hint class="product-rating__element product-rating__numbers" direction="right" tabindex="0">
                    <span class="product-rating__score">{{ product.rate|number_format(2) }}</span>
                    <span class="product-rating__number-of-votes">({{ translate('Ratings') }}: {{ product.rateCount }} {{ translate('Reviews') }}: {{ product.comments.count }})</span>

                    <h-hint-content>
                        {{ translate('Go to Product feedback') }}
                    </h-hint-content>
                </h-hint>
            </h-scroll-to>
        </div>

        <template slot="rating-without-reviews">
            {% if product.rateCount <= 0 %}
                {% set ratingLabelWithoutReviews = translate('No product rating') %}
            {% else %}
                {% set ratingLabelWithoutReviews = translate('Product rating: %s out of 5 stars. Number of ratings: %s.', [product.rate|number_format(2), product.rateCount]) %}
            {% endif %}

            <div class="product-rating__content" aria-label="{{ ratingLabelWithoutReviews }}">
                <div class="product-rating__stars product-rating__element">
                    {{ star_score(product.rate, { numberOfStars: 5 }) }}
                </div>

                <div class="product-rating__element product-rating__numbers">
                    <span class="product-rating__score">{{ product.rate|number_format(2) }}</span>
                    <span class="product-rating__number-of-votes">({{ translate('Ratings') }}: {{ product.rateCount }})</span>
                </div>

                <product-vote class="product-rating__element">
                    <h-modal-opener class="link product-rating__vote-link" name="{{ modalName }}">{{ translate('Rate') }}</h-modal-opener>
                </product-vote>

                <product-vote class="product-rating__element" disabled hidden>
                    <span class="color_success-500 product-rating__no-vote">{{ translate('Rating added') }}</span>
                </product-vote>
            </div>

            {{ product_rating_modal_form(product, { instanceId: moduleInstance, modalName, imageSize: systemConfig.mSize }) }}
        </template>
    </product-rating>

    {% if product.rate > 0 and product.rateCount > 0 %}
        <script type="application/ld+json">
            {
                "@context": [
                    "http://schema.org/",
                    { "@base": "{{ shopUrls.mainPageUrl.absolute }}" }
                ],
                "@id": "{{ product.url.relative }}",
                "aggregateRating": {
                    "@type": "AggregateRating",
                    "ratingValue": "{{ product.rate }}",
                    "reviewCount": "{{ product.rateCount }}"
                }
            }
        </script>
    {% endif %}
{% endif %}

Webcomponents reference

• product-rating
• h-scroll-to
• h-hint
• product-vote

Macros reference

• star_score
• product_rating_modal_form

Used Object Api methods

• getProduct()
• getProductReviewsSettings()

Used styles

• Product Rating
• Links
• Colors Modifiers

Module configuration schema

[
    {
        "state": "unfolded",
        "label": "General settings",
        "elements": [
            {
                "type": "infobox",
                "name": "infobox",
                "options": {
                    "type": "blank",
                    "message": "#### Related settings%s**in the admin panel:**%s- changing phrases in [translations](%s)%s- enabling opinions about products in [product feedback](%s)%s%s**in the Shoper Visual Editor:**%s- adding the \"Reviews\" module to display product reviews as well",
                    "placeholderValues": [
                        "\n",
                        "\n",
                        "\/admin\/configLanguages\/list",
                        "\n",
                        "\/admin\/configComments",
                        "\n",
                        "\n",
                        "\n"
                    ]
                }
            }
        ]
    }
]