WEBD Manager - 셋팅 매니저

이용안내

셋팅 매니저 사용방법

기본 사용방법
셋팅 매니저는 쇼핑몰 내 각종 설정값을 디자인 단위로 관리하고, 그 안에 설정 그룹과 설정 항목을 추가하여 구성합니다.

1. 좌측에서 디자인추가 버튼을 클릭하여 새 디자인을 생성합니다.
2. 디자인 선택 후 그룹추가 버튼을 통해 설정 그룹을 생성합니다.
3. 그룹 안에 텍스트, 멀티라인, 셀렉트, 라디오, 링크, li메뉴 등 다양한 타입의 설정 항목을 추가할 수 있습니다.

모듈 코드 안내

타입	마커	설명	출력 형태
공통	{$wd-name}	모든 타입에서 사용 가능	설정 항목의 제목
텍스트	{$wd-text}	한 줄 텍스트 입력	입력된 텍스트 그대로
멀티라인	{$wd-multiline}	여러 줄 텍스트 입력 (textarea)	줄바꿈 포함된 텍스트
셀렉트	{$wd-select}	드롭다운 선택 목록	콤마로 구분된 옵션 목록
라디오	{$wd-radio}	라디오 버튼 선택	콤마로 구분된 옵션 목록
링크	{$wd-link}	URL 링크 설정	<a href="URL" target="타겟">URL</a>
li메뉴	{$wd-list}	계층형 메뉴 구조	중첩된 <ul><li> 구조

사용 예제

예제 1. 기본 HTML 사용법

<!-- 셋팅 -->
<div class="test1">
  <h2>{$wd-name}</h2>
  <ul>
    <li class="kakao_talk">{$wd-name} {$wd-text}</li>
    <li class="kakao_channel">{$wd-name} {$wd-text}</li>
    <li class="naver_talk">{$wd-name} {$wd-text}</li>
    <li class="deadline_time">{$wd-name} {$wd-multiline}</li>
    <li class="a113">{$wd-name} {$wd-select}</li>
    <li class="a114">{$wd-name} {$wd-radio}</li>
    <li class="a115">{$wd-name} {$wd-link}</li>
  </ul>
  <ul>
    <div class="a116">{$wd-name}{$wd-list}</div>
  </ul>
</div>

예제 2. 실제 출력 결과

<!-- 위 코드가 실제로 출력될 때의 모습 -->
<div class="test1">
  <h2>JS 코드</h2>
  <ul>
    <li class="kakao_talk">카카오톡 api ac240304ad9f6f6273ded78955bb34f7</li>
    <li class="kakao_channel">카카오톡 채널 https://pf.kakao.com/_AsBxgxd</li>
    <li class="naver_talk">네이버톡톡 https://talk.naver.com/ct/wcbf33</li>
    <li class="deadline_time">오늘출발 상품 시간 
        1: '17:00', // 월요일
        2: '17:00', // 화요일
        3: '17:00', // 수요일
        4: '17:00', // 목요일
        5: '17:00', // 금요일
        6: 'OFF', // 토요일
        0: 'OFF'  // 일요일</li>
    <li class="a113">항목3 1111, 2222</li>
    <li class="a114">항목4 2222, 3333</li>
    <li class="a115">항목5 <a href="https://webgood.co.kr" target="_blank">https://webgood.co.kr</a></li>
  </ul>
  <ul>
    <div class="a116">항목6
      <ul>
        <li><a href="#">메뉴명</a>
          <ul>
            <li><a href="#">브랜드 소개</a></li>
            <li><a href="#">브랜드 히스토리</a></li>
          </ul>
        </li>
        <li><a href="#">메뉴명</a>
          <ul>
            <li><a href="#">특허/인증현황</a></li>
            <li><a href="#">찾아오시는길</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </ul>
</div>

예제 3. JavaScript에서 설정값 사용

<script>
  const KAKAO_CHANNEL_URL = "${kakao_talk}";
  const NAVER_TALK_URL = "${naver_talk}";
  const DEADLINE_CONFIG = `${deadline_time}`;
</script>