T2
if(!confirm('Tem certeza que deseja excluir este card?')) return;
produtos.splice(idx,1);
salvarLocalStorage();
ajustarPaginacaoAposMudanca();
renderProdutos();
}
function ajustarPaginacaoAposMudanca(){
// Remove páginas vazias: se a página atual ficou sem itens, recua
const totalItens = produtos.length;
const totalPaginas = Math.max(1, Math.ceil(Math.max(totalItens,1) / produtosPorPagina));
// Índices da página atual
const start = (paginaAtual - 1) * produtosPorPagina;
const end = Math.min(start + produtosPorPagina, totalItens);
if(start >= totalItens && paginaAtual > 1){
paginaAtual = totalPaginas; // recua para a última página existente
}
if(totalItens === 0){
paginaAtual = 1; // sem itens, deixa em 1
}
}
/* Render geral (BUSCA + ORDENAÇÃO) */
function renderProdutos(){
salvarLocalStorage();
const main = document.getElementById('mainContent');
main.innerHTML='';
// Painéis do modo admin (título, banner, cores, pix) + NOVO painel "Adicionar Card"
if(modoAdmin){
// Painel de nome do mercado
const tituloPanel = document.createElement('div');
tituloPanel.className='color-panel';
tituloPanel.innerHTML = `
`;
main.appendChild(tituloPanel);
const inputTitulo = document.getElementById('inputTitulo');
if(inputTitulo){
inputTitulo.value = document.getElementById('tituloHeader').textContent;
inputTitulo.addEventListener('input', (e)=>{
document.getElementById('tituloHeader').textContent = e.target.value || 'Mercado Online';
salvarLocalStorage();
});
}
// Painel do banner
const bannerPanel = document.createElement('div');
bannerPanel.className = 'color-panel';
bannerPanel.innerHTML = `
🖼️ Banner do topo
`;
main.appendChild(bannerPanel);
// Painel de cores (com previews maiores)
const colorPanel = document.createElement('div');
colorPanel.className='color-panel';
colorPanel.innerHTML = `
`;
main.appendChild(colorPanel);
// Painel Pix
const pixDiv = document.createElement('div');
pixDiv.className = 'color-panel';
pixDiv.innerHTML = `
`;
main.appendChild(pixDiv);
const pixSalvo = localStorage.getItem('pixKey');
if(pixSalvo){
const pk = document.getElementById('pixKey');
if(pk) pk.value = pixSalvo;
}
// NOVO: Painel de Adicionar Card
main.appendChild(painelAdicionarCard());
// Inicializa controles de cor
const varMap = {
Bg: '--bg-color',
Card: '--bg-card',
Prim: '--primary-color',
Texto: '--text-color',
BtnTexto: '--btn-text-color'
};
for(let tipo in varMap){
const cssVar = varMap[tipo];
const atual = getComputedStyle(document.body).getPropertyValue(cssVar).trim();
const inColor = document.getElementById('cor'+tipo);
const inHex = document.getElementById('hex'+tipo);
const preview = document.getElementById('preview'+tipo);
if(inColor) inColor.value = atual;
if(inHex) inHex.value = atual;
if(preview) preview.style.background = atual;
if(inColor) inColor.addEventListener('input', e=>{
if(inHex) inHex.value = e.target.value;
if(preview) preview.style.background = e.target.value;
mudarCor(cssVar, e.target.value); salvarLocalStorage();
});
if(inHex) inHex.addEventListener('input', e=>{
if(inColor) inColor.value = e.target.value;
if(preview) preview.style.background = e.target.value;
mudarCor(cssVar, e.target.value); salvarLocalStorage();
});
}
montarPaleta('palBg', '--bg-color', 'corBg', 'hexBg');
montarPaleta('palCard', '--bg-card', 'corCard', 'hexCard');
montarPaleta('palPrim', '--primary-color', 'corPrim', 'hexPrim');
montarPaleta('palTexto', '--text-color', 'corTexto', 'hexTexto');
montarPaleta('palBtnTexto', '--btn-text-color', 'corBtnTexto', 'hexBtnTexto');
} else {
atualizarBannerUI();
}
// Lista e paginação (com busca/ordem)
const termo = (document.getElementById('searchInput')?.value || '')
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g,'');
let listaFiltrada = produtos.filter(p=>{
const texto = (String(p.nome) + ' ' + String(p.categoria))
.toLowerCase()
.normalize('NFD')
.replace(/[\u0300-\u036f]/g,'');
return texto.includes(termo);
});
const criterio = document.getElementById('sortSelect')?.value || '';
if (criterio === "nome") {
listaFiltrada.sort((a,b)=>a.nome.localeCompare(b.nome));
} else if (criterio === "preco") {
listaFiltrada.sort((a,b)=>parseFloat(a.preco)-parseFloat(b.preco));
} else if (criterio === "categoria") {
listaFiltrada.sort((a,b)=>a.categoria.localeCompare(b.categoria));
}
const totalPaginas = Math.max(1, Math.ceil(listaFiltrada.length/produtosPorPagina));
if (paginaAtual > totalPaginas) paginaAtual = totalPaginas;
if (paginaAtual < 1) paginaAtual = 1;
const start=(paginaAtual-1)*produtosPorPagina;
const end=Math.min(start+produtosPorPagina,listaFiltrada.length);
const produtosPagina = listaFiltrada.slice(start,end);
const container = document.createElement('div');
container.className='produtos';
produtosPagina.forEach((p)=>{
// garante campo estoque
if(typeof p.estoque === 'undefined' || p.estoque === null) p.estoque = 0;
const div=document.createElement('div');
div.className='produto';
div.dataset.id = p.id;
// botão de adicionar fica desativado se estoque for 0
const botaoCompra = (p.estoque > 0)
? ``
: ``;
div.innerHTML=`
`;
if(modoAdmin){ div.classList.add('admin'); }
container.appendChild(div);
if(modoAdmin){
// Edição inline (nome, preço, categoria, imagem)
const img = div.querySelector('img');
const h3 = div.querySelector('h3');
const ps = div.querySelectorAll('p');
const pCat = ps[0];
const pPreco = ps[1];
h3.style.cursor='pointer'; h3.title='(Admin) Clique para editar o nome';
h3.addEventListener('click', ()=>{
const idx = produtos.findIndex(x=>x.id===p.id);
const novo = prompt('Editar nome do produto:', produtos[idx].nome);
if(novo!==null){
produtos[idx].nome = novo.trim() || produtos[idx].nome;
salvarLocalStorage(); renderProdutos();
}
});
pPreco.style.cursor='pointer'; pPreco.title='(Admin) Clique para editar o preço';
pPreco.addEventListener('click', ()=>{
const idx = produtos.findIndex(x=>x.id===p.id);
const atual = produtos[idx].preco;
const val = prompt('Editar preço (use ponto para decimais):', atual);
if(val!==null){
const n = parseFloat(val.replace(',','.'));
if(!isNaN(n)){ produtos[idx].preco = n.toFixed(2); salvarLocalStorage(); renderProdutos(); }
else alert('Preço inválido.');
}
});
pCat.style.cursor='pointer'; pCat.title='(Admin) Clique para editar a classificação';
pCat.addEventListener('click', ()=>{
const idx = produtos.findIndex(x=>x.id===p.id);
const atualIdx = Math.max(0, CLASSIFICACOES.indexOf(produtos[idx].categoria));
const menu = CLASSIFICACOES.map((c,i)=>`${i+1} - ${c}`).join('\n');
const escolha = prompt(`Escolha a classificação:\n${menu}\n\nDigite o número da opção:`, (atualIdx+1).toString());
if(escolha!==null){
const num = parseInt(escolha,10);
if(num>=1 && num<=CLASSIFICACOES.length){
produtos[idx].categoria = CLASSIFICACOES[num-1];
salvarLocalStorage(); renderProdutos();
} else {
alert('Opção inválida.');
}
}
});
img.style.cursor='pointer'; img.title='(Admin) Clique para trocar a imagem';
img.addEventListener('click', ()=>{
const idx = produtos.findIndex(x=>x.id===p.id);
const escolha = confirm("OK = enviar imagem do dispositivo\nCancelar = colar uma URL");
if(escolha){
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.style.display = 'none';
document.body.appendChild(input);
input.addEventListener('change', ()=>{
const file = input.files && input.files[0];
if(file){
const reader = new FileReader();
reader.onload = e=>{
produtos[idx].imagem = e.target.result;
salvarLocalStorage(); renderProdutos();
document.body.removeChild(input);
};
reader.readAsDataURL(file);
} else {
document.body.removeChild(input);
}
}, { once:true });
input.click();
} else {
const url = prompt("Cole a URL da imagem:", produtos[idx].imagem || '');
if(url){
produtos[idx].imagem = url;
salvarLocalStorage(); renderProdutos();
}
}
});
}
});
main.appendChild(container);
const pagDiv = document.createElement('div');
pagDiv.className='pagination';
pagDiv.innerHTML = `
`;
main.appendChild(pagDiv);
if(!modoAdmin){
const footer = document.createElement('div');
footer.className='cliente-footer';
footer.innerHTML = `
`;
main.appendChild(footer);
}
if(modoAdmin){
atualizarBannerUI();
} else {
atualizarBannerUI();
}
}
function colarURLBanner(){
const url = prompt('Cole a URL da imagem do banner:');
if(url){
bannerSrc = url.trim();
const bannerEl = document.getElementById('topBanner');
if(bannerEl) bannerEl.src = bannerSrc;
salvarLocalStorage();
}
}
/* ========================
CARRINHO COM QUANTIDADE + BOTÕES ➕/➖
======================== */
function getProdutoById(id){ return produtos.find(p=>p.id===id); }
function adicionarAoCarrinho(index){
// Mantido para compatibilidade antiga (index numérico, não usado no fluxo novo)
const p = produtos[index];
if(p) adicionarAoCarrinhoPorId(p.id);
}
function adicionarAoCarrinhoPorId(prodId){
const p = getProdutoById(prodId);
if(!p){ alert('Produto não encontrado.'); return; }
if((p.estoque||0) <= 0){ alert('Produto esgotado.'); return; }
const precoNum = parseFloat(p.preco);
let item = carrinho.find(i => i.nome === p.nome);
const currentQty = item ? parseInt(item.quantidade||1,10) : 0;
if(currentQty + 1 > (p.estoque||0)){
alert('Não há estoque suficiente para adicionar mais unidades.');
return;
}
if(item){
item.quantidade = currentQty + 1;
} else {
carrinho.push({ nome: p.nome, preco: isNaN(precoNum) ? 0 : precoNum, quantidade: 1 });
}
atualizarCarrinho(); salvarLocalStorage();
atualizarBadgeCarrinho();
alert(`${p.nome} adicionado ao carrinho`);
}
function atualizarCarrinho(){
const ul=document.getElementById('itensCarrinho'); if(!ul) return;
ul.innerHTML='';
let total=0;
carrinho.forEach((item,i)=>{
const li=document.createElement('li');
const unit = isNaN(parseFloat(item.preco)) ? 0 : parseFloat(item.preco);
const qtd = parseInt(item.quantidade||1,10);
const subtotal = unit * qtd;
// botão ➖, input quantidade e botão ➕
li.innerHTML = `
${item.nome}
x R$ ${unit.toFixed(2)} = R$ ${subtotal.toFixed(2)}
`;
ul.appendChild(li);
total+=subtotal;
});
const totalEl = document.getElementById('totalCarrinho');
if(totalEl) totalEl.textContent=total.toFixed(2);
const chkEl = document.getElementById('checkoutTotal');
if(chkEl) chkEl.textContent = total.toFixed(2);
atualizarBadgeCarrinho();
}
function alterarQuantidade(index, valor){
let qtd = parseInt(valor,10);
if(isNaN(qtd) || qtd < 1) qtd = 1;
if(!carrinho[index]) return;
const item = carrinho[index];
const prod = produtos.find(p=>p.nome === item.nome);
const estoqueDisp = prod ? (prod.estoque||0) : Infinity;
if(qtd > estoqueDisp){
alert('Quantidade maior que o estoque disponível.');
qtd = estoqueDisp;
}
item.quantidade = qtd;
atualizarCarrinho(); salvarLocalStorage();
}
function removerItem(i){
const qtd = parseInt(carrinho[i].quantidade||1,10);
if(qtd > 1){
carrinho[i].quantidade = qtd - 1;
} else {
carrinho.splice(i,1);
}
atualizarCarrinho(); salvarLocalStorage();
}
function calcularTotalCarrinho(){
return carrinho.reduce((soma, item)=>{
const unit = isNaN(parseFloat(item.preco))?0:parseFloat(item.preco);
const qtd = parseInt(item.quantidade||1,10);
return soma + unit*qtd;
}, 0);
}
function desistirCompra(){
if(confirm("Deseja realmente desistir da compra e voltar ao início?")){
carrinho = [];
atualizarCarrinho();
salvarLocalStorage();
paginaAtual = 1;
renderProdutos();
fecharCarrinho();
}
}
/* 🆕 SUBSTITUI: abrirPagamento antigo -> agora abre o modal */
function abrirPagamento(){
if(carrinho.length === 0){
alert("Seu carrinho está vazio!");
return;
}
let total = calcularTotalCarrinho().toFixed(2);
const checkoutTotalEl = document.getElementById('checkoutTotal');
if(checkoutTotalEl) checkoutTotalEl.textContent = total;
const modal = document.getElementById('checkoutModal');
if(modal){ modal.style.display = 'flex'; document.body.style.overflow = 'hidden'; }
}
function closeCheckout(){
const modal = document.getElementById('checkoutModal');
if(modal){ modal.style.display = 'none'; document.body.style.overflow = ''; }
}
function fecharCheckout(event){ if(!event || event.target.id==='checkoutModal'){ closeCheckout(); } }
${p.nome}
${p.categoria}
R$ ${p.preco}
Estoque: ${p.estoque}
${botaoCompra}
Comentários
Postar um comentário