장바구니에 상품 담기

 $this.parent().parent().find('div.productAdded').fadeIn();

 $this.parent().parent().find('div.productAdded').fadeIn();

카트 담은거 보여주는 [ cart_partial.html ]

-> (장바구니 페이지 제외) 모든 페이지마다 공통으로 들어가는 사이드 카트이다. (상품개수, 총가격)
 

<div class="bg-dark text-white p-3 mt-3" th:fragment="cart_partial">
    <div class="cart cartActive" th:if="${cartActive}">
        <p>장바구니에 <span th:text="${csize}"></span> 개 상품이 있습니다.</p>
        <p>총 가격은 <span th:text="${ctotal}"></span> 원 입니다.</p>
        <p>
            <a href="/cart/view" class="btn btn-success">카트 보기</a>
            <a href="/cart/clear" class="btn btn-danger float-right">비우기</a>
        </p>
    </div>
    <div class="cart cartInactive" th:unless="${cartActive}">
        <p>장바구니가 없습니다.</p>
    </div>
</div>

 

th:if  는 if 절을 의미 , th:unless 는 not if 를 의미

th:if="${cartActive}" 
th:unless="${cartActive}"

[ Common ] 
model.addAttribute("cartActive", cartActive); 을 쓴 이유 
장바구니가 있으면 true , 없으면 false

 

 

th:fragment="cart_partial" -> [categoreis.html] 에 추가

<div th:replace="/fragments/cart_partial"></div> 

 

 

---

 

[ CatrController ]

 

@GetMapping("/add/{id}") 상품 id 추가할때

 

밑에 추가하기

HashMap<Integer, Cart> cart = (HashMap<Integer, Cart>)session.getAttribute("cart");

int size = 0; //장바구니 상품 갯수
int totalPrice = 0; //총 가격

//장바구니 cart객체 반복 (1,cart객체) (2,cart객체)... id빼고 객체만
for(Cart item : cart.values()) {
    size += item.getQuantity(); // 장바구니 갯수
    totalPrice += item.getQuantity() * Integer.parseInt(item.getPrice()); //가격 문자형인데 int형변환 해주기
}
model.addAttribute("size", size);
model.addAttribute("totalPrice", totalPrice);

return "cart_view";

 

[ products.html ]

상품 밑에 카트 담는 버튼 추가

<div style="position: relative">
  <p>
    <a class="btn btn-primary addToCart" th:attr="data-id=${product.id}" th:href="@{'/cart/add/' + ${product.id}}">
      장바구니담기
    </a>
  </p>
  <div class="btn btn-sm btn-success hide productAdded">추가됨!</div>
</div>

※ relative는 부모, absolute는 자식이라고 보면된다.

 

 

부모 position: relative 

자식은 css로 position: absolute 넣어서

div.productAdded 가 자식이 됨.

div.productAdded {
    position: absolute;
    bottom: 5px;
    left: 10em;
}
.hide {
    display: none;
}

= 추가! 버튼은 일단 숨기고 

나중에 장바구니 담기 버튼 누를시 '추가!' 텍스트가 뜨도록 해주자!

 

 

 <a class="btn btn-primary addToCart" th:attr="data-id=${product.id}"
      th:href="@{'/cart/add/' + ${product.id}}">
      장바구니 담기
 </a>

- 장바구니 담기 버튼을 눌렀을때 이동하는 과정

th:href="@{'/cart/add/' + ${product.id}}" 의 주소인 @GetMapping("/add/{id}") 의 return "cart_view" 페이지로 

 

 

 

- AJAX로 장바구니 추가 업데이트 시키기

위의 장바구니 담기 버튼 눌렀을때 실행하는 함수

<script>
  $('a.addToCart').click(function(e){
    alert('장바구니 누름');
  })
</script>

 

[ cart_view ] 만들기

<p>장바구니에 <span th:text="${size}"></span> 개 상품이 있습니다.</p>
<p>총 가격은 <span th:text="${totalPrice}"></span> 원 입니다.</p>
<p>
    <a href="/cart/view" class="btn btn-success">카트 보기</a>
    <a href="/cart/clear" class="btn btn-danger float-right">비우기</a>
</p>

 

결과

 

근데! 위의 cart_view 페이지로 안넘어가게 하도록 하려면

e.preventDefault();  써서 a태그의 이동요청이 취소되도록 해준다.

<script>
  $('a.addToCart').click(function(e){
    alert('장바구니 누름');
    e.preventDefault();
    let $this = $(this);
    let id = $this.attr('data-id');
    let url = '/cart/add/'+id;
  })
</script>

 

- $제이쿼리 변수명 = this 는 내가 클릭한것 

let $this = $(this);

 

 

- id가 있어야 controller 에 넘김.

let id = $this.attr('data-id'); -> 클릭한 속성값이 data-id인 product.id값을 id 변수에 저장

장바구니 담기 클릭버튼에
th:attr="data-id=${product.id}" 의 의미는 data-id의 속성이  product.id 이다

 

 

#AJAX

가져오는 주소 url / 보내는 데이터 없음 {} / 결과 데이터 data 

$.get(url,{},function(data){
  console.log(data);
});

/cart/add/{id}의 return값 cart_view.html 로 가는게 아니라 AJAX로 결과값 data를 보내줌 

왜안나오지..???

 

 

그 결과값을 아래의 장바구니 표시부분에 [cart_partial] 에 보여주기

 

AJAX

$.get(url,{},function(data){
  $('div.cart').html(data); //장바구니 덮어쓰기
}).done(function(){ //.done 성공했을때
  $this.parent().parent().find('div.productAdded').fadeIn(); //'추가!'가 희미하게 보여짐
  setTimeout(function(){ //1초동안 희미하게 사라지는 함수
    $this.parent().parent().find('div.productAdded').fadeOut(); 
  },1000);
})

 

- 장바구니 덮어쓰기

$('div.cart').html(data); 는 어디서 오느냐

<div class="cart cartActive" th:if="${cartActive}">
    <p>장바구니에 <span th:text="${csize}"></span> 개 상품이 있습니다.</p>
    <p>총 가격은 <span th:text="${ctotal}"></span> 원 입니다.</p>
    <p>
        <a href="/cart/view" class="btn btn-success">카트 보기</a>
        <a href="/cart/clear" class="btn btn-danger float-right">비우기</a>
    </p>
</div>

위의 [cart_partial.html] 의 div.cart
th:fragment="cart_partial" 

모든 페이지에 나오는 카테고리에서 cart_patial도 출력됨 
[categories.html] <div th:replace="/fragments/cart_partial"></div>

 

 

 

- 추가! 버튼 나타났다가 사라지기 이벤트

 $this.parent().parent().find('div.productAdded').fadeIn();

장바구니 담기 버튼(this)을 눌렀을때 -> .부모(p) -> .부모(div) 에서 찾는

div.productAdded 는 추가! 버튼

fadeIn() 희미하게 보여지도록, fadeOut() 희미하게 사라지도록 함수 주기

 

 

 

☆새로고침하면 세션에서 다 비워져서 다시 원상태로 돌아간다.