외부 스크립트 호출 가이드
이해하기
이 문서에서는 shop by pro 어드민에서 설정한 외부 스크립트를 쇼핑몰에 적용할 수 있도록 개발하는 방법을 안내합니다.
shop by pro 어드민에서는 쇼핑몰에 적용할 스크립트를 설정할 수 있는 기능을 제공합니다.
해당 설정을 진행할 수 있는 메뉴는 다음과 같습니다
해당 위치에서 스크립트를 적용하고자 하는 쇼핑몰을 선택한 다음, 스크롤을 내려 '외부 스크립트' 항목에 내용을 기입한 후 저장하면 외부스크립트 설정이 완료됩니다.
이 때, 페이지별로 스크립트 설정이 가능합니다.
step1에서 스크립트를 설정한 쇼핑몰 페이지에 고객이 접근하면 해당 스크립트가 실행됩니다.
(스크립트가 실행될 수 있도록 쇼핑몰 개발이 진행되어야하며, 해당 과정은 아래 문단에서 상세 안내 드립니다.)
쇼핑몰에 외부 스크립트 적용하기
쇼핑몰에서 외부 스크립트를 가져오기 위해서 다음 API를 사용할 수 있습니다.
- get외부스크립트 조회하기
- /page/scripts
쇼핑몰에서 사용 중인 외부 스크립트 리스트를 불러옵니다.
상기 API를 호출하면, 스크립트 내용을 담은 객체들이 배열에 담긴 형태로 응답 값이 옵니다.
해당 객체가 갖고 있는 속성들의 의미는 다음과 같습니다
deviceType: 스크립트를 적용하고자 하는 디바이스 타입
pageType: 스크립트를 적용하고자 하는 위치 (ENUM)
pageTypeLabel: pageType을 한글로 해석한 값
content: 스크립트 본문
deviceType 과 pageType을 참고하여, 적절한 위치에서 content가 실행될 수 있도록 개발이 진행되어야합니다.
deviceType으로 올 수 있는 값들은 'PC', 'Mobile' 두 가지이며,
pageType으로 올 수 있는 값들은 다음과 같습니다.
| ENUM 명 | 적용 페이지 | 소스 위치 |
|---|---|---|
| COMMON_HEAD | 모든 화면 | header 태그 내부 끝 |
| COMMON_FOOTER | 모든 화면 | body 태그 내부 끝 |
| MAIN | 메인 화면 | body 태그 내부 |
| DISPLAY_SECTION | 메인분류 상품조회 화면 | body 태그 내부 |
| PRODUCT | 상품 상세화면 | body 태그 내부 |
| PRODUCT_LIST | 상품 리스트 화면 | body 태그 내부 |
| PRODUCT_SEARCH | 상품 검색결과 화면 | body 태그 내부 |
| MEMBER_JOIN_COMPLETE | 회원가입 완료 화면 | body 태그 내부 |
| CART | 장바구니 화면 | body 태그 내부 |
| ORDER | 주문서 작성 화면 | body 태그 내부 |
| ORDER_COMPLETE | 주문 완료 화면 | body 태그 내부 |
| ORDER_DETAIL | 마이페이지 내 주문 상세 화면 | body 태그 내부 |
예를 들어 하기와 같은 응답이 들어왔다고 가정하면,
1
2 scriptContents: [{
3 deviceType: 'PC',
4 pageType: 'CART',
5 pageTypeLabel: (생략),
6 content: '<script>console.log('샵바이 CART')</script>'
7 },
8 {
9 deviceType: 'Mobile',
10 pageType: 'COMMON_HEAD',
11 pageTypeLabel: (생략),
12 content: '<script>console.log('샵바이 COMMON_HEAD')</script>'
13 }, ]
14 1. PC 몰 - 장바구니 페이지의 window.document.body 내부에 '<script>console.log('샵바이 CART')</script>' 소스가 들어갈 수 있게 해야 하며,
2. Mobile 몰 - 모든 페이지의 window.document.head 내부 맨 끝에 '<script>console.log('샵바이 COMMON_HEAD')</script>' 소스가 들어갈 수 있게 해야 합니다.
단, 해당 소스를 넣기 전 글로벌 변수를 먼저 세팅해야 합니다.
글로벌 변수 세팅
shop by pro 어드민에서 외부 스크립트를 설정할 때 몰의 정보(ex. 장바구니 데이터)를 이용한 스크립트도 사용할 수 있도록
쇼핑몰에 글로벌 변수들을 세팅해야합니다.
이 글로벌 변수들은 추후 외부 앱용 스크립트에서도 사용될 수 있습니다.
세팅해야하는 변수들은 다음과 같습니다.
| 화면 위치 | 변수 | 설명 | 상세보기 |
|---|---|---|---|
| 모든 화면 공통 | sb.getPlatform() | 디바이스 정보 | - |
| sb.profile | 회원정보 | 회원 정보 조회 API | |
| 상품 상세화면 | sb.product() | - | 상품 상세 조회 API |
| 상품 검색결과 화면 | sb.searchedProduct | - | 상품 검색 API |
| 상품 리스트 화면 | sb.searchedProduct | - | 상품 검색 API |
| 메인분류 상품조회 화면 | sb.displaySection | - | 상품 디자인 섹션 조회 API |
| 장바구니 화면 | sb.cart | - | 회원 장바구니 조회 API |
| 비회원 장바구니 조회 API | |||
| 주문서 작성화면 | sb.orderSheet | - | 주문서 조회 API |
| 주문완료 화면 | sb.order | - | 회원 주문 조회 API |
| 주문상세 화면 | 비회원 주문 조회 API | ||
| 회원가입 완료화면 | sb.profile | - | 회원 정보 조회 API |
※ 상기 정보는 shop by pro 어드민 내 '설정 > 외부 서비스 설정 : 외부 스크립트' 항목의 '변수 조회 가이드' 버튼을 누르면 노출되는 팝업에서도 확인하실 수 있습니다.
※ 외부 스크립트를 이용하여 쇼핑몰 이용자의 개인정보를 제3자에게 제공하거나, 개인정보처리업무를 위탁하는 경우 개인정보보호법에 따라 (제3자 제공의 경우) 별도 동의를 받거나, (위탁의 경우) 이를 정보주체가 알기 쉽도록 공개하여야 합니다.
기본 스킨은 v1.10.0 에서 글로벌 변수 세팅이 구현되었습니다.
해당 버전 릴리즈 노트 에서 글로벌 변수 세팅 방법을 참고하실 수 있습니다.