Existem alguns passos muito importantes a serem seguidos antes de efetuar a inserção dos componentes da yourviews no tema da sua loja.
Um dos requisitos obrigatórios é possuir o app da yourviews instalado na sua loja vtexio, para isso, acesse o link abaixo para seguir com o passo a passo de instalação: https://github.com/yourviewsbyhiplatform/documentacoes/blob/master/Instalac%CC%A7a%CC%83o%20do%20App%20Yourviews%20na%20Vtex%20Io.md
Ao seguir estes passos, você estará preparado para instalar e configurar o bloco noa VTEX IO de maneira eficaz, aproveitando ao máximo as funcionalidades oferecidas.
Conhecido como yv-testimonials
, desempenha um papel crucial na experiência de compra online. Esse bloco é especificamente projetado para apresentar as avaliações e opiniões dos clientes sobre a loja, após a conclusão de uma compra.
O bloco de testemunhos é geralmente inserido no código fonte do app tema da sua loja, no arquivo home.json
dentro do bloco store.home
, que normalmente corresponde à página home da loja.
"yv-testimonials"
Embora o bloco de testemunhos seja comumente inserido na página inicial isso não quer dizer que você obrigatoriamente deverá inseri-lo na página home do site, é apenas o usual. Fique a vontade para incluir o componente onde quiser.
O bloco yv-testimonials
pode ser personalizado recebendo alguns blocos filhos que irão compor a sua estrutura, isso é útil para quem deseja criar sua própria estrutura, segue abaixo dois prints padrão e um personalizado:
Para a personalização do bloco de testemunhos, pode-se adicionar alguns blocos filhos para compor cada elemento interno que deseja que seja exibido, segue abaixo uma lista com cada bloco filho e suas devidas informações.
O bloco de testemunhos aceita alguns blocos filhos, são eles:
yv-title
(Título) (documentação)yv-testimonials-content
(Conteúdo) (documentação)yv-flex
(Flex Box) (documentação)yv-rich-text
(Texto) (documentação)
O bloco de testemunhos pode receber uma propriedade importantes para a sua personalização.
A propriedade slidesToShow
recebe um quatro informações, que especificam quantos slides serão exibidos por tamanho de tela, são elas:
tinyMobile
(para telas menores que 375px)mobile
(para telas menores que 600px)desktop
(para telas menores que 990px)bigDesktop
(para telas maiores que 990px)
// yourviews-custom.jsonc
"yv-testimonials": {
"props": {
"slidesToShow": {
"tinyMobile": 1,
"mobile": 1,
"desktop": 3,
"bigDesktop": 3
}
},
"children": [
...
]
},
// home.jsonc
"store.home": {
"blocks": [
...
"yv-testimonials"
]
},
Pronto!