Home멤버스(회원가입) 시즌2멤버스 활용 가이드멤버스 템플릿 추가

멤버스 템플릿 추가

– 예약 필드의 주소 검색엠샵 대한민국 주소 플러그인을 사용하셔야 노출이 됩니다.

– 예약 필드의 본인인증, 아이핀 인증, 휴대폰 인증엠샵 본인인증 플러그인을 사용하셔야 노출이 됩니다.

 

1. 멤버스 템플릿 추가

  • 멤버스 템플릿 추가를 클릭하시면 아래와 같은 화면이 노출됩니다.
    member-s2_add_template
  • 고유주소(슬러그)는 영문으로 작성되어야 합니다.
    member-s2_add_slug

 


2. 폼 구성

  • 하단의 예약필드, 기본필드, 레이아웃, 약관, 소셜로그인, 커스텀의 엘리먼트를 추가하여 폼 구성이 가능합니다.
    msmf-filds1

    아래 이미지처럼 엘리먼트를 끌어 폼 디자이너 화면에 옮겨주기 바랍니다.
    member-s2_add_field

  • 2-1 폼 구성 화면

    msmf-filds2

  • 이름 : 해당 필드의 이름을 적어주세요.
  • * 이름 : first_name
    * 전화번호 : billing_phone
    * 생년월일 : birthday
  • (아래의 이름은 필수로 넣어주세요. 없거나 다를 경우 정상적으로 동작이 안될 수 있습니다.)
    • 이메일 : user_login
      아이디 : login
      비밀번호 : password
      비밀번호 확인 : confirm_password
  • 제목 : 해당 필드가 사이트에서 보이는 이름을 적어주세요.
  • 안내문구 : placeholder의 내용을 적어주세요.
  • 종류 : 필드의 종류를 선택할수 있으며 자세한 내용은 하단을 참고해주시기 바랍니다.
  • – Input – text : 아이디, 이름, 이메일 등 한/영, 숫자를 입력할때 사용됩니다.
    – Input – number : 전화번호, 카드번호 등 숫자를 입력할때 사용됩니다.
    – Input – password : 비밀번호, 비밀번호 확인 에 사용됩니다.
    – Input – file : jpg, png, pdf, egg, mp4 등 파일을 올릴수 있으며 신청서를 만들때 주로 사용됩니다.
  • – Button – Button : 이벤트를 추가하여 클릭시 이벤트를 발생 시킵니다.
    – Button – Submit : 클릭시 액션을 발생시킵니다.(페이지/Step 이동)
    – Button – Reset : 입력한 정보를 전부 지울수 있습니다.
  • 데이터 타입 : Select 필드에만 있는것으로 Select 옵션을 설정할 수 있습니다.
    msmf-select2

    • – Taxonomy(분류) : 카테고리/상품 카테고리를 지정할수 있습니다.
      – 멤버스 필드 : 엠샵 멤버스 > 멤버스 필드 에서 지정한 필드를 선택하여 사용할 수 있습니다.
      – 우커머스 국가목록 : 우커머스에서 제공하는 국가목록을 가져와 사용할 수 있습니다.
      – 커스텀 필드 : Select 옵션을 추가하여 사용하실수 있습니다.
  • 필수입력 : 필수로 입력 또는 체크를 해야 되는것으로 아이디, 패스워드, 약관동의와 같이
    입력을 꼭 해야되는 것에 체크를 해주세요.
  • 필수입력 안내문구 : ‘필수입력’을 체크해야 나타나는 필드로 해당 필드의 내용이 비었거나, 잘못될때 알림 창을 띄웁니다. (주소검색, 비밀번호, 비밀번호 확인은 지정되어있어 수정이 불가합니다.)
  • 툴팁 메시지 : 해당 필드에 대한 설명을 적는 영역으로 해당 필드에 마우스를 올릴시 설명이 나타납니다.
    msmf-filds4
  • 읽기전용 : 내용을 적을수 없고 읽기만 가능하도록 만듭니다. (주소검색, 비밀번호, 비밀번호 확인는 사용불가합니다.)
  • 암호 강도 검사기 사용 : 비밀번호 필드에만 있는것으로 영문, 숫자, 특수기호를 조합해 더욱 안전하게 합니다.
  • 크기 : 해당 필드의 크기를 지정할수 있으며 한 컬럼에 2개 이상의 필드를 넣으실 경우 필드 옵션의 레이아웃 > ‘Field Group’ 를 사용하여 주시기 바랍니다.
  • Class : 클래스를 추가하여 예약된 스타일을 사용하거나 CSS 또는 JS 코드를 추가할때 편리하게 사용할 수 있습니다.

 

2-2 reCAPTCHA 사용

  • reCAPTCHA를 사용할 경우 reCAPTCHA 매뉴얼을 참고하여 사용 하시기 바랍니다.
    member-s2-reCAPTCHA-01
    Site Key와 Secret Key는 구글 reCAPTCHA에서 발급 받은 후 필드 편집창에 넣어주시기 바랍니다.
    memhttps://manual.codemshop.com/docs/members-s2/uses-guide/members-add/?preview=trueber-s2-reCAPTCHA

 

2-3 정규식(regExp) 표현

  • 아이디 또는 특별 필드에 대해 최소, 최대, 영문, 숫자, 특수문자 조건을 설정하고 싶을때 사용하는 옵션입니다.
  • 아래에 예를 남기오니 참고해주시기 바랍니다.
  • ^[A-Za-z0-9]{4,12}$ : 영문, 숫자 조합으로 최소 4이상 최대 12이하의 값을 만들수 있습니다.
    msmf-filds6msmf-filds7

 

2-4 조건설정 사용

  • 조건설정은 ‘Select’ 필드로 선택했을 때 나타내는 설정입니다.
    (해당 기능을 사용하시려면 ‘Select’ 필드의 데이터 타입은 ‘커스텀 필드’ 로 되어있어야 합니다.)

  • 1. 조건설정의 ‘아이디’를 ‘Select’ 필드의 이름과 동일하게 해주신 다음
    조건설정의 값을 ‘Select 필드의’ 데이터 > 키에 넣어주시기 바랍니다.
     
    2. ‘Select’ 필드 Class에 ‘conditional_trigger’을 넣고 저장 버튼을 눌러 확인을 해봅니다.

    members-s2_select-1members-s2_select-2members-s2_select

 

3. 접근차단 설정

  • 해당 템플릿에 대한 접근을 차단합니다.
    msmf-filds3
  • 적용 대상 : 설정하신 정책에 대한 회원등급을 지정하실 수 있습니다.
  • 추가 조건 : 사용자 조건에서 ‘관리자’, ‘로그인 사용자’를 추가하고 값에서 ‘YES’, ‘NO’를 선택한 후 ‘AND’, ‘OR’을 정해
    규칙를 추가할수있습니다.
  • Redirect URL : 접근 차단된 적용대상이 이동할 URL을 지정합니다.

 

 

4. 액션 설정

member-s2-action

액션

  • 로그인 템플릿에는 ‘로그인’ / 회원가입 템플릿에는 ‘회원가입’을 넣어주세요.

Post Actions
member-s2-post-action

  • Post Actions의 타입(리다이렉트, 사용자 메타 업데이트, 세션저장, 이벤트 트리거)을 선택합니다.
    1. 리다이렉트 : 템플릿이 넘어갈때 Message를 띄우거나 지정한 URL로 이동시킵니다.
    2. 사용자 메타 업데이트 : 회원가입 시 받은 정보를 저장하여 결제할때 사용합니다.
    3. 세션저장 : 비회원 주문과 같이 이용약관이 있는곳에 사용이 됩니다.
    4. 이벤트 트리거 : ‘Script’ 함수를 넣어 예약된 이벤트를 작동시킵니다.
      (해당 템플릿의 작업이 완료되면 이벤트를 걸어 이동또는 팝업을 띄웁니다.)

 

 

5. 스타일 설정

  • css 및 style을 추가하실수 있습니다.
    member-s2-style

 

6. 페이지 적용

  • 멤버스 템플릿을 다 만드셨다면 하단의 이미지의 참고하여 관리자 메뉴[엠샵 멤버스]에서 숏코드를 카피한 다음
    페이지에 넣어주시기 바랍니다.
    member-s2-shortcodemember-s2-shortcode-page

 

템플릿 카테고리

  • 템플릿에 대한 카테고리를 지정하는 영역으로 로그인은 ‘로그인’, 회원가입은 ‘회원가입’에 넣어주시길 바랍니다.
    member-s2-template_category
Was this article helpful to you? Yes No