- Seção
FC 15072 - Como vender produtos com baixo estoque ou alta demanda?
Utilize técnicas dos grandes varejistas para mostrar um senso de urgência nestes produtos. Leia este artigo antes que acabe!
Quantas vezes o cliente gostou do produto e deixou para comprar depois? E mais tarde desistiu?
O senso de urgência pode fazer toda a diferença entre comprar e não comprar!
Por exemplo, o visitante encontra o produto desejado na sua loja e é informado claramente que:
- Faltam X unidades para esgotar o estoque. Uma barra vermelha grita esta informação.
- O preço promocional será mantido por mais Y horas. Um timer enorme mostra o tempo restante.
- N pessoas já compraram o produto nas últimas 72h. Corra antes que acabe!
- Este produto está em 5 pedidos feitos nas últimas 12h, cujos pagamentos ainda não foram confirmados.
- 99 pessoas estão na página deste produto agora.
- 9 clientes estão com este produto no carrinho. Corra muito!
Todas estas técnicas podem ser utilizadas na sua loja, em conjunto no mesmo produto ou em separado. Mas cuidado para não exagerar no apelo. Estímulos demais podem gerar incredulidade do visitante.
Algumas destas informações podem ser atualizadas automaticamente a partir do banco de dados da loja. Veja a seguir 5 exemplos de senso de urgência e como implantá-los na sua loja:
Exemplo 1
• Estoque >=6 e <=10 (Mostra a quantidade de estoque em amarelo)
Exemplo 2
• Estoque <= 5 (Mostra a quantidade de estoque em vermelho)
Exemplo 3
• Promoção 2 dias (Timer)
Exemplo 4
• Promoção 1 dia (Timer)
Exemplo 5
• Promoção últimas horas! (Timer)
Passos para implementar:
1º PassoInserir o código abaixo no fim do arquivo lojasite.css:
/* Product Stock */
.product-details-show-stock-container{position:initial;bottom:0px;width:100%;z-index:99;margin-bottom:5px}
#product-details-show-stock{}
#product-details-show-stock span{font-size:0.85rem;font-weight:700}
#product-details-show-stock span .product-details-show-stock-lastoff{color:#d41f26;font-weight:bold}
.product-details-data-prom1{margin-bottom:19px;background:#FBE9E7;width:100%}
#DataProm1{margin:10px}
.product-details-data-prom{}
#DataProm .product-details-data-prom-date-container{margin-bottom:5px;font-size:0.9rem}
.product-details-data-prom-container{display:flex;display:-webkit-flex;align-items:center;-webkit-align-items:center;justify-content:flex-start;-webkit-justify-content:flex-start}
.product-details-data-prom-time{background:#d41f26;font-weight:700;color:#ffffff!important;margin:0 5px 0 0;padding:19px 10px;text-align:center;height:50px;width:25%}
.product-details-data-prom-time-title{font-size:1rem}
.product-details-data-prom-time-txt{display:block}
.product-details-data-prom-date,.product-details-lats-hours{color:#212121;font-weight:700}
.product-details-progress-bar{background-color:#ffffff;height:15px;width:90%;border:1px solid #f9f8f8;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}
.product-details-progress-bar span{display:inline-block;height:100%;transition:width .4s ease-in-out}
.product-details-color1 span{background-color:#d41f26}
.product-details-stripes span {background-size:30px 30px;background-image:linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);animation:animate-stripes 3s linear infinite}
@keyframes animate-stripes{0% {background-position:0 0} 100% {background-position:60px 0}}
.product-details-stripes-size{width:15%}
.product-details-progress-bar2{background-color:#ffffff;height:15px;width:90%;border:1px solid #f9f8f8;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}
.product-details-progress-bar2 span{display:inline-block;height:100%;transition:width .4s ease-in-out}
.product-details-color2 span{background-color:#f9a91c}
.product-details-stripes2 span {background-size:30px 30px;background-image:linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);animation:animate-stripes 3s linear infinite}
@keyframes animate-stripes{0% {background-position:0 0} 100% {background-position:60px 0}}
.product-details-stripes-size2{width:40%}
2º Passo
Inserir os scripts abaixo no fim do arquivo lojalib.js:
// Product Stock
function fnGetStockProduct(sStockProduct){
var productStock=document.getElementById("product-details-show-stock");
if(sStockProduct==0){productStock.innerHTML=""}
else if(sStockProduct<=6){
productStock.innerHTML="<span>Apenas <span class='product-details-show-stock-lastoff'>"+ sStockProduct +"</span> em estoque!</span><br><div class='product-details-progress-bar product-details-color1 product-details-stripes'><span class='product-details-stripes-size'></span></div>"
}
else if(sStockProduct<=10){
productStock.innerHTML="<span>Apenas <span class='product-details-show-stock-lastoff'>"+ sStockProduct +"</span> em estoque!</span><br><div class='product-details-progress-bar2 product-details-color2 product-details-stripes2'><span class='product-details-stripes-size2'></span></div>"
}
else if(sStockProduct>=11){productStock.innerHTML=""}
else{productStock.innerHTML=""}
}
// Show Date Prom
function fnGetDate(sDateTime,IsMMDD){
var IsDate=false;
var oDate=null;
var aDateTime=sDateTime.split(' ');
if(aDateTime.length<=2){
var oMatchesDate=/^(\d{1,2})[-\/](\d{1,2})[-\/](\d{2,4})$/.exec(aDateTime[0]);
if(oMatchesDate!=null){
if(IsMMDD){
var m=parseInt(oMatchesDate[1]-1,10);
var d=parseInt(oMatchesDate[2],10);
}
else{
var d=parseInt(oMatchesDate[1],10);
var m=parseInt(oMatchesDate[2]-1,10);
}
var y=parseInt(oMatchesDate[3],10);
if(y<30)y+=2000;
else if(y<100)y+=1900;
if(aDateTime.length==2){
var oMatchesTime=/^(\d{1,2})[:](\d{1,2})$/.exec(aDateTime[1]);
if(oMatchesTime!=null){
var hh=parseInt(oMatchesTime[1],10);
var mm=parseInt(oMatchesTime[2],10);
var oNewDate=new Date(y,m,d,hh,mm);
IsDate=(oNewDate.getMinutes()==mm && oNewDate.getHours()==hh && oNewDate.getDate()==d && oNewDate.getMonth()==m && oNewDate.getFullYear()==y);
}
}
else{
var oNewDate=new Date(y,m,d,2);
IsDate=(oNewDate.getDate()==d && oNewDate.getMonth()==m && oNewDate.getFullYear()==y);
}
if(IsDate)oDate=oNewDate;
}
}
return {IsDate:IsDate, oDate:oDate};
}
function fnFormatN(n){
n=""+n;
if(n.length==1)n="0"+n;
return n;
}
function fnShowDateProm(sDateTime){
var oOut=document.getElementById("DataProm");
if(oOut){
var IsMMDD=false;
var oGetDate=fnGetDate(sDateTime,IsMMDD);
if(oGetDate.IsDate){
setInterval(function() {
var dDataPromFim=oGetDate.oDate;
var dAgora=new Date();
var dFaltam=(dDataPromFim-dAgora); //retorna em milissegundos
var iHoras=new Date(dFaltam+10800000).getHours(); //horas > diferença de 3 horas (+10800000)
var iMinutos=new Date(dFaltam+10800000).getMinutes(); //minutos > diferença de 3 horas (+10800000)
var iSeconds=new Date(dFaltam+10800000).getSeconds(); //segundos > diferença de 3 horas (+10800000)
dFaltam=parseInt(dFaltam/1000/60/60/24); //quantos dias restam para acabar a promoção
if(dDataPromFim>dAgora && dFaltam<10){ //só exibe informação quando faltarem 10 dias para acabar a promoção
var sCont="<div class='product-details-data-prom-date-container'>Promoção válida até <b class='product-details-data-prom-date'>"+ fnFormatN(dDataPromFim.getDate()) +"/"+ fnFormatN(1+dDataPromFim.getMonth()) +"/"+ dDataPromFim.getFullYear() +" às "+ fnFormatN(dDataPromFim.getHours()) +":"+ fnFormatN(dDataPromFim.getMinutes()) +".</b></div><div class='product-details-lats-hours'>Faltam</div>";
if(dFaltam<1){
sCont+="<div class='product-details-data-prom-container'>";
if(iHoras>0)sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+iHoras+"</div><div class='product-details-data-prom-time-txt'>hora"+ (iHoras>1?"s</div></div>":"");
if(iMinutos>0)sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+iMinutos+"</div><div class='product-details-data-prom-time-txt'>min"+(iMinutos>1?"</div></div>":"");
if(iSeconds>0)sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+iSeconds+"</div><div class='product-details-data-prom-time-txt'>seg"+(iSeconds>1?"</div></div>":"");
sCont+="</div>";}
else if(dFaltam==1){
sCont+="<div class='product-details-data-prom-container'><div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+ dFaltam +"</div><div class='product-details-data-prom-time-txt'>dia</div></div>";
if(iHoras>0)sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+iHoras+"</div><div class='product-details-data-prom-time-txt'>hora"+ (iHoras>1?"s</div></div>":"");
if(iMinutos>0)sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+iMinutos+"</div><div class='product-details-data-prom-time-txt'>min"+(iMinutos>1?"</div></div>":"");
if(iSeconds>0)sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+iSeconds+"</div><div class='product-details-data-prom-time-txt'>seg"+(iSeconds>1?"</div></div>":"");
sCont+="</div>";
}
else if(dFaltam>1){sCont+="<div class='product-details-data-prom-time'><div class='product-details-data-prom-time-title'>"+ dFaltam +"</div><div class='product-details-data-prom-time-txt'>dias</div></div>";}
oOut.innerHTML=sCont;
//oOut.style.background="#f3f3f3";
//oOut.style.padding="10px";
//oOut.style.borderRadius="10px";
}
},1000);
}
}
}
3º Passo
No arquivo estiloproduto.htm, localize a tag <ProdDet> e insira os dois trechos abaixo no local apropriado ao seu design.
<!-- Product Stock -->
<div class="product-details-show-stock-container">
<div id="product-details-show-stock"></div>
<script type="text/javascript">
FCLib$.onReady(function(){
var sStockProduct=<Estoque>;
fnGetStockProduct(sStockProduct);});
</script>
</div>
<!-- Product Stock Timer -->
<div class="product-details-data-prom">
<div id="DataProm"></div>
<script type="text/javascript">
var sDateTime="<DataPromFim>";
FCLib$.onReady(function(){fnShowDateProm(sDateTime);});
</script>
</div>
Clique aqui para visitar uma loja conceito que utiliza técnicas de senso de urgência em seus produtos.
|

