Widget de Avaliações para a página inicial
Monta um carrossel com as últimas avaliações que a loja virtual recebeu. Geralmente é utilizado na página inicial, mas pode ser colocado onde desejar.
# HTML
{% set avaliacoes = store.getRatings() %}
{% if avaliacoes.items|length > 0 %}
<section id="widget_avaliacoes" class="block mb-4">
<div class="central">
<h2 class="titulo">{{ global.textos_painel.home_avaliacoes ?: 'O QUE ESTÃO FALANDO DA GENTE' }}</h2>
<div class="itens owl-carousel owl-theme px-3 mb-4">
{{ avaliacoes.raw }}
</div>
<div class="row mb-4">
<div class="col text-center">
<a href="avaliacoes/" class="text-dark">Ver todas as avaliações</a>
</div>
</div>
</div>
</section>
<script>
$(function(){
$('#widget_avaliacoes .itens').owlCarousel({
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
loop: $('#widget_avaliacoes .itens .item').length > 3 ? true : false,
dots: true,
nav: false,
margin: 15,
animateOut: 'bounceOutLeft',
animateIn: 'bounceInRight',
responsive: {
0: {
items: 1,
},
598: {
items: 2,
},
800: {
items: 3,
},
1024:{
items: 4,
}
}
});
});
</script>
{% endif %}
// CSS
#widget_avaliacoes{
.itens{
width: 100%;
float: left;
.item{
width: calc(100% - 6px);
float: left;
text-align: center;
margin: 3px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
background-color: #FFF;
padding: 10px;
border-radius: 4px;
height: 100%;
.votos{
font-size: 22px;
margin-bottom: 10px;
color: #DDD;
.fa-star{
color: #FFD700;
}
}
.produto{
font-size: 14px;
line-height: 16px;
margin-bottom: 10px;
a{
color: inherit;
text-decoration: underline !important;
}
}
.comentario{
margin-bottom: 10px;
}
}
}
}