주 콘텐츠로 건너뛰기

일본 쇼핑몰 회원가입 및 주문서 화면 디자인 수정 방법

일본 쇼핑몰의 사용성을 높여주는 스마트디자인 활용 TIP !
회원가입 및 주문서 화면 디자인 수정 방법

자세히 알아보기

PC 쇼핑몰 - 스마트 디자인

1) 공통 툴팁
① 위치 : 레이아웃 > 기본 레이아웃 > css > ec-base-tooltip.css
※ 다음 위치에 기존 소스는 삭제하고 아래  파란색 소스를 추가 하세요.
(해당 파일이 없을 경우에는 새로운 파일을 만들어 아래와 같이 파란색 소스를 추가하세요.)

/* 공통 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; }

 

② 위치 : 레이아웃 > 기본 레이아웃 > main.html (/layout/basic/main.html)
※ 아래 파란색 소스가 있는지 확인 후, 없을 경우 파란색 소스를 추가 하세요.

## 상단생략 ##

<title>基本レイアウト</title>
    <!--@css(/layout/basic/css/common.css)-->
    <!--해당 CSS는 쇼핑몰 전체 페이지에 영향을 줍니다. 삭제와 수정에 주의해주세요.-->

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

## 하단생략 ##    

 

③ 위치 : 레이아웃 > 기본 레이아웃 > layout.html > (/layout/basic/layout.html)
※ 아래 파란색 소스가 있는지 확인 후, 없을 경우 파란색 소스를 추가 하세요.

## 상단생략 ##

<title>基本レイアウト</title>

    <!--@css(/layout/basic/css/common.css)-->
    <!--해당 CSS는 쇼핑몰 전체 페이지에 영향을 줍니다. 삭제와 수정에 주의해주세요.-->

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

## 하단생략 ##  

 

2) 공통 플레이스 홀더

① 위치 : 레이아웃 > 기본 레이아웃 > js > basic.js (/layout/basic/basic.js)
※ 아래 파란색 소스가 있는지 확인 후, 없을 경우 파란색 소스를 추가 하세요.

## 상단생략 ##

$(document).ready(function(){
$('#banner:visible, #quick:visible').floatBanner();

//placeholder
$(".ePlaceholder input, .ePlaceholder textarea").each(function(i){
var placeholderName = $(this).parents().attr('title');
$(this).attr("placeholder", placeholderName);
});
/* placeholder ie8, ie9 */
$.fn.extend({
placeholder : function() {
//IE 8 버전에는 hasPlaceholderSupport() 값이 false를 리턴 합니다.
if (hasPlaceholderSupport() === true) {
return this;
}
//hasPlaceholderSupport() 값이 false 일 경우 아래 코드를 실행합니다.
return this.each(function(){
var findThis = $(this);
var sPlaceholder = findThis.attr('placeholder');
if ( ! sPlaceholder) {
return;
}
findThis.wrap('<label class="ePlaceholder" />');
var sDisplayPlaceHolder = $(this).val() ? ' style="display:none;"' : '';
findThis.before('<span' + sDisplayPlaceHolder + '>' + sPlaceholder + '</span>');
this.onpropertychange = function(e){
e = event || e;
if (e.propertyName == 'value') {
$(this).trigger('focusout');
}
};
//공통 class
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf("msie") != -1) {
$(".ePlaceholder").css({"position":"relative"});
$(".ePlaceholder span").css({"position":"absolute", "padding":"0 4px","color":"#878787"});
$(".ePlaceholder label").css({"padding":"0"});
}
});
}
});

$(':input[placeholder]').placeholder(); //placeholder() 함수를 호출합니다.

//클릭하면 placeholder 숨김
$('body').delegate('.ePlaceholder span', 'click', function(){
$(this).hide();
});

//input창 포커스 인 일때 placeholder 숨김
$('body').delegate('.ePlaceholder :input', 'focusin', function(){
$(this).prev('span').hide();
});

//input창 포커스 아웃 일때 value 가 true 이면 숨김, false 이면 보여짐.
$('body').delegate('.ePlaceholder :input', 'focusout', function(){
if (this.value) {
$(this).prev('span').hide();
} else {
$(this).prev('span').show();
}
});

//input에 placeholder가 지원이 되면 true를 안되면 false를 리턴값으로 던져줌.
function hasPlaceholderSupport() {
if ('placeholder' in document.createElement('input')) {
return true;
} else {
return false;
}
}


});

 

## 하단생략 ##

 

3) 회원가입 - PC

① 위치 : css > 모듈 > 회원 > join.css (/css/module/member/join.css)
※ 아래와 같이 파란색 소스를 추가 하세요

##상단 생략##
.xans-member-join .eTooltip { position:relative; }
.xans-member-join .ec-base-tooltip.typeUpper { left:85px; bottom:28px; }
.xans-member-join .ec-base-tooltip.typeUpper .edge { left:20%; }     

 

② 위치 : js > 모듈 > 회원 > join.js (/js/module/member/join.js)
※ 새로운 js 파일을 만들어 아래와 같이 파란색 소스를 추가 하세요

//tooltip
$('.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;

}

 

③ 위치 : 회원 > join.html (/member/join.html)
※ 아래와 같이 빨간색 소스는 삭제, 파란색 소스를 추가 하세요

## 상단생략 ##

<div module="member_join">
<!--@css(/css/module/member/join.css)-->
<!--@js(/js/module/member/join.js)-->

## 중략 ##

<tr class="{$display_name|display}">
<th scope="row">お名前 <img src="http://img.echosting.cafe24.com/skin/base_ja_JP/member/ico_required.gif" class="{$display_required_name|display}" alt="必須" /></th>
<td>{$form.name}</td>
</tr>
<tr class="{$display_eng_name|display}">
<th scope="row">英文名 <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/member/ico_required.gif" class="{$display_required_name_en|display}" alt="必須" /></th>
<td>{$form.name_en}</td>
</tr>
<tr class="{$display_pron_name|display}">
<th scope="row">お名前(ふりがな) <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/member/ico_required.gif" class="{$display_required_name_phonetic|display}" alt="必須" /></th>
<td>{$form.name_phonetic}</td>
</tr>

<tr class="{$display_name|display}">
<th scope="row">お名前 <img src="http://img.echosting.cafe24.com/skin/base_ja_JP/member/ico_required.gif" class="{$display_required_name|display}" alt="必須" /></th>
<td>
<div class="eTooltip">
<span class="ePlaceholder" title="例)山田 太郎">{$form.name}</span>
<div class="ec-base-tooltip typeUpper">
<div class="content">
<span class="txtWarn">お名前は、必ずフルネームで入力してください。<br />
フルネームで入力しない場合、配達遅延となる場合がございます。</span>
</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>
</td>
</tr>
<tr class="{$display_eng_name|display}">
<th scope="row">英文名 <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/member/ico_required.gif" class="{$display_required_name_en|display}" alt="必須" /></th>
<td>{$form.name_en}</td>
</tr>
<tr class="{$display_pron_name|display}">
<th scope="row">お名前(ふりがな) <img src="http://img.echosting.cafe24.com/skin/base_ja_JP/member/ico_required.gif" class="{$display_required_name_phonetic|display}" alt="必須" /></th>
<td>
<div class="eTooltip">
<span class="ePlaceholder" title="例)やまだ たろう">{$form.name_phonetic}</span>
<div class="ec-base-tooltip typeUpper">
<div class="content">
<span class="txtWarn">お名前(ふりがな) は、必ずフルネームで入力してください。<br />

フルネームで入力しない場合、配達遅延となる場合がございます。</span>

</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>
</td>
</tr>

## 하단생략 ##

 

4) 주문서 작성 - PC

① 위치 : 주문 > orderform.html (/order/orderform.html)
※ 아래와 같이 빨간색 소스는 삭제, 파란색 소스를 추가 하세요.

## 상단생략 ##

<tr>
<th scope="row">お名前 <img src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/ico_required.gif" alt="必須" /></th>
<td>
{$form.fname}
<a href="#none" id="{$btn_shipp_addr_id}" class="{$btn_address_display|display}">
<img src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/btn_address_book.gif" alt="最近の送付先" />
</a>
</td>
</tr>
<tr class="{$english_name_display|display}">
<th scope="row">英文名 <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/ico_required.gif" alt="必須" id="{$icon_id_english_name}" /></th>
<td>{$form.english_name}</td>
</tr>
<tr class="{$pron_name_display|display}">
<th scope="row">お名前(ふりがな) <img src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/ico_required.gif" alt="必須" id="{$icon_id_pron_name}" /></th>
<td>{$form.pron_name}</td>
</tr>

<tr>
<th scope="row">お名前 <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/ico_required.gif" alt="必須" /></th>
<td>
<span class="ePlaceholder" title="例)山田 太郎">{$form.fname}</span>
<a href="#none" id="{$btn_shipp_addr_id}" class="{$btn_address_display|display}">
<img src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/btn_address_book.gif" alt="最近の送付先" />
</a>
</td>
</tr>
<tr class="{$english_name_display|display}">
<th scope="row">英文名 <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/ico_required.gif" alt="必須" id="{$icon_id_english_name}" /></th>

<td>{$form.english_name}</td>
</tr>
<tr class="{$pron_name_display|display}">
<th scope="row">お名前(ふりがな) <img
src="http://img.echosting.cafe24.com/skin/base_ja_JP/order/ico_required.gif" alt="必須" id="{$icon_id_pron_name}" /></th>
<td><span class="ePlaceholder" title="例)やまだ たろう">{$form.pron_name}</span></td></tr>

## 하단생략 ##       

 

모바일 쇼핑몰

1) 회원가입 - 모바일

① 위치 : 회원 > join.html (/member/join.html)
※ 아래와 같이 빨간색 소스는 삭제, 파란색 소스를 추가 하세요.

## 상단생략 ##

<tr class="{$display_name|display}">
<th scope="row" id="{$name_title}">お名前 <img
src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" class="{$display_required_name|display}" width="5" height="5" alt="必須"></th>
<td>
<span id="{$name_contents}">{$form.name}</span>
<p id="under14Msg" class="displaynone">14歳未満の使用者は法定代理人の同意が必要です。</p></td>
</tr>
<tr class="{$display_eng_name|display}">
<th scope="row">お名前(英文) <img
src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" class="{$display_required_name_en|display}" width="5" height="5" alt="必須"></th>
<td>{$form.name_en}</td>
</tr>
<tr class="{$display_pron_name|display}">
<th scope="row">お名前(ふりがな) <img
src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" class="{$display_required_name_phonetic|display}" width="5" height="5" alt="必須"></th>
<td>{$form.name_phonetic}</td>
</tr>

<tr class="{$display_name|display}">
<th scope="row" id="{$name_title}">お名前 <img
src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" class="{$display_required_name|display}" width="5" height="5" alt="必須"></th>
<td>
<div class="eTooltip">
<span id="{$name_contents}" class="eTip">{$form.name}</span>
<div class="tooltip">
<div class="content">
<span class="txtWarn">お名前は、必ずフルネームで入力してください。<br>
フルネームで入力しない場合、配達遅延となる場合がございます。</span>
<button type="button" class="close eClose">閉じる</button>
</div>
</div>
</div>
<p id="under14Msg" class="displaynone">14歳未満の使用者は法定代理人の同意が必要です。</p></td>
</tr>
<tr class="{$display_eng_name|display}">
<th scope="row">お名前(英文) <img
src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" class="{$display_required_name_en|display}" width="5" height="5" alt="必須"></th>
<td>{$form.name_en}</td>
</tr>
<tr class="{$display_pron_name|display}">
<th scope="row">お名前(ふりがな) <img src="http://img.echosting.cafe24.com/skin/mobile_ja_JP/member/ico_required.png" class="{$display_required_name_phonetic|display}" width="5" height="5" alt="必須"></th>
<td>
<div class="eTooltip">
<span class="eTip">{$form.name_phonetic}</span>
<div class="tooltip">
<div class="content">
<span class="txtWarn">お名前(ふりがな) は、必ずフルネームで入力してください。<br>
フルネームで入力しない場合、配達遅延となる場合がございます。</span>
<button type="button" class="close eClose">閉じる</button>
</div>
</div>
</div>
</td>
</tr>

## 하단생략 ##

 

② 위치 : css > 모듈 > 회원 > join.css (/css/module/member/join.css)
※ 아래와 같이 파란색 소스를 추가 하세요.

## 상단생략 ##

.xans-member-join .eTooltip { position:relative; display:inline-block; width:100%; vertical-align:top; }
.xans-member-join .eTooltip h3 { font-size:15px; color:#000; font-weight:bold; line-height:43px; }
.xans-member-join .eTooltip ul li { font-size:13px; }
.xans-member-join .tooltip { width:200px; display:none; position:absolute; left:-90px;
bottom:33px; 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-member-join .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-member-join .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-member-join .tooltip .txtWarn { color:#f65b54; }
.xans-member-join .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_ja_JP/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-member-join .eTooltip.show { z-index:80; }

 

③ 위치 : js > 모듈 > 회원 > join.js (js/module/member/join.js)
※ 아래와 같이 파란색 소스를 추가 하세요.

## 상단생략 ##

//placeholder
if ($('.xans-member-join').val() != undefined) {
$('#name').attr('placeholder', '例)山田 太郎');
$('#name_phonetic').attr('placeholder', '例)やまだ たろう');
}

// 도움말 툴팁
$('body').delegate('.eTooltip .eTip', 'click', function(e){
var findSection = $(this).parents('.section:first');
var findTarget = $($(this).siblings('.tooltip'));
var findTooltip = $('.tooltip');
$('.eTooltip').removeClass('show');
$(this).parents('.eTooltip:first').addClass('show');
$('.section').css({'zIndex':0, 'position':'static'});
findSection.css({'zIndex':100, 'position':'relative'});
findTooltip.hide();
findTarget.show();
e.preventDefault();
});
$('body').delegate('.eTooltip .eClose', 'click', function(e){
var findSection = $(this).parents('.section:first');
var findTarget = $(this).parents('.tooltip:first');
$('.eTooltip').removeClass('show');
findTarget.hide();
findSection.css({'zIndex':0, 'position':'static'});
e.preventDefault();
});

 

2) 주문서 작성 (모바일)

① 위치 : js > 모듈 > 주문 > order_form.js (/js/module/order/order_form.js)
※ 아래와 같이 파란색 소스를 추가 하세요.

## 상단생략 ##

// placeholder
if ($('.xans-order-formglobal').val() != undefined) {
$('#fname').attr('placeholder', '例)山田 太郎');
$('#pron_name').attr('placeholder', '例)やまだ たろう');
}

이 페이지가 도움이 되었나요?
현재 콘텐츠