본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1168 주소 입력 시 나머지 주소 입력박스에 도움말 표시하는 방법 조회수 7232
  • 작성일 2017-06-29 17:30:06
  • 추천 추천하기
  • 조회수 7232


고객들의 완벽한 주소 입력을 위해

도움말 표시하는 방법!




쇼핑몰을 이용하는 사용자들이 주문서작성 또는 회원가입 페이지에서 주소를 입력할 때

나머지주소 쓰는 것을 잊고 기입하지 않는 경우가 종종 있지요?



이를 방지하기 위해!

나머지주소로 커서가 이동되었을 때 도움말을 표시 알리는 방법을

모바일과 PC 화면에 적용해보도록 하겠습니다.




1. 모바일 화면





2. PC 화면



 



01

모바일에서 표시하기




1. 모바일쇼핑몰 > 스마트디자인 편집창으로 회원가입(/member/join.html) 페이지를 열어주세요.


나머지주소 입력박스를 출력해주는 {$form.addr2}변수에 아래와 같이 도움말 소스를 추가해주세요.


<div class="ec-base-tooltip"> <span id="{$name_contents}" class="eTip">{$form.addr2}</span> <div class="tooltip"> <div class="content"> 나머지주소가 있는경우, <br>나머지주소를 모두 입력하세요. <button type="button" class="close eClose">닫기</button> </div> </div> </div>

 



2. /css/module/member/join.css 에 도움말 관련 CSS를 추가해주세요.


.ec-base-tooltip { position:relative; display:inline-block; width:100%; vertical-align:top; }
.ec-base-tooltip h3 { font-size:15px; color:#000; font-weight:bold; line-height:43px; }
.ec-base-tooltip ul li { font-size:13px; }
.ec-base-tooltip .tooltip { width:200px; display:none; position:absolute; left:-65px; bottom:40px; padding:14px 28px 14px 14px; text-align:left; letter-spacing:normal; border:1px solid #ccc; background-color:#fff; border-radius:2px;
 -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
 -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
 box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); }
.ec-base-tooltip .tooltip:before { content:""; position:absolute; left:40%; bottom:-5px; display:inline-block; width:0; height:0; margin:-3px 0 0; border-left:5px solid transparent; border-top:5px solid #ccc; border-right:5px solid transparent; }
.ec-base-tooltip .tooltip:after {content:""; position:absolute; left:40%; bottom:-4px; display:inline-block; width:0; height:0; margin:-3px 0 0; border-left:5px solid transparent; border-top:5px solid #fff; border-right:5px solid transparent; }
.ec-base-tooltip .tooltip .txtWarn { color:#f65b54; }
.ec-base-tooltip .tooltip .close { position:absolute; right:7px; top:14px; overflow:hidden; width:14px; height:14px; margin:0; text-indent:150%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_close_gray.png") no-repeat; background-size:14px 14px; border:0; letter-spacing:normal; word-spacing:normal; text-transform:none; white-space:nowrap; }
.ec-base-tooltip.show { z-index:80; }




주문서 작성 페이지에 적용시 아래 CSS를 참고하세요.


.xans-order-form .boardWrite .ec-base-tooltip { position:relative; display:inline-block; width:100%; vertical-align:top; }
.xans-order-form .boardWrite .ec-base-tooltip h3 { font-size:15px; color:#000; font-weight:bold; line-height:43px; }
.xans-order-form .boardWrite .ec-base-tooltip ul li { font-size:13px; }
.xans-order-form .boardWrite .ec-base-tooltip .tooltip { width:200px; display:none; position:absolute; left:-65px; bottom:40px; top:auto; padding:14px 28px 14px 14px; text-align:left; letter-spacing:normal; border:1px solid #ccc; background-color:#fff; border-radius:2px;
 -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
 -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
 box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); }
.xans-order-form .boardWrite .ec-base-tooltip .tooltip:before { content:""; position:absolute; left:40%; bottom:-5px; display:inline-block; width:0; height:0; margin:-3px 0 0; border-left:5px solid transparent; border-top:5px solid #ccc; border-right:5px solid transparent; }
.xans-order-form .boardWrite .ec-base-tooltip .tooltip:after {content:""; position:absolute; left:40%; bottom:-4px; display:inline-block; width:0; height:0; margin:-3px 0 0; border-left:5px solid transparent; border-top:5px solid #fff; border-right:5px solid transparent; }
.xans-order-form .boardWrite .ec-base-tooltip .tooltip .txtWarn { color:#f65b54; }
.xans-order-form .boardWrite .ec-base-tooltip .tooltip .close { position:absolute; right:7px; top:14px; overflow:hidden; width:14px; height:14px; margin:0; text-indent:150%; white-space:nowrap; background:url("http://img.echosting.cafe24.com/skin/mobile_ko_KR/layout/ico_close_gray.png") no-repeat; background-size:14px 14px; border:0; letter-spacing:normal; word-spacing:normal; text-transform:none; white-space:nowrap; }
.xans-order-form .boardWrite .ec-base-tooltip.show { z-index:80; }



3. /js/module/member/join.js 에 도움말을 띄우는 자바스크립트 코드를 추가해주세요.


주문서 작성 페이지에 적용할 경우 /js/module/order_form.js 에 추가해주세요!


// 도움말 툴팁 $('body').delegate('.ec-base-tooltip .eTip', 'click', function(e){ var findTarget = $($(this).siblings('.tooltip')); var findTooltip = $('.tooltip'); $('.ec-base-tooltip').removeClass('show'); $(this).parents('.ec-base-tooltip:first').addClass('show'); findTooltip.hide(); findTarget.show(); e.preventDefault(); }); $('body').delegate('.ec-base-tooltip .eClose', 'click', function(e){ var findTarget = $(this).parents('.tooltip:first'); $('.ec-base-tooltip').removeClass('show'); findTarget.hide(); e.preventDefault(); });

 




4. 우편번호를 입력하고 나머지 주소로 커서가 이동하면 자동으로 도움말이 표시됩니다.


주문서 작성 페이지에도 동일한 방법으로 적용할 수 있답니다!









02

PC에서 표시하기



1. 스마트디자인 편집창에서 주문서 작성(orderform.html) 페이지를 열어주세요.



나머지주소 입력박스를 출력해주는 {$form.raddr2} 변수에

아래와 같이 도움말 소스를 추가해주세요.


<div class="eTooltip">
{$form.raddr2} <div class="ec-base-tooltip typeUpper"> <div class="content">나머지주소가 있는경우, 나머지주소를 모두 입력하세요.</div> <a href="#none" class="btnClose"><img src="//img.echosting.cafe24.com/skin/base/common/btn_close_tip.gif"
alt="닫기" /></a> <span class="edge"></span> </div> </div>


 

2. /css/module/order/form.css 에 도움말 관련 CSS를 추가해주세요.


.eTooltip { position:relative; display:inline-block; } .ec-base-tooltip.typeUpper { left:185px; bottom:28px; width:320px; } /* 도움말풍선의 위치 및 크기 조절 */ .ec-base-tooltip.typeUpper .edge { left:20%; }




3. /layout/basic/js/basic.css 에 도움말을 표시하는 자바스크립트 코드를 추가해주세요.


$('.eTooltip').find('input').focus(function() { var targetName = returnTagetName(this); targetName.siblings('.ec-base-tooltip').show(); }); $('.eTooltip').find('input').focusout(function() { var targetName = returnTagetName(this); targetName.siblings('.ec-base-tooltip').hide(); }); function returnTagetName(_this){ var eplacename = $(_this).parent().attr("class"); var targetName; if(eplacename == "ePlaceholder"){ targetName = $(_this).parents(); }else{ targetName = $(_this); } return targetName; }

 



4. 우편번호를 입력하고 나머지 주소로 커서가 이동하면 자동으로 도움말을 표시하게 됩니다.


회원가입 페이지에도 동일한 방법으로 적용할 수 있습니다!








 도움말 디자인이 정상적으로 나오지 않는다면?



1. 공통 레이아웃(/layout/basic/layout.html) 상단 <head>...</head> 사이에

<!--@css(layout/basic/css/ec-base-tooltip.css)-->를 추가해주세요.


<!--@css(/layout/basic/css/layout.css)-->
<!--@css(/layout/basic/css/ec-base-tooltip.css)-->

 



2. 디자인 편집창에서 화면추가하여 새로운 CSS 파일을 만듭니다.





3. 새로 만든 파일에 아래 소스를 추가하고 저장해주세요.


/* 공통 css */
.ec-base-tooltip { display:none; z-index:2; position:absolute; top:24px; padding:15px; border:1px solid #565960; background:#fff; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15); } .ec-base-tooltip h3 { margin:0 0 8px; padding:0 10px; font-size:12px; border-bottom:0; background:url("http://img.echosting.cafe24.com/skin/base/common/ico_layer_title.gif") no-repeat 0 50%; }
.ec-base-tooltip h3 + p { margin:0 5px 8px; }
.ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; }
.ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
.ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; }
.ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; }
.ec-base-tooltip .edge:before,
.ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; }
.ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; }
.ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; }
.ec-base-tooltip table th, .ec-base-tooltip table td { padding:5px 15px 5px 5px; border:1px solid #e8e8e8; line-height:1.5em; }
.ec-base-tooltip table th { padding-right:0; background:#fbf9fa; }
.ec-base-tooltip table thead th { text-align:center; }
.ec-base-tooltip table tbody th { text-align:left; }
.ec-base-tooltip table .left { text-align:left; }
.ec-base-tooltip table .center { text-align:center; }
.ec-base-tooltip table .right { text-align:right; }
.ec-base-tooltip table .info { padding:0; color:#757575; }
.ec-base-tooltip table p.info:before,
.ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; }
.ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; }
.ec-base-tooltip p.bullet, .ec-base-tooltip ul.bullet { margin:8px 10px; }
.ec-base-tooltip p.bullet:before,
.ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; }
.ec-base-tooltip ul.bullet li { line-height:1.5em; }
.ec-base-tooltip .txtEm { color:#008bcc; }
.ec-base-tooltip .txtWarn { color:#f65b54; }

/* typeUpper */
.ec-base-tooltip.typeUpper { top:auto; bottom:34px; }
.ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; }
.ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#565960; border-width:5px 5px 0 5px; }
.ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; }