Selectshop - 관심 상품 등록 및 보이기

자바스크립트의 특성

- 자바스크립트는 파라미터로 전달이 된 것을 자동으로 json 형태로 변경한다.

- 따라서 json.stringify를 적절하게 다시 사용해야 한다.

- 다른것을 보고싶다면 아래의 코드를 실행해 보면 좋다.

    console.log(itemDto);
    console.log(JSON.stringify(itemDto));

 

관심상품 생성 요청

function addProduct(itemDto) {
    /**
     * modal 뜨게 하는 법: $('#container').addClass('active');
     * data를 ajax로 전달할 때는 두 가지가 매우 중요
     * 1. contentType: "application/json",
     * 2. data: JSON.stringify(itemDto),
     */
    // 1. POST /api/products 에 관심 상품 생성 요청
    $.ajax({
        type: "POST",
        url: '/api/products',
        contentType: "application/json",
        data: JSON.stringify(itemDto),
        success: function (response) {
            // 2. 응답 함수에서 modal을 뜨게 하고, targetId 를 reponse.id 로 설정 (숙제로 myprice 설정하기 위함)
            $('#container').addClass('active');
            targetId = response.id;
        }
    })
}

 

관심상품 보이기

function showProduct() {
    /**
     * 관심상품 목록: #product-container
     * 검색결과 목록: #search-result-box
     * 관심상품 HTML 만드는 함수: addProductItem
     */
    // 1. GET /api/products 요청
    $.ajax({
        type:'GET',
        url : '/api/products',
        success:function (response){
            // 2. 관심상품 목록, 검색결과 목록 비우기
            $('#product-container').empty();
            $('#search-result-box').empty();

            // 3. for 문마다 관심 상품 HTML 만들어서 관심상품 목록에 붙이기!
            for (let i = 0; i < response.length; i++) {
                let product = response[i];
                let tempHtml = addProductItem(product);
                $('#product-container').append(tempHtml);
            }
        }
    })
}

 

관심상품 추가하기

function addProductItem(product) {
    // link, image, title, lprice, myprice 변수 활용하기
                                            // onclick - 눌렀을때 produck.link로 이동.
    return `<div class="product-card" onclick="window.location.href='${product.link}'">
                <div class="card-header">
                    <img src="${product.image}"
                         alt="">
                </div>
                <div class="card-body">
                    <div class="title">
                        ${product.title}
                    </div>
                    <div class="lprice">
                        <span>${numberWithCommas(product.lprice)}</span>원
                    </div>
                    <!-- 사망연사자 none 사용 
                    (조건) ? 참일경우 반환 : 거짓일 경우 반환;
                    -->
                    <div class="isgood ${product.lprice > product.myprice ? 'none' : ''}">
                        최저가
                    </div>
                </div>
            </div>`;
}