구매 완료 페이지에 구현하기 | Virtusize 개발가이드

# 구매 완료 페이지에 구현하기

Ver1.1

# 구매 내역용 태그에 대하여

구매 내역용 태그는 구매 완료 페이지에 설치하는 Javascript 태그입니다.

사용자가 구매한 아이템을 Virtusize의 온라인 클로젯에 등록하거나 Virtusize서비스의 비용를 측정합니다.

# 작업과정

주문데이터 오브젝트 만들기

주문 데이터는 한개의 주문 오브젝트와 복수의 아이템 오브젝트로 구성되어 있습니다.

예시
var orderObject = {
  // 주문 오브젝트
  orderId: xxx,
  userId: xxx,
  region: xxx,
  // 아이템 오브젝트
  items: [
    {
      productId: "P001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "http://example.com/products/P001",
      imageUrl: "http://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "KRW"
    }
    ...// 판매된 모든 아이템을 같은 형식으로 오브젝트를 작성
  ]
}

주문 오브젝트. 모두 필수 항목입니다.

파라미터명	데이터형	예시	설명
orderId	String	"A00001"	스토어에서 부여하는 주문ID를 셋팅
userId	String	"UserId"	스토어에서 부여하는 유저ID를 MD5나SHA-1로 해쉬값으로 변환하거나, 혹은 그대로 셋팅. 동일한 유저는 동일한 유저ID를 셋팅해야 합니다. ※1
region	String	"KR"	ISO-3166 국가별 코드를 2자로 지정

※1: 로그인없이 구매가 가능한 경우, guest_랜덤값을 셋팅해 주시기 바랍니다.

예시)

userId = `guest_${Math.random().toString(36).substring(2, 15)}.${new Date().getTime().toString(36)}`

아이템 오브젝트

파라미터명	데이터형	예시	설명
productId	String	"A00001"	스토어에서 부여하는 상품ID와 동일
size	String	"S", "M"등	사이즈 명칭. Virtusize에 등록하는 사이즈 데이터와 동일. 제품 상세 페이지 에서 선택한 것과 동일한 사이즈를 선택해 주십시오.
imageUrl	String	"http://example.com/coat.jpg"	상품이미지URL.Virtusize에 등록되는 상품이미지. 이미지는 제품 상세 페이지에서 설정한 것과 동일해야 합니다.
currency	String	"KRW"	통화코드
url	String	"http://example.com/coat.html"	상품URL.유저가 참조하는 URL과 동일
unitPrice	Float	1234123등 숫자를 입력. 문자열 불가	세금을 포함하지 않은 판매단가. 세일 가격인 경우 세일 가격을 셋팅
quantity	Integer	1,5 등 숫자를 입력. 문자열 불가	판매수량

다음은 선택사항입니다.

No	컬럼명	타입	예시	비고
1	variantId	String	"A00001-001-002"	SKU.상품,색상,사이즈를 중복되지 않게 표시하는 ID
2	color	String	"Red", "빨강"등	구매상품의 색상명
3	gender	String	"W", "여성" 등	유저의 성별

생성한 오브젝트 보내기 위에서 오브젝트를 생성한 후 다음 스크립트를 사용하여 Virtusize로 전송합니다. 스테이징 환경을 사용하는 경우 vsDomain에 com을 사용해야 합니다. 프로덕션 환경의 경우 스토어가 일본, 한국, 중국에 위치하지 않는 한 com을 사용하십시오. 이 경우 값은 각각 "jp", "kr" 또는 "com.cn"이어야 합니다.

window.vsEnv = "production"; // 환경에 맞게 production　혹은 staging 를 셋팅
window.vsDomain = “com”; // “com”은 스테이징 및 production에 사용됩니다. 유일한 예외는 스토어가 일본, 한국 또는 중국에 있는 경우로 Production에서는 각각 “jp”, “kr” 또는 “com.cn” 가 사용됩니다. (스테이징 버전은 여전히 “com”입니다);
window.vsApiKey = "{담당자가 배부한 api key}";
window.vsOrderObject= orderObject;

(function(d) {
var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = 'https://integration.virtusize.com/orders/confirmation.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);

# 구매내역 태그를 테스트하기

구매 내역 태그가 제대로 동작하는지 확인하기 위해, 구매 내역 태그 설치후 다음의 테스트를 실시하십시오.

초기화한 브라우저※에서, Virtusize 위젯으로 사이즈를 비교하지 않고 구매
초기화한 브라우저※에서, Virtusize 위젯으로 사이즈를 비교하고 구매
위에서 이용한 orderId와 productId를 담당자에게 연락
Virtusize에서 구매 내역을 확인후 그 결과를 피드백

초기화한 브라우저※: Cookie, LocalStorage를 클리어한 브라우저

이상.

← 제품 페이지 통합 상품 상세 페이지에 구현하기 →