star_score¶

The star_score macro is used to render a set of star icons.

Definition¶

{% star_score(rate, options) %}

Input parameters¶

rate¶

number represents how many stars should be filled

options (optional)¶

object represents an object of star score attributes

Option key	Type	Default	Required	Description
options.numberOfStars	`number`	5	no	The maximum value of the product rating and also the number of displayed stars
options.size	`string`	`l`	no	The size of the star. Allowed values are: `l`, `xl`, `xxl`
options.isHoverable	`boolean`	false	no	If set to `true`, appropriate styling class will be added to the star scope element.

Example¶

In this example we render a basic star score of 4 out of 5.

{% from "@macros/star_score.twig" import star_score %}

{{ star_score(4) }}

Example¶

In this example we render a store of 2 out of 3 that has a slightly bigger size and is hoverable.

{% from "@macros/star_score.twig" import star_score %}

{{ star_score(2, { numberOfStars: 3, size: 'xl', isHoverable: true }) }}

Macro source code¶

{% macro star_score(rate, options = {numberOfStars: 5, size: 'l', isHoverable: false}) %}
    {% from "@macros/star_filled.twig" import star_filled %}
    {% from "@macros/star_half_filled.twig" import star_half_filled %}
    {% from "@macros/star_empty.twig" import star_empty %}

    <div class="star-score">
        {% for index in 1..options.numberOfStars %}
            {% set maxBoundary = index - 0.4 %}
            {% set minBoundary = index - 0.81 %}

            {% if rate >= index or rate >= maxBoundary %}
                {{ star_filled(options) }}
            {% elseif rate > minBoundary %}
                {{ star_half_filled(options) }}
            {% else %}
                {{ star_empty(options) }}
            {% endif %}
        {% endfor %}
    </div>
{% endmacro %}