Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Minha função verifica estado não funciona, de resto tudo funciona normalmente no html, tanto a parte de adicionar quanto de retirar itens

por João Guilherme Magno Brandão
| 85.8k xp | 8 posts
const itens = [
    {
        id: 0,
        nome: "Camiseta",
        img: "imgs/camisetas.jpg",
        quantidade: 0
    },
    {
        id: 1,
        nome: "Short",
        img: "imgs/bermuda.jpg",
        quantidade: 0
    },
    {
        id: 2,
        nome: "Tênis",
        img: "imgs/tenis.jpg",
        quantidade: 0
    },
]

inicializarLoja = () => {
    var containerProdutos = document.getElementById("produtos");
    itens.map((val)=> {
        containerProdutos.innerHTML += `

        <div class="produto-single"> 
            <img src="${val.img}"/>
            <p class="nome-produto">${val.nome}</p>
            <a class="link-carrinho" key="${val.id}" href="#">Adicionar ao carrinho</a>
        </div>
        `;
    })
    verificaQuantidade();
}

inicializarLoja();

atualizarCarrinho = () => {
    var containerCarrinho = document.getElementById("carrinho");
    containerCarrinho.innerHTML = "";
    itens.map((val)=> {
        if(val.quantidade > 0) {
            containerCarrinho.innerHTML += `
            <p class="nome-produto">${val.nome} | Quantidade: ${val.quantidade} 
                <a class="link-remove" key="${val.id}" href="javascript:removerDoCarrinho(${val.id})">Remover item</a>
            </p>
            <hr>
            `;
        }
    })
    verificaQuantidade();
}


function verificaQuantidade() {
    var tem;
    var estadoCarrinho = document.getElementsByClassName("estado-carrinho");
    for(var i = 0; i < itens.length; i++) {
        if(itens[i].quantidade <= 0) {
            tem = false;
        } else {tem = true}
    }

    if(tem == false) {
        estadoCarrinho.innerHTML = `<p>Seu carrinho está vazio<p>`;
    }
}

var links = document.getElementsByClassName("link-carrinho");

for(var i = 0; i < links.length; i++) {
    links[i].addEventListener("click", function() {
        let key = this.getAttribute("key");
        itens[key].quantidade++;
        atualizarCarrinho();
    });
}

removerDoCarrinho = function(id) {
    for(var i = 0; i < itens.length; i++) {
        if (itens[i].id == id) {
            itens[i].quantidade -= 1;
            atualizarCarrinho();
        }
    }
}
2 respostas
por João Guilherme Magno Brandão
| 85.8k xp | 8 posts

o html: 

<html lang="pt-br">
    <head>
        <title>Loja virtual</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Roboto:ital,wght@1,300&display=swap" rel="stylesheet">
    </head>

    <body>
        <header>
            <div class="caixa-cabecalho">
                <img class="logo" src="imgs/comerce.png">
                <h1 class="titulo">Pipones digital shop</h1>
                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="sobre.html"> Sobre</a></li>
                        <li><a href="contato.html">Contato</a></li>
                        <li><a href="minhaConta.html">Minha conta</a></li>
                    </ul>
                </nav>
            </div>
        </header>

        <section id="main">
            <h2 class="titulo-produtos">Produtos:</h2>
            <main id="produtos">

            </main>

            <h2 class="titulo-carrinho">Seu Carrinho</h2>
            <div class="estado-carrinho">

            </div>
            <div id="carrinho">

            </div>

        </section>

        <script src="index.js"></script>

        <footer>
            <div class="caixa-footer">
                <p class="copyright">© Pipones Digital Shop</p>
            </div>   
        </footer>
    </body>
</html>
solução!
por Mateus Henrique
| 989.4k xp | 1546 posts
Instrutor Desenvolvedor

Fala João Guilherme, tudo bem?

Primeiramente nos desculpe pela demora para uma resposta.

Vamos lá, o que acontece é que ao utilizar document.getElementsByClassName("estado-carrinho") essa função retornará uma array de elementos de acordo com a classe que passamos, veja:

executando document.getElementsByClassName no console e vemos que retorna uma array de elementos de acordo com a classe que passamos

Então para resolver isso, no momento em que formos utilizar a variável que você esta armazenando esses elementos, iremos especificar qual item da array queremos utilizar, como o nosso elemento está no index 0 da array, será esse valor que utilizaremos:

function verificaQuantidade() {
    var tem;
    var estadoCarrinho = document.getElementsByClassName("estado-carrinho");
    for(var i = 0; i < itens.length; i++) {
        if(itens[i].quantidade <= 0) {
            tem = false;
        } else {tem = true}
    }

    if(tem == false) {
        estadoCarrinho[0].innerHTML = `<p>Seu carrinho está vazio<p>`; //Aqui utilizamos o index 0 para que possamos utilizar o primeiro item da nossa array
    }
}

Dessa maneira que fizemos, selecionando qual item dessa array está o nosso elemento, será possivel aplicarmos o innerHTML normalmente.

Espero ter ajudado, bons estudos :D