# 주문 확인 페이지 (OCP) 통합

이 페이지는 귀하의 웹사이트 주문 확인 페이지(OCP)에 Virtusize를 통합하는 방법을 안내합니다. 이 과정은 3단계로 이루어져 있습니다:

주문 객체 생성하기

이 단계에서는 주문 객체를 생성하는 방법을 설명합니다.

Virtusize 스크립트 통합하기

이 스크립트는 주문을 전송하는 중앙 애플리케이션을 호출하는 데 필요합니다.

검증

이 단계는 Virtusize 스크립트와 주문이 우리 데이터베이스에서 올바르게 확인되도록 하는 데 필요합니다.

주문 확인 페이지에 Virtusize가 고객에게 최근 구매한 항목을 구매 내역의 일부로 보여줄 수 있도록 하는 스크립트를 추가하십시오. 고객은 이러한 항목을 사용하여 새로 구매하고자 하는 항목과 비교할 수 있습니다.

원하신다면, 제품 상세 페이지(PDP) 스크립트를 통합하기 전에 주문 확인 페이지 스크립트를 통합할 수 있습니다. 이렇게 하면 고객은 제품 페이지에 Virtusize를 통합하는 즉시 혜택을 받을 수 있으며, 이전 구매의 구매 내역이 이미 설정되어 있는 상태가 됩니다.

# 시작하기 전에

귀하의 영업 담당자에게 연락하여 상점 이름을 받으십시오.

# 1. 주문 데이터 객체 생성

주문 객체는 하나의 주문 객체와 여러 개의 아이템 객체로 구성되어 여러 아이템 구매가 있는 주문을 처리합니다.

주문 객체는 다음을 요구합니다:

파라미터 이름	데이터 구조	예시	비고
orderId	String	"A00001"	발급된 주문 ID.
items	Array of Objects	(아래 표 참조)	배열의 각 항목은 주문에서 구매한 각 제품에 해당하는 `아이템 객체`입니다. (예: 사용자가 셔츠 2개와 바지 1개를 구매한 경우, `items` 배열에는 3개의 `아이템 객체`가 포함됩니다.)

각 아이템 객체는 다음을 요구합니다:

파라미터	데이터 구조	예시	참고사항
productId	String	"A00001"	제품 ID. 제품 페이지에 설정된 제품 ID와 동일해야 합니다.
size	String	"S", "M", 등.	사이즈 문자열. 상세 페이지에 설정된 동일한 사이즈를 사용해야 합니다.
imageUrl	String	"http://example.com/coat.jpg"	항목의 이미지 URL. Virtusize와 공유할 이미지의 절대 경로를 제공하십시오.
currency	String	"JPY"	통화 코드
url	String	"http://example.com/coat.html"	제품 상세 페이지의 URL. 사용자가 접근할 수 있는 URL이어야 합니다.
unitPrice	Float	1234123과 같은 정수를 입력해 주세요. 문자는 지원되지 않음	세금 제외 가격을 나열하십시오.
quantity	Integer	1 또는 5와 같은 정수를 입력해 주세요. 문자는 지원되지 않음	구매한 항목 수
variantId	String	"A00001-001-002"	제품 SKU, 색상, 사이즈 등에 설정된 ID.
color	String	"Red", etc.	제품 색상
gender	String	"W", "Womens", etc.	성별

다음 아이템 객체 파라미터는 선택 사항이지만 강력히 권장됩니다:

Parameter Name	Data Structure	Example	Notes
gender	String	"W", "Womens", etc.	성별

// 예시
const orderObject = {
  orderId: "A00001",
  items: [
    {
      productId: "P00001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "https://example.com/products/P001",
      imageUrl: "https://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY",
      gender: "W"
    }
    // 주문에서 구매한 각 항목에 대한 객체를 생성하십시오.
  ]
}

# 2. Virtusize 스크립트 통합하기

스크립트는 각 환경에 대한 변수를 설정하여 쉽게 통합할 수 있습니다. 아래 스크립트를 <body /> 태그가 닫히기 바로 전에 배치하고, STORE_NAME, ENVIRONMENT, DEVICE_TYPE, USER_ID, ORDER_OBJECT를 올바른 값으로 대체하십시오.

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  orderObject: "ORDER_OBJECT",
  page: "ocp"
};

(function() {
  window.vs = !window.hasOwnProperty("vs")
    ? vsObject
    : Object.assign(window.vs, vsObject);

  const { storeName, env, deviceType } = vsObject;
  const script = document.createElement("script");
  const firstScript = document.getElementsByTagName("script")[0];
  const protocol = document.location.protocol ? 'https' : 'http'

  Object.assign(script, {
    async: true,
    src: `${protocol}://integration.virtusize.kr/${env}/${storeName}/${deviceType}.source.js`,
  });

  firstScript.parentNode.insertBefore(script, firstScript);
})();

값	설명
STORE_NAME	이것은 귀하의 영업 담당자로부터 받은 `스토어 이름`입니다.
ENVIRONMENT	이것은 통합 중인 환경에 따라 `staging` 또는 `production`일 수 있습니다.
DEVICE_TYPE	이것은 페이지에 접근하는 장치 유형에 따라 `desktop` or `mobile`일 수 있습니다. 사이트가 반응형일 경우(데스크톱과 모바일 장치에 동일한 리소스를 제공하는 경우) `desktop`으로 설정하십시오.
USER_ID	- 사용자가 로그인하지 않은 경우 빈 문자열(`''`)로 설정합니다. - 사용자가 로그인한 경우 사용자 ID를 해시 함수(`MD5`, `SHA-1` 등)를 사용하여 설정합니다.
ORDER_OBJECT	이것은 1단계에서 생성된 주문 객체입니다.

# 3. 검증

통합을 완료한 후, 아래 단계를 따르기 전에 캐시, 쿠키 및 로컬 저장소를 지우십시오:

Virtusize를 사용하여 비교 없이 아이템을 구매합니다.
Virtusize를 사용하여 비교 후 아이템을 구매합니다.
위에서 구매한 항목의 orderId 및 productId를 가지고 귀하의 영업 담당자에게 연락합니다.
영업 담당자와 함께 Virtusize의 기여도를 확인합니다.

← 제품 상세 페이지 (PDP) 통합 Google 태그 관리자(GTM)를 통한 제품 상세 페이지(PDP) 통합 →