Como podemos ajudar?

O atributo rulename="nome da regra" é incluído no html dos produtos do carrinho que possuem descontos ou são brindes. Este atributo é utilizado para personalizar o design destes produtos, alterando cores, incluindo badges de destaque etc.

No atributo acima, o nome da regra é substituído pelo nome da regra que foi utilizada para dar o desconto ou o brinde.

Para que as personalizações deste artigo funcionem corretamente, cadastre os nomes das regras sem acentos. Nas regras de brinde, inclua a palavra free no nome da regra. Nas regras de desconto, inclua a palavra discount no nome da regra.

A personalização pode ser feita de duas maneiras: somente com CSS (mais simples) ou com CSS e Javascript (mais customizável).

Personalização somente com CSS

Existe a possibilidade de personalizar alterando apenas o CSS da loja. Veja os passos:

1º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo lojasite.css e clique no ícone do lápis verde ao seu lado para editar. No final do arquivo, cole as linhas abaixo:

/* Discount and gift rules */
.ContentItensCart [rulename] {border:2px dashed #7daf87;background:#f0f5f1;}
.ContentItensCart [rulename*="discount"]:after{background: #44ac55;border-radius: 10px;color:#fff;content:"Desconto";font-size:11px;margin-top:83px;margin-left: 112px;min-width: 30px;padding: 5px;text-align: center;position:absolute;}
.ContentItensCart [rulename*="free"]:after{background: #8bc34a;border-radius: 10px;color:#fff;content:"Gr\00e1tis";font-size:11px;margin-top:83px;margin-left: 117px;min-width: 30px;padding: 5px;text-align: center;position:absolute;}
.FCCart [rulename] td{background:#f0f5f1;}
.FCCart [rulename*="discount"] .FCCartItemCont:after{background:#44ac55;border-radius:10px;color:#fff;content:"Promo\00e7\00e3o";font-size:11px;margin-top:-30px;margin-left:20px;min-width:30px;padding:5px;text-align:center;position:absolute;transform:rotate(-10deg);opacity:.8;}
.FCCart [rulename*="free"] .FCCartItemCont:after{background: #8bc34a;border-radius: 10px;color:#fff;content:"Gr\00e1tis!";font-size:11px;margin-top:-25px;margin-left:20px;min-width:30px;padding: 5px;text-align: center;position:absolute;transform:rotate(-10deg);opacity:.8;}
.FCCheckout [rulename] .EstTabPedido{border-top:2px dashed #7daf87;border-bottom:2px dashed #7daf87;border-left:2px dashed #7daf87;}
.FCCheckout [rulename*="discount"] .EstTabPedido:after{background: #44ac55;border-radius: 10px;color:#fff;content:"Desconto";font-size:11px;margin-top:-40px;margin-left: 5px;min-width: 30px;padding: 5px;text-align: center;position:absolute;}
.FCCheckout [rulename*="free"] .EstTabPedido:after{background: #8bc34a;border-radius: 10px;color:#fff;content:"Gr\00e1tis";font-size:11px;margin-top:-40px;margin-left: 5px;min-width: 30px;padding: 5px;text-align: center;position:absolute;}
.FCCheckout [rulename] .EstTabPedidoNum{border-top:2px dashed #7daf87;border-bottom:2px dashed #7daf87;border-right:2px dashed #7daf87;}
.FCCheckout [rulename] .FCPrice{margin-right:10px;}
.FCTrack [rulename] td{background-color:#deeae0;}
.FCTrack [rulename*="discount"] td:first-child:after{background: #44ac55;border-radius: 10px;color:#fff;content:"Desconto";font-size:11px;margin-top:-115px;margin-left: 100px;min-width: 30px;padding: 5px;text-align: center;position:absolute;}
.FCTrack [rulename*="free"] td:first-child:after{background: #8bc34a;border-radius: 10px;color:#fff;content:"Gr\00e1tis";font-size:11px;margin-top:-115px;margin-left: 100px;min-width: 30px;padding: 5px;text-align: center;position:absolute;}

Clique em Salvar.

Palavras com acentuação

Para utilizar palavras acentuadas, é necessário codificar as letras com acentos. Veja as codificações utilizadas em CSS.

Exemplos de palavras:

Promoção = Promo\00e7\00e3o

Grátis = Gr\00e1tis

Personalização com CSS e Javascript

Para mostrar as informações na página de Pedidos Realizados e na página do Carrinho de Compras, siga os procedimentos abaixo.

1º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo lojasite.css e clique no ícone do lápis verde ao seu lado para editar o arquivo. No final do arquivo, cole as linhas abaixo:

/* Discount Badges - Side Cart, Cart, Checkout, Track */
.fc-cart-discount-badge-free{background:#8bc34a;border-radius:6px;color:#ffffff;font-size:1rem;min-width:30px;padding:5px;text-align:center;}
.fc-cart-discount-badge-discount{background:#44ac55;border-radius:6px;color:#ffffff;font-size:1rem;min-width:30px;padding:5px;text-align:center;}

Clique em Salvar.

2º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > Pasta JS. Localize o arquivo store-lib.js e clique no ícone do lápis verde ao seu lado para editar o arquivo. No final do arquivo, cole as linhas abaixo:

/* Discount Badges - Side Cart, Cart, Checkout, Track */
function fnBadgeDiscount(){
var createDivElemFree=document.createElement("div");
createDivElemFree.className="fc-cart-discount-badge-free";
createDivElemFree.innerHTML="GRÁTIS";
var createDivElemDiscount=document.createElement("div");
createDivElemDiscount.className="fc-cart-discount-badge-discount";
createDivElemDiscount.innerHTML="DESCONTO";
if(FC$.Page=="Cart"){
var showBadgeFree=document.querySelectorAll('[rulename*="free"] .FCCartItemCont');
var showBadgeDiscount=document.querySelectorAll('[rulename*="discount"] .FCCartItemCont');
for(var i=0;i<showBadgeFree.length;i++)showBadgeFree[i].appendChild(createDivElemFree);
for(var i=0;i<showBadgeDiscount.length;i++)showBadgeDiscount[i].appendChild(createDivElemDiscount);
}else if(FC$.Page=="Track"){
var showBadgeFreeTrack=document.querySelectorAll('[rulename*="free"] td:first-child');
var showBadgeDiscountTrack=document.querySelectorAll('[rulename*="discount"] td:first-child');
for(var i=0;i<showBadgeFreeTrack.length;i++)showBadgeFreeTrack[i].appendChild(createDivElemFree);
for(var i=0;i<showBadgeDiscountTrack.length;i++)showBadgeDiscountTrack[i].appendChild(createDivElemDiscount);
}
}

Clique em Salvar.

3º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM. Localize o arquivo rodape.htm e clique no ícone do lápis verde ao seu lado para editar o arquivo. No final do arquivo, cole as linhas abaixo:

<script>fnBadgeDiscount();</script>

Clique em Salvar.

Destaques no checkout

Para mostrar as informações no Checkout, siga os procedimentos abaixo:

1º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > pasta CSS. Localize o arquivo checkout.css e clique no ícone do lápis verde ao seu lado para editar. No final do arquivo, cole as linhas abaixo:

/* Discount Badges - Side Cart, Cart, Checkout, Track */
.fc-cart-discount-badge-free{background:#8bc34a;border-radius:6px;color:#ffffff;font-size:1rem;min-width:30px;padding:5px;text-align:center;width:90%;margin:0 15px 10px 15px;}
.fc-cart-discount-badge-discount{background:#44ac55;border-radius:6px;color:#ffffff;font-size:1rem;min-width:30px;padding:5px;text-align:center;width:90%;margin:0 15px 10px 15px;}

Clique em Salvar.

2º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > Pasta JS. Localize o arquivo store-lib.js e clique no ícone do lápis verde ao seu lado para editar.

Após a função FuncChkRegisterEnd(), cole as linhas abaixo:

function fnShowBadgeCartCheckout(){
/* Discount Badges */
var showBadgeFree=document.querySelectorAll('[rulename*="free"] .EstTabPedido');
var showBadgeDiscount=document.querySelectorAll('[rulename*="discount"] .EstTabPedido');
var createDivElemFree=document.createElement("div");
createDivElemFree.className="fc-cart-discount-badge-free";
createDivElemFree.innerHTML="GRÁTIS";
var createDivElemDiscount=document.createElement("div");
createDivElemDiscount.className="fc-cart-discount-badge-discount";
createDivElemDiscount.innerHTML="DESCONTO";
for(var i=0;i<showBadgeFree.length;i++){showBadgeFree[i].appendChild(createDivElemFree);}
for(var i=0;i<showBadgeDiscount.length;i++)showBadgeDiscount[i].appendChild(createDivElemDiscount);
}

Dentro da condição else if(F$.Step==1), faça a chamada da função fnShowBadgeCartCheckout();

Clique em Salvar.

Destaques no carrinho lateral

Para mostrar as informações no carrinho lateral, siga os procedimentos abaixo.

1º Passo

No topo do site administrativo, clique em Arquivos > pasta HTM > Pasta JS. Localize o arquivo store-lib.js e clique no ícone do lápis verde ao seu lado para editar. Dentro da função fnShowCartDesign(), abaixo da estrutura do if "if(priceProdCart!=priceOriProdCart)sProdAtual+=...", cole as linhas abaixo

var showBadgeFreeSideCartFree = sAtrRuleNameItem.indexOf("free");
var showBadgeFreeSideCartDiscount = sAtrRuleNameItem.indexOf("discount");
if(showBadgeFreeSideCartFree > -1){
sProdAtual+="<div class='fc-cart-discount-badge-free'>GRÁTIS</div>";
}else if(showBadgeFreeSideCartDiscount > -1){
sProdAtual+="<div class='fc-cart-discount-badge-discount'>DESCONTO</div>";
}

Clique em Salvar.