Help Center
카페24 소식
[스마트디자인] 장바구니 갯수표시 기능 추가 (PC/모바일)
2014-05-13
안녕하세요, 카페24 운영도우미 입니다.
구매고객이 PC/모바일 쇼핑몰에서 장바구니에 담긴 상품 개수를 바로 확인 할 수 있도록
표시기능이 추가되었습니다.
자세한 내용은 아래를 참조해 주세요.
---------------------------------------------------------------------------------------------------
■ 적용일자 : 2014-05-13 (화)
■ 업데이트 내용
PC 쇼핑몰과 모바일쇼핑몰 상단에 장바구니에 담긴 상품의 개수가 표시되어,
장바구니 상품 개수를 바로 확인할 수 있습니다.
해당 기능은 아래 안내와 같이 HTML을 수정하시면 바로 적용됩니다.
1. PC쇼핑몰 적용하기
- 위치 : 어드민 > 디자인관리 > 디자인 편집하기
1) 레이아웃(layout) > 기본레이아웃(basic) > 공통레이아웃(layout.html)
▼ 아래와 같이 파란색 소스를 추가합니다.
|
## 상단 생략 ## <div module="Layout_statelogoff"> ## 하단 생략 ## |
2) 레이아웃(layout) > 기본레이아웃(basic) > 메인레이아웃(main.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}"><span>{$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}"><span>{$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> ## 하단 생략 ## |
3) CSS > 모듈(module) > 레이아웃(layout) > statelogoff.css
▼ 아래와 같이 파란색 소스를 추가합니다.
| .xans-layout-statelogoff { display:inline-block; padding:7px 0; text-align:right; *display:inline; *zoom:1; }
.xans-layout-statelogoff a { padding:0 2px 0 8px; font-size:11px; line-height:14px; color:#8f8f91; background:url("http://img.echosting.cafe24.com/design/skin/default/layout/bg_util.gif") 0 1px no-repeat; } .xans-layout-statelogoff a:hover { color:#8f8f91; } .xans-layout-statelogoff .log { background:none; } .xans-layout-statelogoff a .count, .xans-layout-statelogoff a .count span { position:relative; display:inline-block; background:url("http://img.echosting.cafe24.com/design/skin/default/layout/bg_new_count.png") no-repeat; } .xans-layout-statelogoff a .count { left:-4px; top:-1px; margin-right:-4px; padding:0 0 0 8px; vertical-align:middle; background-position:0 0; } .xans-layout-statelogoff a .count span { height:17px; padding:1px 8px 1px 0; font-size:11px; font-weight:bold; color:#fff; line-height:17px; vertical-align:top; background-position:right -19px; }
|
4) CSS > 모듈(module) > 레이아웃(layout) > statelogon.css
▼ 아래와 같이 파란색 소스를 추가합니다.
|
.xans-layout-statelogon { display:inline-block; padding:7px 0; text-align:right; *display:inline; *zoom:1; } .xans-layout-statelogon a { padding:0 2px 0 8px; font-size:11px; line-height:14px; color:#8f8f91; background:url("http://img.echosting.cafe24.com/design/skin/default/layout/bg_util.gif") 0 1px no-repeat; } .xans-layout-statelogon a:hover { color:#8f8f91; } .xans-layout-statelogon a .count, .xans-layout-statelogon a .count span { position:relative; display:inline-block; background:url("http://img.echosting.cafe24.com/design/skin/default/layout/bg_new_count.png") no-repeat; } .xans-layout-statelogon a .count { left:-4px; top:-1px; margin-right:-4px; padding:0 0 0 8px; vertical-align:middle; background-position:0 0; } .xans-layout-statelogon a .count span { height:17px; padding:1px 8px 1px 0; font-size:11px; font-weight:bold; color:#fff; line-height:17px; vertical-align:top; background-position:right -19px; }
.xans-layout-statelogon .myinfo { color:#8f8f91; font-size:11px; line-height:14px; } .xans-layout-statelogon .myinfo strong { font-weight:normal; color:#202020; } .xans-layout-statelogon .myinfo a { background:none; color:#525259; } .xans-layout-statelogon .myinfo a:hover { color:#525259; } |
▼ PC쇼핑몰 적용화면
2. 모바일쇼핑몰 적용하기
- 위치 : 어드민 > 모바일쇼핑몰 > 디자인편집하기
1) 레이아웃(layout) > 기본레이아웃(basic) > 공통레이아웃(layout.html)
▼ 아래와 같이 파란색 소스를 추가합니다.
| ## 상단 생략 ##
<p class="member" module="Layout_orderBasketcount"> <a href="/myshop/index.html" class="myshop">마이쇼핑</a> <a href="/order/basket.html" class="basket">장바구니<span class="count {$basket_count_display|display}">{$basket_count}</span></a> </p> |
2) 마이쇼핑(myshop) > 마이쇼핑(index.html)
▼ 아래와 같이 빨간색 소스를 삭제, 파란색 소스를 추가해주세요.
| ## 상단 생략 ## <ul class="navigation"> <ul module="myshop_main"> <!--@css(/css/module/myshop/main.css)--> <li class="order"><a href="/myshop/order/list.html">주문내역조회</a></li> <li class="wishlist"><a href="/myshop/wish_list.html">관심상품 <span class="count {$wish_count_display|display}">{$wish_count}</span></a></li> <li class="basket"><a href="/order/basket.html">장바구니 <span class="count {$basket_count_display|display}">{$basket_count}</span></a></li> <li class="save"><a href="/myshop/mileage/historyList.html">적립금</a></li> <li class="coupon"><a href="/myshop/coupon/coupon.html">쿠폰 <span class="count {$coupon_count_display|display}">{$coupon_count}</span></a></li> <li class="board"><a href="/myshop/board_list.html">게시글</a></li> <li class="consult"><a href="/board/consult/list.html">1:1 맞춤상담</a></li> </ul> ## 하단 생략 ## |
3) 레이아웃(layout) > 기본레이아웃(basic) > CSS > layout.css
▼ 아래와 같이 파란색 소스를 추가합니다.
| ## 상단 생략 ## #header .member { margin:8px 10px 0px; text-align:right; border-bottom:1px dashed #b4b4b6; } #header .member a { display:inline-block; height:30px; font-size:12px; line-height:28px; font-weight:bold; text-decoration:none; } #header .member a.myshop { padding:0 10px 0 23px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_member_myshop.png") no-repeat 0 0; background-size:20px 24px; } #header .member a.basket { padding:0 0 0 23px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_member_basket.png") no-repeat 0 5px; background-size:20px 19px; } #header .member a .count { display:inline-block; height:15px; padding:1px 5px 0; font-size:13px; font-weight:bold; color:#fff; line-height:15px; vertical-align:middle; border:2px solid #fff; background-color:#fa3b34; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 10px; box-shadow:0 0 2px rgba(0,0,0,0.32); } |
4) CSS > 모듈(module) > 마이쇼핑(myshop) > myshopMain.css
▼ 아래 소스를 삭제해주세요.
|
## 상단 생략 ## .myshopMain .navigation { overflow:hidden; width:300px; margin:30px auto; } |
5) CSS > 모듈(module) > 마이쇼핑(myshop) > main.css 화면 추가
▼ 화면 추가 방법
▼ 아래 소스를 추가합니다.
|
/** * myshop > 메인 > 네비게이션 */
.xans-myshop-main { overflow:hidden; width:300px; margin:30px auto; } .xans-myshop-main li { position:relative; float:left; width:100px; height:100px; } .xans-myshop-main li a { display:block; width:100%; height:20px; padding:80px 0 0; font-size:12px; line-height:20px; text-align:center; background-repeat:no-repeat; background-position:0px 0px; background-size:100% 100%; } .xans-myshop-main .count { position:absolute; right:10px; top:10px; height:15px; padding:1px 5px 0; font-size:13px; font-weight:bold; color:#fff; line-height:15px; border:2px solid #fff; background-color:#fa3b34; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; border-radius: 10px; box-shadow:0 0 2px rgba(0,0,0,0.32); } .xans-myshop-main .order a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_order.png"); } .xans-myshop-main .wishlist a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_wishlist.png"); } .xans-myshop-main .basket a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_basket.png"); } .xans-myshop-main .save a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_save.png"); } .xans-myshop-main .consult a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_consult.png"); } .xans-myshop-main .coupon a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_coupon.png"); } .xans-myshop-main .board a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_board.png"); }
|
▼ 모바일쇼핑몰 적용화면
---------------------------------------------------------------------------------------------------
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]