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

virtusize タグの作成

1. commerce creatorをクリックし、パーツをクリックして、パーツを追加するをクリックします

2. フリーパーツをクリックします

3. パーツコンテンツ内に以下を挿入します

• パーツ名 - 仮想パーツまたは任意の名前を指定できます
• 置換文字 - これは変数名になります。任意の名前を使用できます。
• 表示内容 - ここにプレースホルダー、input タグ、script タグを配置します。

ここではプレースホルダー、inputタグ、およびvirtusize integration jsを呼び出すためのスクリプトを含む div タグを作成しました。 ウィジェットを追加してカスタマイズできます。下記の例ではvs-inpageを使用します。

<div class="vs-placeholder-inpage"></div>
<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"
/>
<script type="text/javascript">
var vsStoreName = "YOUR_STORE_NAME";
var vsEnv = "YOUR_ENVIRONMENT";
var vsDeviceType = "YOUR_DEVICE_TYPE";

(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.com/" + vsEnv + "/" + vsStoreName + "/" + vsDeviceType + ".source.js";
var s1 = d.getElementsByTagName("script")[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>

保存をクリックします

作成した virtusize パーツを製品詳細ページに追加する

1. commerce creator > ページ に移動して、製品の詳細を探します。 鉛筆アイコンをクリックしてページを編集します

2. レイアウトをクリックします。この例では PC向けページを編集しています。

3. メインエリア > コンテンツエリア > 商品詳細エリア > 製品情報 をクリックします。

4. 作成したパーツをドラッグ&ドロップで任意の場所に配置します。 ウィジェットを表示したい位置に配置してください。

5. 保存をクリックします。 商品詳細ページをプレビューし、意図した場所にプレースホルダーが存在するかどうかを確認してください。下記の例ではchromeのインスペクタを使用して確認しています。

作成した virtusize パーツを注文完了ページに追加する

商品詳細ページと同様に注文完了ページにもパーツを配置する必要があります

1. VS注文完了ページパーツを作成します。下記のコードをコピー＆ペーストし、注文商品情報、APIキー、env、domainなどの情報を実装ください。

<script type="text/javascript">
var orderObject = {
  // order object
  orderId: xxx,
  userId: xxx,
  //※1 If a user makes a purchase without logging in, please set guest_{random_value} as the value for the
  //userId parameter. Here is example code to generate a random value for the userId of a guest user:
  // userId = `guest_${Math.random().toString(36).substring(2, 15)}.${new Date().getTime().toString(36)}`
  region: xxx,
  // item objects
  items: [
    {
      productId: "P001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "https://example.com/products/P001",
      imageUrl: "https://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY",
      gender: "W"
    }
    ...// Create an object for each of the items that were purchased in the order
  ]
}

window.vsEnv = "staging"; // can be "staging" or "production"
window.vsDomain = "com"; // "com" is used for staging and production. The only exception is that if your store is located in Japan, Korea or China, in production, the value is respectively "jp", "kr" or "com.cn" (the staging version is still "com");
window.vsApiKey = "API_KEY"; // this is the api key from the "before you start" instruction
window.vsOrderObject = orderObject; // this is the order object created in step 1

(function(d) {
  var s = d.createElement("script");
  s.type = "text/javascript";
  s.charset = "utf-8";
  s.async = true;
  s.src = "https://integration.virtusize.com/orders/confirmation.js";
  var s1 = d.getElementsByTagName("script")[0];
  s1.parentNode.insertBefore(s, s1);
})(document);
</script>

2. commerce creator > ページ をひらき、注文完了ページの編集ボタンをクリックします。

3. レイアウトを選択します。この例ではPC用のレイアウトを選択しています。

4. メインエリア > コンテンツエリア をクリックし注文完了ページパーツを任意の場所にドラッグ&ドロップします。ユーザーに表示されるものではないためどの位置に配置いただいても大丈夫です。この例では一番下に配置しています

• 保存をくりっくしてください

注文完了ページタグの実装は以上になります。テスト購入&実装確認をVirtusize担当にご依頼ください。