바나나리퍼블릭 Sale 페이지 할인율 올림차순이 북마클릿

포스팅 목적

1. 필요한 기능인 할인율 별 정렬 기능이 바나나에 없어서
2. 자바스크립트를 때 마침 익히고 있어서

하는 일

세일 페이지에서만 작동 하며, 할인폭이 큰 물건부터 재정렬되어 body 하단에 출력해 준다.

자바스크립트 코드 : 바나나 올림차순이

(function() { var seedInfos = window.document.getElementsByClassName("priceDisplayStrike"); var infos = []; for (var idx = 0, l = seedInfos.length; idx < l; ++idx) { var priceNode = seedInfos[idx]; var oldPrice = Number(priceNode.innerText.substr(1)); var newPrice = Number(priceNode.next(1).innerText.substr(1)); var info = {}; info.rate = newPrice / oldPrice; info.refNode = priceNode.parentNode.parentNode; infos.push(info); } infos.sort(function(a, b) { return a.rate < b.rate ? -1 : a.rate > b.rate ? 1 : 0; }); var bodyNode = window.document.getElementsByTagName("body")[0]; var elUl = document.createElement('ul'); for (var idx = 0, l = infos.length; idx < l; ++idx) { var info = infos[idx]; var cloneliNode = info.refNode.cloneNode(true); var elementBreak = document.createElement("span"); elementBreak.addClassName("brandBreak"); var elementRate = document.createElement("span"); elementRate.addClassName("priceDisplaySale"); elementRate.innerText = "-" + ((1 - info.rate) * 100).toFixed(2) + "%"; var displayNode = cloneliNode.getElementsByClassName("priceDisplay")[0]; displayNode.appendChild(elementBreak); displayNode.appendChild(elementRate); elUl.appendChild(cloneliNode); } bodyNode.appendChild(elUl); })();

북마클릿 코드 : http://mrcoles.com/bookmarklet/ 에서 만들었다.

javascript:(function()%7B(function()%20%7Bvar%20seedInfos%20%3D%20window.document.getElementsByClassName(%22priceDisplayStrike%22)%3Bvar%20infos%20%3D%20%5B%5D%3Bfor%20(var%20idx%20%3D%200%2C%20l%20%3D%20seedInfos.length%3B%20idx%20%3C%20l%3B%20%2B%2Bidx)%7Bvar%20priceNode%20%3D%20seedInfos%5Bidx%5D%3Bvar%20oldPrice%20%3D%20Number(priceNode.innerText.substr(1))%3Bvar%20newPrice%20%3D%20Number(priceNode.next(1).innerText.substr(1))%3Bvar%20info%20%3D%20%7B%7D%3Binfo.rate%20%3D%20newPrice%20%2F%20oldPrice%3Binfo.refNode%20%3D%20priceNode.parentNode.parentNode%3Binfos.push(info)%3B%7Dinfos.sort(function(a%2C%20b)%7Breturn%20a.rate%20%3C%20b.rate%20%3F%20-1%20%3A%20a.rate%20%3E%20b.rate%20%3F%201%20%3A%200%3B%7D)%3Bvar%20bodyNode%20%3D%20window.document.getElementsByTagName(%22body%22)%5B0%5D%3Bvar%20elUl%20%3D%20document.createElement('ul')%3Bfor%20(var%20idx%20%3D%200%2C%20l%20%3D%20infos.length%3B%20idx%20%3C%20l%3B%20%2B%2Bidx)%7Bvar%20info%20%3D%20infos%5Bidx%5D%3Bvar%20cloneliNode%20%3D%20info.refNode.cloneNode(true)%3Bvar%20elementBreak%20%3D%20document.createElement(%22span%22)%3BelementBreak.addClassName(%22brandBreak%22)%3Bvar%20elementRate%20%3D%20document.createElement(%22span%22)%3BelementRate.addClassName(%22priceDisplaySale%22)%3BelementRate.innerText%20%3D%20%22-%22%20%2B%20((1%20-%20info.rate)%20*%20100).toFixed(2)%20%2B%20%22%25%22%3Bvar%20displayNode%20%3D%20cloneliNode.getElementsByClassName(%22priceDisplay%22)%5B0%5D%3BdisplayNode.appendChild(elementBreak)%3BdisplayNode.appendChild(elementRate)%3BelUl.appendChild(cloneliNode)%3B%7DbodyNode.appendChild(elUl)%3B%7D)()%7D)()

후기

• gvim 에서 작업했는데, 자동완성 기능이 없어서 불편하다.
  - 쓸만한 IDE 를 찾아야 할 것 같다.
  
  
• 함수 이름등 사소한거 틀렸을 때, 어디서 틀렸는지 찾기 불편하다
  -> 이건 어떻게 해결 해야 할지..
  
  
• 실행되지 않는 코드는 버그가 있는지 없는지 알길이 없다.
  -> 자바스크립트 유닛 테스트로 해결 할 수 있을것 같다.
  
  
• http://mrcoles.com/bookmarklet/ 에서 북마크로 쓸수 있게 변환해 준다.
  -> 주석이 있으면 안되고, ; 로 행을 꼭 끝내야 한다