Naver Shopping Search

  /* pagination */
  var paginationElement = document.querySelector(".pagination");
  var prevElement = paginationElement.querySelector("._prev");
  var nextElement = paginationElement.querySelector("._next");
  var currentElement = paginationElement.querySelector("._current");
  var total = 10;
  /* flicking */
  var flicking = new eg.Flicking(".flicking", {
    infinite: true,
    infiniteThreshold: 100,
    lastIndex: total,
    bound: true,
    adaptive: true,
    hanger: "100%",
    anchor: "100%",
  });
  function requestUrl(url, callback) {
    var req = new XMLHttpRequest();
    req.addEventListener("load", function () {
        callback(req.responseText);
    });
    req.open("GET", url);
    req.send();
  }
  function getData(panel) {
    requestUrl("https://www.mocky.io/v2/5cb6cdd53200005717cd45d5?mocky-delay=1000ms", function (html) {
        panel.update(function (el) {
            el.innerHTML = html;
        });
        flicking.resize();
    });
  }
  flicking.on("needPanel", function (e) {
      if (e.range.min === total) {
        /* set last panel */
        e.panel.insertAfter('<div class="panel more"><p><i class="spnew api_loader"></i><span>쇼핑<br>더보기</span></p></div>');
      } else {
          /* place holder */
        var panels = e.panel.insertAfter('<div class="panel"><div class="loading">Importing data...</div></div>');
        getData(panels[0]);
      }
  });
  flicking.on("moveEnd", function (e) {
    var current = Math.min(e.index + 1, total);

    currentElement.innerHTML = "" + current;
  });

  prevElement.addEventListener("click", function (e) {
    e.preventDefault();
    flicking.prev(300);
  });
  nextElement.addEventListener("click", function (e) {
    e.preventDefault();
    flicking.next(300);
  });