Widget:Droflax

De Wiki Gla
Revisão de 18h32min de 8 de abril de 2025 por Droflax (discussão | contribs)
Ir para navegação Ir para pesquisar

🛒 Carrinho de Compras

Baratie

Aliança

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

<script> // Variables globales let receitas = {}; const carrinho = {};

// Elementos del DOM const loadingEl = document.getElementById('loading'); const errorEl = document.getElementById('error');

// Función para cargar las recetas desde el JSON externo async function carregarReceitas() { 

 loadingEl.style.display = 'block';
 errorEl.style.display = 'none';
 
 try {
   const response = await fetch('https://wiki.gla.com.br/index.php?title=Receitas.json&action=raw', {
     cache: 'no-cache'
   });
   
   // Verificar si la respuesta es válida
   if (!response.ok) {
     throw new Error(`Erro HTTP: ${response.status}`);
   }
   
   const contentType = response.headers.get('content-type');
   if (!contentType || !contentType.includes('application/json')) {
     throw new Error('A resposta não é um JSON válido');
   }
   
   receitas = await response.json();
   renderizarReceitas();
 } catch (err) {
   console.error('Erro ao cargar receitas:', err);
   errorEl.textContent = `Não foi possível carregar as receitas. (${err.message})`;
   errorEl.style.display = 'block';
   
   // Datos de ejemplo como fallback
   receitas = {
     baratie: {
       b1: { nome: "Carne", thumb: "https://via.placeholder.com/64", cost: 5000 },
       b2: { nome: "Peixe", thumb: "https://via.placeholder.com/64", cost: 5000 }
     },
     alianca: {
       a1: { nome: "Bife e Ovo", thumb: "https://via.placeholder.com/64", cost: 720 },
       a2: { nome: "Medalhão", thumb: "https://via.placeholder.com/64", cost: 850 }
     }
   };
   renderizarReceitas();
 } finally {
   loadingEl.style.display = 'none';
 }

}

// Renderizar todas las recetas function renderizarReceitas() { 

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

}

// Renderizar una sección específica function renderizarSecao(secao) { 

 const container = document.getElementById(`receitas-${secao}`);
 if (!container || !receitas[secao]) return;
 
 container.innerHTML = ;
 
 for (const [id, receita] of Object.entries(receitas[secao])) {
   const card = document.createElement('div');
   card.className = 'receita-card';
   card.innerHTML = `
     <img src="${receita.thumb}" width="64" height="64" />
${receita.nome}
${receita.cost.toLocaleString()} Berry
     <button onclick="adicionarAoCarrinho('${id}')">➕</button>
   `;
   container.appendChild(card);
 }

}

// Funciones del carrito (se mantienen iguales con pequeñas adaptaciones) function adicionarAoCarrinho(id) { 

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

 if (!carrinho[id]) {
   carrinho[id] = { 
     ...receita,
     quantidade: 1,
     preco: receita.cost,  // Mantener compatibilidad
     img: receita.thumb    // Mantener compatibilidad
   };
 } else {
   carrinho[id].quantidade++;
 }
 renderizarCarrinho();

}

function encontrarReceita(id) { 

 for (const secao in receitas) {
   if (receitas[secao][id]) {
     return { 
       ...receitas[secao][id],
       id: id,
       preco: receitas[secao][id].cost,
       img: receitas[secao][id].thumb
     };
   }
 }
 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 {
   margin-bottom: 30px;
   padding: 15px;
   background: #f5f5f5;
   border-radius: 8px;
 }
 
 .receitas-list {
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
 }
 
 .receita-card {
   width: 150px;
   text-align: center;
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 10px;
   background: white;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .receita-card img {
   border-radius: 4px;
   margin-bottom: 8px;
 }
 
 .receita-nome {
   font-weight: bold;
   margin: 5px 0;
 }
 
 .receita-preco {
   color: #2a6496;
   font-weight: bold;
   margin-bottom: 10px;
 }
 
 .item-carrinho {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 8px;
   margin-bottom: 10px;
   background: white;
 }
 
 .info-carrinho {
   flex: 1;
 }
 
 .controle-quantidade {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-top: 5px;
 }
 
 .controle-quantidade input {
   width: 50px;
   text-align: center;
   padding: 3px;
 }
 
 .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> `);

// Inicialización document.addEventListener('DOMContentLoaded', carregarReceitas); </script>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Droflax&oldid=30445”