[JavaScript] 2020년도 지방기능경기대회 과제(웹디자인 및 개발) 공부하기2

* 본 포스팅은 필자가 개인적으로 학습한 내용정리 및 리뷰를 위해 포스팅합니다.

---

 

{
  "products": [
    {
      "id": 0,
      "title": "식기세척기",
      "brand": "세척나라",
      "photo": "pr1.jpg",
      "price": 10000
    },
    {
      "id": 1,
      "title": "원목 침대 프레임",
      "brand": "침대나라",
      "photo": "pr2.jpg",
      "price": 20000
    },
    {
      "id": 2,
      "title": "천연 디퓨저 세트",
      "brand": "향기나라",
      "photo": "pr3.jpg",
      "price": 30000
    },
    {
      "id": 3,
      "title": "시원한 서큘레이터",
      "brand": "바람나라",
      "photo": "pr4.jpg",
      "price": 40000
    }
  ]
}

▲ 스크립트 파트에서 데이터가 담긴 json을 가져온다.

 

 

// products 데이터 불러오기
let data = [];
$.get("store.json")
  .done(function (data) {
    data = data.products;
    list(data); //상품리스트
    find(data); //상품찾기
    draglist(data); //장바구니 내 객체
  })
  .fail(function () {
    console.log("데이터를 가져오는데 실패함");
  });

▲ jquery를 이용하여 배열로 가져온다. 배열을 각각 상품리스트, 상품 찾기, 장바구니 함수에 파라미터로 던져준다.

 

 

// 상품 리스트 생성
      function list(name) {
        // 기본 보이는 상품 객체 생성
        name.forEach((a, i) => {
          $(".row").append( `<div id="${name[i].id}" class="col"
            draggable="true" ondragstart="drag(event)">
            <img src="${name[i].photo}" width="155px" height="100px" sytle=""/>
            <h5>${name[i].title}</h5>
            <p>${name[i].brand}</p>
            <h5>가격 : ${name[i].price}</h5>
            <button class="plusbtn">담기</button>
            </div>`)
          

          // 담기 버튼을 눌렀을 때
          $(".plusbtn")
            .eq(i) // 버튼을 판별하기위해 eq
            .on("click", () => {
              // 해당되는 상품을 장바구니에 담기
              $(".drag-point").append(
                document.getElementById(parseInt(name[i].id) + 4)
              );
              $(`#${parseInt(name[i].id) + 4}`).css("display", "inline-block");
              $(`#${parseInt(name[i].id) + 4} > input`).attr(
                "value",
                count[i]++
              );
              var result_price = $(
                `#${parseInt(name[i].id) + 4} :nth-child(4)`
              ).html();
              console.log(price);
              price += parseInt(result_price);
              $(".result_form_price").html(price);
            });
        });
      }

▲ 받아온 배열을 백틱을 사용해서 상품 HTML을 forEach반복을 통해 row에 담아준다. 

담기 버튼을 눌렀을 때 구분을 위해 eq를 사용했고 장바구니에 상품을 추가해주고 앞서 만든 count라는 array에 해당 상품의 장바구니에 닮긴 개수를 올려주고 전체 금액 또한 올려준다. 

 

// 드래그 할 객체 저장 함수
      function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
      }

▲ 드래그할 객체를 저장하는 함수

 

// 장바구니에 들어갈 상품 리스트 생성
      function draglist(data) {
        // 미리 장바구니에 들어갈 객체들을 만들어 놓고 display: none 처리한다.
        data.forEach((a, i) => {
          var 템플릿 = `<div id="${
            parseInt(data[i].id) + 4
          }" class="drag-value" style="display: none">
            <img
              src="${data[i].photo}"
              width="140px"
              height="100px"
              style="margin-top: 20px"
            />
            <h5>${data[i].title}</h5>
            <p>${data[i].brand}</p>
            <h5>${data[i].price}</h5>
            <input class="input" type="text" value="1" readonly style="width: 80%" />
          </div>`;
          $(".row").append(템플릿);
        });
      }

▲ 장바구니에 들어갈 객체 또한 백틱을 사용하여 row에 저장하고 display를 none처리해 준다.

none처리해 놓은 객체들을 담기를 누르면 해당 id를 가진 객체들을 장바구니 안으로 넣어주게 된다.

 

 

 

 

 

 

3에서 계속...