# Shopify に実装する
# 導入の流れ
実装にはAPI キーとストア名が必要となるため、担当者にお問い合わせください。
# Shopify でタグを設置する
Shopify の 管理画面から、オンラインストア ⟶ テーマ ⟶ 現在のテーマ ⟶ アクション ⟶ コードを編集する を選択。
Layout ⟶ {/}theme.liquid を押下し、theme.liquid を開き、ソースコード末尾にある</body>タグの直前に Script を貼り付けて、保存。
Script は以下の通り：
<input type="hidden" id="vs-product-id" value="{{ product.id }}" />
<input type="hidden" id="vs-user-id" />
<script type="text/javascript">
var userId = "{{ customer.id }}";
{% if customer == false %}
userId = "";
{% endif %}
var userInput = document.getElementById("vs-user-id");
userInput.value = userId;
var vsStoreName = 'ストア名'; //担当者からお知らせする値に書き換えてください。
var vsEnv = 'production'; //stagingまたは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>
商品詳細ページでのみ、Virtusize スクリプトを読み込む場合は、template.liquid ページの <head></head>セクションで conditional rendering を使う必要があります。
例：商品詳細ページのルートは/productsが含まれている場合 以下の通り value を変更する必要があります。
{%- if request.page_type contains 'products/' -%}
<script type="text/javascript">
var userId = {{ customer.id }};
{% if customer == false %}
userId = ""
{% endif %}
var userInput = document.getElementById("vs-user-id");
userInput.value = userId;
var vsStoreName = 'ストア名'; //担当者からお知らせする値に書き換えてください。
var vsEnv = 'production'; //stagingまたは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>
{%- endif -%}
管理画面より、設定 ⟶ チェックアウトを選択。
チェックアウト設定画面を下にスクロールし、注文処理 ⟶ 追加スクリプト 内に Script を貼り付けて、保存。
Script は以下の通り：
<script type="text/javascript">
var items = [];
var userId;
{% for line_item in checkout.line_items %}
{% for option in line_item.options_with_values %}
{% if option.name == 'サイズ情報を格納している変数名' %} //※1
{% assign size = option.value %}
{% endif %}
{% if option.name == '色情報を格納している変数名' %} //※1
{% assign color = option.value %}
{% endif %}
{% endfor %}
var item = {}
item.productId = "{{line_item.product_id}}" //場合によっては文字列処理が必要になります。
item.size = "{{size}}"
item.variantId = "{{line_item.variant_id}}" //場合によっては文字列処理が必要になります。
item.url = "{{shop.url}}{{line_item.product.url}}"
item.imageUrl = "{{ line_item.image | img_url }}"
item.color = "{{color}}"
item.unitPrice = {{line_item.original_price | divided_by: 100}}
item.quantity = {{line_item.quantity}}
item.currency = "JPY"
item.gender = "NA"
items.push(item);
{% endfor %}
{% if customer == false %}
userId = `guest_${Math.random().toString(36).substring(2, 15)}.${new Date().getTime().toString(36)}`
{% endif %}
{% if customer %}
userId = "{{ checkout.customer.id }}" //商品詳細ページのuserIDと同じ値になるように設定ください。
{% endif %}
window.vsEnv = "production"; //stagingまたはproduction、どちらかの環境設定を指定してください。
window.vsDomain = "jp";
window.vsApiKey = "API_KEY"; -> これはバーチャサイズの御社担当からお伝えしたAPIキーです。
window.vsOrderObject = {
orderId: "{{ checkout.id }}",
userId,
region: "JP",
items,
};
(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>
※1：80行目サイズ情報と83行目の色情報については、お客様の環境によって変数名が変わる為、それぞれの情報が格納されている変数名をif文の条件として記載いただけると幸いです。 また、変数名がわからない場合は下記スクリプトを追記することで購入完了ページのHTML上に表示することができますので、必要に応じてご利用ください。
変数名表示script例：
{% for line_item in checkout.line_items %}
{% for option in line_item.options_with_values %}
<!--<div>{{ option.name }}: {{ option.value }}</div>-->
{% endfor %}
{% endfor %}
結果表示例：
以下の場合、サイズ情報が格納されている変数名は「サイズ」、色情報が格納されている変数名は「カラー」となる
