Star Ranking

Snippet para listar o ranking do produto em forma de estrelas

HTML


{#
# Listagem de estrelas Avaliação Produto
# elements/snippets/ranking.html
#}
<span class="ranking">
   {% if ranking.rating > 0 %}
       {% for star in 1..ranking.rating %}
           <span class="glyphicon glyphicon-star" aria-hidden="true"></span>
       {% endfor %}
       {% if ranking.rating < 5 %}
          {% for j in 0..ranking.rating % 5  %}
               <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
           {% endfor %}
       {% endif %}
   {% endif %}
</span>

CSS



.product a > .ranking{
	display:none;
	font-size:16px;
	position:absolute;
    left: 0;
    top: 20%;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index:11;
	width:120px;
}
.product a:hover > .ranking{display: block;}
.product a:after{
    background-color: rgba(255,255,255,0.8);
    content: "";
    opacity: 0;
    visibility: hidden;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 10;
    -webkit-transition: all 0.2s ease 0s;
       -moz-transition: all 0.2s ease 0s;
        -ms-transition: all 0.2s ease 0s;
         -o-transition: all 0.2s ease 0s;
            transition: all 0.2s ease 0s;

}
.product a:hover:after,
.product a:hover:before{
    opacity: 1;
    visibility: visible;
}

Exemplo

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' {"ranking": product.ranking } %}