Star Ranking

Snippet para listar o ranking do produto em forma de estrelas

HTML

{#
  # Listagem de estrelas Avaliação Produto
  # elements/snippets/ranking.html
#}
{% if review.rating > 0 %}
<div class="ranking">
  {% for rating in 1..5 %}
    {% if review.rating >= rating %}
      <div class="icon active">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 329.942 329.942" width="18" height="18" fill="#ffc107"><path d="M329.208,126.666c-1.765-5.431-6.459-9.389-12.109-10.209l-95.822-13.922l-42.854-86.837  c-2.527-5.12-7.742-8.362-13.451-8.362c-5.71,0-10.925,3.242-13.451,8.362l-42.851,86.836l-95.825,13.922  c-5.65,0.821-10.345,4.779-12.109,10.209c-1.764,5.431-0.293,11.392,3.796,15.377l69.339,67.582L57.496,305.07  c-0.965,5.628,1.348,11.315,5.967,14.671c2.613,1.899,5.708,2.865,8.818,2.865c2.387,0,4.784-0.569,6.979-1.723l85.711-45.059  l85.71,45.059c2.208,1.161,4.626,1.714,7.021,1.723c8.275-0.012,14.979-6.723,14.979-15c0-1.152-0.13-2.275-0.376-3.352  l-16.233-94.629l69.339-67.583C329.501,138.057,330.972,132.096,329.208,126.666z"/></svg>
      </div>
    {% else %}
      <div class="icon">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488.022 488.022" width="18" height="18" fill="#ffc107"><path d="M471.563,173.778l-145.5-20.8l-64.4-132c-8-15.4-30-12.2-35.3,0l-64.4,132l-145.6,20.8c-16.4,1-21.6,20.9-10.4,33.2   l105,102.9l-25,144.5c-2.9,17.8,16.7,27.8,28.1,20.8l129.9-68.6l129.9,67.6c13.6,7,29.8-2.8,28.1-19.7l-25-144.6l105-102.9   C494.663,193.478,485.563,175.478,471.563,173.778z M342.663,288.078c-4.2,5.2-6.2,11.4-5.2,17.7l19.7,116.4l-103.9-55.1   c-6.7-2.8-13-2.8-18.7,0l-103.9,55.1l19.7-116.4c1-7.3-1-13.5-5.2-17.7l-84.1-82.1l116.4-16.6c6.2-1,11.4-4.2,14.6-10.4l52-105   l52,105c3.1,5.2,8.3,9.4,14.6,10.4l116.2,16.6L342.663,288.078z"/></svg>
      </div>
    {% endif %}
  {% endfor %}
</div>
{% endif %}

CSS

.product .ranking{
  display:flex;
}
.product .ranking .icon{
  margin: 0 2px;
}

Como usar

Copie o código acima e crie um arquivo separado, ex: elements/snippets/star_ranking.html Faça a chamada desse arquivo onde desejar:

{% element 'snippets/star_ranking' { 'review': product.ranking } %}