クリエイターモードSDK(2022/7~)

️バックアップ

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

SDK

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

StoreIdを管理画面で確認


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

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


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

「商品詳細」を選択します。

シンボルエレメント追加

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

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

SDK初期化


次にテンプレートの下部body閉じタグ上に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", // "demo" or "prd" @optional
  });
  ProtegerMakeshop.config({
    makeshopId: 'proteger', // makeshopのid
    isSP: false, // SPテンプレートか @optional
    isCreatorMode: true, // クリエイターモード利用か
  });
</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  =  "<{$item.system_code}>";

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

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

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


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

*「Debut」テンプレートの場合の記述なので適宜記述を変更して下さい。

<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: true,
  });
</script>
<script>
  if (window.Proteger || window.ProtegerMakeshop) {

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

    // 保証プランをレンダリング
    Proteger.buttons.render('proteger-offer', {
      productId: productId,
    });
    
    // 「カートに入れる」ボタンを取得
    var addToCartButton = document.querySelector(".btn.cart-btn");
    
    // 商品をカートに追加する関数
    function addProductToCart() {
     addToCartButton.removeEventListener('click', submitBtnHandler);
     addToCartButton.click();
    }
  }
</script>

ボタンハンドラーを定義


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

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

<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,
    });
    
    // 「カートに入れる」ボタンを取得
    var addToCartButton = document.querySelector(".btn.cart-btn");
    
    // 商品をカートに追加する関数
    function addProductToCart() {
     addToCartButton.removeEventListener('click', submitBtnHandler);
     addToCartButton.click();
    }
    
    function submitBtnHandler(e) {
      // デフォルトの挙動を停止
      e.preventDefault();
      e.stopImmediatePropagation();
      
      // 数量を取得
      var quantity = 1;
      var quantityEl = document.querySelector('[data-id="makeshop-item-quantity"]');
      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]


Did this page help you?