[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>