Antes de tudo, é necessário inserir nossa div que faz aparecer os reviews na loja (seja por html ou por javascript). Nela temos o campo 'data-qty' nele é limitado o total de testemunhos que vai ser carregado. Colocamos como recomendado 9 testemunhos mas se quiserem podem ser mais ou menos:
<div class="yv-testimonial" data-qty="9"></div>
É necessário inserir o css do slick, então dentro da tag <head> do seu html é necessário colocar o css:
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
É necessário alterar o template default dos testemunhos para colocar a classe referência ("testemunhos-slide") para o slick iniciar o carrosel.
Basta ir em Personalizar > Template > Review de Loja > Testemunhos
Alterar a tag:
<div id="yv-testimonial" class="yv-bootstrap" style="background-color: initial">
por
<div id="yv-testimonial" class="yv-bootstrap testemunhos-slide" style="background-color: initial">
Depois disso é necessário colocar o nosso css padrão para os testemunhos, é possível ser feito a personalização do mesmo também.
Pode ser colocado em um documento css da loja ou no nosso css através da nossa ferramenta.
Se for em nossa ferramenta, basta ir em Personalizar > Template > Outros > customstyle.css e colocar o código abaixo:
.yv-testimonial { overflow: hidden; clear: both; display: none; } .yv-bootstrap .slick-arrow { border: 0; background-color: transparent; background-image: url(https://yv-misc.s3.amazonaws.com/customers/Maximustecidos/arrow.png); width: 8px; height: 13px; background-attachment: scroll; background-repeat: no-repeat; -webkit-appearance: none !important; text-indent: -9999px; white-space: nowrap; position: absolute; z-index: 5; top: 25%; transform: none !important; } .yv-bootstrap .slick-prev { transform: rotate(180deg); left: 0; } .yv-bootstrap .slick-next { left: inherit; right: 0; } .yv-testimonial .yv-bootstrap .slick-list { width: 922px; height: auto; overflow: hidden; margin: 0 auto; } @media (max-width: 768px) { .yv-testimonial .yv-bootstrap .slick-list { width: 305px !important; } .yv-bootstrap .slick-next { right: 0 !important; } .yv-bootstrap .slick-prev { left: 0 !important; } }
Após tudo isso, é necessário inicar o slick. O código em javascript abaixo deve ser inserido na nossa ferramenta, neste caso por gentileza entre em contato conosco.
njQuery(window).load(function(){ jQuery('.yv-testimonial').show(); if( njQuery('.testemunhos-slide').length ) { njQuery('.testemunhos-slide').yvslick({ infinite: false, slidesToShow: 3, slidesToScroll: 3, variableWidth: true, responsive: [ { breakpoint: 800, settings: { slidesToShow: 1, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); } });
É possível configurar quais testemunhos serão exibidos acessando Configurações > Testemunhos em nossa ferramenta.