# 제품 상세 페이지 (PDP) 통합

이 페이지는 귀하의 웹사이트 제품 상세 페이지(PDP)에 Virtusize를 통합하는 방법을 안내합니다. 이 과정은 3단계로 이루어져 있습니다:

1. 플레이스홀더 추가하기

현재 여섯 종류의 위젯을 지원합니다:

  • 인페이지 스탠다드
  • 인페이지 미니멀
  • 스마트 테이블
  • 피팅룸 추천
  • 피팅룸 디스커버리
  • 키즈

이 위젯은 페이지의 어디에나 배치할 수 있지만, 플레이스홀더를 사용하여 배치를 지정하는 것이 좋습니다. 플레이스홀더를 추가하면 향후 Virtusize 위젯이 깨지는 것에 대해 걱정하지 않고 페이지 디자인을 자유롭게 변경할 수 있습니다.

2. Virtusize 스크립트 통합하기

이 스크립트는 위젯을 표시하는 중앙 애플리케이션을 호출하는 데 필요합니다.

3. 검증

# 시작하기 전에

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

# 1. 플레이스홀더 추가하기

귀하의 영업 담당자와 상담하여 Virtusize 태그의 최적 위치를 결정하십시오.


Virtusize 인페이지 스탠다드 위젯을 통합하는 경우, 표시할 위치에 플레이스홀더 태그를 추가하십시오:

<div class="vs-placeholder-inpage"></div>

Virtusize 인페이지 미니멀 위젯을 통합하는 경우, 표시할 위치에 플레이스홀더 태그를 추가하십시오:

<div class="vs-placeholder-inpage-mini"></div>

Virtusize 스마트 테이블 (ST) 위젯을 통합하는 경우, 표시할 위치에 플레이스홀더 태그를 추가하십시오:

<div class="vs-placeholder-smart-table"></div>

Virtusize 피팅룸 추천 (FRR) 위젯을 통합하는 경우, 표시할 위치에 플레이스홀더 태그를 추가하십시오:

<div class="vs-placeholder-frr"></div>

Virtusize 피팅룸 디스커버리 (FRD) 위젯을 통합하는 경우, 표시할 위치에 플레이스홀더 태그를 추가하십시오:

<div class="vs-placeholder-frd"></div>

Virtusize 키즈 위젯을 통합하는 경우, 표시할 위치에 플레이스홀더 태그를 추가하십시오:

<div class="vs-placeholder-kids"></div>

인페이지 스탠다드, 인페이지 미니멀, 스마트 테이블, FRR 및 키즈 위젯을 여러 개 추가하려면 추가 플레이스홀더 태그를 삽입하면 됩니다.

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

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

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  product: { id: "PRODUCT_ID", version: "PRODUCT_VERSION" },
  page: "pdp"
};

(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 또는 mobile일 수 있습니다. 사이트가 반응형일 경우(데스크톱과 모바일 장치에 동일한 리소스를 제공하는 경우) desktop으로 설정하십시오.
USER_ID 사용자가 로그인하지 않은 경우 빈 문자열('')로 설정합니다.
-사용자가 로그인한 경우 사용자 ID를 해시 함수(MD5, SHA-1 등)를 사용하여 설정합니다.
PRODUCT_ID 제품 ID입니다.
PRODUCT_VERSION 제품 버전은 일반적으로 제품 출시 날짜(YYYYMMDD)로 설정되어야 합니다. 버전을 알 수 없는 경우 1로 설정하십시오. 제품 버전이 변경되면 제품 정보가 자동으로 다시 파싱됩니다.

# 3. 검증

통합을 완료한 후, 제품 상세 페이지 URL을 귀하의 영업 담당자와 공유하십시오.