SDK

Suggest Edits

テーマ編集

いよいよproteger統合の最終段階です！ :congratulations:
テーマにproteger SDKを組み込み顧客にリーチします。

1. テーマをコピー

2. StoreIDを管理画面で確認

proteger管理画面の設定（右上歯車アイコン） → 店舗設定 → StoreID(店舗ID)を確認します。

3. StoreIDを管理画面で確認

保証プランを表示する「カートに追加」の上に以下のHTMLを追加します。

デフォルトのテンプレートではproduct-template.liquidに該当箇所があります。

<div id="proteger-plan"></div>

4. protegerのスニペットを作成

protegerのソースコードを追加するために、「proteger」の名前でスニペットを作成します。
このスニペットにprotegerのソースコードを追加していきます。
テーマ → Snippets → 新しいsnippetを作成するを選択します。

作成したsnippetに以下を追加

<script>
  if (window.Proteger) {
     // ここに次のセクションで説明するソースコードを追記
  }
</script>

作成したsnippetを読み込む為に以下を追加

{% render 'proteger' %}

5. 保証プランを表示する様にソースコードを追記

先ほどシンボルエレメントを追記した上にSDKを読み込み初期化するコードを追加

<script src="https://sdk.helloproteger.com/v3/proteger-sdk-shopify-plan.min.js"></script>
<script>
  var variantId =  {{ product.selected_or_first_available_variant.id }}
  Proteger.config("StoreID", variantId, "#3e9f26", false, "prd", "ロゴURL");
</script>
<div id="proteger-plan"></div>

Proteger.config("1で確認したStoreID", "商品キー", "16進数カラー", ダークテーマか, "demo or prd", "ロゴURL");

protegerのsnippetでプランを表示するAPIを実行

<script>
  if (window.Proteger) {
     Proteger.displayPlan();
  }
</script>

この時点で一度プレビューで保証プランが表示されているか確認して下さい。

6. カートに追加するボタンにイベントリスナーを追加

保証プランと商品を同時にカートに追加する為に、カートに追加するボタンにイベントリスナーを追加します。

var addToCartButton = document.querySelector("button[name='add']");
addToCartButton.addEventListener('click', function(e) {});

保証プランをカートに追加したり、モーダルを表示するにはボタンのデフォルトの動作を止める必要があります。

デフォルトの動作を止める方法として以下の様な方法が考えられます。

e.preventDefault();
e.stopImmediatePropagation();

これらと数量の取得を行い、カートに保証プランを追加する処理を先ほどのイベントリスナーの中に追加していきます。

function addProductToCart() {
  // ここに保証プランを追加し終わった後の処理を記述します。
    // 商品をカートに追加する処理を記述する必要があります。
}

addToCartButton.addEventListener('click', function(e) {
  e.preventDefault();

  var quantityEl = document.querySelector('[name="quantity"]');
  var quantity = quantityEl && quantityEl.value;

　　　　　
    Proteger.addPlanToCart(quantity, addProductToCart, true);
})

Proteger.addPlanToCartの第3引数はモーダルを表示するかを選択します。

モーダルを表示しない場合はfalseを設定します。

第2引数の関数には商品をカートに追加する処理を記述する必要があります。

商品をカートに追加する処理は以下の方法が例として挙げられます。

Ex.) フォームをサブミットする方法

function addProductToCart() {
    // formを取得
    var productForm = document.querySelector('.product-form')

    // submitさせる
    productForm.submit()
}

7. カートページで保証プランを追加

カートページのテンプレートを編集します。

一般的にcart-template.liquidに記載されています。

「保証を追加」のボタンを表示をする為に、以下を記述します。

<div id="proteger-cart-offer" data-proteger-variant="{{ item.variant.id }}" data-proteger-quantity="{{ item.quantity }}"></div>

記述箇所の例です。

for文でカート内のitemを回している内側に記述する必要があります。

次にテンプレートの最下部に以下を追記します。

<script src="https://sdk.helloproteger.com/proteger-sdk-shopify-cart.min.js"></script>
<script>
  var cart = {{ cart | json }};
  Proteger.config("StoreID", "demo or prd", cart, "ロゴURL", "16進数カラー");
  Proteger.ResolveCart();
</script>

8. カートページで保証商品へのリンクを無効化

保証商品のみを購入される事を防ぐ為、保証商品へのリンクを無効化します。

まず最初にカートページのファイルを探します。
一般的にcart-template.liquidに記載されています。
以下の記載がある事を確認して下さい。

{% for item in cart.items %}

または

{% for line_item in cart.items %}

上の記載の内側に記載されています。

class="cart__image"やclass="cart__product-title"の様に商品ページへのリンクとなっている箇所を探します。

該当箇所を特定したら、以下のコードを記述します。

{% if item.vendor == 'proteger' %} style="pointer-events: none;" {% endif %}

<img class="cart__image{% if item.image == null %} hide{% endif %}" src="{{ item | img_url: 'x190' }}" alt="{{ item.image.alt | escape }}" data-cart-item-image {% if item.vendor == 'proteger' %} style="pointer-events: none;" {% endif %}>

9. バリエーション毎に保証プランを切り替える

protegerの保証プランはバリエーション毎にアタッチされます。
バリエーションが複数ある場合はバリエーションが選択された時に保証プランを切り替える必要があります。
バリエーションが切り替わるときに対応する方法として以下の例が挙げれられます。

EX.) バリエーションが切り替わったときにURLにvariantが追加される場合

<script>
  if (window.Proteger) {
      var productForm = document.querySelector('.product-form');

      productForm.addEventListener('change', function() {
        var urlParams = new URLSearchParams(window.location.search);
        var variantId = urlParams.get('variant');
        if (variantId) {
          // 保証プランをレンダリング
          Proteger.setActiveProduct(variantId);
        }
      });
  }
</script>

URLにvariantが追加されない場合はtheme.js等にvariantを変更する記述があるので、見つけ出す必要があります。

📘

NOTE

お困りの際は担当者または下記のメールアドレスにいつでもご連絡下さい。
[email protected]

Updated 19 days ago

Did this page help you?