@kinxcdn/commerce-player 1.6.7-alpha.0 → 1.6.7-alpha.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -0
- package/dist/commerce-player.min.js +16 -15
- package/dist/esm/index.js +18 -18
- package/dist/index.d.ts +2 -0
- package/dist/styles.css +3 -3
- package/package.json +1 -2
- package/README.internal.md +0 -238
package/README.md
CHANGED
|
@@ -10,10 +10,61 @@ npm i @kinxcdn/commerce-player
|
|
|
10
10
|
# 또는
|
|
11
11
|
|
|
12
12
|
yarn add @kinxcdn/commerce-player
|
|
13
|
+
|
|
14
|
+
# alpha 버전 확인이 필요한 경우
|
|
15
|
+
npm i @kinxcdn/commerce-player@alpha
|
|
13
16
|
```
|
|
14
17
|
|
|
15
18
|
## Usage
|
|
16
19
|
|
|
20
|
+
### ShoppingPlayer
|
|
21
|
+
|
|
22
|
+
숏폼 1개 또는 컬렉션 데이터를 받아 커머스 플레이어 UI를 렌더링합니다. 컬렉션 모드에서는 컬렉션 내부 숏폼을 세로로 탐색할 수 있고, `PLATFORM`, `GRID`, `VERTICAL`, `HORIZONTAL` 레이아웃의 상품 캐러셀 UI를 함께 렌더링합니다.
|
|
23
|
+
|
|
24
|
+
`ShoppingPlayer`는 React 컴포넌트와 CDN Web Component(`mc-shopping-player`)로 사용할 수 있습니다.
|
|
25
|
+
|
|
26
|
+
#### Props
|
|
27
|
+
|
|
28
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
29
|
+
| ------------ | ------------ | ------- | ------------------------------------------------------- |
|
|
30
|
+
| `shortform` | `Shortform` | — | 단일 숏폼 플레이어로 렌더링할 데이터 |
|
|
31
|
+
| `collection` | `Collection` | — | 컬렉션 플레이어로 렌더링할 데이터 |
|
|
32
|
+
| `isMobile` | `boolean` | `false` | 모바일 플레이어 UI 렌더링 여부 |
|
|
33
|
+
| `isPreview` | `boolean` | `true` | 미리보기 모드 여부. `true`일 때 통계 호출을 보내지 않음 |
|
|
34
|
+
|
|
35
|
+
`shortform`과 `collection` 중 하나를 전달합니다. `collection` 전달 시 `collection.contents`의 첫 번째 숏폼부터 재생 대상으로 사용합니다.
|
|
36
|
+
|
|
37
|
+
#### 지원 레이아웃
|
|
38
|
+
|
|
39
|
+
| 값 | 레이아웃 | 설명 |
|
|
40
|
+
| --- | ------------ | --------------------------------------- |
|
|
41
|
+
| `1` | `PLATFORM` | 플랫폼형 플레이어와 우측 상품/정보 패널 |
|
|
42
|
+
| `2` | `GRID` | 플레이어와 2행 상품 그리드 캐러셀 |
|
|
43
|
+
| `3` | `VERTICAL` | 플레이어와 세로 상품 캐러셀 |
|
|
44
|
+
| `4` | `HORIZONTAL` | 플레이어와 가로 상품 캐러셀 |
|
|
45
|
+
|
|
46
|
+
#### 사용 예시
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { ShoppingPlayer } from "@kinxcdn/commerce-player";
|
|
50
|
+
|
|
51
|
+
<ShoppingPlayer shortform={shortform} />;
|
|
52
|
+
|
|
53
|
+
<ShoppingPlayer collection={collection} />;
|
|
54
|
+
|
|
55
|
+
<ShoppingPlayer collection={collection} isMobile />;
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
- JS (Web Component)
|
|
59
|
+
|
|
60
|
+
```html
|
|
61
|
+
<script src="https://unpkg.com/@kinxcdn/commerce-player/dist/commerce-player.min.js"></script>
|
|
62
|
+
|
|
63
|
+
<mc-shopping-player
|
|
64
|
+
collection='{"count":1,"contents":[...],"player":{"layout":2,"shoppingPlayer":{"controlbar":true,"autopass":false,"comment":false}}}'
|
|
65
|
+
></mc-shopping-player>
|
|
66
|
+
```
|
|
67
|
+
|
|
17
68
|
### WidgetPlayer
|
|
18
69
|
|
|
19
70
|
#### Props
|