레퍼런스
통합형 사용하기
글로벌 오더 통합형 기능을 웹사이트에서 제공하기 위해 컴포넌트를 추가하는 샘플 코드를 제공합니다.
1. 설치 가이드
1-1. 사용 방법
Order Action 기능은 반드시 가맹점 웹사이트의 상품 페이지와 장바구니 페이지에 생성해야합니다.
Order Tracking 기능은 가맹점 웹사이트의 메인 페이지에 생성하는 것을 추천드립니다.
각 컴포넌트는 두 가지 방식 중 하나를 선택하여 설치할 수 있습니다. 프로젝트의 구조나 선호도에 따라 적합한 방식을 선택하세요.
- 인라인 스타일 버전: 별도의 CSS 파일 없이 HTML 파일 하나로 구성되어 있습니다.
- HTML/CSS 분리 버전: HTML과 CSS를 분리하여 관리할 수 있습니다.
1-2. 맞춤 설정
- 스타일 수정: 브랜드 아이덴티티에 맞게 CSS를 수정하여 버튼이나 배경색 등을 변경할 수 있습니다.
- 로고 적용: 컴포넌트 내에 있는 로고를 사용하기 위해 🖼️ : 딜리버드 파트너스 로고 링크를 통해 다운로드 받은 이미지를 적용해주세요.
- 동적 데이터 연결: 샘플 코드의 정적 데이터 부분을 실제 사이트의 동적 데이터와 연결해야 합니다.
- 해외 사용 설정: 글로벌 오더를 해외 사용자인 경우에만 로드하는 경우, 해외 사용 설정하기 문서를 참고해주세요.
2. Order Action 컴포넌트
해당 컴포넌트는 이해를 돕기 위한 샘플입니다.
링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.
2-1. 기능
- 상품 페이지에서 글로벌 오더 주문서 생성 기능을 제공하는 버튼을 표시합니다.
- 버튼 클릭 시, 상품 정보를 전달하여 글로벌 체크아웃 창이 나타나도록 합니다.
- 상품 정보를 전달하는 방법은 통합형 SDK 연동하기를 참고해주세요.
Order Action 기능은 반드시 가맹점 웹사이트의 상품 페이지와 장바구니 페이지에 생성해야합니다.
2-2. 새 창 방식 (New Tab) 컴포넌트 코드
- 버튼 클릭 시, 글로벌 체크아웃이 새로운 브라우저 탭에서 열립니다.
dkLibrary.orderInNewTab()
메서드를 사용합니다.
2-3. 아이프레임 방식 (Iframe) 컴포넌트 코드
- 버튼 클릭 시, 글로벌 체크아웃이 현재 페이지 내 iframe에서 열립니다.
dkLibrary.orderInIframe()
메서드를 사용합니다.
3. Top Bar (Order Tracking) 컴포넌트
해당 컴포넌트는 이해를 돕기 위한 샘플입니다.
링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.
- 설치 조건: 글로벌 오더 통합형 SDK 설치 완료
3-1. 기능
- 메인 페이지 상단에 “Order Tracking” 링크와 “We now ship to worldwide” 메시지를 표시합니다.
- 링크 클릭 시, 주문 조회 페이지로 이동하여 사용자가 주문 상태를 확인할 수 있습니다.
3-2. 컴포넌트 코드
Order Tracking 기능은 가맹점 웹사이트의 메인 페이지에 생성하는 것을 추천드립니다.