商品詳細ページを実装する

この作業は商品詳細ページにウィゼットボタンやInpageなどバーチャサイズの機能を導入するために必要です。 以下の通り4つのページに実装します。

  1. Staging, モバイル用
  2. Staging, デスクトップ用
  3. Production, モバイル用
  4. Production, デスクトップ用
  • Staging環境がない場合
    • 12は必要ない
  • レスポンシブでモバイル用のページがない場合
    • 13は必要ない

動作環境

  • jQuery 1.3以上ロードされていること
  • PC: Internet Explorer 10+、 Safari, Chrome, Firefox, Opera などモダンブラウザ
  • スマートフォン: iOS 7.0.4+, Android 4.4.4+

実装する

1. ストア名とAPI取得

担当者から ストア名APIキーを取得してください。

2. Virtusize機能を表示したい場所にタグを入れる。

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

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

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

3. inputタグにパラメーターを入れる

4つのinputタグに値をセットする必要があります。

no id名 説明
1 vs-user-id ユーザーがログインした場合のみセット。非ログイン時はタグ自体をなくすが、値をセットしないままでよいです。MD5、SHA-1などに変換してセット
2 vs-product-id 商品ID. このIDで商品のURLが特定できる必要があります。
3 vs-product-version 商品のバージョン。日付などもしくは 1などの番号をセット。不明な場合は 1をセット
4 vs-product-image-url JPGもしくは PNGファイルのURL。商品イメージとして登録される。
  • example
<input type="hidden" id="vs-product-id" value="product-id-1234">
<input type="hidden" id="vs-user-id" value="user-id-1234">
<input type="hidden" id="vs-product-version" value="1">
<input type="hidden" id="vs-product-image-url" value="https://via.placeholder.com/400x400.jpg">
4. scriptコードを入れる

設置用Scriptは、共通スクリプトに各環境用の変数を設定することで簡単に実装可能です。 以下のスクリプトをBodyタグの閉じタグ直前に設置してください。

  • 共通スクリプト
(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);
1. Staging, モバイル用

 
 
 




<script type="text/javascript">
var vsStoreName = '{ストア名}';
var vsEnv = 'staging';
var vsDeviceType = 'mobile';

{共通スクリプトをコピペ}
</script>
2. Staging, デスクトップ用

 
 
 




<script type="text/javascript">
var vsStoreName = '{ストア名}';
var vsEnv = 'staging';
var vsDeviceType = 'desktop';

{共通スクリプトをコピペ}
</script>
3. Production, モバイル用

 
 
 




<script type="text/javascript">
var vsStoreName = '{ストア名}';
var vsEnv = 'production';
var vsDeviceType = 'mobile';

{共通スクリプトをコピペ}
</script>
4. Production, デスクトップ用

 
 
 




<script type="text/javascript">
var vsStoreName = '{ストア名}';
var vsEnv = 'production';
var vsDeviceType = 'desktop';

{共通スクリプトをコピペ}
</script>
5.確認

すべてのタグを実装後担当者にURLを連絡してください。確認後ご連絡致します。

以上。