Inserir brinde no carrinho a partir de determinado valor de pedido

Dar brindes é uma ótima forma de aumentar o ticket médio dos pedidos e também de melhorar a taxa de conversão. 

Alguns lojistas sugeriram a implementação de brindes no carrinho caso o pedido alcance um determinado valor. Para atender sua demanda você deverá fazer algumas modificações no código, mas esses casos marcamos com cores e fizemos legendas, para que possa possa fazer mesmo caso não saiba programar.

Caso tenha alguma dificuldade na execução, abra um ticket de atendimento que te ajudamos.

Vamos então aos passos:

Acesse em nosso painel Configurações > Aparência > Inserir Código. No campo de texto de título "antes de /body", insira o código abaixo. Os campos coloridos devem ser editados de acordo com a legenda exibida logo após o código.

<script type="text/javascript">
if ($('#bodyCart').length) {
setTimeout(function(){
  var principal_evento = setInterval(function () {
    if (total > 499) {
      $('#prod-322').remove();
      if ($('#brinde-novo').length) {
          console.log("Já existe brinde");
      } else {
        insertBrinde()
      }
    } else {
      removeBrinde();
      $('#prod-322').remove();
    }
  }, 100)
}, 500)}
function insertBrinde() {
  var evento = setInterval(function () {
    if (total > 499) {
      cart[322] = [1,0]
      console.log(cart);
      Layout.setCookie('ckUsCarts', JSON.stringify(cart), 2592000)
      console.log(count);
      count++
      console.log(count);
      Layout.setCookie('ckUsCount', count, 2592000)
      $('.carrinho').find('table tr:last').after('<tr class="ProdutoData del-goods-col" id="brinde-novo" ><td class="goods-page-description"><a href="URL-DE-DESTINO-DO-PRODUTO-CASO-O-CLIENTE-CLIQUE-NO-BRINDE-NO-CARRINHO"><img src="URL-DA-IMAGEM-DO-PRODUTO-RECOMENDADO-QUE-SEJA-COPIADO-A-URL-DE-IMAGEM-DO-PRODUTO" height="64" width="64"></a><div><h3 id="brinde">NOME DO PRODUTO</h3></div></td><td><div class="product-quantity"><input type="text" data-min="1" data-max="10" data-prod="0" data-prc="0" data-qta="" data-pra="" value="1" class="form-control" style="display: block;" disabled></div></td><td class="goods-page-price brinde">Grátis</td><td class="goods-page-price brinde">Grátis</td><td class="del-goods-col"></td></tr>');
      clearInterval(evento)
    }
  }, 99)
}
function removeBrinde() {
  var eventoApaga = setInterval(function () {
  var total1 = $('#cartTotal').text().split('R$')
  var valor_real = parseFloat(total1[1])
  if (total < 499) {
      delete cart['322'];
      $('.carrinho').find('#brinde-novo').remove()
    }
  }, 99)
}
</script>

Legenda:

Veja que de fundo vermelho, está o valor do carrinho. No caso, 499, é o valor do carrinho, ou seja, acima desse valor será inserido o brinde.

Já com fundo azul, é o ID do produto que será considerado o brinde.

O texto de rosa que está escrito: URL-DE-DESTINO-DO-PRODUTO-CASO-O-CLIENTE-CLIQUE-NO-BRINDE-NO-CARRINHO , é a URL do produto brinde que você deverá inserir.

O texto em negrito  que está escrito: URL-DA-IMAGEM-DO-PRODUTO-RECOMENDADO-QUE-SEJA-COPIADO-A-URL-DE-IMAGEM-DO-PRODUTO, é a imagem do brinde que deverá inserir.

O texto de verde  que está escrito: NOME DO PRODUTO, é o nome do produto que precisa inserir no lugar. 

Em Configurações > Aparência > Editar CSS, insira o código abaixo no campo "Responsivo":

#brinde {
color: #d42998;
font-size: 15px;
}
.brinde {
font-weight: bold;
font-size: 15px;
}
#brinde-novo:not(:last-of-type) {
    display: none;
}
.brinde-novo {
  border: 1px solid #000;
  padding: 5px;
}

Agora acesse Configurações > Aparência > Editar JS, e cole o código abaixo. Os campos coloridos devem ser editados de acordo com a legenda exibida logo após o código.

$('.P191 #comprar, .product-item[data-id=191] .pi-price').replaceWith('<div class="pi-price">'+
  ' <center><p class="brinde-novo"><b>Brinde nas compras acima de R$499,00</b></p></center>'+
  '</div>');
$('.P191 .price').replaceWith('<div class="price"> '+
          ' <span id="preco_principal"> '+
            ' <strong><span>R$ </span>179,99</strong>'+
             ' </span>'+
               ' </div>');
$('.product-item[data-id=191] .pi-price +p').hide();
$('.product-item[data-id=191] .btn.add2cart').hide();

Legenda para alterações:

De fundo laranja, substitua o 191, pelo ID do produto brinde.

De negrito, substitua o 499 pelo valor que pelo qual será inserido o brinde.

De fundo roxo, substitua pelo valor real do produto. Pois você irá precisar inseri-lo como gratuito na loja.

Quaisquer dúvidas adicionais, abra um ticket de atendimento.

Obs: Como o Pagseguro não permite a utilização de produtos gratuitos, para essa modalidade não funcionará o brinde.