코크플레이 클론코딩

📱 코크플레이 클론코딩

• 사이트: 코크플레이
• 사용언어: HTML, CSS, Jquery
• 분류: 모바일, 클론코딩

---

📌 KEY POINT

• 더보기 구현
• JSON을 사용하여 상품데이터 만들기
• 팝업구현

1. 더보기 구현

• css

  .sc-store .store-item:nth-of-type(n+3){
    display: none;
  }
  .sc-store .store-list.show .store-item:nth-of-type(n+3){
    display: block;
  }

• 제이쿼리
  상품정보가 3개보다 적을 경우 alert창으로 알 수 있게 하였다.

$('.sc-store .btn-more').click(function(){

  if($(this).prev().find('li').length < 3){
    alert('상품이 없습니다.');
    return false;
  }

  if($(this).prev().hasClass('show')){
    $(this).text('더보기')
  }else{
    $(this).text('간략보기')
  }

  $(this).toggleClass('on').prev().toggleClass('show');
  storeSlide.update() // 스토어섹션에 슬라이드에 업데이트 하라는 의미
})

2. JSON을 이용해 데이터 만들기

💚 json파일을 만들어 이런 식으로 여러개의 데이터를 만든다.

<productData.json>
{
    "items":[
        {
            "id":952,
            "sort":[1,2,3,4],
            "snippet":{
                "thumbnails":{
                    "small":{
                        "url":"./assets/images/dr_pepper.jpg"
                    },
                    "high":{
                        "url":"https://prod-bs010630-cloudfronts3content-eqhya5et6x.s3.ap-northeast-1.amazonaws.com/prod/normal/202302/7e290811-2861-47e1-8f23-8325e03635d8.jpg"
                    }
                },
                "title":"[오싸데이]닥터페퍼 제로 355CAN X24 (마우스패드 증정)",
                "price":{
                    "ori":20500,
                    "curr":17500,
                    "discount":12
                },
                "point":222,
                "detail":[
                    "https://prod-bs010630-cloudfronts3content-eqhya5et6x.s3.ap-northeast-1.amazonaws.com/ckEditor/image/202301/4655f5cc-aa29-4ba6-ba22-82888a267ea8.jpg",
                    "https://prod-bs010630-cloudfronts3content-eqhya5et6x.s3.ap-northeast-1.amazonaws.com/ckEditor/image/202301/ef979be4-dd84-4ef9-a204-a7d56935e9b6.jpg",
                    "https://prod-bs010630-cloudfronts3content-eqhya5et6x.s3.ap-northeast-1.amazonaws.com/ckEditor/image/202301/28246bf2-715c-4b65-b096-541d405e029f.jpg"
                ]

            }
        },
      }

💚 만들었던 데이터들을 fetch()로 불러와 리스트를 만들어 줬다.

• fetch(): 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.

list(1,"#list1")
list(2,"#list2")
list(3,"#list3")
list(4,"#list4")

function list(sortNum,frame){
  fetch('./assets/data/productData.json')
  .then((response)=> response.json())
  .then((json)=>{
    allData = json.items;
    var result = allData.filter(function (parm) {
        return parm['sort'].indexOf(sortNum) >= 0;
    }); //선별된데이터


    let html='';
    result.forEach(element => {

      discountEl = (element.snippet.price.discount)? `<span class="discount">${element.snippet.price.discount}%</span>`:'';
      pointEl = (element.snippet.point)?`<div class="point"> 최대 +${element.snippet.point} <span class="weight-400">P</span> </div>`:''

      html+=`<li class="store-item">
      <a href="${element.id}">
        <div class="img-box">
          <img src="${element.snippet.thumbnails.small.url}" alt>
        </div>
        <div class="txt-box">
          <strong class="swiper-title">${element.snippet.title}</strong>
          <div class="price">
          ${discountEl}
            <strong>${number(element.snippet.price.curr)}</strong>
            <span class="won">원</span>
            ${point(pointEl)}
          </div>
        </div>
      </a>
    </li>`;
    });
    $(frame).html(html);
  })
}


// 가격들의 쉼표를 넣어줄 때 필요한 자바스크립트 구문
function number(num){
  const ori = num;
  const result = ori.toString()
    .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
  return result;
}

function point(num) {
  const poin = num;
  const result2 = poin.toString()
    .replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
    return result2;
}

3. 팝업구현

받아 온 데이터를 이용하여 상품을 눌렀을 때 팝업배너를 통해 상품의 정보를 알 수 있도록 하였다.

• 제이쿼리

// css는 display:none을 해놨다가 
클릭을 했을 때 display: block을 될 수 있도록 해줬다.

$(document).on('click','.sc-store a',function(e){
  e.preventDefault();
  $('.pop, .bg').addClass('on');
  $('body').addClass('hidden');

  if ($('.pop').hasClass('on')) {
    idx = $(this).attr('href');
    
    fetch('./assets/data/productData.json')
    .then((response)=> response.json())
    .then((json)=>{
      var result = json.items.filter(function (parm) {
        return parm.id == idx;
      }); 
  
      let detailList='';
      result[0].snippet.detail.forEach(element => {
        detailList+=`<img src="${element}">`;
      });
  
  // 데이터를 불러 와 넣을 수 있게 만들었다.
      html = ` 
    <div class="pop-top">
      <h1>일반상품</h1>
    </div>
    <img src="${result[0].snippet.thumbnails.high.url}" alt="닥터페퍼">
    <div class="container">
      <div class="title-box">
        <p class="title">${result[0].snippet.title}</p>
        <span class="price">
          <strong>${result[0].snippet.price.ori}</strong>
            원
        </span>
        <a href="" class="benefit-box">
          <span class="benefit">혜택</span>
          <strong class="info">
            최대
            <span>60%</span>
            , 등급별 포인트 혜택은?
          </strong>
        </a>
        <div class="delivery-box">
          <span class="benefit">배송비</span>
          <strong class="info">제주, 도서산간 및 일부 지역 추가운임 발생</strong>
        </div>
      </div>
    </div>
    <hr class="gray" />
    <div class="text-box">
      <h2 class="itme-title">상품설명</h2>
    </div>  
    ${detailList}
    <div class="pop-bottom">
      <div>장바구니</div>
      <div class="red">바로구매</div>
    </div>`
  
      $('.pop').html(html);

      $('.bg').click(function(){
        $('.pop').removeClass('on')
        $('body').removeClass('hidden')
      })
    })
  }
})