SDK(2022/9~)

️ WARN

テンプレートのバックアップを必ず取り、検証した上で適用させる様にご注意ください。
デフォルトのテンプレートの場合の編集方法なので、適宜ECサイトにあった記載をして下さい。

SDK

いよいよproteger統合の最終段階です! :congratulations:
ebisumartのテンプレートにproteger SDKを組み込み顧客にリーチします。

StoreIdを管理画面で確認


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

商品ぺージのテンプレートを開く


ebisumartの管理画面から「コンテンツ管理」→「テンプレート管理」を開きます。

商品詳細ページのテンプレートファイルを選択します。(SP画面でも同様の作業が必要です)

デフォルトだとitem_detail.xhtmlの名前のファイルになります。

シンボルエレメント追加


テンプレート内の「カートに入れる」ボタンの記述を探します。

記述を見つけたらその上にシンボルエレメントの記述を行います。

デフォルトでは「数量」の下に記述する事で適切な位置に表示されます。

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

カートに入れるデフォルトの挙動を止める

保証プランを同時にカートに入れる為、デフォルトの挙動を止める必要があります。

その為にデフォルトの記述を以下の様に削除します。

<input m:id='PUT_TO_CART_BUTTON_TAG' type="submit" value="カートに入れる" class="button positive medium" />
↓
<input type="submit" value="カートに入れる" class="button positive medium" />

️ WARN

proteger SDK内で商品をカートに追加する仕様の為、SDKを外す際は行なった作業を全て修正する様にして下さい。

SDK初期化


次にbody閉じタグの上にSDKを初期化するコードを追加します。

<script type="text/javascript" src="https://sdk.helloproteger.com/ebisumart-plan.min.js"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js"></script>
<script>
  Proteger.config({
    storeId: 'proteger StoreId', // protegerの管理画面から確認できるStoreId
    logoUrl: 'https://proteger.com/logo.png', // logo url
    protegerEnv: "demo", // "prd" or "demo"
  });
ProtegerEbisumart.config({
    ebisumartNo: "DEMO_KIVA", // ebisumartの管理画面から確認できるebisumart No
    isCustomDomain: true, // 独自ドメインを利用しているか @optional デフォルトtrue
}); 
</script>

ebisumart変数を用意


SDKで利用するebisumart側の変数を用意します。

*テンプレートにより記述が異なります

<div id="proteger-product-id" style="display: none;"><span m:id='ITEM_CODE_HERE'></span></div>
<input m:id='PUT_TO_CART_BUTTON_TAG' type="hidden" id="proteger-add-product" />

保証プラン表示

protegerのSDKを操作する為にスクリプトタグを追加します。

<script>
if (window.Proteger && window.ProtegerEbisumart) {
  // ここに次のセクションの記述を追加
}
</script>

先ほど用意した変数を取得します。

<script>
if (window.Proteger && window.ProtegerEbisumart) {
  
  // 商品Id
  var productId  = document.querySelector('#proteger-product-id').textContent;
  // 商品をカートに追加する関数(適宜変更が必要)
  var addProductToCartFun = document.querySelector("#proteger-add-product").onclick;
}
</script>

保証プランを表示するAPIを実行します。

<script>
if (window.Proteger && window.ProtegerEbisumart) {

  var productId  = document.querySelector('#proteger-product-id').textContent;
  var addProductToCartFun = document.querySelector("#proteger-add-product").onclick;

  // protegerのボタンをレンダリング
  Proteger.buttons.render('proteger-offer', {
    productId: productId, 
  });
}
</script>

この時点で保証が表示されるようになっています。

ボタンハンドラーを定義


「カートに入れる」ボタンにイベントリスナーを登録する為にボタンを取得します。

<script>
if (window.Proteger && window.ProtegerEbisumart) {

  var productId  = document.querySelector('#proteger-product-id').textContent;
  var addProductToCartFun = document.querySelector("#proteger-add-product").onclick;

  Proteger.buttons.render('proteger-offer', {
    productId: productId, 
  });

  // 「カートに入れる」ボタンを取得
  var addToCartButton = document.querySelector("input[value=カートに入れる]");
}
</script>

ボタンを押した時のハンドラーを定義します。

<script>
if (window.Proteger && window.ProtegerEbisumart) {

  var productId  = document.querySelector('#proteger-product-id').textContent;
  var addProductToCartFun = document.querySelector("#proteger-add-product").onclick;

  Proteger.buttons.render('proteger-offer', {
    productId: productId, 
  });

  var addToCartButton = document.querySelector("input[value=カートに入れる]");
   
  function submitBtnHandler(e) {
    // デフォルトの挙動を停止
    e.preventDefault();
    e.stopImmediatePropagation();
    
    // 数量を定義
    var quantity = 1;
    // 数量を取得
    var quantityEl = document.querySelector('[name="CART_AMOUNT"]');
    quantity = quantityEl && quantityEl.value

    // protegerのコンポーネントを取得
    const component = Proteger.buttons.instance('proteger-offer');
    // 選択されている保証プランを取得
    const plan = component.getPlanSelection();
    // 保証プランをカートに追加
    ProtegerEbisumart.addPlanToCart({productId: productId, plan: plan, quantity: quantity, productHandler: addProductToCartFun, modal: true});
  }
}
</script>

最後にハンドラーを登録して完了です。

<script>
if (window.Proteger && window.ProtegerEbisumart) {

  var productId  = document.querySelector('#proteger-product-id').textContent;
  var addProductToCartFun = document.querySelector("#proteger-add-product").onclick;

  Proteger.buttons.render('proteger-offer', {
    productId: productId, 
  });

  var addToCartButton = document.querySelector("input[value=カートに入れる]");
   
  function submitBtnHandler(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var quantity = 1;
    var quantityEl = document.querySelector('[name="CART_AMOUNT"]');
    quantity = quantityEl && quantityEl.value

    const component = Proteger.buttons.instance('proteger-offer');
    const plan = component.getPlanSelection();
    ProtegerEbisumart.addPlanToCart({productId: productId, plan: plan, quantity: quantity, productHandler: addProductToCartFun, modal: true});
  }
  
  // ハンドラー登録
  addToCartButton.addEventListener('click', submitBtnHandler);
}
</script>

プレビューを確認すると保証が表示され、カートに追加される様になっています。

カートページで保証プランを追加(β版)


商品ぺージのテンプレートを開く

商品詳細ページのテンプレートファイルを選択します。(SP画面でも同様の作業が必要です)

デフォルトだとcart_index.xhtmlの名前のファイルになります。

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

<div id="proteger-offer"><div id="proteger-offer-data" style="display:none;"><span m:id='ITEM_CODE_HERE'></span>/<span m:id='ITEM_NAME_HERE'></span>/<span m:id='ITEM_AMOUNT_HERE'></span></div></div>

記述箇所の例です。

loopを回している内側の任意の場所に記述して下さい。

実際にprotegerのソースコードを追加していきます。

追加する場所は</body>の直上です。

カート内の商品と保証の数を合わせる処理を追加します。
これにより、保証単体での購入や商品数以上の保証の購入等を避ける事ができます。

ProtegerCart.normalizeCart 関数を実行します。

balancefalse を記述するとprotegerは商品と保証の数を合わせません

ProtegerMakeshop.normalizeCart({balance: true});

<script src="https://sdk.helloproteger.com/ebisumart-cart.min.js" charset="utf-8"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js"charset="utf-8"></script>
<script>
  Proteger.config({
    storeId: 'proteger StoreId', // protegerの管理画面から確認できるStoreId
    logoUrl: 'https://proteger.com/logo.png', // logo url
    protegerEnv: "prd", // "prd" or "demo"
  });
  ProtegerEbisumartCart.config({
    ebisumartNo: "DEMO_KIVA", // ebisumartの管理画面から確認できるebisumart No
    isCustomDomain: true, // 独自ドメインを利用しているか @optional デフォルトtrue
  }); 

  var slice = Array.prototype.slice;

  /**
   * elementを全て取得する関数を定義
   * @param {string} element クエリ
   *
   */
  function findAll(element) {
    var items = document.querySelectorAll(element);
    return items ? slice.call(items, 0) : [];
  }
    
  window.addEventListener('load', function(){
    
    findAll('#proteger-offer-data').forEach(function(el, index){
      var textContent = el.textContent;
      // 「/」で連結されている各パラメータを配列へ
      var datas = textContent.split("/");
      /**
       * Ex.)
       * 商品をカートから削除する関数
       *
       */
      var onDelete = function() {
        findAll(".button.negative.small")[index].click();
      }
      /**
       * Ex.)
       * 商品の数量を変更する関数
       * @param {number} quantity 数量
       *
       */
      var onUpdate = function(quantity) {
        var selector = findAll("[name^=CART_AMOUNT_]")[index];
        selector.value = quantity;
        selector.onchange();
      }
      ProtegerEbisumartCart.addItem({code: datas[0], name: datas[1], quantity: datas[2], el: el.parentNode, onDelete: onDelete, onUpdate: onUpdate});
    });

    ProtegerEbisumartCart.items.forEach(function(item){
      if (!ProtegerEbisumartCart.warrantyAlreadyInCart(item)) {
        ProtegerEbisumartCart.renderSimplePlan({item: item});
      }
    });

    ProtegerEbisumartCart.normalizeCart({balance: true});
  });
</script>

Did this page help you?