コンテンツにスキップ

ECサイトのカートボタンと連動したeギフトボタンの購入制御機能

概要

ECサイト上に設置している eギフト購入ボタン（AnyGiftボタン）が「実際のECサイトでは在庫がなく購入できない場合」に誤って購入できないようにするため、ECサイトの カート追加ボタンの状態を監視し、購入不可なら eギフトボタンも購入不可にする機能です。

本機能によりECカート側の在庫の状態をもとにeギフトボタンを制御でき、売越のリスクを低減してeギフトを販売できます。

仕組み

ECカートボタンなど、eギフトボタンの表示を連動させたい要素が、非表示または非活性（押せない状態） の場合には、eギフトボタンが連動して非活性となります。

EC側のDOMが変化すると監視対象のセレクタを再評価し、その時点の状態に合わせてeギフトボタンを更新します。

ボタン表示のチェック項目

指定した要素を監視し、以下のいずれかに当てはまる場合にはeギフトボタンを非活性とします：

チェック項目 チェック内容詳細
要素が見つかるか document.querySelector で対象が見つからない
disabled 属性 <button disabled> または button.disabled === true
aria-disabled 属性 <button aria-disabled="true">
CSS での非表示 display: none または visibility: hidden

監視対象がまだページ上にない間は eギフトボタンを非活性にします。オプションや数量の選択後に対象ボタンが動的に追加・削除された場合も、ページの変化を検知して再判定します。

設定方法

下記の手順でAnyGiftのマーカータグに監視したいタグのクエリセレクタをご指定ください。

通常のAnyGiftマーカータグ

<div data-anygift="marker"></div>

カートボタンと連動してeギフトボタンを制御するタグ

クエリセレクタを指定する際の記法： - ID の場合: #id名 - Class の場合: .クラス名

セレクタは監視対象の1要素だけに一致するように指定してください。同じセレクタに複数の要素が一致する場合は、ページ内で最初に一致した要素だけを監視します。

<div data-anygift="marker" data-anygift-observer="監視したいタグのクエリセレクタ"></div>

設定例

通常のカートボタン

<button id="AddToCartButton" type="button" class="cart-button">
  カートに追加
</button>

AnyGiftのeギフトボタンとの連携

<!-- 通常のカートボタン -->
<button id="AddToCartButton" type="button" class="cart-button">
  カートに追加
</button>

<!-- AnyGiftのeギフトボタン（カートボタンの状態を監視） -->
<div data-anygift="marker" data-anygift-observer="#AddToCartButton"></div>

動作の詳細

シナリオ1：通常時（在庫がある）

ECカート側：「カートに追加」ボタン → 活性（クリック可能）
    ↓ 監視中
AnyGift側：eギフトボタン → 活性（クリック可能）

シナリオ2：在庫がない場合

ECカート側：「カートに追加」ボタン → 非活性または非表示
    ↓ 監視中
AnyGift側：eギフトボタン → 非活性（クリック不可）

シナリオ3：オプション選択による制御

ECカート側：オプション未選択 → 「カートに追加」ボタン非表示
    ↓ 監視中
AnyGift側：eギフトボタン → 非活性（選択待ち）
    ↓
ユーザーがオプション選択
    ↓
ECカート側：「カートに追加」ボタン表示
    ↓ DOM変更を検知して再評価
AnyGift側：eギフトボタン → 活性に復帰

実装のポイント

監視対象を一意にする

色・サイズ別など複数のボタンがある場合も、現在選択中の商品オプションに対応する1つのボタンを識別できるIDまたはセレクタを指定してください。共通クラスで複数要素に一致させると、最初の要素だけが判定に使われます。

よくある質問

Q. 複数のボタンを持つ商品の場合、どうすればいいですか？

現在選択中の商品オプションに対応する1つのボタンを一意に指定してください。複数要素に一致する共通クラスを指定した場合、最初の要素だけが監視されます。

Q. 監視対象が見つからない場合はどうなりますか？

監視対象が見つからない間、eギフトボタンは非活性になります。後から対象が追加されれば再判定します。対象が表示されても非活性のままなら、HTML の構造やセレクタを確認してください。

Q. EC側のボタンが動的に変わる場合はどう更新されますか？

EC側のDOM変更を検知するたびに、指定したセレクタを再評価してeギフトボタンの状態を更新します。更新時間や端末への負荷はECサイトの構成や変更頻度によって異なるため、公開前に実際の利用環境で動作を確認してください。

Q. 複数の異なるセレクタを指定することはできますか？

現在は1つのセレクタのみ指定可能です。複数の異なるセレクタを監視したい場合は、別途お問い合わせください。

Q. JavaScript で動的に変わるボタン要素に対応していますか？

はい、対応しています。JavaScript でボタン要素が動的に追加・削除されたときは、その時点でセレクタを再評価して eギフトボタンの状態を更新します。

トラブルシューティング

eギフトボタンが常に非活性のまま

原因: - セレクタが正しく指定されていない - 監視対象の要素が見つからない

確認項目: 1. HTML の要素を確認 2. セレクタが正しい（ID なら #、Class なら .） 3. ブラウザの開発者ツールで要素が取得できるか確認

// ブラウザコンソールで確認
document.querySelector("#AddToCartButton")  // 結果が null でないことを確認

eギフトボタンが意図せず非活性になる

原因: - セレクタが他の要素も捕捉している - CSS の非表示設定が反映されていない

確認項目: 1. セレクタの指定範囲を確認 2. 意図した要素のみが監視対象か確認 3. ブラウザの開発者ツールで要素の状態を確認

// ブラウザコンソールで確認
document.querySelector(".add-to-cart-button")  // 実際に監視される先頭の要素を確認

サポート

設定に関するご不明な点やご質問は、以下までお問い合わせください。