SDK

インストール

閉じ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>
  <body>
    <form id="product-form" action="/cart/add">
      <div id="proteger-offer"></div>
      <button id="submit" type="submit">Add To Cart</button>
    </form>
    <script></script>
  </body>
</html>

//コンフィグを挿入
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,
  /**
   * informationアイコン押下時の動作を変更できます
   * 
   * true: 保証説明用ダイアログを表示します
   * false: 保証説明用ダイアログは表示せず、保証内容のページを開きます
   * 
   * @optional
   * @default true
   */
  informationDialog: boolean
})

Proteger.buttons.render（セレクター：文字列、オプション：オブジェクト）

Proteger.buttons.render('proteger-offer', {
  /** @required */
  productId: string,
  /**
   * 背景が暗いデザインに対応
   * 
   * @optional
   */
  darkMode: boolean,
  /** 
   * plan表示ステータス
   * 指定しない時はLive
   * @optional
   */
  status: 'Live' | 'LiveInStore' | 'Any',
})

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;
   /** ストア独自参照キー*/
  storeReferenceId: string;
   /** プラン名*/
  title: string;
   /** 価格*/
  price: number;
   /** 保証期間*/
  termLength: number;
   /** 修理の種類*/
  serviceType: string;
   /** 保証の種類*/
  protectionType: string;
   /** プランの説明のURL*/
  url: string;
}

Proteger.promotionMessage.render(selector: string, option: object)

Proteger.promotionMessage.render('proteger-promotion-message', {
  /** 
   * @required 
   */
  planUrl: 'https://plan-url',
  /**
   * 背景が暗いデザインに対応
   * 
   * @optional
   */
  darkMode: true,
})

Proteger.modal.open（option：オブジェクト）

Proteger.modal.open({
  /** @required */
  productId: string,
  /** @optional */
  /**
   * モーダルを閉じる際のコールバック関数
   * プランを追加ボタンを押して閉じた場合Planオブジェクト（商品情報）
   * 追加しないボタン、xボタン、背景クリックで閉じた場合null
   */
  onClose(plan?: Plan) {},
})

Proteger.aftermarketModal.open（option：オブジェクト）

Proteger.modal.open({
  /** @required */
  leadToken: string,
  /** @optional */
  /**
   * モーダルを閉じる際のコールバック関数
   * 第一引数：　プランを追加ボタンを押して閉じた場合Planオブジェクト（プラン情報）、追加しないボタン、xボタン、背景クリックで閉じた場合null
   * 第二引数：　Productオブジェクト（商品情報）
   * 第三引数：　購入個数
   */
  onClose(plan?: Plan, product: Product, quantity: string) {},
})


// Productオブジェクトの構造
interface Product {
  /** ユニークなID*/
  id: string;
  /** Store様が発行する一意なID*/
  referenceId: string
  /** 商品名*/
  title: string;
  /** 商品単価*/
  price: number;
  /** 商品画像URL*/
  imageUrl: string;
  /** 商品カテゴリ*/
  category: string;
  /** 商品製造元(ブランド・メーカー)*/
  brand: string;
  /** 実際にエンドユーザー様が商品代金としてお支払いした金額*/
  purchasePrice: string;
  /** 製造番号*/
  serialNumber: string;
}

Proteger.fetchPlans（productId: string, status?: "Live" | "LiveInStore" | "Any"）：Promise<Plan[]>

// すべてのプランを取得
const plans = Proteger.fetchPlans('<YOUR_PROTEGER_PRODUCT_ID>')

// statusでの絞り込み
const plans = Proteger.fetchPlans('<YOUR_PROTEGER_PRODUCT_ID>', 'Live')