컨텐츠 바로가기


업데이트 상세
제목 Order_BasketPackage 모듈 - 레이아웃에 활용하기
최신소스




Order_BasketPackage 모듈



쇼핑몰 데이터를 캐시를 이용해서 속도를 빠르게 할 수 있습니다.


하지만, 개인정보에 해당하는 내용들은

캐시 서버에 개인정보는 저장하지 않는 것이 개인정보 보호를 위해 좋습니다.


- 관련 게시글: ▶ [스마트디자인] 내 쇼핑몰을 빠르게 하고 싶다면? (클릭)








Order_BasketPackage 모듈을 활용해서

장바구니 레이어를 만들 수 있습니다.





1. 스마트디자인 편집창으로 접속합니다.

1) PC

1) 메인 레이아웃(layout/basic/main.html), 공통 레이아웃(layout/basic/layout.html) 페이지를 열어 아래와 같이 빨간색 코드삭제하고, 파란색 코드추가합니다.

<div module="Layout_statelogoff">
    <!--@css(/css/module/layout/statelogoff.css)-->
    <a href="/member/login.html" class="log">로그인</a>
    <a href="/member/join.html">회원가입</a> 
    <a href="/order/basket.html">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span>
    <a href="#none" id="ec_async_basket_layer_toggle">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>
    <a href="/myshop/order/list.html">주문조회</a>
    <a href="/myshop/index.html">마이쇼핑</a>
    <a href="/board/index.html">게시판</a>
</div>
<div module="Layout_stateLogon">
    <!--@css(/css/module/layout/statelogon.css)-->
    <span class="myinfo"><strong>{$name}</strong>님 환영합니다. <a href="/member/modify.html">회원정보수정</a></span>
    <a href="{$action_logout}" class="log">로그아웃</a>
    <a href="/order/basket.html">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span>
    <a href="#none" id="ec_async_basket_layer_hover">장바구니 <span class="count {$basket_count_display|display} {$basket_count_display_class}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>
    <a href="/myshop/order/list.html">주문조회</a>
    <a href="/myshop/index.html">마이쇼핑</a>
    <a href="/board/index.html">게시판</a>
</div>
       
<!-- 비동기 레이어를 담기위한 컨테이너 -->
<div module="Layout_OrderAsyncbasketlayer" id="ec_async_basket_layer_container" style="display:none;"></div>


장바구니 링크 클릭시 레이어가 Toggle 될 수 있도록 하였습니다.

(마우스오버 이벤트를 사용하시려면 id="ec_async_basket_layer_hover" 로 변경하면 됩니다.)




2) 레이어가 들어갈 신규 페이지를 생성하고, 레이어의 html, css를 작성합니다.

예제로 order/async_basket_layer.html 로 생성하여 아래와 같이 코드를 작성하였습니다.


<!-- 예제이며 원하시는 디자인으로 수정 가능합니다. 단, 스크립트는 사용할 수 없습니다. -->
<!-- basket_layer start -->   
<style type="text/css">
    .xans-layout-orderasyncbasketlayer { position:relative; z-index:20; width:100%; }
    .basket_layer { position:absolute; top:44px; right:118px; border:1px solid #dcdcdc; background:#fff; }
    .basket_layer .basket_inner { position:relative; padding-bottom:50px; }
    .basket_layer .scroll { overflow:auto; max-width:950px; max-height:334px; padding:10px 10px 0; }
    .basket_layer .empty { width:250px; padding:20px 0; text-align:center; }  
    .basket_layer .list { width:250px; }
    .basket_layer .list li { display:table; padding:10px; box-sizing:border-box; border-top:1px solid #ddd; }
    .basket_layer .list li:first-child { border-top:0; }
    .basket_layer .list li .info { display:table-cell; width:65%; padding-left:5px; box-sizing:border-box; vertical-align:middle; }
    .basket_layer .list li .info span { display:block; color:#717071; font-size:11px; }
    .basket_layer .list li .thumb { display:table-cell; width:25%; vertical-align:top; }
    .basket_layer .list li .thumb img { width:100%; max-width:100px; }
    .basket_layer .goBasket { position:absolute; bottom:10px; left:0; width:100%; text-align:center; }
</style>

<div class="basket_layer" module="Order_BasketPackage">
    <div class="basket_inner">
        <div class="scroll">
            <div class="empty" module="Order_Empty">
               <p>장바구니가 비어 있습니다.</p>
            </div>
            <div class="list" module="Order_NormNormal">
                <ul module="Order_list">
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="list" module="Order_NormIndividual">
                <ul module="Order_list">
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                </ul>
            </div>
            <div class="list" module="Order_NormOversea">
                <ul module="Order_list">
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="goBasket"><a href="/order/basket.html"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_go_basket.gif"></a></div>
    </div>
</div>
<!-- basket_layer end -->



2) 모바일


1) 메인 레이아웃(layout/basic/main.html), 공통 레이아웃(layout/basic/layout.html) 페이지를 열어 아래와 같이 빨간색 코드삭제하고, 파란색 코드추가합니다.

<section id="topArea">
    <div class="searchWrap">
        <p class="category"><a href="#none" class="fold">카테고리</a></p>
        <div module="Layout_SearchHeader">
            <div class="searchForm">
                {$form.keyword}
                <button type="button" class="btnDelete">삭제</button>
            </div>
        </div>
        <p module="Layout_orderBasketcount">
            <a href="/order/basket.html" class="btnBasket">장바구니<span class="count {$basket_count_display|display}">{$basket_count}</span></a>
            <a href="#" class="btnBasket" id="ec_async_basket_layer_toggle">장바구니<span class="count {$basket_count_display|display}"><span class="{$basket_count_class}">{$basket_count}</span></span></a>
         </p>
    </div>
    <div module="Layout_OrderAsyncbasketlayer" id="ec_async_basket_layer_container" style="display:none;"></div>
    <!--@import(/layout/basic/navigation.html)-->


마우스오버 이벤트를 사용하시려면 id="ec_async_basket_layer_hover" 로 변경하면 됩니다.



2) 레이어가 들어갈 신규 페이지를 생성하고, 레이어의 html, css를 작성합니다.

예제로 order/async_basket_layer.html 로 생성하여 아래와 같이 코드를 작성하였습니다.


<!-- 예제이며 원하시는 디자인으로 수정 가능합니다. 단, 스크립트는 사용할 수 없습니다. -->
<!-- basket_layer start -->
<style type="text/css">
    .xans-layout-orderasyncbasketlayer { position:relative; z-index:20; width:100%; }
    .basket_layer { position:absolute; top:-5px; right:1px; border:1px solid #dcdcdc; background:#fff; }
    .basket_layer .basket_inner { position:relative; padding-bottom:50px; }
    .basket_layer .scroll { overflow:auto; max-width:320px; max-height:300px; padding:10px 10px 0; }
    .basket_layer .empty { width:250px; padding:20px 0; text-align:center; }
    .basket_layer .list { width:250px; }
    .basket_layer .list li { display:table; padding:10px; box-sizing:border-box; border-top:1px solid #ddd; }
    .basket_layer .list li:first-child { border-top:0; }
    .basket_layer .list li .info { display:table-cell; width:65%; padding-left:5px; box-sizing:border-box; vertical-align:middle; text-align:left; }
    .basket_layer .list li .info span { display:block; color:#717071; font-size:11px; }
    .basket_layer .list li .thumb { display:table-cell; width:25%; vertical-align:top; }
    .basket_layer .list li .thumb img { width:100%; max-width:100px; }
    .basket_layer .goBasket { position:absolute; bottom:10px; left:0; width:100%; text-align:center; }
</style>

<div class="basket_layer" module="Order_BasketPackage">
    <div class="basket_inner">
        <div class="scroll">
            <div class="empty" module="Order_Empty">
                <p>장바구니가 비어 있습니다.</p>
            </div>
             
            <div class="list" module="Order_NormNormal">
                <ul module="Order_list">
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                    <li>
                        <span class="thumb"><a href="/product/detail.html{$param}"><img src="{$img}" onerror="this.src='http://img.echosting.cafe24.com/thumb/img_product_small.gif';" alt="{$name_alt}" /></a></span>
                        <span class="info">
                            <span class="name">{$name}</span>
                            <span class="price">{$product_price_front_head}{$product_price_front}{$product_price_front_tail}</span>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="goBasket"><a href="/order/basket.html"><img src="http://img.echosting.cafe24.com/skin/base_ko_KR/product/btn_go_basket.gif"></a></div>
    </div>
</div>
<!-- basket_layer end -->




위와 같이 장바구니 레이어를 적용하면

캐시 서버에 저장하지 않고, 안전하고 빠른 쇼핑몰 운영이 가능합니다.



목록 관리자게시 삭제 수정