Inserção de informações de estoque e número de visitantes na página de produto

Olá Lojista!

Esse tutorial traz um código que pode fazer você aumentar bastante suas vendas, pois desperta o gatilho da escassez nos seus potenciais clientes, ao dar a entender que se não comprarem naquele momento poderão perder a oportunidade. 

A ideia é basicamente amostrar um valor de estoque fictício que irá diminuir com um determinado tempo específico, assim como amostrar que existe uma certa quantidade de clientes verificando aquele mesmo produto. Abaixo segue as instruções de como inseri-los na loja:

Acesse Configurações > Aparência > Editar JS e cole o seguinte código:

$('#produto-nome').after('<div id="fim-estoque">Restam apenas <span id="estoque-prod">10</span> unidades desse item.</div>')
$('#produto-nome').after('<div id="pessoas">Outras <span id="pessoa">8</span> pessoas estão visualizando esse produto!</div>')

Em Configurações > Aparência > Layout e plugins > Produtos, inserir um plugin código html e colocar o seguinte:

<script type="text/javascript">
setTimeout(function () {
var estoque = 7
var pessoa = 12
document.getElementById('estoque-prod').innerHTML = estoque
document.getElementById('pessoa').innerHTML = pessoa
}, 12000);
setTimeout(function () {
var estoque = 2
var pessoa = 17
document.getElementById('estoque-prod').innerHTML = estoque
document.getElementById('pessoa').innerHTML = pessoa
}, 22000);
</script>

E em Configurações > Aparência > Editar CSS > Estilos:

#pessoa {
    font-weight: bold;
}
#pessoas {
  background: rgba(85, 194, 247, 0.83);
  padding: 12px;
  margin-bottom: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
 }
#estoque-prod {
font-weigth: bold;
}
#fim-estoque {
  background: #F8E1DC;
  padding: 12px;
  margin-bottom: 10px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  position: relative;
}

Caso deseje alterar a cor de fundo de ambos os campos, basta alterar a cor dentro de background. Caso queira inserir a cor do texto de outra cor, basta inserir no css um color: #(cor em hexa decimal. Enfim, dá pra brincar bastante quem conhece um pouquinho de CSS.

Outra alternativa é a utilização de um estoque virtual real do produto, ou seja, buscará o exato estoque do produto. Porém, se o estoque for maior do que 10, não será exibido a informação, pois não se torna um gatilho para o cliente comprar caso haja um estoque elevado ainda.

Para utilizar esse, basta inserir em Configurações > Aparência > Editar JS :

$('#produto-nome').after('<div id="estoque-real"></div>')

 Em Configurações > Aparência > Layout e plugins > Produtos, inserir um plugin código html e colocar o seguinte:

<script type="text/javascript">
setTimeout(function () {
var estoque_real = _infoProduto.estoque
if (estoque_real < 10) {
document.getElementById('estoque-real').innerHTML = 'Restam '+estoque_real + ' unidades apenas!'
}
}, 500);
</script>

E em Configurações > Aparência > Editar CSS > Estilos:

#estoque-real {
color: red;
text-transform: uppercase;
line-height: 16px;
font-family: latoBold,sans-serif;
font-size: 16px;
padding: 3px;
border: 1px red dashed;
}