Help Center
카페24 소식
[고객관리] 해외몰 이메일 회원가입 기능 추가 안내
2014-04-02
안녕하세요, 카페24 운영도우미 입니다.
기본언어가 외국어인 해외쇼핑몰에서 이메일로 회원가입하고 로그인할 수 있는 기능이 추가되었습니다.
자세한 내용은 아래를 참조해 주세요.
■ 적용일자 : 2014-04-02 (수)
■ 업데이트 내용
기본언어가 외국어인 해외쇼핑몰에만 적용되고, 한국어 국내쇼핑몰에는 적용되지 않습니다.
1. 회원 가입기준을 이메일 또는 아이디로 설정할 수 있습니다.
한 개의 이메일로 여러 사이트에서 회원가입하고 로그인하는 고객들을 위한 서비스입니다.
어드민 > 고객관리 > 회원관리 > 회원가입항목 설정에 회원 가입기준을 설정합니다.
신규로 생성되는 해외몰의 가입기준 기본값은 이메일이며, 기존 해외몰의 가입기준은 아이디입니다.
1) 회원 가입기준을 이메일로 설정하는 경우
고객이 이메일로 회원가입한 후 이메일 또는 아이디로 로그인할 수 있습니다.
아이디는 회원가입 시 입력된 이메일을 기반으로 자동으로 추천되어 수정도 가능합니다. 
2) 회원 가입기준을 아이디로 설정하는 경우
기존과 동일하게 고객이 아이디로 회원가입하고 로그인할 수 있습니다. 이메일로 로그인할 수는 없습니다.
2. 아이디, 이메일, 비밀번호확인 결과 내용이 입력하신 우측에 바로 노출됩니다.
1) 아이디 중복확인 레이어가 아닌, 입력 후 포커스가 이동하는 시점에 입력된 값에 대한 확인 결과내용이
입력 우측에 바로 노출되어 더욱 편리합니다. 이메일과 비밀번호확인 결과 내용도 입력 우측에 노출됩니다.
2) 모바일의 경우, 공간제약으로 인하여 아이디와 이메일 중복확인이 우측에 노출되지 않고 팝업으로 표시됩니다.
3. 이메일 중복확인 기능이 추가되었습니다.
1) 쇼핑몰어드민 > 고객관리 > 회원관리 > 회원정보 조회 > 회원정보상세
운영자가 이메일 중복을 확인할 수 있도록 이메일에 “중복확인” 버튼이 추가되었으나,
이메일이 중복되어도 저장할 수는 있습니다.
2) 회원가입
회원 가입기준 설정에 관계없이 회원가입화면에 이메일 중복확인 기능이 추가되어 기존 회원과 동일한 이메일을 입력하면
회원가입할 수 없습니다.
이메일 중복확인은 이메일 대소문자를 구분하지 않습니다.
3) 회원정보수정
① 회원 가입기준 설정에 관계없이 이메일중복 아닌 회원의 경우, 회원정보수정에서 이메일 중복확인 후
저장할 수 있습니다.
② 현재 가입기준이 아이디이고 이메일중복인 기존 회원의 경우, 회원정보수정에서 이메일 중복확인 없이
저장할 수 있습니다. 기존 회원들에게는 영향이 없게 하기 위함입니다.
③ 현재 가입기준이 이메일이고 이메일중복인 기존 회원의 경우, 회원정보수정에서 이메일 중복확인 없이
저장할 수 있습니다. 그러나 '아이디 또는 이메일 로그인 적용' 버튼을 클릭하여 이메일 중복확인 후
저장하여 이메일로 로그인 할 수 있습니다.
※ 위 3개 기능을 구현하기 위하여, HTML디자인을 수정해 주세요.
- 디자인가이드 예시는 기본언어가 영어인 쇼핑몰의 스마트디자인 기준입니다.
1) PC 회원가입
- 디자인관리 > 디자인편집하기 > 회원 > 회원가입(join.html)
- 빨간색 소스를 수정, 파란색 소스를 추가해주세요.
|
## 상단생략 ## <tr> ## 하단생략 ## |
2) PC 회원정보수정
- 디자인관리 > 디자인편집하기 > 회원 > 회원정보수정(modify.html)
- 아이디 우측 안내문이 입력 결과 내용이 빨간색 소스 부분이며,
"아이디 또는 이메일 로그인 적용"(가입기준이 이메일이고 이메일이 중복된 기존 회원의 경우에만 표시) 버튼이
파란색 소스로 추가됩니다.
비밀번호확인, 이메일의 입력 피드백이 파란색 소스로 추가됩니다.
|
## 상단생략 ##
<tr>
<th scope="row">ID</th>
<td>{$form.member_id}
<span id="{$idMsg_id}"></span>
<a href="#none" id="{$use_email_confirm_button}" class="{$display_use_email_confirm|display}"> <img src="http://img.echosting.cafe24.com/design/skin/default_en/member/btn_overlap_id_email.gif" alt=" Log in with ID or email address" /></a> </td>
</tr>
<tr>
<th scope="row">Password</th>
<td>{$form.passwd} {$passwd_type_desc}</td>
</tr>
<tr>
<th scope="row">Confirm Password</th>
<td>{$form.user_passwd_confirm} <span id="{$pwConfirmMsg_id}"></span></td>
</tr>
<tr>
<th scope="row">E-mail</th>
<td>{$form.email} <span id="{$emailMsg_id}"></span></td>
</tr>
## 하단생략 ## |
3) PC 로그인
- 디자인관리 > 디자인편집하기 > 회원 > 로그인(비회원주문/조회) (login.html)
- 빨간색 소스를 변수 처리로 수정하면, 가입기준에 따라 항목명에 “아이디”, “이메일 또는 아이디”로 표시됩니다.
|
## 상단생략 ##
<legend>Log in</legend>
<label class="password"><span>Password</span>{$form.member_passwd}</label> ## 하단생략 ## |
4) PC 로그인
- 디자인관리 > 디자인편집하기 > 레이아웃 > 기본 레이아웃 > 공통 레이아웃(layout.html),
메인 레이아웃(main.html)
- 빨간색 소스를 변수 처리로 수정하면, 가입기준에 따라 항목명에 “아이디”, “이메일 또는 아이디”로 표시됩니다.
|
## 상단생략 ## <legend>Log in</legend> <p class="check"> <span><label for="member_id">{$login_id_type_text}</label>{$form.member_id}</span> <span><label for="member_passwd">Password</label>{$form.member_passwd}</span> </p> ## 하단생략 ## |
5) 모바일 회원가입
- 모바일쇼핑몰 > 디자인편집하기 > 회원 > 회원가입
- "이메일 중복확인" 버튼이 파란색 소스로 추가됩니다.
|
## 상단생략 ## <th scope="row">E-mail</th> ## 하단생략 ## |
6) 모바일 이메일 중복확인
- 모바일쇼핑몰 > 디자인편집하기 > 회원 > check_email.html
- 이메일 중복확인 팝업으로, 추가된 파일입니다.
| <!--@layout(/layout/basic/popup.html)-->
<div module="member_checkEmail"> <!--@css(/css/module/member/memberCheckEmail.css)--> <div class="titleArea"> <h2>Email Address Availability</h2> </div> <p><strong>{$check_email_text}</strong></p>
<p class="chkForm">{$form.email} <button type="button" class="btnNormal" onclick="{$action_check_email}">Check availability</button></p> <p class="info {$check_email_class}">{$check_email_msg}</p> <div class="btnArea type1"> <button type="button" class="submit" onclick="{$action_use_email}">Use</button> </div> </div> |
7) 모바일 로그인
- 모바일쇼핑몰 > 디자인편집하기 > js > 모듈 > 회원 > memberLogin.js
- 파란색 소스를 추가, 빨간색 소스를 변수 처리로 수정하시면 가입기준에 따라 placeholder에 "아이디",
"이메일 또는 아이디"로 표시됩니다.
|
//로그인폼 placeholder 추가 if ($('.xans-member-login').val() != undefined) { $('#member_id').attr('placeholder', login_id_type_text); $('#member_passwd').attr('placeholder', 'Password'); } });
|
■ 참고사항
스마트디자인 서포트사이트에서 최신 디자인소스(PC/모바일)를 다운로드할 수 있습니다.
- URL : http://sdsupport.cafe24.com/board/update/list.html?board_no=7&category_no=1
카페24 는 쇼핑몰 운영을 보다 편리하고 쉽게 할 수 있도록 기능 업데이트를 지속적으로 진행하고 있습니다.
더 좋은 서비스가 되기 위해 노력하겠습니다. 끊임없는 애정과 관심 부탁 드립니다.
궁금하신 사항은 언제든지 고객지원센터 1:1게시판으로 문의해주세요. [문의하기]