購入完了ページを実装する

Ver1.1

購入完了スクリプトについて

購入完了タグは購入完了ページに実装する Javascriptです。 ユーザが購入したアイテムをVirtusizeのクローゼットに登録したり、Virtusizeサービスのコストを測定するために必要です。

動作環境

1.3以上のjQueryが以上ロードされていること

実装する

  1. 注文データーのオブジェクトを作る

注文データーは1つの 注文オブジェクトと複数の アイテムオブジェクトで構成されています。

var orderObject = {
  // 注文オブジェクト
  orderId: xxx,
  userId: xxx,
  region: xxx,
  // アイテムオブジェクト
  items: [
    {
      productId: "P001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "http://example.com/products/P001",
      imageUrl: "http://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY"
    }
    ...// 販売されたすべてのアイテムを同じようにオブジェクトを作成
  ]
}
  • 注文オブジェクト。すべて必須項目です。
パラメーター名 データ型 備考
orderId String "A00001" 発行された注文ID
userId String "UserId" UserIDをMD5やSHA-1に変換してセット、商品詳細ページにセットしたUserIDと同じ値であること。
※1
region String "JP" ISO-3166 の国家コードを設定

※1: もしゲスト購入などログインなしで購入された場合は guest_ランダムな値をセットしてください。

例)

userId = "guest_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  • アイテムオブジェクト。すべて必須項目です。
パラメーター名 データ型 備考
productId String "A00001" 商品ID。商品詳細ページにセットする商品IDと同じであること。
size String "S", "M"など サイズ名称。
imageUrl String "http://example.com/coat.jpg" 商品イメージのURL。Virtusizeに登録されるイメージ
currency String "JPY" 通話コード
url String "http://example.com/coat.html" 商品URL。ユーザーからアクセスできるURL
unitPrice Float 1234123など数字を入力。 文字列不可 税金を含めていない商品価格。
quantity Integer 1,5など数字を入力 文字列不可 販売数量

次はオプショナルです。

パラメーター名 データ型 備考
variantId String "A00001-001-002" SKU.商品、色、サイズなどことにセットするID
color String "Red", "赤"など 商品の色名
gender String "W", "女性"など の性別
  1. 作成したオブジェクトを送信する
// 環境にあわせて、 production もしくは stagingをセット
var vsEnv = "production";

!(function(a,d,g,b){var c,h,e,f;a.Virtusize=b;a[b]=a[b]||[];a[b].env=null!=a.vsEnv?a.vsEnv:"production";a[b].url=null!=a.vsUrl?a.vsUrl:a.location.host;a.vsEnv=void 0;a.vsUrl=void 0;a[b].methods="setApiKey setRegion setLanguage setWidgetOverlayColor addWidget ready setMobile on setAvailableSizes setSizeAliases addOrder addFindByFit setUserId".split(" ");a[b].factory=function(c){return function(){var d;d=Array.prototype.slice.call(arguments);d.unshift(c);a[b].push(d);return a[b]}};f=a[b].methods;c=0;for(h=f.length;c<h;c++)e=f[c],a[b][e]=a[b].factory(e);a[b].snippetVersion="4.0.0";c=d.createElement(g);d=d.getElementsByTagName(g)[0];c.async=1;c.src={production:"https://cdn.api.virtusize.jp/integration/v4.js",staging:"https://cdn.staging.virtusize.com/integration/v4.js",local:"//"+a[b].url+"/integration/v4.source.js"}[a[b].env];c.id="vs-integration";d.parentNode.insertBefore(c,d)})(window,document,"script","vs");


vs.setApiKey("{担当者から配布したAPI Key}");
vs.addOrder(orderObject)

購入完了スクリプトをテストする

購入完了スクリプトをテストするため、実装後以下のテストを実施してください。

  1. 初期化したブラウザ※で、Virtusizeウィゼットでサイズを比較せずに購入
  2. 初期化したブラウザ※で、Virtusizeウィゼットでサイズを比較してから購入
  3. 上記で利用した orderIdproductIdを担当者に連絡
  4. Virtusizeで確認後フィードバック

初期化したブラウザ※: Cookie, LocalStorageをクリアーした状態

以上。