Como criar um carrossel de produtos na página inicial
Neste artigo explicaremos como criar um carrossel de produtos na página inicial (home page) do seu e-commerce.
O que é?
O Carrossel de produtos serve como vitrine para que seus clientes vejam uma prévia do catálogo dos seus produtos disponíveis para venda.
Como funciona?
Cada carrossel irá exibir os produtos de uma coleção, sendo obrigatório o vínculo de uma coleção ao componente de carrossel.
COMO CONFIGURAR
No admin acesse a aba de configurações > parâmetros;
Filtre pela chave home-component para facilitar sua navegação pelos parâmetros da página inicial, ordene também por posição para ter uma ideia de localização do novo carrossel, as posições começam a contar a partir do primeiro componente da página, isso considerando, banners e carrosséis de produto então para estimar onde ficará o novo carrossel, se guie por elas para definir, depois clique em novo:
Dentro da tela de novo parâmetro selecione a chave home-component;
Só será necessário definir uma filial para esse novo parâmetro caso queira que ele seja exclusivo dessa filial, caso contrário mantenha em selecione;
Use o recurso de descrição para facilitar a organização dos seus componentes da home e facilitar manutenções futuras;
Defina a posição conforme a preferência e análise anterior, caso você identifique que já existe um componente na posição definida, será necessário reorganizar todos os componentes a partir desse que será alterado, então se você deseja colocar seu carrossel na posição 10, mas já existe, por exemplo, um banner nessa posição, você pode colocar o carrossel na posição 10, porém terá que modificar o banner para posição 11 e os componentes após o banner para uma posição a mais do que a original (componente 11 terá posição 12, componente 12 será modificado para 13 e assim por diante);
Os níveis de permissão funcionam da seguinte forma:
todos: O componente será exibido tanto logado quanto deslogado;
público: O componente só será exibido quando o cliente estiver navegando anonimamente (sem logar);
restrito: O componente será exibido somente quando o cliente estiver logado.
Por padrão usamos como Todos, mas caso seja necessário pode modificar conforme encaixar melhor no seu caso de uso;
O parâmetro para carrossel de produtos é o seguinte:
{
"name": "products-carousel-grid",
"component-file": "products-carousel-grid.php",
"autoplay": true,
"data": "produtos?q=(colecoes.ativo = 1 and (colecoes_produtos.id_tabela_preco = '' or colecoes_produtos.id_tabela_preco = '{{session.tabela_preco.id}}') and colecoes_produtos.id_colecao = 'INSIRA O ID DA COLECAO AQUI')&estoque=1&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=15&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial_cliente={{session.filial.id}}&id_filial={{session.filial.id}}&id_tabela_preco={{session.tabela_preco.id}}&id_forma_pagamento={{session.forma_pagamento.id}}&id_condicao_pagamento={{session.condicao_pagamento.id}}&indice={{session.condicao_pagamento.indice}}&quantidade=1&order=colecoes_produtos.posicao&hidden=descricao,descricao1,descricao2,descricao3,descricao4,video",
"token": "empresa",
"data-ttl": 600,
"layout": "grid-5",
"title": "",
"title-link": "",
"scroll": true,
"badges": [{
"type": "sale",
"title": "% PROMOÇÃO",
"color": "#FF0000"
}],
"no-img": "imagemindisponivel.jpg",
"title-limit": 60,
"title-transform": "",
"unit-value-text": "Unidade",
"show-price": "restrict",
"show-subtitle": "public",
"show-code": "public",
"show-pack": "none",
"show-buy": "restrict",
"show-in-cart": "restrict"
}
Basta copiar esse parâmetro ou copiar de um componente de product-carousel já existente no seu admin, inserir o ID da coleção que deseja exibir no carrossel no local destacado que a coleção estará vinculada ao componente, feito isso basta verificar se o componente está ativo e salvá-lo!
Caso tenha mais alguma dúvida sobre esse ponto basta acionar o suporte, estamos à disposição!