インストール

閉じbodyタグ直上に以下を追加します

  • storeId: ストアのID
<script src="https://sdk.helloproteger.com/proteger-sdk-min.js"></script>
<script>
  Proteger.config({
    storeId: '<YOUR_PROTEGER_STORE_ID>',
    logoUrl: '<YOUR_COMPANY_LOGO_URL>',
  })
</script>

保証内容の表示

保証内容表示させたい箇所に以下のように任意のidを付けたhtml要素を配置します。

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

この要素は、表示された保証オファーのコンテナーとして使用されます。特定の幅または間隔の要件がある場合は、cssまたはインラインスタイルを使用して、これらをこの要素に直接追加できます。

初期化

Proteger.buttons.render('proteger-offer', {
  productId: '<YOUR_PROTEGER_PRODUCT_ID>' 
})

「保証内容の表示」セクションで配置したhtml要素内に保証のボタンが配置されます。

コンポーネントインスタンスへのアクセス

同じページに複数の保証オファーを表示することができ、それぞれが独自の製品productIdを持っている可能性があるため、レンダリングされた各コンポーネントは互いに独立して動作します。コンポーネントインスタンスは、呼び出されたhtml要素に関連づけられます。

const component = Proteger.buttons.instance('proteger-offer')

製品選択の変更の処理

ストアに1つの商品ページに複数の商品バリエーションがある場合(たとえば、顧客が色やサイズのオプションを選択できる商品がある場合)、変更時に新しい商品参照IDをSDKに渡す必要性が発生します。これにより、顧客が誤って間違った製品に対して間違った保証を購入するのを防ぐことができます。

const component = Proteger.buttons.instance('proteger-offer')
component.setActiveProduct('<DIFFERENT_PRODUCT_ID>')

カートに保証を追加する

通常、「カートに追加」をクリックすると、保証の選択がカートに追加されます。
その動作を再現するためにcomponent.getPlanSelection()を呼び出すと選択された保証プランを取得します。

const component = Proteger.buttons.instance('proteger-offer')
const plan = component.getPlanSelection()

こちらは、実際にプランを選択した状態でカートにプランを追加する例です。

// プランをまとめているオファーのインスタンスを取得
const component = Proteger.buttons.instance('proteger-offer')
//選択されているプランを取得
const plan = component.getPlanSelection()

if (plan) {
  //取得したプランを使ってカートに追加する
  } else {
  //通常のサブミット
  }
})

保証プランオファーのモーダルを表示

Proteger.modal.open({
  productId: '<YOUR_PROTEGER_PRODUCT_ID>',
  logoUrl:'<YOUR_COMPANY_LOGO_URL>',
  onClose: (plan) => {
    //モーダル上で選択したプランが引数として渡ってきます
    if (plan) {
      //モーダル上でプランを選択して、「保証プランを追加」ボタンを押した時の処理です
    } else {
      //モーダル上で「追加しない」ボタンまたは、モーダルの背景部分をクリックした時の処理です
    }
  },
})

全てを繋ぎ合わせると

<html>
  <head></head>
</html>
<form id="product-form" action="/cart/add">
  <div id="proteger-offer"></div>
  <button id="submit" type="submit">Add To Cart</button>
</form>
<script></script>
//コンフィグを挿入
Proteger.config({
  storeId:  '<YOUR_PROTEGER_STORE_ID>',
 logoUrl: 'https://proteger-origin.s3.ap-northeast-1.amazonaws.com/l_ci.png',
})

//オファーの初期化
Proteger.buttons.render('proteger-offer', {
  productId: '<YOUR_PROTEGER_PRODUCT_ID>' 
})

// カートに追加する時のボタンをクリックした時の処理
const submit = document.getElementById('submit')
submit.addEventListener('click', function () {
  // プランをまとめているオファーのインスタンスを取得
  const component = Proteger.buttons.instance('proteger-offer')

  //選択されているプランを取得
  const plan = component.getPlanSelection()

  // プランをカートに追加し、コールバックでカートに入っている商品を送信する関数
  const handleAddPlanToCart = (plan, callbackSubmitFunction) => {}

 const productForm = document.getElementById('product-form')
  if (plan) {
    YourAjaxLib.addPlanToCart(plan, function() {
      productForm.submit()
    })
  } else {
    Proteger.modal.open({
      onClose: (plan) => {
        if (plan) {
          handleAddPlanToCart(plan, handleSubmit)
        } else {
          handleSubmit()
        }
      },
    })
  }
})

APIリファレンス

Proteger.config(config:object)

Proteger.config({
  /**
   * Proteger store ID
   *
   * @required
   */
  storeId: string,
  /**
   *  追加する値によってエンドポイントの変更ができます
   *  設定が無いと`prd`が初期値として入ります
   * 
   * @optional
   */
  protegerEnv: "demo" | "prd",
  /**
   * モーダルを開いたときに表示される企業ロゴのURL
   * 
   * @optional
   */
  logoUrl: string
})

Proteger.buttons.render(セレクター:文字列、オプション:オブジェクト)

Proteger.buttons.render('proteger-offer', {
  /** @required */
  productId: string,
  /**
   * 背景が暗いデザインに対応
   * 
   * @optional
   */
  darkMode: boolean,
})

Proteger.buttons.instance(selector:string):ButtonsComponent

const component = Proteger.buttons.instance('proteger-offer')

ButtonsComponent#setActiveProduct(referenceId:string | number)

component.setActiveProduct('offer-123')

ButtonsComponent#getPlanSelection():Plan | null

const plan = component.getPlanSelection()

// Planオブジェクトの構造
interface Plan {
   /** ユニークなID*/
  id: string;
   /** プラン名*/
  title: string;
   /** 価格*/
  price: number;
   /** 保証期間*/
  termLength: number;
   /** 修理の種類*/
  serviceType: string;
   /** 保証の種類*/
  protectionType: string;
   /** プランの説明のURL*/
  url: string;
}

Proteger.modal.open(option:オブジェクト)

Proteger.modal.open({
  /** @required */
  productId: string,
  /** @optional */
  /**
   * ×ボタンまたは背景クリックでモーダルを閉じる際のコールバック関数
   * もしプランを選択済みならPlanオブジェクトが引数に渡る
   * 選択していなかったらnullが渡る
   */
  onClose(plan?: Plan) {},
})

Did this page help you?