SDK（2022/7~）

Suggest Edits

⚠

️バックアップ

テンプレートのバックアップを必ず取り、検証した上で適用させる様にご注意ください。

SDK

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

StoreIdを管理画面で確認

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

商品詳細画面のテンプレートを開く

makeshop管理画面から「独自デザイン」→「商品詳細画面」をクリックします。

「商品詳細ページ選択」からテンプレートを選択します。

デフォルトだと「カテゴリ共通デザイン」に記述すると全ての商品に反映させる事ができます。
カテゴリによってテンプレートを変更している場合は他にも記述が必要になる事があります。

シンボルエレメント追加

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

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

SDK初期化

次にテンプレートの最下部にSDKを初期化する記述を追加します。

<script src="https://sdk.helloproteger.com/v4/makeshop-plan.min.js" charset="utf-8"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js" charset="utf-8"></script>
<script>
  Proteger.config({
    storeId: 'StoreId', // proteger管理画面から確認できるStoreId
    logoUrl: 'https://proteger.com/logo.png', // ロゴURL
    protegerEnv: "prd",
  });
  ProtegerMakeshop.config({
    makeshopId: 'proteger', // makeshopのid
    isSP: false, // SPテンプレートか @optional
    isCreatorMode: false, // クリエイターモード利用か
  });
</script>

保証プラン表示

次に保証プランを表示するためのAPIを実行します。

<script src="https://sdk.helloproteger.com/v4/makeshop-plan.min.js" charset="utf-8"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js" charset="utf-8"></script>
<script>
  Proteger.config({
    storeId: 'StoreId',
    logoUrl: 'https://proteger.com/logo.png',
    protegerEnv: "prd",
  });
  ProtegerMakeshop.config({
    makeshopId: 'proteger',
    isSP: false,
    isCreatorMode: false,
  });
</script>
<script>
  if (window.Proteger || window.ProtegerMakeshop) {

    // 商品Idを取得
    var productId  =  "[SYSTEM_CODE]";

    // 保証プランをレンダリング
    // 'proteger-offer'は先ほど追加したシンボルエレメントのid
    Proteger.buttons.render('proteger-offer', {
      productId: productId,
    });
  }
</script>

ここまででプレビューを確認すると保証プランが表示されているはずです。

商品をカートに追加する関数を追加

商品を追加する為の関数を追加します。

PCとSPで記述が異なります。

＊デフォルトのテンプレートの場合の記述なので適宜記述を変更して下さい。

PC

<script src="https://sdk.helloproteger.com/v4/makeshop-plan.min.js" charset="utf-8"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js" charset="utf-8"></script>
<script>
  Proteger.config({
    storeId: 'StoreId',
    logoUrl: 'https://proteger.com/logo.png',
    protegerEnv: "prd",
  });
  ProtegerMakeshop.config({
    makeshopId: 'proteger',
    isSP: false,
    isCreatorMode: false,
  });
</script>
<script>
  if (window.Proteger || window.ProtegerMakeshop) {

    // 商品Idを取得
    var productId  =  "[SYSTEM_CODE]";

    // 保証プランをレンダリング
    Proteger.buttons.render('proteger-offer', {
      productId: productId,
    });
    
    // 「カートに入れる」ボタンを取得
    // * aタグを取得する様に記述
    var addToCartButton = document.querySelector("#addCartBtn");
    // デフォルトの関数
    var addProductToCartFunStr = [GETBASKET];
    
    // 商品をカートに追加する関数
    function addProductToCart() {
      let fn = new Function(addProductToCartFunStr);
      fn();
    }
  }
</script>

SP

<script src="https://sdk.helloproteger.com/v4/makeshop-plan.min.js" charset="utf-8"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js" charset="utf-8"></script>
<script>
  Proteger.config({
    storeId: 'StoreId',
    logoUrl: 'https://proteger.com/logo.png',
    protegerEnv: "prd",
  });
  ProtegerMakeshop.config({
    makeshopId: 'proteger',
    isSP: true, // SPテンプレート
    isCreatorMode: false,
  });
</script>
<script>
  if (window.Proteger || window.ProtegerMakeshop) {

    // 商品Idを取得
    var productId  =  "<{$system_code}>";

    // 保証プランをレンダリング
    Proteger.buttons.render('proteger-offer', {
      productId: productId,
    });
    
    // 「カートに入れる」ボタンを取得
    var addToCartButton = document.querySelector('[value="カートに入れる"]');
    // デフォルトの関数
    var addProductToCartFunStr = "<{$get_basket_url}>";
    
    // 商品をカートに追加する関数
    function addProductToCart() {
      let fn = new Function(addProductToCartFunStr);
      fn();
    }
  }
</script>

SPモードではデフォルトの挙動を止める為に以下の変更を行います。

<input onclick="<{$get_basket_url}>" type="submit" class="btn btnCart" value="カートに入れる">

からonclick="<{$get_basket_url}>"を削除

<input type="submit" class="btn btnCart" value="カートに入れる">

⚠

️ WARN

この記述を削除すると、protegerのSDK無しでは商品がカートに入らなくなります。
protegerを非表示にする時は、必ずこの記述を元に戻して下さい。

ボタンハンドラーを定義

「カートに入れる」ボタンのハンドラーを定義します。

＊デフォルトのテンプレートの場合の記述なので適宜記述を変更して下さい。

<script src="https://sdk.helloproteger.com/v4/makeshop-plan.min.js" charset="utf-8"></script>
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js" charset="utf-8"></script>
<script>
  Proteger.config({
    storeId: 'StoreId',
    logoUrl: 'https://proteger.com/logo.png',
    protegerEnv: "prd",
  });
  ProtegerMakeshop.config({
    makeshopId: 'proteger',
    isSP: false,
    isCreatorMode: false,
  });
</script>
<script>
  if (window.Proteger || window.ProtegerMakeshop) {

    // 商品Idを取得
    var productId  =  "[SYSTEM_CODE]";

    // 保証プランをレンダリング
    Proteger.buttons.render('proteger-offer', {
      productId: productId,
    });
    
    // 「カートに入れる」ボタンを取得
    // * aタグを取得する様に記述
    var addToCartButton = document.querySelector("#addCartBtn");
    // デフォルトの関数
    var addProductToCartFunStr = [GETBASKET];
    
    // 商品をカートに追加する関数
    function addProductToCart() {
      let fn = new Function(addProductToCartFunStr);
      fn();
    }
    
    function submitBtnHandler(e) {
      // デフォルトの挙動を停止
      e.preventDefault();
      e.stopImmediatePropagation();
      
      // 数量を取得
      var quantity = 1;
      var quantityEl = document.querySelector('[name="amount"]');
      quantity = quantityEl && quantityEl.value

      // コンポーネント取得
      const component = Proteger.buttons.instance('proteger-offer');
      // 選択中の保証プラン取得
      const plan = component.getPlanSelection();
      // 保証プランをカートに追加
      ProtegerMakeshop.addPlanToCart({productId: productId, plan: plan, quantity: quantity, productHandler: addProductToCart, modal: true});
    }
    
    // イベントリスナーに登録
    addToCartButton.addEventListener('click', submitBtnHandler);
  }
</script>

完了

保証プランが表示されカートに追加される事を確認して下さい。

📘

NOTE

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

Updated about 6 hours ago

Did this page help you?