- Seção
FC 15063 :: Como mostrar botão para ver mais itens na lista de produtos?
Veja como exibir um botão no fim da lista de produtos para mostrar mais itens na mesma página.
Este botão é uma personalização do recurso de autopaginação de produtos, onde mais produtos são acrescentados à página a medida em que o visitante desce na lista.
Para exibir mais produtos, o visitante deverá clicar no botão Ver mais produtos. Desta forma o rodapé da loja poderá ser visto mais facilmente, sem que o visitante precise chegar o final de todos os produtos a listar.
Veja abaixo um exemplo deste botão na cor verde, no fim da lista de produtos:
Para implantar:
1º Passo
Copie o código abaixo e cole no fim do arquivo lojalib.js, que fica na pasta HTM. O número 1 representa o número de páginas de produtos que serão carregadas a cada clique do botão.
var iNextPageButFC=1;
2º Passo
Copie o código abaixo e cole no fim do arquivo lojasite.css, que fica na pasta HTM:
.estNextPageButFC{border-radius:3px;background:#44ac55;color:#fff;padding:15px;border:0;min-width:40%;cursor:pointer;margin-top:20px;transition:opacity .5s ease;font-size:1.1em;}
.estNextPageButFC:hover{opacity:.8;}
.estNextPageButFC:disabled{opacity:.4;}
.estNextPageContFC{display:flex;width:100%;flex-direction:column;align-items:center;}
.estLoadingNextPageFC{visibility:hidden;max-height:50px;margin-top:5px;}
Personalizações
Para alterar o texto do botão, copie o código abaixo, altere o TEXTO do código pelo texto desejado e cole no fim do arquivo lojasite.css que fica na pasta HTM:
.estTxtNextPageButFC{display:none;}
.estNextPageButFC:before{content:"TEXTO";}
Para alterar a imagem de carregamento exibida quando os produtos estão sendo exibidos, insira a linha abaixo no arquivo lojalib.js, que fica na pasta HTM.
ImgLoadingFC="/lojas/99999999/images/loading.gif";Na linha acima, altere 99999999 pelo ID da loja com 8 dígitos (complete com zeros à esquerda). Altere loading.gif para o nome do gif animado enviado para a pasta images da loja.
|
