FC 15091 :: Como personalizar os banners da loja através do HTML?
Veja como personalizar o carrossel de imagens do topo da home da loja.
Este procedimento simplificado aplica-se somente caso a loja utilize um dos modelos de design a partir de junho/2020.
Estes modelos podem ser escolhidos e selecionados para o design da loja através da página DESIGN & CONTEÚDO > Modelos do site administrativo.
Para saber se a home da loja virtual já utiliza o novo carrossel, siga o procedimento abaixo:
No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo home.htm e clique no ícone do lápis verde ao seu lado para editar. No final do arquivo, localize o trecho de código abaixo:
<!-- Banners Slideshow -->
<div id="FC-HideHomeBanners" style="display:none;">
<link rel=stylesheet href="/css/swiper/v4.2.6/swiper.min.css?cccfc=1">
<script src="/js/swiper/v4.2.6/swiper.min.js?cccfc=1"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<script>
function fnSlideshowStore() {
var numBannerHomeFC = sF$.fnGetConfig("Qty_Banner_Slideshow");
var bannerImageFC = ["<banner-image 11>", "<banner-image 12>", "<banner-image 13>", "<banner-image 14>"];
var bannerimageMobileFC = ["<banner-image-mobile 11>", "<banner-image-mobile 12>", "<banner-image-mobile 13>", "<banner-image-mobile 14>"];
var bannerRedirFC = ["<banner-redir 11>", "<banner-redir 12>", "<banner-redir 13>", "<banner-redir 14>"];
var bannerAltFC = ["<banner-alt 11>", "<banner-alt 12>", "<banner-alt 13>", "<banner-alt 14>"];
for (i = 0; i < bannerImageFC.length-(4-numBannerHomeFC); i++) {
document.write ('<div class="swiper-slide"><a href="'+ bannerRedirFC[i] +'"><picture><source media="(max-width:1024px)" srcset="'+ bannerimageMobileFC[i] +'"><img alt="'+ bannerAltFC[i] +'" src="'+ bannerImageFC[i] +'"></picture></a></div>');
}
}
fnSlideshowStore();
FCLib$.execLazyLoad();
</script>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
Se o código acima foi localizado, isto significa que a home da loja já utiliza o novo carrossel.
Neste exemplo utilizamos os banners cadastrados nas posições <banner 11>, <banner 12>, <banner 13> e <banner 14>.
Como configurar o carrossel?
1º Passo
Recomendamos as seguintes dimensões de imagens:
Imagem para computador: 1920px (largura) x 350px (altura)
Imagem para celular e tablet: 1024px (largura) x 900px (altura)
As imagens precisam ter no máximo 400kb de tamanho, para maximizar a performance de navegação.
2º Passo
O nome das imagens não pode ter espaços, caracteres especiais (ex: !@$).
3º Passo
A imagem para celular e tablet precisa ter um sufixo -mob.
Computador: bannerpromocao.jpg
Celular e tablet: bannerpromocao-mob.jpg
4º Passo
Na ficha do banner, selecione uma das posições entre <banner 1> e <banner 250>.
Altere o código no arquivo home.htm para a posição escolhida. Para isso, clique no link Arquivos no topo do site administrativo e selecione a pasta HTM. Localize o arquivo home.htm e clique no ícone do lápis verde ao seu lado para alterá-lo da seguinte forma, considerando que escolheu a posição <banner 3>:
DE:
<script>
function fnSlideshowStore() {
var numBannerHomeFC = sF$.fnGetConfig("Qty_Banner_Slideshow");
var bannerImageFC = ["<banner-image 11>", "<banner-image 12>", "<banner-image 13>", "<banner-image 14>"];
var bannerimageMobileFC = ["<banner-image-mobile 11>", "<banner-image-mobile 12>", "<banner-image-mobile 13>", "<banner-image-mobile 14>"];
var bannerRedirFC = ["<banner-redir 11>", "<banner-redir 12>", "<banner-redir 13>", "<banner-redir 14>"];
var bannerAltFC = ["<banner-alt 11>", "<banner-alt 12>", "<banner-alt 13>", "<banner-alt 14>"];
for (i = 0; i < bannerImageFC.length-(4-numBannerHomeFC); i++) {
document.write ('<div class="swiper-slide"><a href="'+ bannerRedirFC[i] +'"><picture><source media="(max-width:1024px)" srcset="'+ bannerimageMobileFC[i] +'"><img alt="'+ bannerAltFC[i] +'" src="'+ bannerImageFC[i] +'"></picture></a></div>');
}
}
fnSlideshowStore();
FCLib$.execLazyLoad();
</script>
PARA:
<script>
function fnSlideshowStore() {
var numBannerHomeFC = sF$.fnGetConfig("Qty_Banner_Slideshow");
var bannerImageFC = ["<banner-image 3>", "<banner-image 12>", "<banner-image 13>", "<banner-image 14>"];
var bannerimageMobileFC = ["<banner-image-mobile 3>", "<banner-image-mobile 12>", "<banner-image-mobile 13>", "<banner-image-mobile 14>"];
var bannerRedirFC = ["<banner-redir 3>", "<banner-redir 12>", "<banner-redir 13>", "<banner-redir 14>"];
var bannerAltFC = ["<banner-alt 3>", "<banner-alt 12>", "<banner-alt 13>", "<banner-alt 14>"];
for (i = 0; i < bannerImageFC.length-(4-numBannerHomeFC); i++) {
document.write ('<div class="swiper-slide"><a href="'+ bannerRedirFC[i] +'"><picture><source media="(max-width:1024px)" srcset="'+ bannerimageMobileFC[i] +'"><img alt="'+ bannerAltFC[i] +'" src="'+ bannerImageFC[i] +'"></picture></a></div>');
}
}
fnSlideshowStore();
FCLib$.execLazyLoad();
</script>
Clique em Salvar e limpe o cache da loja para verificar se o banner foi exibido corretamente.
OBS: Repita o processo acima para os demais banners.
|
