Como podemos ajudar?

FC 15060 :: Como exibir selos nos produtos em lançamento e em promoção?

Estes selos permitem que os visitantes identifiquem facilmente as novidades e os produtos em oferta, ajudando nas suas vendas.

Veja abaixo exemplos destes selos de produtos, também conhecidos como badges:


Veja os passos para implantação deste recurso:

1º Passo

Copie o código abaixo e cole no fim do arquivo LojaLib.js, que fica na pasta HTM:

function fnShowBadgeProd(IDProduto,PrecoOri,PrecoNum){
  var oBadge=document.getElementById("DivProd"+IDProduto);
  if(oBadge){
    var sBadges="";
    if(oBadge.hasAttribute("data-sale") && PrecoOri>PrecoNum)sBadges+="<div class='badgeProm' title='Oferta'>-"+ getPromocao() +"%</div>";
    if(oBadge.hasAttribute("data-release"))sBadges+="<div class='badgeNew' title='Lançamento'>NOVO</div>";
    if(oBadge.hasAttribute("data-highlight"))sBadges+="<div class='badgeHigh' title='Destaque'>★</div>";
    if(sBadges!="")oBadge.innerHTML+="<div class='badgesProd'>"+ sBadges +"</div>";
  }
  function getPromocao(){return parseInt((PrecoOri-PrecoNum)/PrecoOri*100);}
}

2º Passo

Copie o código abaixo e cole no fim do arquivo LojaSite.css, que fica na pasta HTM:

/* ShowBadges */
.DivHomeProd,.DivListProd{position:relative;}
.badgesProd {position: absolute;top: 10px;color: white;}
.badgeProm  {margin-top: 3px;background-color: #009900;border-radius: 5px;padding: 5px;font-size: 12px;}
.badgeNew   {margin-top: 3px;color:#0088d8;border:1px solid #0088d8;background-color: #ffffff;border-radius: 5px;padding: 5px;font-size: 11px;}
.badgeHigh  {margin-top: 3px;color:#ffc033;background-color: #ffffff;border-radius: 5px;padding: 2px 5px;font-size: 18px;}

3º Passo

Insira o código abaixo nas tags <div> que receberão o selo na página principal e na lista de produtos:

id="DivProd<IDProduto>" <DataAttribute>

Exemplo de uso:

<div id="DivProd<IDProduto>" <DataAttribute>></div>

O script abaixo deve ser inserido no fim da tag <ProdLista> no arquivo estiloproduto.htm e no fim da tag <p> no arquivo estiloprodutoout.htm.

<script>fnShowBadgeProd(<IDProduto>,<PrecoOri>,<PrecoNum>);</script>