❗️

WARN

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

テンプレート編集

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

1. テンプレートを開く

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

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

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

2. proteger SDKを挿入

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

記述を見つけたらその上に以下の記述を行います。

*テンプレートによって記述が異なる可能性があります。

<div id="proteger-plan"></div>
<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" />
<script type="text/javascript" src="https://sdk.helloproteger.com/proteger-ebisumart-sdk.min.js"></script>
<script>
  var productId  = document.querySelector('#proteger-product-id').textContent;
  var addProductToCart = document.querySelector("#proteger-add-product").onclick;
  Proteger.config("protegerのStoreId", productId, "prd", "ebisumart No", "#3e9f26(ボタンの色16進数)", "input[value=カートに入れる](カートに入れるボタンクエリ)", '[name="CART_AMOUNT"](数量クエリ)', addProductToCart, true(カスタムドメインを利用の場合はtrue));
</script>

変数:

productId: 商品コードの取得を行います。
addProductToCart: 商品自体をカートに入れる関数です。

カートに入れるデフォルトの挙動を止める必要があります。

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

<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を外す際は行なった作業を全て修正する様にして下さい。

完了です。
この時点でプレビューを確認すると保証が表示される様になっています。


Did this page help you?