# 제품 상세 페이지 (PDP) 통합
이 페이지는 귀하의 웹사이트 제품 상세 페이지(PDP)에 Virtusize를 통합하는 방법을 안내합니다. 이 과정은 3단계로 이루어져 있습니다:
1. 플레이스홀더 추가하기
현재 여섯 종류의 위젯을 지원합니다:
- 인페이지 스탠다드
- 인페이지 미니멀
- 스마트 테이블
- 피팅룸 추천
- 피팅룸 디스커버리
- 키즈
이 위젯은 페이지의 어디에나 배치할 수 있지만, 플레이스홀더를 사용하여 배치를 지정하는 것이 좋습니다. 플레이스홀더를 추가하면 향후 Virtusize 위젯이 깨지는 것에 대해 걱정하지 않고 페이지 디자인을 자유롭게 변경할 수 있습니다.
2. Virtusize 스크립트 통합하기
이 스크립트는 위젯을 표시하는 중앙 애플리케이션을 호출하는 데 필요합니다.
3. 검증
# 시작하기 전에
귀하의 영업 담당자에게 연락하여 API 키와 상점 이름을 받으십시오.
# 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을 귀하의 영업 담당자와 공유하십시오.