Virtusize 개발가이드

# Makeshop에 구현하기

이것은 Makeshop (opens new window)에서 Virtusize 기능을 구현하는 절차입니다. Virtusize 담당자로부터 API Key와 스토어 이름을 받은 후, 다음 절차를 진행해 주십시오.

# 도입 절차

다음 두 가지 작업이 필요합니다.

  1. 상품 상세 페이지에 스크립트 추가
  2. 외부 연계 시스템에서 API 알림 설정

# 1. 상품 상세 페이지에 스크립트 추가

# 1. 데스크탑

  1. Makeshop 관리 화면에 로그인합니다.

  2. 독자 디자인을 클릭합니다. 샘플

  3. 상품 상세 화면 관리를 클릭합니다. 샘플

  4. 상품 상세 페이지 선택에서 모든 상품을 선택합니다.

  5. Virtusize 기능을 표시하고 싶은 곳에 다음 코드를 추가합니다. 추천 사이즈 버튼을 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

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

추천 사이즈 버튼 미니를 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

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

추천 사이즈 버튼 럭셔리를 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

<div id="vs-placeholder-inpage-luxury"></div>

스마트 테이블을 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

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

여러 위치에 추가하려는 경우, 임의의 id로 div 태그를 추가하고, 담당자에게 연락하십시오.

기본적으로 귀사에서 이미 사용 중인 다음 파라미터를 할당할 필요가 있지만, Makeshop에서 이미 준비되어 있으므로 설정할 필요가 없습니다.

no id name (virtusize) id name (makeshop) 내용
1 vs-user-id login_id 귀사가 사용자의 식별에 사용하고 있는 사용자 고유의 이메일 주소입니다.
2 vs-product-id brandcode 상품 고유의 ID
  1. 입력 필드 맨 아래에 다음 스크립트를 복사합니다.

테스트 시에는 vsEnv에 staging을, 본 환경에서는 production을 설정하십시오.

<script type="text/javascript">
var vsStoreName = '{스토어 이름}';
var vsEnv = 'production';
var vsDeviceType = 'desktop';

(function(d) {
var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'integration.virtusize.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
  • 샘플 샘플
  1. 저장합니다.
# 2. 모바일

  1. 독자 디자인 화면에서 스마트폰을 클릭하고 편집 버튼을 클릭합니다. 샘플

  2. 상품 상세 화면 버튼을 클릭합니다. 샘플

  3. Virtusize 기능을 표시하고 싶은 곳에 다음 코드를 추가합니다. 추천 사이즈 버튼을 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

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

추천 사이즈 버튼 미니를 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

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

추천 사이즈 버튼 럭셔리를 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

<div id="vs-placeholder-inpage-luxury"></div>

스마트 테이블을 표시하고 싶은 위치에 다음 HTML 코드를 삽입해 주세요.

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

여러 위치에 추가하려는 경우, 임의의 id로 div 태그를 추가하고, 담당자에게 연락하십시오.

  1. 입력 필드 맨 아래에 다음 스크립트를 복사합니다.

테스트 시에는 vsEnv에 staging을, 본 환경에서는 production을 설정하십시오.

<script type="text/javascript">
var vsStoreName = '{스토어 이름}';
var vsEnv = 'production';
var vsDeviceType = 'mobile';

(function(d) {
var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'integration.virtusize.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>

# 2. 외부 연계 시스템에서 API 알림 설정

  1. 샵 만들기→ 주문 데이터 연계 설정을 클릭합니다.

※ Makeshop 계약 내용에 따라 주문 데이터 연계 설정 버튼이 표시되지 않을 수 있습니다. japan@virtusize.com에 문의하십시오.

샘플

  1. 다음과 같이 설정하십시오.
  • 주문 정보 조회: 허용함
  • 주문 정보 변경: 허용하지 않음
  • 업데이트 알림 API의 URL: https://ofdlq5np05.execute-api.ap-northeast-1.amazonaws.com/prod/purchased/{스토어 이름}
  • 업데이트 알림 타이밍: 주문 접수 시를 선택하십시오.
  1. 작업 후 인증 코드를 담당자에게 알려주십시오.

이상 v1.0

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