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

Ver1.1

구매 내역용 태그에 대하여

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

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

동작 환경

jQuery 1.3 이상이 설치되어 있는 스토어

작업과정

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

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

예시
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) + Math.random().toString(36).substring(2, 15);
  • 아이템 오브젝트
파라미터명 데이터형 예시 설명
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", "여성" 등 유저의 성별
  1. 작성한 오브젝트를 송신
// 환경에 맞게 production 혹은 staging 를 셋팅
var vsEnv = "production";

!(function(a,d,g,b){var c,h,e,f;a.Virtusize=b;a[b]=a[b]||[];a[b].env=null!=a.vsEnv?a.vsEnv:"production";a[b].url=null!=a.vsUrl?a.vsUrl:a.location.host;a.vsEnv=void 0;a.vsUrl=void 0;a[b].methods="setApiKey setRegion setLanguage setWidgetOverlayColor addWidget ready setMobile on setAvailableSizes setSizeAliases addOrder addFindByFit setUserId".split(" ");a[b].factory=function(c){return function(){var d;d=Array.prototype.slice.call(arguments);d.unshift(c);a[b].push(d);return a[b]}};f=a[b].methods;c=0;for(h=f.length;c<h;c++)e=f[c],a[b][e]=a[b].factory(e);a[b].snippetVersion="4.0.0";c=d.createElement(g);d=d.getElementsByTagName(g)[0];c.async=1;c.src={production:"https://cdn.api.virtusize.kr/integration/v4.js",staging:"https://cdn.staging.virtusize.com/integration/v4.js",local:"//"+a[b].url+"/integration/v4.source.js"}[a[b].env];c.id="vs-integration";d.parentNode.insertBefore(c,d)})(window,document,"script","vs");


vs.setApiKey("{담당자가 배부한 api key}");
vs.addOrder(orderObject)

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

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

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

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

이상.