네 선생님 도움으로 수정했습니다. 그런데 이미 상품이 있을경우 return false를하고 똑같은 상품이 없을경우
push를 하는코드를 작성했는데,,, return부분에서 잘못 구현한걸까요?
<!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>Store</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="store.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
</head>
</head>
<body>
<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">
장바구니
<form class="d-flex " role="search">
<input class="form-control me-2" type="text" id="search" onkeyup="filter()" placeholder="원하는 품목을 입력하세요" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="row product-list">
<!-- <div class="col-md-3">
< img src="">
<h4>상품명 : </h4>
<p>가격 : </p>
</div> -->
</div>
</div>
<script>
var products=[
{
"id": 0,
"title": "식기세척기",
"brand": "세척나라",
"photo": "./images/pr1.jpg",
"price": 10000
},
{
"id": 1,
"title": "원목 침대 프레임",
"brand": "침대나라",
"photo": "./images/pr2.jpg",
"price": 20000
},
{
"id": 2,
"title": "천연 디퓨저 세트",
"brand": "향기나라",
"photo": "./images/pr3.jpg",
"price": 30000
},
{
"id": 3,
"title": "시원한 서큘레이터",
"brand": "바람나라",
"photo": "images/pr4.jpg",
"price": 40000
},
{
"id": 4,
"title": "1800 거실장 시리즈",
"brand": "리바트",
"photo": "images/pr5.jpg",
"price": 123000
},
{
"id": 5,
"title": "원룸거실장",
"brand": "이케아",
"photo": "images/pr6.jpg",
"price": 35000
},
{
"id": 6,
"title": "초등학생 의자",
"brand": "시디즈",
"photo": "images/pr7.jpg",
"price": 17900
},
{
"id":7,
"title": "다용도 접이스툴(L)",
"brand": "LOVING HOME",
"photo": "images/pr8.jpg",
"price": 9900
}
]
products.forEach((a,i)=>{
var count=0
var Data=`
<div class="card listinner" style="width: 20%;" id="drag1" draggable="true" ondragstart="drag(event)">
<img class="card-img" src="${products[i].photo}" alt="...">
<div class="card-body">
<h4 class="card-id">${products[i].id}</h4>
<h5 class="card-title">${products[i].title}</h5>
<p class="card-brand">${products[i].brand}</>
<h6 class="card-price">${products[i].price.toLocaleString()+'원'}</h6>
<button class="add btn btn-primary buy" data-id="${products[i].id}">담기</button>
<button class="good">💗<span class='good_number'>${count}</span></button>
</div>
</div>`;
$('.product-list').append(Data)
document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
var local_id = $(e.target).siblings('h4').text();
var local_title = $(e.target).siblings('h5').text();
var local_charge = $(e.target).siblings('h6').text();
var num = 1;
var local_cart_product={'상품번호':local_id,'상품명':local_title,'가격':local_charge,'수량':num}
if(localStorage.getItem('cart')!=null){
var new_data = JSON.parse(localStorage.cart);
//localStorage에 값이 있으면?
if(new_data.includes(local_cart_product)){
return false
}else{
new_data.push(local_cart_product);
localStorage.setItem('cart',JSON.stringify(new_data))
}
}
else {
localStorage.setItem('cart',JSON.stringify([local_cart_product]));
}
})
//좋아요 하트를 클릭하면
document.querySelectorAll('.good')[i].addEventListener('click',function(){
count++;
document.querySelectorAll('.good_number')[i].innerHTML=count
})
/*
document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
var local_title = $(e.target).siblings('h5').text();
if(localStorage.getItem('cart')!=null){
var new_data = JSON.parse(localStorage.cart);
//localStorage에 값이 있으면?
if(new_data.includes(local_title)){
return false
}else{
new_data.push(local_title);
localStorage.setItem('cart',JSON.stringify(new_data))
}
}
else {
localStorage.setItem('cart',JSON.stringify([local_title]));
}
})*/
})
//document.querySelectorAll('.add')[i].addEventListener('click',()=>{alert("장바구니에 추가 하겠습니까?")})})
//document.querySelectorAll('.add')[i].addEventListener('click',()=>{console.log(products[i].id)})})
function filter(){
let seacrch = document.getElementById("search").value.toLowerCase();
let listinner = document.querySelectorAll('.listinner')
for (let i=0; i<=listinner.length; i++){
title = listinner[i].getElementsByClassName('card-title');
if(title[0].innerHTML.toLowerCase().includes(seacrch)){
listinner[i].style.display='flex'
}else{
listinner[i].style.display='none'
}
}
}
</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>
document.getElementsByClassName("buy")[i].addEventListener('click',function(e){
var local_id = $(e.target).siblings('h4').text();
var local_title = $(e.target).siblings('h5').text();
var local_charge = $(e.target).siblings('h6').text();
var num = 1;
var local_cart_product=`{'상품번호':${local_id},'상품명':${local_title},'가격':${local_charge},'수량':${num}}`
console.log(local_cart_product)
if(localStorage.getItem('cart')!=null){
var new_data = JSON.parse(localStorage.cart);
//localStorage에 값이 있으면?
if(new_data.includes(local_cart_product)){
return false
}else{
new_data.push(local_cart_product);
localStorage.setItem('cart',JSON.stringify(new_data))
}
}
else {
localStorage.setItem('cart',JSON.stringify([local_cart_product]));
}
bold처리한 부분을 잘못 구현했을까요..?! 힌트 주세요 선생님,,