[카페24] 상품 카테고리 목록 가져오는 api구현

<div id="displayProduct_57" class="ec-base-product" cateno="" style="display: none">
  <div id="category">
    <ul class="tab_box0">
      <li>관련 추천메뉴</li>
    </ul>
  </div>
  <ul class="prdList grid4">
    <li class="dummy">
      <a class="goToProduct" href="">
        <div class="thumbnail">
          <div class="prdImg">
            <img src="" />
            <span class="wish"></span>
          </div>
          <div class="icon">
            <div class="promotion"></div>
            <div class="button">
              <div class="likeButton">
                <button type="button"><strong></strong></button>
              </div>
              <div class="option"></div>
            </div>
          </div>
        </div>
        <div class="description">
          <strong class="name"></strong>
          <ul class="spec">
            <li>
              <span class="price"></span>
            </li>
            <li>
              <span class="salePrice"></span>
            </li>
          </ul>
        </div>
      </a>
    </li>
  </ul>
</div>

 

 

 

 var API_PRODUCT_NORMAL = "/exec/front/Product/ApiProductNormal";
  /**
   * 카테고리 진열
   *
   * @param {string} id #displayItem{id}
   * @param {string} el class name
   * @param {int} code 카테고리 번호 - data: cate_no
   * @param {int} page 다음에 가져올 페이지 번호 - data: page
   * @param {int} limit 상품 수 - data: count
   * @param {int} totalLimit ?
   * @param {string} image 상품 이미지 크기 (image_big, image_medium)
   * @param {bool} caching 캐시에 목록을 저장할 것인지 여부
   * @param {string} sort 정렬방법 - data: sort_method (0: ,5: ,6: 인기순 = 판매순, 10:)
   * @param {object} swiperOpt swiper추가 옵션
   *
   * @version 1.0.0
   * @author casey
   */
  function getCategory({ id, el, code, page, limit, totalLimit, image, caching, sort, swiperOpt }) {
    console.log("getCategory start");
    //출력시킬 selector displayItem{id} or class name
    console.log("id", id);
    console.log("id && !el", id && !el);
    var _this = document.querySelector(id && !el ? `#displayProduct_${id}` : `.${el}`);
    console.log(_this);
    //올바르지않은 this인 경우 종료
    if (!_this) return;
    var prdMethods = {
      get: function () {
        //ajax 요청
        $.ajax({
          url: API_PRODUCT_NORMAL,
          type: "GET",
          dataType: "json",
          data: {
            cate_no: code,
            sort_method: sort,
            page: page,
            bInitMore: "F", //더보기 버튼 사용x
            count: limit,
          },
          success: function (data) {
            console.log("data", data);
            //받아온 데이터
            var result = data["rtn_data"]["data"];
            //'.items > li'에 출력할 양식(샘플)을 적어둔다.
            var productSample = _this.querySelector(".prdList > li");
            //임시 생성 div dom
            var tempDom = document.createElement("div");
            //받아온 데이터가 없는 경우 종료
            if (!result) return;
            //'.items > li'에 샘플이 없는 경우 종료
            if (productSample === null) return;

            //상품 넣는 곳
            function injectProductInfo(data) {
              data.forEach(function (item, i) {
                //props 설정
                var {
                  product_name,
                  param, // 상세보기 parm
                  soldout_icon,
                  stock_icon,
                  recommend_icon,
                  new_icon,
                  today_arrival_icon,
                  product_icons,
                  pickup_icon,
                  benefit_icons,
                  zoom_icon,
                  basket_icon,
                  product_sale_price, //onlyM
                  mileage_value, //onlyM
                  summary_desc, //onlyM
                  disp_product_custom, //onlyM
                  disp_product_price, //onlyM
                } = item;

                //상세보기 링크 설정
                var detailLink = `/product/detail.html${param}`;
                //임시 상품이 될 li dom생성
                var tempProduct = document.createElement("li");
                //새롭게 만든 li와 sample li의 양식을 같게 맞춰줌
                tempProduct.innerHTML = productSample.innerHTML;
                //상세 링크 설정
                tempProduct.querySelector(".goToProduct").setAttribute("href", detailLink);
                //onlyM - 상품명 설정
                prdMethods.injectHtml(tempProduct, ".name a", product_name);
                //상품 대표 이미지
                var prdImg = `<img src="${item[image]}"/>`;
                prdMethods.injectHtml(tempProduct, ".prdImg", prdImg);
                //onlyM - 정보 추가
                prdMethods.injectText(tempProduct, ".disp_product_custom strike", disp_product_custom);
                prdMethods.injectText(tempProduct, ".disp_product_price", disp_product_price);
                prdMethods.injectText(tempProduct, ".sale", product_sale_price);
                prdMethods.injectText(tempProduct, ".mileage", mileage_value);
                prdMethods.injectHtml(tempProduct, ".cart", basket_icon);
                prdMethods.injectText(tempProduct, ".summary", summary_desc);

                // 상품 아이콘 설정
                today_arrival_icon = today_arrival_icon !== null || "";
                prdMethods.injectHtml(
                  tempProduct,
                  ".icon",
                  soldout_icon + stock_icon + recommend_icon + new_icon + product_icons + today_arrival_icon + pickup_icon + benefit_icons
                );

                // 상품 스와이퍼
                if (swiperOpt) {
                  tempProduct.classList.add("swiper-slide");
                }
                //만들어둔 임시 div dom에 설정이 끝난 li dom추가
                tempDom.appendChild(tempProduct);
              });
            }

            //상품 정보 적용
            injectProductInfo(result);

            //sample을 지우고 그 자리에 생성한 li를 넣는다.
            if (productSample) _this.querySelector(".prdList").innerHTML = "";
            _this.querySelector(".prdList").innerHTML += tempDom.innerHTML;

            // 상품 스와이퍼
            if (swiperOpt) {
              _this.querySelector(".prdList").classList.add("swiper-wrapper");
              _this.querySelector(".prdList").classList.add("swiper-container");
              new Swiper(_this.querySelector(".swiper-container"), swiperOpt);
            }
          },
        });
      },

      /**
       * @param {HTMLLIElement} perent 변경할 곳의 부모요소
       * @param {string} target 변경할 곳 selector
       * @param {string} item 변경하는 내용 text
       * */
      injectText: function (perent, target, item) {
        var _this = perent.querySelector(target);
        if (!_this) return;
        _this.innerText = item;
      },

      /**
       * @param {HTMLLIElement} perent 변경할 곳의 부모요소
       * @param {string} target 변경할 곳 selector
       * @param {string} item 변경하는 내용 text
       * */
      injectHtml: function (perent, target, item) {
        var _this = perent.querySelector(target);
        if (!_this) return;
        _this.innerHTML = item;
      },
    };
    prdMethods.get();
  }

  window.addEventListener("load", () => {
    // ## 관련 상품 처리 시작 ## //

    getCategory({
      id: 57,
      code: 57,
      page: 1,
      limit: 60,
      totalLimit: 100,
      image: "image_medium",
      caching: true,
      sort: 10,
    });
    $("#displayProduct_57").show();
    // ## 관련 상품 처리 끝 ## //
  });