<aside> <img src="/icons/reorder_gray.svg" alt="/icons/reorder_gray.svg" width="40px" />
目次
</aside>
ECサイト上に設置している eギフト購入ボタン(AnyGiftボタン)が「実際のECサイトでは在庫がなく購入できない場合」に誤って購入できないようにするため、ECサイトの “カート追加ボタン” の状態を監視し、購入不可なら eギフトボタンも購入不可にする機能です。
本機能によりECカート側の在庫の状態をもとにeギフトボタンを表示することができ、売越のリスクをなくしてeギフトを販売することができます。

ECカートボタンなど、eギフトボタンの表示を連動させたい要素が、非表示または非活性(押せない状態)の場合には、eギフトボタンが連動して非活性となります。
EC側のUI変化にリアルタイムに追従するため、eギフトボタンの状態をリアルタイムで更新することができます。
指定した要素を監視し、以下のいずれかに当てはまる場合にはeギフトボタンを非活性とします。
| チェック項目 | チェック内容詳細 |
|---|---|
| 指定した要素が取得できるか? | document.querySelector で対象が見つからない |
| disabled 属性はあるか? | <button disabled> または button.disabled === true |
| aria-disabled 属性があるか? | <button aria-disabled="true"> |
| CSSで非表示となっているか? | display: none または visibility: hidden |
<aside> ⚠️
商品のオプションや数量を選択しないと「カートに追加する」ボタンが表示されない場合には未対応となります。
</aside>
下記の手順でAnyGiftのマーカータグに監視したいタグのクエリセレクタをご指定ください。
<div data-anygift="marker"></div>
idの場合には#id名、
classの場合には.クラス名でクエリをご指定ください。
<div data-anygift="marker" data-anygift-observer="**監視したいタグのクエリセレクタ**"></div>