Como criar tipos diferentes de componentes para a home do site?

Componentes para homepage

O que é?

Na plataforma, os componentes da página inicial são ferramentas projetadas para destacar seus produtos e exibir avisos relevantes aos clientes.

Como funciona?

No caso do carrossel de produtos é uma prévia de uma coleção de múltiplos produtos, para atrair o cliente a acessar a coleção e localizar mais itens que ele possa se interessar, já o componente de produto em destaque, é ideal para exibir um produto, que também é baseado em uma coleção, que esteja em oferta ou um item que era aguardado pelos clientes para ficar bem aparente para os clientes. Para os componentes complementares temos apenas os avisos que podem ser posicionados no topo e no corpo da página.
​
​

COMO CONFIGURAR

Para configurar os componentes da homepage será necessário utilizar o modulo de componentes (parâmetros) em configurações, já temos bases de conhecimento relacionados a esse tema e como utilizar esse módulo caso não tenha conhecimento de como utilizá-lo recomendamos verificar esses guias antes de prosseguir, lembrando que as definições repassadas abaixo são para as criações dos componentes na home, a atribuição/alteração de coleções dos componentes podem ser verificadas nas outras bases de conhecimento.

IMPORTANTE: Todas alterações feitas nos parâmetros/layout do site são de responsabilidade do cliente, portanto antes de alterar qualquer parâmetro faça um backup do mesmo copiando seu código interno e colando em um arquivo de texto para garantir que tenha o código original para que em caso de problema ele possa ser restaurado.
​

Seguem os tipos de componentes, exemplos com prints, e seus determinados códigos para serem utilizados.

Componentes de produto:

Chave: home-component

Código de componente:

{

"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"

}

Chave: home-component
​

Código de componente:
​

{

"name": "product-featured",

"component-file": "product-featured.php",

"data": "produtos?q=((colecoes.ativo = 1) and (colecoes.ativo = 1 and colecoes_produtos.id_colecao = 'insira aqui o ID da coleção'))&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=1&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial={{session.filial.id}}&id_filial_cliente={{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&hidden=descricao,descricao1,descricao2,descricao3,descricao4,video&order=random",

"token": "empresa",

"data-ttl": 400,

"title": "Insira aqui o título se desejar",

"badges": [{

"type": "sale",

"title": "-{{percentual_desconto}}%","title-alt": "PROMOÇÃO",

"color": "#bf1301"

}],

"no-img": "imagemindisponivel.png",

"title-limit": 60,

"title-transform": "",

"unit-value-text": "Unidade",

"show-price": "restrict",

"show-code": "public",

"show-pack": "public",

"show-buy": "restrict",

"show-in-cart": "restrict"

}

​

Componentes Complementares:

Chave:topbar-component

Código de componente:

{

"name": "topbar-message",

"text": "<a href=insira aqui um link caso deseje> <b> insira aqui o texto desejado </b></a>",

"component-file": "topbar-message.php",

"show-public": true,

"show-restrict": true

}

​
​

Chave: home-component

Código de componente:

{

"name": "body-message",

"text": "<a href=insira aqui um link caso deseje> <b> insira aqui o texto desejado </b></a>",

"component-file": "body-message.php",

"show-public": true,

"show-restrict": true,

"container": false

{

"name": "products-carousel-grid",

"component-file": "products-carousel-grid.php",

"data": "produtos?q=((colecoes.ativo = 1) and (colecoes.id = 'insira aqui o ID da coleção'))&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=10&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial={{session.filial.id}}&id_filial_cliente={{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,

"tabs": [{

"name": "Destaques",

"data": "produtos?q=((colecoes.ativo = 1) and (colecoes.id = 'insira aqui o ID da coleção'))&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=10&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial={{session.filial.id}}&id_filial_cliente={{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

},

{

"name": "Dicas",

"data": "produtos?q=((colecoes.ativo = 1) and (colecoes.id = 'insira aqui o ID da coleção'))&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=10&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial={{session.filial.id}}&id_filial_cliente={{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

},

{

"name": "Promoções",

"data": "produtos?q=((colecoes.ativo = 1) and (colecoes.id = 'insira aqui o ID da coleção')&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=10&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial={{session.filial.id}}&id_filial_cliente={{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

},

{

"name": "Compre e Ganhe",

"data": "produtos?q=((colecoes.ativo = 1) and (colecoes.id = 'insira aqui o ID da coleção'))&embed=departamento,departamentos,marca,departamento,embalagens::ativo=1,imagens&perpage=10&id_vendedor={{session.vendedor.id}}&id_cliente={{session.cliente.id}}&id_filial={{session.filial.id}}&id_filial_cliente={{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": "",

"scroll": true,

"badges": [{

"type": "sale",

"title": "-{{percentual_desconto}}%","title-alt": "PROMOÇÃO",

"color": "#bf1301"

}],

"no-img": "imagemindisponivel.png",

"title-limit": 60,

"title-transform": "",

"unit-value-text": "Unidade",

"show-price": "restrict",

"show-code": "public",

"show-pack": "public",

"show-buy": "restrict",

"show-in-cart": "restrict"

}