Neste artigo, explicaremos como posicionar as boxes das vitrines nas páginas de seu site utilizando as divs de posicionamento HTML.
Observação
As vitrines são posicionadas sempre acima ou abaixo de algum elemento da página do site, ou seja, é necessário identificar onde as boxes das vitrines serão posicionadas e copiar a div desse elemento para posicionar no template em nosso painel. Podendo também ser posicionado nosso script direto no HTML da página em sua plataforma.
Para essa edição, será preciso entrar no painel da SmartHint e, no menu lateral, selecionar Recomendações >Templates.
No template de recomendação, no item “smarthint-product”, clique em Editar:
Imagem 1 (Painel SmartHint >Recomendação>Template)
Em seguida, acesse a seção Scripts:
Imagem 2 (Painel SmartHint >Recomendação>Template>Editar>Scripts)
Nessa tela, estarão listadas todas as páginas que podem ser posicionadas em nossas vitrines, selecione a página de edição.
Nosso script de posicionamento, para todas as plataformas o carregamento é feito via jquery:
SmartHint.Box.addPosition(jQuery("SELECIONAR SELETOR 'div ou class", 1, 'after');
SmartHint.Box.addPosition(jQuery("#smarthint-position-1", 2, 'after');
SmartHint.Box.addPosition(jQuery("#smarthint-position-2", 3, 'after');
SmartHint.Box.addPosition(jQuery("#smarthint-position-3", 4, 'after');
SmartHint.Box.addPosition(jQuery("#smarthint-position-4", 5, 'after')
Apenas para plataforma VTEXIO o script é feito sem o jquery:
SmartHint.Box.addPosition("SELECIONAR SELETOR 'div ou class", 1, 'after');
SmartHint.Box.addPosition("#smarthint-position-1", 2, 'after');
SmartHint.Box.addPosition("#smarthint-position-2", 3, 'after');
SmartHint.Box.addPosition("#smarthint-position-3", 4, 'after');
SmartHint.Box.addPosition("#smarthint-position-4", 5, 'after')
Observação
Dentro da página no site, em inspecionar, selecione o elemento (div ou class) para copiar o seletor e indicar que nossas vitrines começaram abaixo (after) ou acima (before) deste elemento.
Exemplo:
Imagem 3 (Copiando seletor "div ou class" para inserir no script de posicionamento)
No exemplo acima, após encontrar um elemento na página para posicionar abaixo ou acima, com o botão direito selecione copiar e em seguida seletor.
Posicionamento para MOBILE
Algumas páginas encontram as divs (elementos) com nomes diferentes para dispositivo mobile. Para esses casos, deve-se incluir um script específico:
Nosso script de posicionamento mobile:
Demais plataformas:
if(SmartHint.Framework.IsMobileOrTablet()){
SmartHint.Box.addPosition(jQuery(“SELECIONAR SELETOR "div ou class"), 1, ‘after’);
SmartHint.Box.addPosition(jQuery(“#smarthint-position-1”),2,‘after’);
SmartHint.Box.addPosition(jQuery(“#smarthint-position-2”),3,‘after’);
SmartHint.Box.addPosition(jQuery(“#smarthint-position-3”),4,‘after’);
SmartHint.Box.addPosition(jQuery(“#smarthint-position-4”), 5, ‘after’); };
Plataforma VTEXIO:
if(SmartHint.Framework.IsMobileOrTablet()){
SmartHint.Box.addPosition((“SELECIONAR SELETOR "div ou class"), 1, ‘after’);
SmartHint.Box.addPosition((“#smarthint-position-1”),2,‘after’);
SmartHint.Box.addPosition((“#smarthint-position-2”),3,‘after’);
SmartHint.Box.addPosition((“#smarthint-position-3”),4,‘after’);
SmartHint.Box.addPosition((“#smarthint-position-4”), 5, ‘after’); };
Seguir a mesma inclusão de elemento na página, mas agora, selecionando no inspecionar da página o dispositivo mobile, para alterar a visualização desta página:
Imagem 4 (opiando seletor "div ou class" para inserir no script de posicionamento na versão MOBILE)
Após copiar esses seletores, substitua no script apresentado como exemplo acima, o campo ''SELECIONAR SELETOR "div ou class" pelo o que foi copiado no inspecionar. Na sequencia salve e verifique as posições na página configurada.
Não se esqueça de entrar em contato com nosso suporte, através do chat disponivel no Painel SmartHint.
Esperamos que este conteúdo tenha sido útil pra você! Confira outros artigos.