-
findIndex를 사용하여 구현하였습니다. 두가지 궁금한 점이 생겼습니다. 첫번째) 현재 수량변경에 따라 합계가 변경되는것을 구현하고있습니다. 새로고침해야지 합계가 변경되는데, 어떤 부분이 문제인지 알 수 있을까요? 두번째) 수량버튼을 클릭하면 수량이 변경되고 localStorage내의 수량도 변경되는 식으로 구현했는데 한번에 변경되는 방법이 있을까요?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cart</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <link rel="stylesheet" href="cart.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> </head> </head> <body> <div class="black-bg"> <div class="white-bg"> <h5 class="modal-title">성함</h5> <input/> <h5 class="modal-title">연락처</h5> <input/> <div> <button class="btn btn-danger modal-btn">버튼</button> <button class="btn btn-danger modal-close">닫기</button> </div> </div> </div> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> 집꾸미기 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> Home <li class="nav-item"> 스토어 <li class="nav-item"> 시공견적 <li class="nav-item"> 장바구니 </div> </div> </nav> <div class="main-cart"> <div class="title">장바구니</div> <table class="table"> <thead> <tr> <th scope="col">상품번호</th> <th scope="col">상품명</th> <th scope="col">가격</th> <th scope="col">수량</th> <th scope="col">수량변경</th> <th scope="col">합계</th> <th scope="col">삭제</th> </tr> </thead> <tbody class="table-group-divider"> </tbody> </table> <div class="total-product"> <h4 class="total-title">최종가격</h4> <div class=total-charge>합계 : </div> <button class="btn btn-dark buy-product">구매하기</button> </div> </div> <script> let cart_products = localStorage.getItem('cart'); new_product=JSON.parse(cart_products) console.log('new_product',new_product) var total_charge = 0 new_product.forEach(function(a,i){ var cart_date=`<tr> <th scope="row">${new_product[i].상품번호}</th> <td>${new_product[i].상품명}</td> <td class="product_charge">${new_product[i].가격+'원'}</td> <td class='product_count'>${new_product[i].수량}</td> <td><button class="minus-btn">-</button><button class="plus-btn">+</button></td> <td class="product_totalcharge">${new_product[i].가격*new_product[i].수량 +'원'}</td> <td><button class="btn btn-dark close">삭제</button></td> </tr>` $('.table-group-divider').append(cart_date) }) new_product.forEach(function(a,i){document.querySelectorAll('.plus-btn')[i].addEventListener('click',function(){ plus_count=document.querySelectorAll('.product_count')[i].innerHTML plus_count++ document.querySelectorAll('.product_count')[i].innerHTML=plus_count var new_data = JSON.parse(localStorage.cart); new_data[i].수량++ localStorage.setItem('cart',JSON.stringify(new_data)) })}) new_product.forEach(function(a,i){document.querySelectorAll('.minus-btn')[i].addEventListener('click',function(){ minus_count=document.querySelectorAll('.product_count')[i].innerHTML if (minus_count<=0){ minus_count = 0 }else{ minus_count-- } document.querySelectorAll('.product_count')[i].innerHTML=minus_count var new_data = JSON.parse(localStorage.cart); if (new_data[i].수량<=0){ new_data[i].수량 = 0 }else{ new_data[i].수량-- } localStorage.setItem('cart',JSON.stringify(new_data)) })})
document.querySelector('.buy-product').addEventListener('click',function(){ document.getElementsByClassName('black-bg')[0].classList.add('show-modal') }) document.querySelector('.modal-close').addEventListener('click',function(){ document.getElementsByClassName('black-bg')[0].classList.remove('show-modal') }) </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script> </body> </html>선생님 덕분에 관련 개념 찾아가면서 완성은 했습니다. 코드는 제가 봐도 엉망이네요.. 해당 프로젝트를 완성하면서 세 가지 궁금한 점이 있어 질문드립니다. 1. 총 합계가 새로고침 후 적용됩니다. 마지막 for문이 따로 있어서 그렇다고 생각이 되는데 + - 버튼 클릭시 추가하는 부분에 힌트를 주실 수 있을실까요? 아무리해도 안되네요.. 추가 감소 버튼을 new_product.forEach문을 사용해서인지 원하는 결과값이 나오지 않습니다. 2. 10000원 -> 10,000원 관련한 부분인데요. toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",")와 toLocaleString() 사용했는데 다 문자열로 변환되어서 합계 부분이 이상해지더라구요. 이 부분은 어떻게 수정하면 좋을까요? 3. localStorage를 이용해서 재접속 후에도 남아있도록 구현하는데 많은 시간을 사용했습니다. 자바스크립트만 공부했다는 가정하에 어떤 기능을 추가해보면 좋을까요? 제가 프리패스 수강생이라서.. node.js를 배우고, localstorage로 구현 했던 부분을 mongodb로 데이터 저장해보고 로그인, 댓글 등 기능을 추가하면 좋을까요? 자바스크립트로 더 구현할 수 있는 부분이 있을까요? (메인페이지에서 검색기능은 구현했습니다) 항상 감사합니다.
let cart_products = localStorage.getItem("cart");
new_product = JSON.parse(cart_products);
var total_charge = 0;
new_product.forEach(function (a, i) {
var cart_date = `<tr class="product">
<th scope="row">${new_product[i].상품번호}</th>
<td>${new_product[i].상품명}</td>
<td class="product_charge">${new_product[i].가격 + "원"}</td>
<td><button class="minus-btn btn btn-outline-secondary btn-sm">-</button><span class='product_count'>${
new_product[i].수량
}</span><button class="plus-btn btn btn-outline-secondary btn-sm">+</button></td>
<td class="product_totalcharge">${
new_product[i].가격 * new_product[i].수량 + "원"
}</td>
<td><button class="btn btn-dark close"
style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">삭제하기</button></td>
</tr>`;
$(".table-group-divider").append(cart_date);
});
//전체삭제
document.querySelector(".total_close").addEventListener("click", function () {
document.querySelector(".table-group-divider").remove();
localStorage.clear();
});
//부분삭제
new_product.forEach(function (a, i) {
document
.getElementsByClassName("close")
[i].addEventListener("click", function () {
document.getElementsByClassName("product")[i].remove();
//localStorage에서도 삭제하기
var new_data = JSON.parse(localStorage.cart);
new_data.splice(i, 1);
localStorage.setItem("cart", JSON.stringify(new_data));
});
});new_product.forEach(function (a, i) { // 플러스 버튼 눌렸을 때 document .querySelectorAll(".plus-btn") [i].addEventListener("click", function () { count = document.querySelectorAll(".product_count")[i].innerHTML; count++; document.querySelectorAll(".product_count")[i].innerHTML = count; charge = document.querySelectorAll(".product_charge")[i].innerHTML;product__charge = parseInt(charge) * count + "원"; document.querySelectorAll(".product_totalcharge")[i].innerHTML = product__charge;var new_data = JSON.parse(localStorage.cart); new_data[i].수량++; localStorage.setItem("cart", JSON.stringify(new_data)); }); // 마이너스 버튼 눌렸을 때 document .querySelectorAll(".minus-btn") [i].addEventListener("click", function () { count = document.querySelectorAll(".product_count")[i].innerHTML; if (count <= 0) { count = 0; } else { count--; } document.querySelectorAll(".product_count")[i].innerHTML = count; charge = document.querySelectorAll(".product_charge")[i].innerHTML; document.querySelectorAll(".product_totalcharge")[i].innerHTML = parseInt(charge) * count + "원";var new_data = JSON.parse(localStorage.cart); if (new_data[i].수량 <= 0) { new_data[i].수량 = 0; } else { new_data[i].수량--; }localStorage.setItem("cart", JSON.stringify(new_data)); }); });for (var i = 0; i < new_product.length; i++) { charge = new_product[i].가격 * new_product[i].수량; total_charge += charge; document.querySelector(".total-charge").innerHTML = "총 합계 : " + total_charge + "원"; }선생님 감사합니다. 미흡하지만 선생님 덕분에 전체삭제 부분삭제 수량변경 등 localStorage로 데이터를 저장할 수 있도록 구현했습니다. 하지만 한 가지 문제점과 한 가지 궁금한 점이 있습니다. 질문 1) 단순히 수량 변경만 하면 +,-가 잘 작동됩니다. 하지만 1 삭제하기를 클릭하면(해당 행 삭제) 그럼 상품번호 0과 3만 남게 되는데 부분삭제 후, 상품번호 1을 수량변경(+)을 하면 상품번호 3 수량이 +됩니다. localStorage에서 상품번호2 관련해서 잘 삭제되는데 어떤 문제가 있는 걸까요?
let cart_products = localStorage.getItem("cart"); new_product = JSON.parse(cart_products); var total_charge = 0; new_product.forEach(function (a, i) { var cart_date = `<tr class="products"> <th class="col" scope="row">${new_product[i].상품번호}</th> <td class="col">${new_product[i].상품명}</td> <td class="product_charge col">${new_product[i].가격 + "원"}</td> <td class="col"><button class="minus-btn btn btn-outline-secondary btn-sm">-</button><span class='product_count'>${ new_product[i].수량 }</span><button class="plus-btn btn btn-outline-secondary btn-sm">+</button></td> <td class="col product_totalcharge">${ new_product[i].가격 * new_product[i].수량 }</td> <td><button class="col btn btn-dark close" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">삭제하기</button></td> </tr>`; $(".table-group-divider").append(cart_date); });new_product.forEach(function (a, i) { // 플러스 버튼 눌렸을 때 document .querySelectorAll(".plus-btn") [i].addEventListener("click", function () { count = document.querySelectorAll(".product_count")[i].innerHTML; count++; document.querySelectorAll(".product_count")[i].innerHTML = count; charge = document.querySelectorAll(".product_charge")[i].innerHTML; product_charge = parseInt(charge) * count; document.querySelectorAll(".product_totalcharge")[i].innerHTML = product_charge; var total = []; new_product.forEach(function (a, i) { total[i] = document.getElementsByClassName("product_totalcharge")[ i ].innerHTML; const nuevo = total.map((i) => Number(i)); const result = nuevo.reduce(function add(sum, currVale) { return sum + currVale; }, 0); document.querySelector(".total-charge").innerHTML = "결제 예상 금액 : " + result; }); var new_data = JSON.parse(localStorage.cart); new_data[i].수량++; localStorage.setItem("cart", JSON.stringify(new_data)); }); });new_product.forEach(function (a, i) { // 마이너스 버튼 눌렸을 때 document .querySelectorAll(".minus-btn") [i].addEventListener("click", function () { count = document.querySelectorAll(".product_count")[i].innerHTML; if (count <= 1) { count = 1; } else { count--; } document.querySelectorAll(".product_count")[i].innerHTML = count; charge = document.querySelectorAll(".product_charge")[i].innerHTML; document.querySelectorAll(".product_totalcharge")[i].innerHTML = parseInt(charge) * count; var total = []; new_product.forEach(function (a, i) { total[i] = document.getElementsByClassName("product_totalcharge")[ i ].innerHTML; const nuevo = total.map((i) => Number(i)); const result = nuevo.reduce(function add(sum, currVale) { return sum + currVale; }, 0); document.querySelector(".total-charge").innerHTML = "결제 예상 금액 : " + result; }); var new_data = JSON.parse(localStorage.cart); if (new_data[i].수량 <= 0) { new_data[i].수량 = 0; } else { new_data[i].수량--; } localStorage.setItem("cart", JSON.stringify(new_data)); }); });//전체삭제 document.querySelector(".total_close").addEventListener("click", function () { document.querySelector(".total-charge").style.display = "none"; document.querySelector(".total-count").style.display = "none"; document.querySelector(".table-group-divider").remove(); localStorage.clear(); localStorage.setItem("cart", JSON.stringify(new_data)); });//부분삭제 new_product.forEach(function (a, i) { document .getElementsByClassName("close") [i].addEventListener("click", function () { document.getElementsByClassName("products")[i].remove(); //localStorage에서도 삭제하기 var new_data = JSON.parse(localStorage.cart); new_data.splice(i, 1); localStorage.setItem("cart", JSON.stringify(new_data)); document.querySelector(".total-count").innerHTML = "🛍️ 전체상품 : " + new_data.length + "개"; var total = []; new_product.forEach(function (a, i) { total[i] = document.getElementsByClassName("product_totalcharge")[ i ].innerHTML; const nuevo = total.map((i) => Number(i)); const result = nuevo.reduce(function add(sum, currVale) { return sum + currVale; }, 0); document.querySelector(".total-charge").innerHTML = "결제 예상 금액 : " + result; localStorage.setItem("cart", JSON.stringify(new_data)); }); }); });document.querySelector(".total-count").innerHTML = "🛍️ 전체상품 : " + new_product.length + "개"; var total = []; new_product.forEach(function (a, i) { total[i] = document.getElementsByClassName("product_totalcharge")[ i ].innerHTML; const nuevo = total.map((i) => Number(i)); const result = nuevo.reduce(function add(sum, currVale) { return sum + currVale; }, 0); document.querySelector(".total-charge").innerHTML = "결제 예상 금액 : " + result; });질문 2) 이와 비슷하게 1번 코드에서 전체 삭제할 경우 display = "none"이 되지않아 2번코드로 진행(볼드체 위치변경)하니 display = "none"이 되더라고요. 혹시 이 부분은 어떤 원리에 의해서 이렇게 되는지 궁금합니다. 1번 코드) document.querySelector(".total_close").addEventListener("click", function () { document.querySelector(".table-group-divider").remove(); localStorage.clear(); document.querySelector(".total-charge").style.display = "none"; document.querySelector(".total-count").style.display = "none"; localStorage.setItem("cart", JSON.stringify(new_data)); }); 2번 코드) document.querySelector(".total_close").addEventListener("click", function () { document.querySelector(".total-charge").style.display = "none"; document.querySelector(".total-count").style.display = "none"; document.querySelector(".table-group-divider").remove(); localStorage.clear(); localStorage.setItem("cart", JSON.stringify(new_data)); });
- 답변은 로그인 후 가능합니다.