# Makeshopに実装する
Makeshop (opens new window)でVirtusizeの機能を実装するための手順になります。Virtusizeの担当者から Api Key
と ストア名
を取得後、以下の手順を進めてください。
# 導入の流れ
以下の2つの作業が必要になります。
- 商品詳細ページへスクリプト設置
- 外部連携システム連携にてAPI通知設定
# 1. 商品詳細ページへスクリプト設置
# 1. デスクトップ
Makeshop管理画面にログインします。
独自デザイン
をクリックします。商品詳細画面管理
クリック商品詳細ページ選択から
すべての商品
選択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 |
- 入力フィールドの一番下に以下のスクリプトのコピーする
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
- 保存 する
# 2. モバイル
独自デザイン画面で
スマホ
をクリックし編集
ボタンをクリック商品詳細画面
ボタンをクリック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
タグを追加し、 担当者に連絡
ください。
- 入力フィールドの一番下に以下のスクリプトのコピーする
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通知設定
ショップ作成
→注文データー連携設定
クリック
※ Makeshopの契約内容によっては 注文データー連携設定
ボタンが表示されない場合があります。japan@virtusize.comにお問い合わせください。
- 以下のように設定してください。
- 注文情報参照: 許可する
- 注文情報変更: 許可しない
- 更新通知APIのURL: https://ofdlq5np05.execute-api.ap-northeast-1.amazonaws.com/prod/purchased/{ストア名}
- 更新通知のタイミング:
受注時
をチェック
- 作業後
認証コード
を担当者にご連絡ください。
以上 v1.0