Script / CSS

G1sUtil.js

G1sBlogger.js

G1sNavigationList.js

G1sCode

Posts List


2012년 3월 10일 토요일

[Daum API] 다음 쇼핑 API를 이용한 쇼핑 검색.

다음DNA에서 제공하는 다음 쇼핑 api를 이용한 간단 쇼핑 검색.
역시나 CSS 등은 입히지 않은 기능 위주로 구현했습니다.
코드는 이전에 블로깅 한 검색 api와 비슷하며 쇼핑 apikey는 검색 apikey와 따로 관리 되므로 이것 역시 개발시에는 apikey를 발급받아야 합니다. apikey 발급받기

HTML 태그
<div id="daumShoppingForm">
    <input id="daumShoppingSearch" type="text" value="다음"onkeydown="javascript:if(event.keyCode == 13) daumShoppingSearch.search();"/>
    <input id="daumShoppingSubmit" type="submit" value="검색" onclick="javascript:daumShoppingSearch.search()"/>
</div >
<div id="daumShopping"></div>
<div id="daumShoppingScript"></div>
Base Script
<script language="Javascript" type="text/javascript">
    var daumShoppingSearch = {
        /** 초기화. **/
        init : function(){
            this.apikey = "DAUM_SHOP_DEMO_APIKEY";
            this.q = document.getElementById('daumShoppingSearch');
            
            //검색 객체들 초기화.
            daumShopping.init(6);
        },
        /** 검색 **/
        search : function(){
            this.query = '?apikey=' + this.apikey + '&output=json&q=' 
                + encodeURI(this.q.value);
            
            //검색어에 맞게 각각 첫페이지를 띄움.
            daumShopping.pingSearch(1);
        },
        /** callback 함수 호출. **/
        pingSearch : function(ds, api, pgno, callback, result){
            ds.innerHTML = "";
            
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.charset = 'utf-8';
            s.src = api + this.query + '&pageno=' + pgno + '&callback=' 
                + callback + '&result='+result ; 
            
            ds.appendChild(s);
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(search, z){
            var ul = document.createElement('ul');
            
            for(var i=0; i<z.channel.item.length; i++){
                //title 정보를 얻음.
                var title = document.createElement('h4');
                var a = document.createElement('a');
                a.href = z.channel.item[i].link;
                a.target = '_blank';
                a.innerHTML = this.escapeHtml(z.channel.item[i].title) 
                    + '<br'+'/>';

                title.appendChild(a);
                
                //세부 내용을 얻음.
                var content = search.getContent(z.channel.item[i]);
                
                //리스트 화.
                ul.appendChild(search.getSearch(title,content));
            }
            return ul;
        },
        /** PageNumber를 그려줌. **/
        pongPgno : function(pgno,max,func){
            var maxpg = (pgno+6<max)?pgno+6:max;
            
            var div = document.createElement('div');
            div.align = 'center';
            div.style.clear = 'left'; 
            
            //좌측 화살표.
            var left = document.createElement('a');
            left.innerHTML = "<< ";
            if(pgno-5>1)
                this.onMouseDown(left,pgno-6,func);
            else{
                left.style.color = "gray";
                left.style.cursor = "default";
            }
            div.appendChild(left);
            
            //페이지 번호.
            for(var i=(pgno-5>1)?pgno-5:1; i<maxpg; i++){
                var a = document.createElement('a');
                a.innerHTML = " " + i + " ";

                if(i==pgno){
                    a.style.color = 'yellow';
                    a.style.cursor = "default";
                }
                else
                    this.onMouseDown(a,i,func);
                
                div.appendChild(a);
            }
            
            //우측 화살표.
            var right = document.createElement('a');
            right.innerHTML = ">> ";
            if(pgno+6<max)
                this.onMouseDown(right,pgno+7,func);
            else{
                right.style.color = "gray";
                right.style.cursor = "default";
            }
            div.appendChild(right);
            
            return div;
        },
        /** 마우스 이벤트. **/
        onMouseDown: function(a, i, func){
            a.style.cursor = 'pointer';
            a.onmousedown = function(){
                func(i);
            }
        },
        /** HTML태그 안 먹게 하는 함수 **/
        escapeHtml: function (str) {
            str = str.replace(/&amp;/g, "&");
            str = str.replace(/&lt;/g, "<");
            str = str.replace(/&gt;/g, ">");
            return str;
        }
    };
    window.onload = function () {
        daumShoppingSearch.init();
        daumShoppingSearch.search();
    };
</script>
쇼핑검색
<script language="Javascript" type="text/javascript">
    /** 쇼핑 검색. **/
    var daumShopping = {
        /** 초기화. **/
        init : function(r){
            daumShopping.api = 'http://apis.daum.net/shopping/search';
            daumShopping.pgno = 1;
            daumShopping.result = r;
        },
        /** callback 함수 호출. **/
        pingSearch : function(pgno){
            daumShopping.pgno = pgno;
            
            var ds = document.getElementById('daumShoppingScript');
            var callback = 'daumShopping.pongSearch';
            
            daumShoppingSearch.pingSearch(ds,daumShopping.api, 
                daumShopping.pgno, callback, daumShopping.result);  
        },
        /** 결과를 뿌려줌. **/
        pongSearch : function(z){
            var dv = document.getElementById('daumShopping');
            dv.innerHTML ="";
            dv.appendChild(daumShoppingSearch.pongSearch(this, z));
            dv.appendChild(daumShoppingSearch.pongPgno(daumShopping.pgno, 
              z.channel.totalCount/daumShopping.result,daumShopping.pingSearch));
        },
        /** li setting **/
        getSearch : function(title,content){
            var li = document.createElement('li');
            
            li.style.height = '150px';
            li.appendChild(title);
            li.appendChild(content);
            
            return li;
        },
        /** 설명 return **/
       getContent : function(z){
           var div = document.createElement('div');
           var a = document.createElement('a');
           var b = document.createElement('b');
           var ba1 = document.createElement('a');
           var ba2 = document.createElement('a');
           var ba3 = document.createElement('a');
           var ba4 = document.createElement('a');
           var ba5 = document.createElement('a');
           var img = document.createElement('img');
           var aimg = document.createElement('a');
           
           img.width = 100;
           img.height = 100;
           img.src = z.image_url;
           img.style.paddingRight = '20px';
                      
           aimg.target = '_blank';
           aimg.href = z.link;
           aimg.style.float = 'left';
           
           aimg.appendChild(img);
           
           a.style.clear = 'left';
           a.innerHTML = daumShoppingSearch.escapeHtml(z.price_group) 
                + daumShoppingSearch.escapeHtml(z.description) + '<br'+'/>';
           
           ba1.innerHTML = '가격 : ' 
                + z.price_min + '원 ~ ' + z.price_max + '원<br'+'/>';
           ba2.innerHTML = 'Maker : ' 
                + daumShoppingSearch.escapeHtml(z.maker) + '<br'+'/>';
           ba3.innerHTML = '카테고리 : ' 
                + daumShoppingSearch.escapeHtml(z.category_name) + '<br'+'/>';
           ba4.innerHTML = '출시일 : ' 
                + daumShoppingSearch.escapeHtml(z.publish_date) + '<br'+'/>';
           ba5.innerHTML = '상품평 : ' + z.review_count + '<br'+'/>';

           b.appendChild(ba1);
           b.appendChild(ba2);
           b.appendChild(ba3);
           b.appendChild(ba4);
           b.appendChild(ba5);
           
           div.appendChild(aimg);
           div.appendChild(b);
           div.appendChild(a);
                      
           return div;
       }
    };
</script>

댓글 6개:

  1. 안녕하세요! 다음 쇼핑 API를 적용해보려 찾던 중 보물을 발견했네요.
    그래서 이것저것 손봐보고 있는데요 이 스크립트를 적용하면 페이징시 페이지가 없어도 화살표가 나오고 우측 화살표 클릭시마다 페이지수가 늘어나는 현상이 있습니다ㅜㅜ
    혹시 어떻게 수정을 하면 제대로 잘 나올 수 있을까요?

    답글삭제
    답글
    1. 블로그 주소가 바껴서 한동안 샘플이 안보였었네요.
      지금 제 샘플 적용 되어 있는데서는 화살표는 나오지만 우측 화살표 클릭하여도 페이지수는 늘어나지 않고 있는데요.
      Base Script 부분의 pongPgno : function(pgno,max,func) 부분을 중점적으로 봐주셔야 할 것 같네요. max 값이 제대로 넘어오는 지 등...
      자세한 것은 현상을 봐야 알 수 있을 것 같네요.
      혹시 제 데모에도 나타난다면 검색했던 검색어 등을 알려주시면 확인해보겠습니다.

      삭제
    2. 빠른 피드백 감사합니다.
      메일 주소 알려주시면 제가 적용한 소스와 부분들 알려드리겠습니다.
      좋은 하루 되세요

      삭제
    3. creatorhong@gmail.com 입니다.

      삭제
  2. 검색한 결과값이 아닌 다른 결과값이 나오는 건 왜그러는 건가요?ㅠㅠ

    답글삭제
    답글
    1. 결과값은 Daum에서 뿌려주는 거라 그것까지는 어떻게 할 수 가 없을것 같네요...

      삭제