> 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/advanced/cafe24.md).

# 카페24 심화 연동

본 문서는 카페24 호스팅 서비스를 이용하는 자사몰에서 모듈의 전체기능을 적용하는 방법을 가이드합니다. 심화연동을 통해 적용하는 경우, 단순 노출 뿐만 아니라 자사몰 페이지간의 심리스한 탐색 및 예고페이지까지 제공해볼 수 있습니다.

HTML에 대한 이해가 없는 경우 다소 어려울 수 있으며, 적용이 어려우신 경우 [간단 연동](/livesolution/guide-for-sellers/old-displaymodule/simple/cafe24.md)을 참고하여 적용하실 수 있습니다.

### &#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>

### &#x20;    <mark style="color:blue;">모듈별 코드 블록 복사</mark>

먼저 모듈 별 코드를 복사할 수 있는 코드 블록을 제공합니다.\
코드 복사 후, 하단 카페24 디자인 편집창 적용 가이드대로 진행해주시면 됩니다.

* **A모듈** 방송 목록 모듈
  * **A1** 라이브 방송 목록 모듈
  * **A2** 숏클립 방송 목록 모듈
* **B모듈** 전체 목록 모듈
* **C모듈** 예고 모듈&#x20;

{% hint style="warning" %}
해당 **A, B, C 모듈 코드를 자사몰 내 전부 적용**해주셔야 자사몰 내 라이브 모듈이 **정상 동작**합니다.
{% endhint %}

{% tabs %}
{% tab title="A1 모듈 코드" %}

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

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

{% code overflow="wrap" %}

```html
<!-- 모듈 로딩 런처 -->
<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를 입력해주세요.
      layout: {
        layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
      },
      title: {
        useFeature: true, // 타이틀 영역 노출 여부 (true/false)
        text: '라이브 리스트', // 타이틀명 입력
        style: {
          fontWeight: "700",
          fontColor: "#1E1E23",
          align: "left",
          fontFamily: "",
          fontSize: "19px",
          paddingTop: "0px",
          paddingBottom: "13px" // 타이틀 스타일 
        }
      },
      broadcasts: {
        displayType: 'ALL', // 노출할 방송 데이터 설정 (ALL: 전체, ONAIR: 온에어+예고만, REPLAY: 다시보기만)
        onClickBridge: function(e, cardInfo) {
          console.log('click bridge', cardInfo.broadcastId)
          window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
        }, // C 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
        onClickMore: function(e) {
          window.location.href = '/livelist.html'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      moreButton: {
        useFeature: true, // 더보기 버튼 노출 여부 (true/false)
        label: '전체 목록 보기', // 더보기 버튼명 입력 
        onClick: function(e) {
          window.location.href = '/livelist.html'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      style: {
        mobileMargin: {
          left: "20px",
          right: "20px",
          top: "30px",
          bottom: "32px" // 모바일 상하좌우 여백
        },
        pcMargin: {
          left: "40px",
          right: "40px",
          top: "30px",
          bottom: "32px" // pc 상하좌우 여백
        },
        maxWidth: "1280px", // 영역 최대 너비
      },
      target: document.getElementById('broadcast-list'),
    },
    onLoad(instance) {
      console.log('created instance', instance)
      window.liveList = instance
    },
    onError() {
      console.log('error')
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab 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를 입력해주세요.
      layout: {
        layoutType: 'carousel', // 방송 리스트 레이아웃 설정 (carousel, list, grid, highlight)
      },
      title: {
        useFeature: true, // 타이틀 영역 노출 여부 (true/false)
        text: '숏클립 리스트', // 타이틀명 입력
        style: {
          fontWeight: "700",
          fontColor: "#1E1E23",
          align: "left",
          fontFamily: "",
          fontSize: "19px",
          paddingTop: "0px",
          paddingBottom: "13px" // 타이틀 스타일 
        }
      },
      broadcasts: {
        displayType: 'SHORTCLIP',
        onClickMore: function(e) {
          window.location.href = '/livelist.html'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      moreButton: {
        useFeature: true, // 더보기 버튼 노출 여부 (true/false)
        label: '전체 목록 보기', // 더보기 버튼명 입력 
        onClick: function(e) {
          window.location.href = '/livelist.html'
        } // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
      },
      style: {
        mobileMargin: {
          left: "20px",
          right: "20px",
          top: "30px",
          bottom: "32px" // 모바일 상하좌우 여백
        },
        pcMargin: {
          left: "40px",
          right: "40px",
          top: "30px",
          bottom: "32px" // pc 상하좌우 여백
        },
        maxWidth: "1280px", // 영역 최대 너비
      },
      target: document.getElementById('shortclip-list'),
    },
    onLoad(instance) {
      console.log('created instance', instance)
      window.liveList = instance
    },
    onError() {
      console.log('error')
    },
  })
</script>
s
```

{% endtab %}

{% tab title="B모듈 코드" %}

### 전체 목록 모듈

자사몰 페이지 내에 `/livelist.html` 을 생성한 후 해당 페이지에 아래 코드를 붙여넣어주세요. `/livelist.html` 을 생성하는 방법은 하단 카페24 디자인 편집창 가이드를 참고해주세요.

{% code overflow="wrap" %}

```html
<!-- 모듈 로딩 런처 -->
<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)
        },
      },
      documentTitle: { // 상단 타이틀 영역 설정
        title: {
          text: '전체 라이브 리스트', // 전체 타이틀명 입력 
          style: {
            fontColor: "black",
            fontSize: "19px",
            fontFamily: "",
            fontWeight: "bold",
            align: "left", // 전체 타이틀 스타일 
          },
        },
        subtitle: {
          text: '전체 라이브 리스트입니다.', // 서브타이틀명 입력 
          style: {
            fontSize: "13px",
            fontFamily: "", // 서브 타이틀명 스타일 (정렬은 전체 타이틀과 동일)
          },
        },
      },
      style: { // 모듈 전체 영역 설정 
        mobileMargin: {
          left: '20px',
          right: '20px', // 모바일 좌우 여백
        },
        pcMargin: {
          left: '40px',
          right: '40px', // pc 좌우 여백
        },
        maxWidth: '1280px', // 영역 최대 너비
      },
      display: {
        standby: { // 예고 영역 설정 
          title: {
            text: '라이브 예고', // 예고 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 예고 영역 스타일 
            },
          },
          layout: 'list', // 예고 영역 레이아웃 (list, grid)
          onClickBridge: (e, cardInfo) => {
            window.location.href = '/livebridge.html?broadcastId=' + cardInfo.broadcastId
          }, // C 모듈을 사용하지 않는 경우 이 영역을 삭제해주세요.
        },
        onair: { // 온에어 영역 설정 
          title: {
            text: '지금 라이브 중', // 온에어 영역 타이틀명 
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 온에어 영역 스타일
            },
          },
          layout: 'highlight', // 온에어 영역 레이아웃 설정 (list, grid, highlight)
        },
        replay: { // 다시보기 영역 설정 
          sortTypes: ['LATEST', 'SALE_AMOUNT'], // 다시보기 필터 설정. 'LATEST'는 미포함하여도 화면에 항상 노출됨 (최우선 노출)
          title: {
            text: '지난 라이브 다시보기', // 다시보기 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 다시보기 영역 스타일 
            },
          },
          layout: 'list', // 다시보기 영역 레이아웃 설정 (list, grid)
        },
        shortclip: { // 숏클립 영역 설정 
          useFeature : true, // 숏클립 영역 노출 여부
          title: {
            text: '숏클립 모아보기', // 숏클립 영역 타이틀명
            style: {
              fontColor: "#1E1E23",
              fontSize: "17px",
              fontFamily: "",
              fontWeight: "700" // 숏클립 영역 스타일 
            },
          },
          layout: 'grid', // 숏클립 영역 레이아웃 설정 (list, grid)
        },
      },
      target: document.getElementById('broadcast-list-page'),
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.liveListPage = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>

```

{% endcode %}
{% endtab %}

{% tab title="C모듈 코드" %}

### 예고페이지 모듈

자사몰 페이지 내에 `/livebridge.html` 을 생성한 후 해당 페이지에 아래 코드를 붙여넣어주세요. `/livebridge.html` 을 생성하는 방법은 하단 카페24 디자인 편집창 가이드를 참고해주세요.

{% code overflow="wrap" %}

```html
<script type="text/javascript" src="https://im.pstatic.net/live-commerce/modules/launcher/0.20.1/index.js"></script>
<script>
  var params = new URLSearchParams(location.search);
</script>

<div id="bridge-page"></div>

<script>
  // 예고 페이지 초기화 코드
  lico.launcher({
    name: 'ShoppingLiveBridgePage',
    module: {
      resourcePath: 'https://im.pstatic.net/live-commerce/products/bridge-page/latest/real/',
      entry: 'index.js'
    },
    moduleConfig: {
      broadcastId: params.get('broadcastId'),
      externalServiceId: '', // 전달받은 ID를 입력해주세요
      header: {
        useFeature: true, // 헤더 영역 노출 여부 (true/false)
        title: {
          text: '라이브 예고', // 헤더 타이틀명
        },
        backButton: {
          useFeature: true, // 백버튼 노출 여부 (true/false)
        },
      },
      products: {
        useFeature: true, // 상품 영역 사용 유무 (true/false)
      },
      style: {
        maxWidth: "1280px" // 영역 최대 너비
      },
      target: document.getElementById('bridge-page'),
      debug: true,
    },
    onLoad: function(instance) {
      console.log('created instance', instance)
      window.bridgePageModule = instance
    },
    onError: function() {
      console.log('error')
    },
  })
</script>

```

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

###

### &#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모듈** 전체 목록 모듈
* **C모듈** 예고 모듈

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

1. 자주 쓰는 화면 혹은 전체 화면 보기 탭 클릭
2. 모듈을 삽입하고 싶은 화면 선택&#x20;
3. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기

쇼핑몰 메인 페이지에 A. 방송 목록을 넣는 경우, \
메인 페이지 화면 클릭 후 > 메인 페이지 내 원하는 영역에 복사한 A모듈 코드를 붙여 넣어 주세요.

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

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

1. 전체 화면 보기 탭 클릭
2. 화면 추가 버튼 클릭
3. 파일명 `/livelist.html` 입력 > 저장
4. `/livelist.html` 페이지 생성 확인
5. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기

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

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

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

1. 전체 화면 보기 탭 클릭
2. 화면 추가 버튼 클릭
3. 파일명 `/livebridge.html` 입력 > 저장
4. `/livebridge.html` 페이지 생성 확인
5. 화면 내 원하는 영역에 복사한 모듈 코드를 붙여넣기<br>

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

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

### 코드 적용 시 주의사항&#x20;

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

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

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

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

{% hint style="danger" %}
개별 페이지는 본 가이드에서 약속된 이름으로 생성합니다.\
약속된 이름으로 페이지를 생성하지 않는 경우, 라이브 모듈이 정상 동작하지 않습니다.&#x20;

* B. 전체 목록 모듈의 경우 페이지 파일명 <mark style="color:red;">`/livelist.html`</mark> 으로 생성
* C. 예고 모듈의 경우 페이지 파일명 <mark style="color:red;">`/livebridge.html`</mark> 으로 생성
  {% endhint %}

### 특정 모듈을 사용하지 않고자 하는 경우

불가피하게 B. 방송 목록 모듈 혹은 C. 예고 모듈 중 사용하지 않는 모듈이 있는 경우, 각 코드의 주석에 있는 영역을 삭제해주세요.

{% hint style="info" %}
예) A. 방송 목록 모듈 코드에서 주석에서 표시된 영역을 제거해주세요. \
`onClickXxxx { ... },` 와 같이 중괄호로 묶인 전체를 삭제합니다.
{% endhint %}

{% code overflow="wrap" %}

```javascript
	onClickMore: function(e) {
		window.location.href = '/livelist.html'
	} // B 모듈을 적용하지 않으신다면, 이 부분을 삭제해주세요.
```

{% endcode %}