관심 상품 보여주기

$(documetnt).ready 함수의 의미

 페이지가 모두 로드된 직후 제일 먼저 실행할 자바스크립트 코드를 넣는 곳입니다.

즉 접속할 때, 새로고침 할 때 마다 이부분이 다시 실행된다.

일단 접속하면 관심 상품을 보여줘야 하기 때문에 맨 하단을 보면 showProduct() 함수를 실행하도록 작성하였다.

우선 이녀석을 만들어 보자

 

static > basic.js > showProduct()

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);
            }
        }
    })
}

execSearch 처럼 ajax로 먼저 products 데이터를 불러와서 관심상품 목록과 검색 결과를 비워준 후

for문 마다 관심상품 HTML을 만들어서 하나씩 붙이면 되는데 그 HTML를 addProductItem() 에서 설정해 준다.

 

static > basic.js > addProductItem ()

function addProductItem(product) {
    // link, image, title, lprice, myprice 변수 활용하기
    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>
                <div class="isgood ${product.lprice <= product.myprice ? '':'none'}">
                    최저가
                </div>
            </div>
        </div>`;
}

 

css에서 product-card 클래스를 가져와서 데이터가 들어갈 자리를 수정한다.

lprice 는 단위별 콤마가 들어갈 수 있게 numberWithCommas를 이용하고

최저가 딱지를 붙여주는 isgood 클래스는 3항 연산자를 이용하여 최저가와 내가 원하는 가격을 비교하여 

isgood 과 none 으로 출력한다.