Aula 66 do INITTIUM

Desconto de frete grátis

—————————————————————————————-
<div id=”sistema-frete-gratis” style=”margin: 15px 0; display: none;”>
<div style=”background-color: #f8f8f8; border-radius: 5px; padding: 12px; border:
1px solid #e5e5e5;”>
<div style=”display: flex; align-items: center; margin-bottom: 8px;”>
<img
src=”data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vc
mcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0I
DI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM0YTkwZTIiIHN0cm9rZS13aWR0aD0iMiIgc3
Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cmVjdC
B4PSIxIiB5PSIzIiB3aWR0aD0iMTUiIGhlaWdodD0iMTMiPjwvcmVjdD48cG9seWdvbi
Bwb2ludHM9IjE2IDggMjAgOCAyMyAxMSAyMyAxNiAxNiAxNiAxNiA4Ij48L3BvbHlnb
24+PGNpcmNsZSBjeD0iNS41IiBjeT0iMTguNSIgcj0iMi41Ij48L2NpcmNsZT48Y2lyY2
xlIGN4PSIxOC41IiBjeT0iMTguNSIgcj0iMi41Ij48L2NpcmNsZT48L3N2Zz4=”
alt=”caminhão” style=”margin-right: 10px; width: 16px; height: 16px;”>
<div id=”texto-frete-gratis” style=”flex-grow: 1; font-size: 14px; color: #333;”>
Carregando…
</div>
</div>
<!– Container da barra de progresso –>
<div style=”width: 100%; height: 10px; background-color: #e0e0e0; border
radius: 5px; overflow: hidden; position: relative;”>
<!– Barra azul (para progresso parcial) –>
<div id=”barra-azul” style=”position: absolute; left: 0; top: 0; height: 100%;
width: 0%; background-color: #4a90e2;”></div>
<!– Barra verde (para progresso completo) –>
<div id=”barra-verde” style=”position: absolute; left: 0; top: 0; height: 100%;
width: 0%; background-color: #4caf50; display: none;”></div>
</div>
</div>
</div>

<script>
// Função imediatamente invocada para isolar o escopo
(function() {
// Configuração
var valorMinimo = 350.00;

// Função para obter elementos DOM
function obterElementos() {
return {
container: document.getElementById(‘sistema-frete-gratis’),
texto: document.getElementById(‘texto-frete-gratis’),
barraAzul: document.getElementById(‘barra-azul’),
barraVerde: document.getElementById(‘barra-verde’)
};
}

// Função para obter o valor do carrinho
function obterValorDoCarrinho() {
try {
var elementoPreco = document.querySelector(‘.price.price–end’);
if (!elementoPreco) {
console.log(‘Elemento de preço não encontrado’);
return 0;
}

var textoPreco = elementoPreco.textContent.trim();

// Remover símbolos e tratar formato brasileiro
var numeros = textoPreco.replace(/[^\d,\.]/g, ”);
if (numeros.indexOf(‘,’) > -1) {
numeros = numeros.replace(/\./g, ”).replace(‘,’, ‘.’);
}

var valor = parseFloat(numeros);
return isNaN(valor) ? 0 : valor;
} catch (e) {
console.error(‘Erro ao obter valor do carrinho:’, e);
return 0;
}
}

// Função para atualizar a barra de progresso
function atualizarBarra(porcentagem, completo) {
var elementos = obterElementos();

if (completo) {
// Quando completo, mostrar apenas a barra verde
elementos.barraVerde.style.width = ‘100%’;
elementos.barraVerde.style.display = ‘block’;
elementos.barraAzul.style.display = ‘none’;
} else {
// Quando incompleto, mostrar apenas a barra azul
elementos.barraAzul.style.width = porcentagem + ‘%’;
elementos.barraAzul.style.display = ‘block’;
elementos.barraVerde.style.display = ‘none’;
}
}
// Função principal para atualizar o display
function atualizarFreteGratis() {
var elementos = obterElementos();
var valorCarrinho = obterValorDoCarrinho();
if (valorCarrinho <= 0) {
elementos.container.style.display = ‘none’;
return;
}
// Exibir o container
elementos.container.style.display = ‘block’;
// Calcular valores
var valorFalta = Math.max(0, valorMinimo – valorCarrinho);
var porcentagem = Math.min(100, (valorCarrinho / valorMinimo) * 100);
var completo = valorFalta <= 0;
// Atualizar a barra de progresso
atualizarBarra(porcentagem, completo);
// Atualizar o texto
if (completo) {
elementos.texto.innerHTML = ‘<strong style=”color:#4caf50″>Parabéns! Você
ganhou Frete Grátis!</strong>’;
} else {
var valorFormatado = new Intl.NumberFormat(‘pt-BR’, {
style: ‘currency’,
currency: ‘BRL’
}).format(valorFalta);

elementos.texto.innerHTML = ‘Adicione mais <strong>’ + valorFormatado +
‘</strong> para obter Frete Grátis!’;
}
}

// Função para teste via console
window.testarFreteGratis = function(valor) {
var elementos = obterElementos();

// Calcular valores
var valorFalta = Math.max(0, valorMinimo – valor);
var porcentagem = Math.min(100, (valor / valorMinimo) * 100);
var completo = valorFalta <= 0;

// Mostrar o container
elementos.container.style.display = ‘block’;

// Testar com valores fixos para depurar
if (valor === 0) {
// Testar barra azul com 50%
elementos.barraAzul.style.width = ‘50%’;
elementos.barraAzul.style.display = ‘block’;
elementos.barraVerde.style.display = ‘none’;
elementos.texto.innerHTML = ‘TESTE: Barra azul 50%’;
}
else if (valor === 999) {
// Testar barra verde 100%
elementos.barraAzul.style.display = ‘none’;
elementos.barraVerde.style.width = ‘100%’;
elementos.barraVerde.style.display = ‘block’;
elementos.texto.innerHTML = ‘TESTE: Barra verde 100%’;
}
else {
// Modo normal: atualizar a barra de progresso
atualizarBarra(porcentagem, completo);

// Atualizar o texto
if (completo) {
elementos.texto.innerHTML = ‘<strong style=”color:#4caf50″>Parabéns! Você
ganhou Frete Grátis!</strong>’;
} else {
var valorFormatado = new Intl.NumberFormat(‘pt-BR’, {
style: ‘currency’,
currency: ‘BRL’
}).format(valorFalta);

elementos.texto.innerHTML = ‘Adicione mais <strong>’ + valorFormatado +
‘</strong> para obter Frete Grátis!’;
}
}
};
// Função para alterar o valor mínimo
window.mudarValorMinimo = function(novoValor) {
if (typeof novoValor === ‘number’ && novoValor > 0) {
valorMinimo = novoValor;
atualizarFreteGratis();
return true;
}
return false;
};
// Inicializar quando o DOM estiver pronto
function iniciar() {
console.log(‘Inicializando sistema de frete grátis’);
atualizarFreteGratis();
setInterval(atualizarFreteGratis, 2000);
}
// Verificar se o DOM já foi carregado
if (document.readyState === ‘loading’) {
document.addEventListener(‘DOMContentLoaded’, iniciar);
} else {
// DOM já carregado, iniciar imediatamente
iniciar();
}
})();
</script>