Jquery loja whatsapp

by thvinic

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carrinho de Compras</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body { font-family: Arial, sans-serif; }
        .produto { margin: 10px 0; }
        .carrinho { margin-top: 20px; }
        .remover { color: red; cursor: pointer; margin-left: 10px; }
    </style>
</head>
<body>

<h1>Produtos</h1>
<div class="produto">
    <span id="nome">Nome do produto</span>
    <input type="number" class="quantidade" value="1" min="1">
    <span id="valor">9,90</span>
    <button class="adicionar">Adicionar ao Carrinho</button>
</div>

<div class="produto">
    <span id="nome">Produto 2</span>
    <input type="number" class="quantidade" value="1" min="1">
    <span id="valor">25,99</span>
    <button class="adicionar">Adicionar ao Carrinho</button>
        <button class="enviar-whatsapp">Comprar Agora</button>
</div>

<div class="carrinho">
    <h2>Carrinho</h2>
    <ul id="lista-carrinho"></ul>
    <strong>Total: R$<span id="total">0.00</span></strong>
    <br>
    <button id="finalizar-pedido">Finalizar Pedido</button>
        <button class="enviar-whatsapp">Comprar Agora</button>
</div>

<script src="script.js"></script>
</body>
</html>


<br><br><br><br><br>

observações adicionais:
observações adicionais:
observações adicionais:

<div class="produto" style="display:none">
aqui    <span id="nome">Produto 2</span>
        <input type="number" class="quantidade" value="1" min="1">
aqui    <span id="valor">25,99</span>
    <button class="adicionar">Adicionar ao Carrinho</button>
    <button class="enviar-whatsapp">Comprar Agora</button>
</div>


o nome do produto e o valor deve ser diferente, para post individual

JavaScript

$(document).ready(function() {
    let carrinho = JSON.parse(localStorage.getItem('carrinho')) || [];
    let total = calcularTotal(carrinho);
    atualizarCarrinho();

    // Função para adicionar produtos ao carrinho
    $('.adicionar').click(function() {
        const nome = $(this).siblings('#nome').text();
        const precoTexto = $(this).siblings('#valor').text().replace('R$', '').trim();
        const preco = parseFloat(precoTexto.replace('.', '').replace(',', '.'));
        const quantidade = parseInt($(this).siblings('.quantidade').val());

        const itemExistente = carrinho.find(item => item.nome === nome);
        if (itemExistente) {
            itemExistente.quantidade += quantidade;
        } else {
            carrinho.push({ nome, preco, quantidade });
        }

        total += preco * quantidade;
        atualizarCarrinho();
        salvarCarrinho();
    });

    // Função para calcular o total do carrinho
    function calcularTotal(carrinho) {
        return carrinho.reduce((soma, item) => soma + (item.preco * item.quantidade), 0);
    }

    // Função para atualizar a exibição do carrinho
    function atualizarCarrinho() {
        $('#lista-carrinho').empty();
        carrinho.forEach((item, index) => {
            $('#lista-carrinho').append(`
                <li>${item.nome} - R$${item.preco.toFixed(2).replace('.', ',')} (Quantidade: ${item.quantidade})
                    <span class="remover" data-index="${index}">x</span>
                </li>
            `);
        });
        $('#total').text(total.toFixed(2).replace('.', ','));
    }

    // Função para salvar o carrinho no localStorage
    function salvarCarrinho() {
        localStorage.setItem('carrinho', JSON.stringify(carrinho));
    }

    // Função para remover produto do carrinho
    $(document).on('click', '.remover', function() {
        const index = $(this).data('index');
        const item = carrinho[index];
        total -= item.preco * item.quantidade;
       ...