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>

もし1以上の場所に追加する場合、任意の 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>
  • Sample サンプル
  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>

もし1以上の場所に追加する場合、任意の 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

← コマースクリエイターをお使いのfutureshopに実装する →