Como colocar ponto e vírgula nos preços?

Bom dia!

Vc pode usar o método toLocaleString() do JavaScript.

function atualizarCarrinho(){
    let carrinhoElemento = document.getElementById('lista-produtos');
    carrinhoElemento.innerHTML = '';

    carrinho.forEach(item => {
        let precoFormatado = item.preco.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
        carrinhoElemento.innerHTML += `<section class="carrinho__produtos__produto">
            <span class="texto-azul">${item.quantidade}x</span> ${item.nome} <span class="texto-azul">${precoFormatado}</span>
        </section>`;
    });
}

function atualizarCampoTotal(){
    let campoTotal = document.getElementById('valor-total');
    let totalFormatado = totalGeral.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
    campoTotal.textContent = totalFormatado;
}

• toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' }): essa função formatará o valor para o estilo de moeda brasileiro, utilizando R$ e substituindo o ponto por vírgula nos centavos.

Abs.

Para formatar os preços dos produtos e o total do carrinho com um ponto separando as casas decimais e uma vírgula para os centavos, você pode usar a função toLocaleString() do JavaScript. Essa função permite que você formate números de acordo com as convenções de formatação de um idioma específico.

let totalGeral;
let carrinho = [];
limpar();

function adicionar() {
    if (verificarCamposPreenchidos()) {
        // Recuperar valores nome do produto, quantidade e valor
        let produto = document.getElementById('produto').value;
        let nomeProduto = produto.split('-')[0];
        let valorUnitario = parseFloat(produto.split('R$')[1]);
        let quantidade = parseInt(document.getElementById('quantidade').value);

        // Calcular o preço, o nosso subtotal
        let preco = quantidade * valorUnitario;

        // Verifica se o produto já está no carrinho
        let produtoExistente = retornarProduto(nomeProduto);

        if (produtoExistente) {
            // Atualiza a quantidade e o preço do produto
            produtoExistente.quantidade += quantidade;
            produtoExistente.preco += preco;
        } else {
            // Adiciona o novo produto ao carrinho
            carrinho.push({
                nome: nomeProduto,
                quantidade: quantidade,
                preco: preco
            });
        }

        // Atualizar o valor total
        totalGeral += preco;
        atualizarCarrinho();
        atualizarCampoTotal();
        document.getElementById('quantidade').value = '';
    } else {
        alert('Campo(s) "Produto" e/ou "Qtde." não preenchidos!')
    }
}

function limpar() {
    totalGeral = 0;
    document.getElementById('lista-produtos').innerHTML = '';
    document.getElementById('valor-total').textContent = 'R$0,00';
    document.getElementById('produto').value = '';
    document.getElementById('quantidade').value = '';
    carrinho = [];
}

function verificarCamposPreenchidos() {
    let campoProduto = document.getElementById('produto').value;
    let campoQuantidade = document.getElementById('quantidade').value;

    if (campoProduto && campoQuantidade) {
        return true;
    }
    return false;
}

function retornarProduto(nomeProduto) {
    return carrinho.find(item => item.nome === nomeProduto);
}

function atualizarCarrinho() {
    let carrinhoElemento = document.getElementById('lista-produtos');
    carrinhoElemento.innerHTML = '';

    carrinho.forEach(item => {
        carrinhoElemento.innerHTML += `<section class="carrinho__produtos__produto">
            <span class="texto-azul">${item.quantidade}x</span> ${item.nome} <span class="texto-azul">R$${formatarPreco(item.preco)}</span>
        </section>`;
    });
}

function atualizarCampoTotal() {
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$${formatarPreco(totalGeral)}`;
}

// Função para formatar preços
function formatarPreco(valor) {
    return valor.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}

O que foi adicionado/modificado:

Função formatarPreco: Esta função utiliza toLocaleString() para formatar o valor de acordo com as convenções brasileiras, definindo sempre duas casas decimais. Atualização da exibição do preço: Os preços dos produtos e o total do carrinho agora são formatados ao serem exibidos, garantindo que apareçam como R$10,00 em vez de R$10.