> For the complete documentation index, see [llms.txt](https://nsl-solution.gitbook.io/livesolution/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nsl-solution.gitbook.io/livesolution/guide-for-sellers/old-displaymodule/simple/cafe24.md).

# 카페24

본 문서에서는 카페24 호스팅 서비스를 이용하는 자사몰에서 코드를 몰라도 비교적 쉽게 적용할 수 있는 방법을 가이드합니다. 다만, 간단하게 연동하는만큼 부가적인 커스텀이나 개별 화면에 대한 자사몰 내 이동은 다소 제약됩니다.

모든 기능을 연동하고 싶은 경우, [카페24 심화 연동](/livesolution/guide-for-sellers/old-displaymodule/advanced/cafe24.md)을 진행해주세요.

<figure><img src="/files/Hi9yMSuSgK9PyjUVAuLU" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">적용 순서</mark>

1. 본 문서의 [코드 블록](#undefined-1)을 클릭하여 복사해주세요.

<figure><img src="/files/Enk14cGpsucFUoCU8KBi" alt=""><figcaption></figcaption></figure>

2. 카페24 디자인 편집창에 붙여 넣으세요.

<figure><img src="/files/QSoCwDYLKDuLsK87Z5UF" alt=""><figcaption></figcaption></figure>

3. 코드 내 네이버로부터 전달 받으신 외부연동용 서비스 ID `externalServiceId`를 입력해주세요.

<figure><img src="/files/03yqlFyzGrBX9JtqDqHR" alt=""><figcaption></figcaption></figure>

4. 자사몰 스타일과 라이브 모듈의 스타일을 맞추고 싶으신 경우, [모듈 커스텀 설정](/livesolution/guide-for-sellers/old-displaymodule/customize.md) 가이드 문서를 참고하여 영역 좌우 간격, 폰트 크기 등을 조절해주세요.

5. 편집 사항을 저장하여 자사몰에 적용된 내용을 확인합니다.

<figure><img src="/files/r8KNg0QyujwaO1oxPWFd" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/7KRPEa2WZcmltnYbdrzY" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">적용 케이스별 코드 블록 복사</mark>

적용하고 싶은 케이스에 따라 코드 블록 복사해주세요. \
코드 복사 이후에는 하단 카페24 디자인 편집창 적용 가이드대로 진행해주시면 됩니다.

* A. 방송 목록 모듈
  * A1 라이브 방송 목록
  * A2 숏클립 목록
* B. 전체 목록 모듈

{% tabs %}
{% tab title="A1 모듈만 적용" %}

### 라이브 방송 목록 모듈

다음 코드 블록을 복사하신 후, 라이브 목록을 노출하고자 하는 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

B목록 없이 적용하는 경우에 대한 코드이며, 이 경우 목록 내 더보기 버튼 클릭시 자사몰 페이지가 아닌 네이버에서 제공하는 기본 목록 페이지로 이동합니다.

{% code title="A1. 라이브 방송 목록 모듈" overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!--  모듈 초기화 영역 -->
<div id='broadcast-list'></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      target: document.getElementById('broadcast-list'),
    },
  })
</script>
```

{% endcode %}
{% endtab %}

{% tab title="A2 모듈만 적용" %}

### 숏클립 목록 모듈

다음 코드 블록을 복사하신 후, 숏클립 목록을 노출할 영역에 붙여넣어주세요. (예. 자사몰 메인 페이지 내 원하는 영역)

{% code title="A2. 숏클립 목록 모듈" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!--  모듈 초기화 영역 -->
<div id='shortclip-list'></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastList',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-list/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      broadcasts : {displayType : "shortclip"},
      target: document.getElementById('shortclip-list'),
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab title="B모듈만 적용" %}

### 전체 목록 모듈

자사몰에 모든 라이브 및 숏클립 목록을 노출할 신규 페이지를 생성한 후, 다음 코드를 복사하여 붙여넣어주세요.

{% code title="전체 목록 모듈" overflow="wrap" %}

```javascript
<!-- 모듈 로딩 런처 -->
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>

<!-- 모듈 초기화 영역 -->
<div id="broadcast-list-page"></div>

<script>
  // 모듈 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBroadcastListPage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/broadcast-page/latest/real/',
      js: 'index.js',
      css: 'bundle.css'
    },
    moduleConfig: {
      externalServiceId: '', // 전달 받은 ID를 입력해주세요.
      header: {
        useFeature: true, // 헤더 노출 여부 (true/false)
        title: {
          text: '전체 라이브', // 헤더명 입력
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      display: {
        standby: { // 예고 영역 설정 
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
        },
        onair: { // 온에어 영역 설정 
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    }
  })
</script>
```

{% endcode %}
{% endtab %}
{% endtabs %}

<figure><img src="/files/MbnZkfb0jECHvQTL8G1Z" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:blue;">카페24 디자인 편집창 적용 가이드</mark>

<figure><img src="/files/m7IXTAMmqGj17jjo8fYb" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 1`**</mark>**&#x20; 카페24 쇼핑몰 관리자 로그인**

카페24 쇼핑몰 관리자 로그인 페이지(<https://eclogin.cafe24.com/Shop/>) 에 진입하여 로그인 혹은 회원가입을 진행합니다.

<figure><img src="/files/2TUfOyNclsZM2HUyWtFC" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 2`**</mark>**&#x20; 디자인 템플릿 생성**

<mark style="color:blue;">**2-1**</mark>  새로운 디자인 템플릿 생성\
디자인 (PC/모바일) > 디자인 보관함 > 기본 디자인 추가 혹은 카페24 디자인 센터에서 디자인 템플릿 구입 > 디자인명 입력 및 디자인 템플릿 선택 > 추가 버튼 클릭&#x20;

<figure><img src="/files/hqlQFv70qv2jhM6vm9LM" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**2-2**</mark>  기존에 있던 디자인 템플릿 복사하여 사용\
디자인(PC/모바일) > 디자인 보관함 > 기존 템플릿 선택 > 복사 버튼 클릭 > 복사 디자인명 입력 > 저장 버튼 클릭

<figure><img src="/files/uFY1BynYwKdM894pGa8g" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 3`**</mark>**&#x20; 디자인 템플릿 편집**\
생성된 디자인의 편집 버튼 클릭 > 스마트 디자인 편집창 열기

<figure><img src="/files/EjUDoJKP7Yrz3mVBkbu4" alt=""><figcaption></figcaption></figure>

<mark style="color:blue;">**`Step 4`**</mark>**&#x20; 모듈 코드 복사 > 원하는 자사몰 영역 및 페이지에 복사한 코드 붙여넣기**

* A모듈: 방송 목록 모듈
* B모듈: 전체 목록 모듈

{% tabs %}
{% tab title="A모듈 적용 방법" %}
카페24 스마트 디자인 편집창에서

1. 자주 쓰는 화면 혹은 전체 화면 보기 탭 클릭
2. 모듈을 삽입하고 싶은 화면 선택 & 확인
3. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기
4. 서비스 ID 입력 : `externalServiceId`에 전달받으신 솔루션 연동 ID를 입력해주세요.

<figure><img src="/files/6GQaZZ8tIJYBBc22YNQa" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/NSTjWmIwZSgpfsXZGbwr" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/wADEfexgXNjHHCZdjcru" alt=""><figcaption></figcaption></figure>

쇼핑몰 메인 페이지에 A. 방송 목록을 넣는 경우, \ <mark style="color:purple;">●</mark> 메인 페이지 화면 클릭 후 > <mark style="color:orange;">●</mark> 메인 페이지 안, <mark style="color:green;">●</mark> 원하는 영역에 복사한 A모듈 코드를 붙여 넣어 주세요.

<figure><img src="/files/2kcNJO4gzjklIHBbILYd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="B모듈 적용 방법" %}
카페24 스마트 디자인 편집창에서

1. 전체 화면 보기 탭 클릭
2. 화면 추가 버튼 클릭
3. 파일명 `/livelist.html` 입력 > 저장
4. `/livelist.html` 페이지 생성 확인
5. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기
6. 서비스 ID 입력 : `externalServiceId`에 전달받으신 솔루션 연동 ID를 입력해주세요.

B모듈을 넣을 `/livelist.html` 페이지를 먼저 생성 후, \
해당 페이지의 원하는 영역에 복사한 B모듈 코드를 붙여 넣어 주세요.

<figure><img src="/files/9gVXcq1OKyHZUWaeTbkR" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

<figure><img src="/files/hAyQ8pNWU7uzT8nxV9WY" alt=""><figcaption></figcaption></figure>

### &#x20;    <mark style="color:red;">코드 적용 시 주의사항</mark>&#x20;

{% hint style="info" %}
네이버로부터 전달 받으신 외부연동용 서비스ID `externalServiceId`를 반드시 입력해주세요.
{% endhint %}

예) 전달 받은 서비스ID가 `yourservice`인 경우, 다음과 같이 입력합니다.

```javascript
moduleConfig: {
      externalServiceId: 'yourservice', // 전달 받은 ID를 입력해주세요.
```

* `'코드'`, `"코드"`와 같이 따옴표가 지워지지 않도록 유의해주세요.&#x20;
* 코드 수정 시 쉼표(,) 및 세미콜론(;)이 지워지지 않도록 유의해주세요.