Widget:Droflax

🛒 Carrinho de Compras

 <button id="esvaziar-carrinho" class="acao-carrinho">Esvaziar Carrinho</button>
 <button id="mostrar-total" class="acao-carrinho">Mostrar Total</button>

<script> // Dados das receitas const receitas = {

 baratie: [
   { id: 'b1', nome: "Carne", preco: 5000, img: "https://wiki.gla.com.br/index.php/Comidas#/media/Arquivo:Bife_prime.png" },
   { id: 'b2', nome: "Peixe", preco: 5000, img: "https://wiki.gla.com.br/index.php/Comidas#/media/Arquivo:Pescado_prime.png" },
   { id: 'b3', nome: "Salada", preco: 5000, img: "https://wiki.gla.com.br/index.php/Comidas#/media/Arquivo:Ensalada_prime.png" },
   { id: 'b4', nome: "Sobremesa", preco: 5000, img: "https://wiki.gla.com.br/index.php/Comidas#/media/Arquivo:Postre_prime.png" }
 ],
 alianca: [
   { id: 'a1', nome: "Bife e Ovo de Frigideira", preco: 720, img: "https://wiki.gla.com.br/images/8/80/Bifeovofrigideira.png" },
   { id: 'a2', nome: "Medalhão de Carne", preco: 850, img: "https://wiki.gla.com.br/images/f/fe/Medalhaodecarne.png" },
   { id: 'a3', nome: "Salada Italiana", preco: 1440, img: "https://wiki.gla.com.br/images/9/91/Salada_italiana.png" },
   { id: 'a4', nome: "Espeto de Carne Gourmet", preco: 1745, img: "https://wiki.gla.com.br/images/2/2d/Espetodecarnegourmet.png" },
   { id: 'a5', nome: "Curry de Coelho", preco: 1060, img: "https://wiki.gla.com.br/images/9/92/Curry_coelho.png" },
   { id: 'a6', nome: "Camarões Salteados", preco: 2125, img: "https://wiki.gla.com.br/images/5/5b/Camar%C3%A3o_salteado.png" },
   { id: 'a7', nome: "Ensopado de Ostra", preco: 1250, img: "https://wiki.gla.com.br/images/c/c4/Ensopado_ostra.png" },
   { id: 'a8', nome: "Paella de Frutos do Mar", preco: 2460, img: "https://wiki.gla.com.br/images/9/9c/Paella_de_frutos.png" },
   { id: 'a9', nome: "Atum Grelhado", preco: 1420, img: "https://wiki.gla.com.br/images/9/90/Atum_grelhado.png" },
   { id: 'a10', nome: "Bife Wagyu", preco: 2805, img: "https://wiki.gla.com.br/images/2/26/Bife_wagyu.png" }
 ]

};

// Carrinho const carrinho = {};

// Renderizar receitas function renderizarReceitas() {

 renderizarSecao('baratie');
 renderizarSecao('alianca');

}

function renderizarSecao(secao) {

 const container = document.getElementById(`receitas-${secao}`);
 container.innerHTML = ;
 
 receitas[secao].forEach(receita => {
   const card = document.createElement('div');
   card.className = 'receita-card';
   card.innerHTML = `
     <img src="${receita.img}" width="64" height="64" />

${receita.nome}

${receita.preco.toLocaleString()} Berry

     <button onclick="adicionarAoCarrinho('${receita.id}')">➕</button>
   `;
   container.appendChild(card);
 });

}

// Funções do carrinho function adicionarAoCarrinho(id) {

 let receita = encontrarReceita(id);
 if (!receita) return;

 if (!carrinho[id]) {
   carrinho[id] = { ...receita, quantidade: 1 };
 } else {
   carrinho[id].quantidade++;
 }
 renderizarCarrinho();

}

function encontrarReceita(id) {

 for (const secao in receitas) {
   const receita = receitas[secao].find(r => r.id === id);
   if (receita) return receita;
 }
 return null;

}

function alterarQuantidade(id, alteracao) {

 if (alteracao === 100) {
   carrinho[id].quantidade = 100;
 } else {
   carrinho[id].quantidade += alteracao;
 }
 
 if (carrinho[id].quantidade <= 0) {
   delete carrinho[id];
 }
 renderizarCarrinho();

}

function atualizarQuantidadeManual(id, event) {

 const novoValor = parseInt(event.target.value);
 if (!isNaN(novoValor) && novoValor >= 0) {
   if (novoValor === 0) {
     delete carrinho[id];
   } else {
     carrinho[id].quantidade = novoValor;
   }
   renderizarCarrinho();
 }

}

function esvaziarCarrinho() {

 for (const id in carrinho) {
   delete carrinho[id];
 }
 renderizarCarrinho();

}

function mostrarTotal() {

 const total = calcularTotal();
 alert(`Total atual: ${total.toLocaleString()} Berry`);

}

function calcularTotal() {

 return Object.values(carrinho).reduce((sum, item) => sum + (item.preco * item.quantidade), 0);

}

function renderizarCarrinho() {

 const container = document.getElementById('carrinho-container');
 container.innerHTML = ;
 let total = 0;

 for (const id in carrinho) {
   const item = carrinho[id];
   const subtotal = item.preco * item.quantidade;
   total += subtotal;

   const itemDiv = document.createElement('div');
   itemDiv.className = 'item-carrinho';
   itemDiv.innerHTML = `
     <img src="${item.img}" width="40" height="40" />

${item.nome}

         <button onclick="alterarQuantidade('${id}', -1)">−</button>
         <input type="number" value="${item.quantidade}" min="0" 
                onchange="atualizarQuantidadeManual('${id}', event)">
         <button onclick="alterarQuantidade('${id}', 1)">+</button>
         <button class="btn-100" onclick="alterarQuantidade('${id}', 100)">x100</button>

${subtotal.toLocaleString()} Berry

     <button class="remover-item" onclick="removerDoCarrinho('${id}')">🗑️</button>
   `;
   container.appendChild(itemDiv);
 }

 document.getElementById('carrinho-total').innerText = total > 0
   ? `Total: ${total.toLocaleString()} Berry`
   : ;

}

function removerDoCarrinho(id) {

 delete carrinho[id];
 renderizarCarrinho();

}

// Event listeners document.getElementById('esvaziar-carrinho').addEventListener('click', esvaziarCarrinho); document.getElementById('mostrar-total').addEventListener('click', mostrarTotal);

// Estilos CSS document.head.insertAdjacentHTML('beforeend', ` <style>

 .receitas-container {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 24px;
 }
 
 .receita-card {
   width: 150px;
   text-align: center;
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 8px;
   background-color: #fff;
   box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
   transition: transform 0.2s;
 }

 .receita-card:hover {
   transform: scale(1.05);
 }

 .receita-nome {
   font-weight: bold;
   margin: 4px 0;
   min-height: 3em; /* força ocupar duas linhas mesmo se o texto for curto */
   line-height: 1.5em;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
 }

 .receita-preco {
   margin-bottom: 6px;
 }
 
 .item-carrinho {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 8px;
   margin-bottom: 8px;
 }
 
 .info-carrinho {
   flex: 1;
 }
 
 .controle-quantidade {
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 4px;
 }
 
 .controle-quantidade input {
   width: 50px;
   text-align: center;
   padding: 2px;
 }
 
 .controle-quantidade button {
   width: 24px;
   height: 24px;
 }
 
 .btn-100 {
   width: auto !important;
   padding: 0 4px;
   margin-left: 4px;
   font-size: 12px;
 }
 
 .remover-item {
   background: none;
   border: none;
   cursor: pointer;
   font-size: 16px;
 }
 
 .acao-carrinho {
   padding: 8px 16px;
   background-color: #4393ff;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
 }
 
 .acao-carrinho:hover {
   background-color: #3275c7;
 }

 #carrinho-container {
   width: 25%;
 }

</style> `);

// Inicializar renderizarReceitas(); </script>