Help Center
카페24 소식
[모바일쇼핑몰] 주문하기 버튼 고정처리 기능추가 안내
2014-02-03
안녕하세요, 카페24 운영도우미 입니다.
모바일 상품상세에서 ‘주문하기, 장바구니, 관심상품’ 버튼 영역이 화면하단에 항상 고정되어 표시되도록
기능이 추가되었습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2014-02-03 (월)
■ 업데이트 내용
## 상단 생략 ## <div class="mButton type3 fixed" module="product_action"> .xans-product-action.fixed { position:fixed; left:0; bottom:0; z-index:1000; width:100%; padding:8px 7px 9px; border-top:1px solid #a1a3a6; box-sizing:border-box; background-color:rgba(248,248,248,0.9); } ## 상단 생략 ## <div module="product_action" class="fixed"> ## 하단 생략 ##
모바일 상품상세 화면에서 페이지 내에 위치하였던 [주문하기, 장바구니, 관심상품] 버튼이
모바일 내에서 스크롤을 위아래 이동하더라도 버튼이 항상 하단에 고정되어 표시되도록 기능이 개선되었습니다.
해당 기능은 아래의 안내에 따라 HTML을 추가해주셔야 정상적으로 적용 및 사용이 가능합니다.
1. 구상품 이용 쇼핑몰 (뉴상품으로 업그레이드 하지 않은 쇼핑몰)
1) 모바일쇼핑몰 > 디자인편집하기 > 상품(product) > 상품상세(detail.html)
- 아래 빨간색 텍스트 소스를 추가해주세요.
<div class="mButton type3" module="product_action">
<p>
<a href="#none" class="tSubmit1 {$buy_display|display}" onclick="{$action_buy}"><span>구매하기</span></a>
<a href="#none" class="tSubmit2 {$basket_display|display}" onclick="{$action_basket}"><span>장바구니</span></a>
<a href="#none" class="tSubmit2 {$wishlist_display|display}" onclick="{$action_wishlist}" ><span>찜하기</span></a>
</p>
<!-- 네이버 체크아웃 구매 버튼 -->
<div id="NaverChk_Button" style="display:none"></div>
</div>
<p>
<a href="#none" class="tSubmit1 {$buy_display|display}" onclick="{$action_buy}"><span>구매하기</span></a>
<a href="#none" class="tSubmit2 {$basket_display|display}" onclick="{$action_basket}"><span>장바구니</span></a>
<a href="#none" class="tSubmit2 {$wishlist_display|display}" onclick="{$action_wishlist}" ><span>찜하기</span></a>
</p>
</div>
## 하단 생략 ##
2) 모바일쇼핑몰 > 디자인편집하기 > 화면추가
- 화면추가 버튼을 클릭하여, CSS 폴더 아래에 detail.css 화면을 추가합니다.
- 추가된 화면에 아래 안내된 소스를 추가합니다.
.xans-product-action.fixed .btnArea { margin:0 auto; }
.xans-product-action .btnArea.type2 .submit { cursor:default; outline:0; }
.xans-product-action.fixed { position:fixed; right:0; left:0; bottom:0; z-index:1000; padding:0; border-top:1px solid rgba(112,114,115,0.7); background-color:rgba(0,0,0,0.7); }
.xans-product-action.fixed .btnArea { margin:0 auto; padding:0; }
.xans-product-action.fixed .btnArea .submit,
.xans-product-action.fixed .btnArea .normal { position:static; height:48px; padding:0; border:0; line-height:48px; border-radius:0; font-weight:bold; color:#fff; text-align:left; letter-spacing:-1px; background-color:rgba(255,255,255,0); }
.xans-product-action.fixed .btnArea.type2 .submit { float:left; width:229px; font-size:15px; font-family:Verdana; text-indent:87px; letter-spacing:0; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_soldout.png") no-repeat 67px 16px; background-size:16px 16px; }
.xans-product-action.fixed .btnArea.type2 .submit:after { content:""; float:right; width:1px; height:20px; margin:13px 0 0; background:#5f5d5b; }
.xans-product-action.fixed .btnArea.type2 .normal { float:right; width:91px; text-indent:34px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_wish.png") no-repeat 14px 17px; background-size:16px 14px; }
.xans-product-action.fixed .btnArea.type3 .submit { width:136px; font-size:15px; text-indent:52px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_buy.png") no-repeat 33px 18px; background-size:15px 12px; }
.xans-product-action.fixed .btnArea.type3 .submit:before,
.xans-product-action.fixed .btnArea.type3 .submit:after { content:""; width:1px; height:20px; margin-top:13px; background:#5f5d5b; }
.xans-product-action.fixed .btnArea.type3 .submit:before { float:left; margin-left:-1px; }
.xans-product-action.fixed .btnArea.type3 .submit:after { float:right; margin-right:-1px; }
.xans-product-action.fixed .btnArea.type3 .normal:nth-child(2) { float:left; width:91px; text-indent:36px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_cart.png") no-repeat 14px 16px; background-size:18px 14px; }
.xans-product-action.fixed .btnArea.type3 .normal:nth-child(3) { float:right; width:91px; text-indent:34px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_wish.png") no-repeat 14px 17px; background-size:16px 14px; }
2. 뉴상품 이용 쇼핑몰
1) 모바일쇼핑몰 > 디자인편집하기 > 상품(product) > 상품상세(detail.html)
- 아래 빨간색 텍스트 소스를 추가해주세요.
<div module="product_action">
<div class="btnArea type3 {$action_display|display}">
<a href="#none" class="submit {$buy_display|display}" onclick="{$action_buy}">구매하기</a>
<button type="button" class="normal {$basket_display|display}" onclick="{$action_basket}">장바구니</button>
<button type="button" class="normal {$wishlist_display|display}" onclick="{$action_wishlist}">관심상품</button>
</div>
<div class="btnArea type2 {$action_soldout_display|display}">
<button type="button" class="submit {$soldout_display|display}">SOLD OUT</button>
<button type="button" class="normal {$wishlist_display|display}" onclick="{$action_wishlist}">관심상품</button>
</div>
<!-- 네이버 체크아웃 구매 버튼 -->
<div id="NaverChk_Button" style="display:none;"></div>
</div><!-- //참고 -->
<div class="btnArea type3 {$action_display|display}">
<a href="#none" class="submit {$buy_display|display}" onclick="{$action_buy}">구매하기</a>
<button type="button" class="normal {$basket_display|display}" onclick="{$action_basket}">장바구니</button>
<button type="button" class="normal {$wishlist_display|display}" onclick="{$action_wishlist}">관심상품</button>
</div>
<div class="btnArea type2 {$action_soldout_display|display}">
<button type="button" class="submit {$soldout_display|display}">SOLD OUT</button>
<button type="button" class="normal {$wishlist_display|display}" onclick="{$action_wishlist}">관심상품</button>
</div>
</div>
2) 모바일쇼핑몰 > 디자인편집하기 > CSS > 모듈(module) > 상품(product) > detail.css
- 하단에 아래 소스를 추가해주세요.
.xans-product-action.fixed { position:fixed; left:0; bottom:0; z-index:1000; width:100%; padding:8px 7px 9px; border-top:1px solid #a1a3a6; box-sizing:border-box; background-color:rgba(248,248,248,0.9); }
.xans-product-action.fixed .btnArea { margin:0 auto; }
.xans-product-action .btnArea.type2 .submit { cursor:default; outline:0; }
.xans-product-action.fixed { position:fixed; right:0; left:0; bottom:0; z-index:1000; padding:0; border-top:1px solid rgba(112,114,115,0.7); background-color:rgba(0,0,0,0.7); }
.xans-product-action.fixed .btnArea { margin:0 auto; padding:0; }
.xans-product-action.fixed .btnArea .submit,
.xans-product-action.fixed .btnArea .normal { position:static; height:48px; padding:0; border:0; line-height:48px; border-radius:0; font-weight:bold; color:#fff; text-align:left; letter-spacing:-1px; background-color:rgba(255,255,255,0); }
.xans-product-action.fixed .btnArea.type2 .submit { float:left; width:229px; font-size:15px; font-family:Verdana; text-indent:87px; letter-spacing:0; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_soldout.png") no-repeat 67px 16px; background-size:16px 16px; }
.xans-product-action.fixed .btnArea.type2 .submit:after { content:""; float:right; width:1px; height:20px; margin:13px 0 0; background:#5f5d5b; }
.xans-product-action.fixed .btnArea.type2 .normal { float:right; width:91px; text-indent:34px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_wish.png") no-repeat 14px 17px; background-size:16px 14px; }
.xans-product-action.fixed .btnArea.type3 .submit { width:136px; font-size:15px; text-indent:52px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_buy.png") no-repeat 33px 18px; background-size:15px 12px; }
.xans-product-action.fixed .btnArea.type3 .submit:before,
.xans-product-action.fixed .btnArea.type3 .submit:after { content:""; width:1px; height:20px; margin-top:13px; background:#5f5d5b; }
.xans-product-action.fixed .btnArea.type3 .submit:before { float:left; margin-left:-1px; }
.xans-product-action.fixed .btnArea.type3 .submit:after { float:right; margin-right:-1px; }
.xans-product-action.fixed .btnArea.type3 .normal:nth-child(2) { float:left; width:91px; text-indent:36px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_cart.png") no-repeat 14px 16px; background-size:18px 14px; }
.xans-product-action.fixed .btnArea.type3 .normal:nth-child(3) { float:right; width:91px; text-indent:34px; background:url("http://img.echosting.cafe24.com/design/skin/mobile/bg_btn_wish.png") no-repeat 14px 17px; background-size:16px 14px; }
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]