Makeshopに実装する

MakeshopでVirtusizeの機能を実装するための手順になります。Virtusizeの担当者から Api Keyストア名を取得後、以下の手順を進めてください。

導入の流れ

以下の2つの作業が必要になります。

  1. 商品詳細ページへスクリプト設置
  2. 外部連携システム連携にてAPI通知設定

1. 商品詳細ページへスクリプト設置

1. デスクトップ
  1. Makeshop管理画面にログインします。

  2. 独自デザインをクリックします。 サンプル

  3. 商品詳細画面管理クリック サンプル

  4. 商品詳細ページ選択から すべての商品選択

  5. Virtusize機能を表示したいところに以下のコードを入れてください。

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

もし1以上の場所に追加する場合、任意の iddivタグを追加し、 担当者に連絡してください。

  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://') + 'd2m7rhdanvg09z.cloudfront.net/' + 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機能を表示したいところに以下のコードを入れてください。

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

もし1以上の場所に追加する場合、任意の iddivタグを追加し、 担当者に連絡ください。

  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://') + 'd2m7rhdanvg09z.cloudfront.net/' + 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