Help Center

카페24 소식

공지사항업데이트스토어소식

[스마트디자인] [신규] 최근 본 상품 페이지

2012-04-03

안녕하세요, 카페24 운영도우미 입니다.

쇼핑몰 고객이 최근 본 상품(레이아웃 모듈)을 한번에 볼 수 있는 모듈이며,

상세 옵션, 판매가를 볼 수 있으며 주문을 할 수 있는 버튼 들을 사용할 수 있습니다.


자세한 내용은 아래를 참조해 주세요.


1. 제목 : [신규] 최근 본 상품 페이지

2. 업데이트 내용


   쇼핑몰 고객이 최근 본 상품(레이아웃 모듈)을 한번에 볼 수 있는 모듈로,
   표준스킨에서는 아래와 같은 파일이 수정되었습니다.


  1) 레이아웃 파일에 최근본 상품 링크를 추가 합니다.

     <h2><a href="/product/recent_view_product.html">최근 본 상품</a></h2>


  2) [최근 본 상품 페이지] 파일을 생성합니다.

    - 새파일 생성: /product/recent_view_product.html

<div class="path">

    <h3>현재 위치</h3>

    <ol>

        <li class="first"><a href="/">홈</a></li>

        <li title="현재 위치"><strong>최근 본 상품</strong></li>

    </ol>

</div>

 


<div class="titleArea">

    <h2><span>최근본 상품</span></h2>

</div>

<div module="product_recentlist">

    <!--@css(/css/module/product/recentlist.css)-->

    <!--

    $count = 10

    -->

    <div class="boardList">

     <table border="1" summary="최근 본 상품 목록 입니다"  class="{$list_display|display}">

     <caption>최근 본 상품 목록</caption>

     <thead>

      <tr>

                <th scope="col" class="thumb">이미지</th>

                <th scope="col" class="product">상품명</th>

                <th scope="col" class="option">옵션정보</th>

                <th scope="col" class="price">판매가</th>

                <th scope="col" class="button">주문</th>

      </tr>

     </thead>

 


     <tbody module="product_listitem">

      <tr class="first">

                <td class="thumb"><a href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" alt="{$product_name}" /></a></td>

                <td class="product">

                    <a href="/product/detail.html{$param}" class="name">{$product_name}</a>

                    <span class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</span>

                    <span class="zoom">{$zoom_icon}</span>

                </td>

                <td class="option">

                    <ul module="product_mainoption">

                        <li>{$option_name}: {$form.option}</li>

                        <li>{$option_name}: {$form.option}</li>

                    </ul>

                    <ul module="product_addoption">

                        <li>{$add_option_name}: {$form.add_option}</li>

                        <li>{$add_option_name}: {$form.add_option}</li>

                    </ul>

                </td>

                <td class="price"><span class="custom">{$product_custom}</span>{$price}</td>

                <td class="button"><a href="#none" onclick="{$act_basket}" class="{$disp_basket|display}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_wishBasket.gif" alt="담기" /></a>

                <a href="#none" onclick="{$act_order}" class="{$disp_order|display}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_wishOrder.gif" alt="주문" /></a>

                <a href="#none"  class="{$class_del}" rel="{$rel_del}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_wishDel.gif" alt="삭제" /></a></td>

            </tr>

      <tr>

                <td class="thumb"><a href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" alt="{$product_name}" /></a></td>

                <td class="product">

                    <a href="/product/detail.html{$param}" class="name">{$product_name}</a>

                    <span class="icon">{$soldout_icon} {$recommend_icon} {$new_icon} {$product_icons}</span>

                    <span class="zoom">{$zoom_icon}</span>

                </td>

                <td class="option">

                    <ul module="product_mainoption">

                        <li>{$option_name}: {$form.option}</li>

                        <li>{$option_name}: {$form.option}</li>

                    </ul>

                    <ul module="product_addoption">

                        <li>{$add_option_name}: {$form.add_option}</li>

                        <li>{$add_option_name}: {$form.add_option}</li>

                    </ul>

                </td>

                <td class="price"><span class="custom">{$product_custom}</span>{$price}</td>

                <td class="button"><a href="#none" onclick="{$act_basket}" class="{$disp_basket|display}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_wishBasket.gif" alt="담기" /></a>

                <a href="#none" onclick="{$act_order}" class="{$disp_order|display}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_wishOrder.gif" alt="주문" /></a>

                <a href="#none"  class="{$class_del}" rel="{$rel_del}"><img src="http://img.echosting.cafe24.com/design/skin/mono/product/btn_wishDel.gif" alt="삭제" /></a></td>

            </tr>

     </tbody>

        </table>

        <p class="empty {$empty_display|display}">최근본 상품 내역이 없습니다.</p>

    </div>

</div>

 


<div module="product_recentlistpaging">

    <!--@css(/css/module/product/recentlistpaging.css)-->

    <!--@js(/js/module/product/recentlistpaging.js)-->

    <p><a href="{$param_first}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pageFirst.gif" alt="첫 페이지" /></a> </p>

    <p><a href="{$param_before}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pagePrev.gif" alt="이전 페이지" /></a></p>

    <ol>

        <li><a href="{$param}" title="페이지 이동">[{$no}]</a></li>

        <li><a href="{$param}" title="페이지 이동">[{$no}]</a></li>

        <li><a href="{$param}" title="페이지 이동">[{$no}]</a></li>

        <li><a href="{$param}" title="페이지 이동">[{$no}]</a></li>

        <li><a href="{$param}" title="페이지 이동">[{$no}]</a></li>

    </ol>

    <p><a href="{$param_next}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pageNext.gif" alt="다음 페이지" /></a> </p>

    <p><a href="{$param_last}"><img src="http://img.echosting.cafe24.com/design/skin/mono/btn_pageLast.gif" alt="마지막 페이지" /></a></p>

</div>



  3) 최근 본 상품 목록 디자인 파일을 생성합니다.
     - /css/module/product/recentlist.css

 

 .xans-product-recentlist { margin:0 0 30px; }

.xans-product-recentlist .titleArea { margin:30px 0; }

.xans-product-recentlist div.boardList { color:#8f8f8f; padding:0 0 6px; border-bottom:3px solid #333; font-size:.9em; }

.xans-product-recentlist table th { padding:9px 0 7px; border-top:3px solid #333; border-bottom:3px solid #333; font-weight:normal; color:#202020; }

.xans-product-recentlist table td { line-height:1.4em; text-align:center; padding:9px 0 7px; border-top:1px solid #ddddde; }

.xans-product-recentlist table .first td { border:none; }

.xans-product-recentlist .thumb { width:90px; text-align:center; }

.xans-product-recentlist .thumb img { width:65px; }

.xans-product-recentlist .product { font-size:12px; }

.xans-product-recentlist td.product { text-align:left; }

.xans-product-recentlist .product .zoom { cursor:pointer; }

.xans-product-recentlist .option { width:120px; }

.xans-product-recentlist .option li { line-height:1.8em; }

.xans-product-recentlist .option input { display:block; border:1px solid #bcbcbc; padding:1px; }

.xans-product-recentlist .option select { display:block; }

.xans-product-recentlist td.option { text-align:left; }

.xans-product-recentlist .price { width:120px; }

.xans-product-recentlist td.price {}

.xans-product-recentlist td.price .custom { display:block; text-decoration:line-through; }

.xans-product-recentlist .button { width:50px; }

.xans-product-recentlist .button a { display:block; padding:0 0 2px; text-align:center; }

.xans-product-recentlist p.empty { border-top:3px solid #333; padding:26px 0 20px; text-align:center; }



  4) 최근 본 상품 페이징 파일을 생성합니다.
     - /css/module/product/recentlistpaging.css

.xans-product-recentlistpaging { clear:both; text-align:center; }

.xans-product-recentlistpaging { padding:13px 0; }

.xans-product-recentlistpaging { text-align:center; margin:20px 0 0;}

.xans-product-recentlistpaging p,

.xans-product-recentlistpaging ol,

.xans-product-recentlistpaging li { display:inline; }

.xans-product-recentlistpaging img {vertical-align:middle; }

.xans-product-recentlistpaging p { margin-right:-4px; }

.xans-product-recentlistpaging ol { margin:0 7px; }

.xans-product-recentlistpaging li { margin:0 9px 0 0; padding:0 0 0 11px; font-size:.9em; background:url(http://img.echosting.cafe24.com/design/skin/mono/bg_page.gif) left center no-repeat; }

.xans-product-recentlistpaging li:first-child { background:none; }

.xans-product-recentlistpaging li strong { color:#f26522; }

.xans-product-recentlistpaging li a { color:#202020; }

.xans-product-recentlistpaging li a:hover { color:#f26522; text-decoration:underline; }

.xans-product-recentlistpaging li a.nolink { cursor:default; }



  5) 새로운 JS파일을 생성합니다.
     - /js/module/product/recentlistpaging.js

 $(function(){
    /**
     * function getQueryString
     * include /js/common.js
     */
    $('.xans-myshop-recentlylistpaging ol a, .xans-myshop-recentlylistpaging ol strong').each(function() {
        var sPage = $(this).text() ? $(this).text() : 1;
        if (sPage == '['+getQueryString('page')+']')
        {
            $(this).parent().html('<strong title="현재페이지">'+sPage+'</strong>');
        } else {
            var sHref = $(this).attr('href');
            $(this).parent().html('<a href="'+sHref+'" title="'+sPage+'페이지로 이동">'+sPage+'</a>');
        }
    });   $('.btn_popup').click(function(){
       var sKey;
       try {
           sKey = this.href.match(/.*/([^?#.]*)/)[1];
       } catch (e) {
           sKey = 'detail_popup';
       }
      window.open(this.href, sKey, 'scrollbars=0, resizeable=0, status=0, directories=0, toolbar=0');
       return false;
   });
});



   ▼ 적용화면
  

 

 

 

카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.

궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]

이전글

[스마트디자인] 장바구니 카운트 업데이트

2012-04-03

다음글

[스마트디자인] 상품상세페이지의 이미지 확대보기 기능 스크립트

2012-04-18