전체상품목록 바로가기

본문 바로가기

현재 위치
  1. 홈
  2. 고객센터

고객센터

　

상품 게시판 상세
제목 [스마트 디자인] 장바구니 갯수표시 추가기능 설정방법 (PC/모바일)
작성자 (ip:)
  • 평점 0점  
  • 작성일 2017-06-22
  • 추천 추천하기
  • 조회수 331

안녕하세요. 다올 관리자입니다.

 

 

카페24 스마트 디자인 쇼핑몰의 기능이 추가되어 기존 사용자 분들의 쇼핑몰에 추가된 기능의 수정 설정방법을 안내해 드리겠습니다.

 

 

우선 어떤 기능이 추가가 되었는지 확인해 봐야겠죠?^^

 

 

pc와 모바일에서 쇼핑몰 상단에 장바구니에 담긴 상품의 개수가 표시되어 장바구니 상품 개수를 바로 확인 할 수 있는 기능입니다.

 

 

 

 

(이미지 출처 : 카페24 쇼핑몰 운영 업데이트 게시판)

 

보이시나요? 장바구니 옆에 숫자 보이시죠?^^

 

 

자~ 그럼 위의 기능을 사용하려면 어떻게 해야하는지 수정내용을 알려드리겠습니다.

 

 

 

 

첫번째!! PC쇼핑몰에 적용하기!!

 

쇼핑몰 어드민 로그인 > 디자인관리 > 디자인 편집하기

 

 

아래와 같이 파란색 소스를 추가합니다.

 

1) 레이아웃(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}"><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>

 ## 하단 생략 ##

 

 

 

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-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; }

 

 

두번째!! 모바일 쇼핑몰에 적용하기!!

 

 

쇼핑몰 어드민 로그인 > 모바일 쇼핑몰 > 디자인 편집하기

 

 

아래와 같이 파란색 소스를 추가합니다.

 

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; }
.myshopMain .navigation li { float:left; width:100px; height:100px; }
.myshopMain .navigation li a { overflow:hidden; 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%; }
.myshopMain .navigation .order a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_order.png"); }
.myshopMain .navigation .wishlist a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_wishlist.png"); }
.myshopMain .navigation .basket a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_basket.png"); }
.myshopMain .navigation .save a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_save.png"); }
.myshopMain .navigation .consult a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_consult.png"); }
.myshopMain .navigation .coupon a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_coupon.png"); }
.myshopMain .navigation .board a { background-image:url("http://img.echosting.cafe24.com/design/skin/mobile/ico_myshop_board.png"); }

 

 

5) CSS > 모듈(module) > 마이쇼핑(myshop) > mail.css 화면 추가

 

화면추가 방법

 

(이미지 출처 : 카페24 쇼핑몰 운영 업데이트 게시판)

 

아래 소스를 추가합니다.

 

 

/**
 * 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"); }

 

디자인 HTML 수정시 궁금한 사항은 카페24 고객지원센터(☎1588-3413)으로 연락 주시기 바랍니다.

 
첨부파일
비밀번호 삭제하려면 비밀번호를 입력하세요.
관리자게시 게시안함 스팸신고 스팸해제 목록 삭제 수정 답변
댓글 수정

비밀번호 :

수정 취소

/ byte

비밀번호 : 확인 취소

블로그 체험단
문의게시판

고객센터 상담안내

대표전화 02-322-8118
AM 09:00 ~ PM 18:00
방문상담은 사전에 전화로 예약을 해주시기 바랍니다.
E-mail: daolcom@naver.com
회사소개서 Download 포트폴리오 Download

입금계좌 상담안내

363037-04-002727
국민은행 / (주)다올커뮤니케이션
세금계산서 & 현금영수증 신청

열기 닫기

WORLD SHIPPING

PLEASE SELECT THE DESTINATION COUNTRY AND LANGUAGE :

GO
close