나만의셀렉샵) 관심 상품 보여주기

- $(document).ready 함수의 의미

페이지가 모두 로드된 직후 실행할 자바스크립트 코드를 넣는 곳

컴파일러가 index.html을 위에서 아래로 순서대로 해석을 하는데

js 파일이 index 파일에서 위쪽에 적혀있어도

index 파일을 파일 끝까지 모두 다 해석한 뒤 js 파일의 $(document),ready 부분을 해석함

 

(일단 접속하면 관심 상품을 보여주어야 하기 때문에 showProduct 함수를 호출하고 있음)

 

 

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

 

 

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