ebisumart：導入手順とタグ設置

ebisumart をお使いのストアに AnyGift を導入するときに、あなたのストアで行う設定と、ショップ画面へのタグ設置の方法を説明します。導入後の画面や注文の動きは ebisumart：画面表示と注文の流れ をご覧ください。

導入の流れ

1. ebisumart で自由項目を設定し、AnyGift 担当窓口へ情報を共有する（あなたのストア）
2. AnyGift の ebisumart Apps を導入する（AnyGift 担当窓口）
3. テンプレートにタグを設置する（あなたのストア、または AnyGift 担当窓口）
4. テスト注文で動作を確認する

手順1の自由項目の設定が終わっていないと、連携の処理が正しく動きません。 必ず先に設定してください。

ステップ1: 自由項目を設定する

AnyGift は、ebisumart の「自由項目」を使って、eギフトの対象商品かどうかや、eギフト注文の状態・メッセージなどをやり取りします。

商品の自由項目

ebisumart の管理画面で システム設定 > 自由項目管理 > 自由項目登録・照会 を開き、プルダウンが「商品」になっていることを確認して、次の項目を追加します。

受注ヘッダの自由項目

プルダウンを「受注ヘッダ」に切り替え、次の5つの項目を追加します。いずれも利用フラグは「使用する」にします。

出力自由項目リスト

ショップ画面で AnyGift が自由項目の値を読めるように、システム設定 > システム設定マスタ > 初期設定 で次の2つを設定します。

• m:id「HIDDEN_DATA_TAGS_HERE」出力自由項目リスト（商品）: 「AnyGift対象商品」の自由項目のキーを指定します
• m:id「HIDDEN_DATA_TAGS_HERE」出力自由項目リスト（受注ヘッダ）: 「AnyGiftステータス」「メッセージカードID」「贈り主名」「メッセージ」の自由項目のキーを指定します

AnyGift 担当窓口へ共有する情報

ステップ2: ebisumart Apps の導入

情報をいただいたら、AnyGift 担当窓口が AnyGift の ebisumart Apps をインストールします。インストールすると、ebisumart の注文の作成・キャンセルやメール送信のタイミングで AnyGift が連携処理を行えるようになります。

ステップ3: テンプレートにタグを設置する

ebisumart の コンテンツ管理 > テンプレート管理 > view で、各テンプレートを編集します。PC 用（userweb）とスマートフォン用（smartphone）の両方を編集してください。コード内の {storeId} は、AnyGift から連絡したストアIDに置き換えます。

共通スクリプト

商品詳細（item_detail.xhtml）の <head> 内

<script type="text/javascript">
  window.AnyGiftApiIntegration = {
    storeId: "{storeId}",
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/api-integration.js"></script>

カート共通ヘッダー（header_cart.xhtml）の <body> 開始タグの直後（<head> 内では読み込まれません）

<script type="text/javascript">
  window.AnyGiftApiIntegration = {
    storeId: "{storeId}",
    // eギフトのときに隠す決済手段（data-anygift-payment-method を付けた要素の中のセレクター）
    itemsForPayment: [
      'tbody td input[value="1"]',
      'tbody td input[value="3"]',
    ],
    // 上の要素を含む、実際に隠す要素
    hiddenItemForPayment: 'div',
    // 通常注文のときに隠す自由項目（data-anygift-free-items を付けた要素の中のセレクター）
    hiddenItemsForFreeItem: [
      "tbody tr:nth-child(2)",
      "tbody tr:nth-child(3)",
    ],
    // eギフト注文の確認画面で隠す自由項目
    hiddenItemsInConfirmIfEGiftOrder: [],
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/api-integration.js"></script>

header_cart.xhtml がない場合は、cart_index.xhtml・cart_seisan.xhtml・cart_confirm.xhtml・cart_result.xhtml の <body> 直後に入れてください。

表示位置の目印（マーカー）

商品詳細・カート関連の各テンプレートの <body> 直後に、自由項目を出力するタグを入れます。

<span m:id='HIDDEN_DATA_TAGS_HERE'></span>

そのうえで、テンプレートごとに次の目印を入れます。

購入手続き画面（cart_seisan.xhtml）の要素に属性を付ける

例えば次の設定では、代金引換と銀行振込の行が隠れ、クレジットカードだけが残ります。

<table data-anygift-payment-method>
  <tbody>
    <tr>
      <th>決済手段</th>
      <td>
        <div><input type="radio" value="1"><label>代金引換</label></div>
        <div><input type="radio" value="2"><label>クレジットカード</label></div>
        <div><input type="radio" value="3"><label>銀行振込</label></div>
      </td>
    </tr>
  </tbody>
</table>

確認画面（cart_confirm.xhtml）

eギフト注文のときに確認画面で隠したい要素には、クラス名 anygift-hidden-element を付けます。例えば、決済手段の変更画面へ戻るボタンなど、選んだ内容を変えられてしまう要素に付けます。

<div class="anygift-hidden-element">eギフト注文のときに隠したい要素</div>

購入履歴（member_history.xhtml）

eギフト注文では、マイページの購入履歴から納品書（配送先住所が載ったもの）をダウンロードできないようにします。{AnyGiftステータスの自由項目番号} は、受注ヘッダの「AnyGiftステータス」の番号に置き換えます。

<span m:id="IF_ORDER_H_FREE_VALUE" m:free_item_no="{AnyGiftステータスの自由項目番号}" m:NOT="">
  <a m:id="NOUHINSHO_LINK_TAG" href="#" class="button positive small delivery_slip">納品書ダウンロード</a>
</span>

管理画面の受注編集画面に注意書きを出す（任意）

スタッフが誤って配送先を購入者に伝えないよう、eギフト注文の受注編集画面に注意書きを出せます。次の内容で client_script.js を作り、anyGiftStatusKey をあなたの「AnyGiftステータス」の自由項目キーに変えて、テンプレート管理の /view/admin に追加します。

(function () {
  const anyGiftStatusKey = 'FREE_ITEM1'; // AnyGiftステータスの自由項目キーに変更

  function showEGiftAlert() {
    const anyGiftStatusElement = document.getElementById(`ORDER_H.${anyGiftStatusKey}`);
    const isEGift = anyGiftStatusElement.querySelector('option[selected]').value !== '';
    const messageArea = document.getElementById('fragment-4');
    if (!isEGift || messageArea == null) {
      return;
    }
    messageArea.insertAdjacentHTML(
      'afterbegin',
      '<div style="color: red; border: 1px solid red; padding: 2px; margin-bottom: 4px;">この注文はeギフト注文のため、送付先情報を注文者に伝えることは禁止です。</div>',
    );
  }

  switch (ebisumartExecutingAdminPageId) {
    case 'order/order_input':
      showEGiftAlert();
      break;
    default:
      break;
  }
})();

Amazon Pay でも eギフトを購入できるようにする

ebisumart で Amazon Pay をお使いの場合は、eギフトも Amazon Pay で購入できるようにできます。

ご利用の条件

• 上のタグ設置が済んでいること
• Amazon Pay V2 をお使いであること
• Amazon Pay で非同期オーソリを使っていないこと（詳しくは ebisumart の提供元へご確認ください）

タグを入れる

header_cart.xhtml に共通スクリプトを入れている場合は、cart_seisan$amazon_payments_v2.xhtml の </body> の直前に次を入れます（Amazon Pay では決済手段を隠さないため）。

<script type="text/javascript">
  window.AnyGiftApiIntegration.itemsForPayment = undefined;
</script>

header_cart.xhtml がない場合は、cart_seisan$amazon_payments_v2.xhtml と cart_confirm$amazon_payments_v2.xhtml の <body> 直後に次を入れます。

<span m:id='HIDDEN_DATA_TAGS_HERE'></span>
<script type="text/javascript">
  window.AnyGiftApiIntegration = {
    storeId: "{storeId}",
    hiddenItemForPayment: 'div',
    hiddenItemsForFreeItem: [],
    hiddenItemsInConfirmIfEGiftOrder: [],
  };
</script>
<script defer src="https://d1ioo46r7yo3cy.cloudfront.net/api-integration.js"></script>

目印と属性を入れる

• cart_seisan$amazon_payments_v2.xhtml: チェックボックスを表示したい位置に次を入れ、次へ進むボタンに data-anygift-form-button を付けます。Amazon Pay の画面では、チェックボックスがほかの入力欄から独立した表示になります

<div>
  <div data-anygift-checkbox></div>
</div>
<div data-anygift-another-address></div>

• cart_confirm$amazon_payments_v2.xhtml: 隠したい要素にクラス名 anygift-hidden-element を付け、メッセージカードを表示したい位置に <div data-anygift-message-card></div> を入れます

ステップ4: テスト注文で確認する

ラッピングなどのオプションも、あなたの基幹システムへ正しく連携されるか確認してください。

関連ページ

• ebisumart 連携の概要
• ebisumart：画面表示と注文の流れ
• 商品同期設定