En mi página tengo varios productos, cada uno con su respectivo botón de agregar al carrito, cuando se le da click a ese botón se abre un cuadro con una lista de los productos que van siendo agregados done dice su nombre, su cantidad y su precio. El problema es que se si vuelvo a agregar el mismo producto este se repite en la lista
y en vez de eso quiero que aumente la cantidad,es decir si antes decia "producto x, cantidad 1" quiero que diga "producto x cantidad 2" pero que no se repita. Entonces necesito un metodo, una condicional para detectar si un producto ya esta agregado en mi lista
Aqui aLgo de codigo:
let lista_de_productos = document.querySelector(".lista_de_productos");
carrito_btn = document.querySelectorAll(".btn_carrito");
for (cada_btn_carrito of carrito_btn) {
let precio_c = cada_btn_carrito.parentElement.parentElement.querySelector("p").innerHTML;
let nombre_c = cada_btn_carrito.parentElement.parentElement.querySelector("h3 a").innerHTML;
cada_btn_carrito.onclick = () => {
lista_de_productos.innerHTML +=
` <li>
<div class='nombre_p_list w-50'>${nombre_c}</div>
<input type='text' name='' value='1'>
<span class='mx-3 cerrar_lista'>x</span>
<span class='list_price'>${precio_c}</span>
</li> `
}
}
<!-- el producto ----->
<article class="producto">
<a href="http://"><img src="img/miProducto.jpg"></a>
<h3><a href="http://">titulo de mi producto</a></h3>
<p class="precio">$325.00</p>
<i class="btn_carrito">mi boton carrito</i>
</article>
<!-- la lista ----------->
<form class="lista_carrito">
<div class="text-right">
<span class="">x</span>
</div>
<ul class=" lista_de_productos list-unstyled border mx-2">
<!-- aqui agrego las listas con javascript -->
</ul>
</form>