6. 카트에 물품담고 오더창으로!

개요!

상품설명창에서,  카트에 물건을 담고,

카트에서 수량을 결정짓고 오더로 넘긴다.

유저의 이름으로 정렬된  CART DB 에서는 담은 물품을 볼 수 있고, 삭제도 가능하다!

ORDER를 누르면, CART DB의 물품들은 삭제되고, ORDER로 넘어가게된다.

 

CART ajax 만들기

 

view에 DELETE를 위한 form을 추가하고 조금 진화시켰다.

발전된 카트 VIEW

 

- 수량이 변경될때마다, 자바스크립트를 사용하여, 실시간으로 가격이 노출되게 하였다.

 

- 화면에 보이는 값을 나타낼때는 '원', '+' 등을 사용하여, 시각적으로 효과를 높이고

   (따로 div를 만들어서 각각 넣어도 봤지만 생각보다 더러워보였다.)

 

- ORDER 버튼을 통해, ORDER DB로 넘길때에는,   "가격 값(num)"의 정확한 형태를 위해, 숫자를 추출해서 넘겼다.

(내 경우, textcontent를 그대로 넘기면, DB에서 "XXXX원=", "XXXX원=" 등으로 생기기 때문에)

       quantityData.push(allQuantity[i].value)

        quantityData[i].replace(/\D/g,"")

숫자 추출시에는 replace를 썼다

 

- CART DB에서 삭제시키고 ORDER에 넣을때는 AJAX 요청을 통해 값을 넘겼다.

req.body의 form 으로 넘기기엔 이미 DELETE 버튼을 그렇게 만들었고,

자바스크립트로 잠시동안만 만들어 놓은 값(element.textContent)들이,

form 형태로 넘어갈지 의문이었다.(실험은 안해보았다.)

 

- ajax으로 넘기면 화면이 넘어가지 않기 때문에, 간단하게 "앵커태그"로 URL주소로 이동시키며 값을 보냈다.

 

 

각각의 요청들은 라우트들을 통해, 서버로 넘어갔고

처리해보았다.

 

ORDER MODEL을 작업중인데, 끝나면 다 같이 refactoring 해봐야겠다.

 

이번에 혼자 작업하면서 많은 부분이 막혔었다.

정작 짜놓고 나면 코드가 더럽기도 하고, 왜 막혔나 이해가 안가는 경우가 대다수지만, 그럼에도 뿌듯했다.

 

막혔던점.

 

ajax 로 요청은 보내서 DB에 전달은 되었는데, 잘되던  res.redirect() 가 먹히지 않았던것

==> button 대신 a 태그로 변경하여 해결

 

자바스크립트로,  textContent의 값을 변경시켜 "xxx원 = ... " 등으로 표기했더니, DB로 넘길때 값이 같이 넘어가는 것.

 

==>방법1

<p> 가격 </p> <span class=disapear > </span> 으로 가격 생성시  

span.classList.add("...")

span.classList.remove("...") 

으로 나타났다 없어졌다를 하려고 했더니 너무 복잡해서

 

==>> 방법2

quantityData.push(allQuantity[i].value)

quantityData[i].replace(/\D/g,"")

으로 값을 추출해 내었다.

 

그밖에도 뭐가 엄청 안됬었는데, 실수가 많았던 것이라 잘 기억이 나지 않는다.

쌩쌩 머리가 안돌아가는 점,

생각을 한쪽으로 하게되면, 뒤돌아서 다른 곳을 바라보지 못하는 점

넓은 시야가 없는점

 

열심히 했다. 첫 미니프로젝트! 마저 달려가보자!

점점 강의랑 다른 코딩이 되어간다. 산으로 가는건 아니겠지...

이젠 돌이킬 수 없어... 혼자 만드는 수밖에...