<aside> <img src="/icons/reorder_gray.svg" alt="/icons/reorder_gray.svg" width="40px" />

目次

</aside>

概要

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

本機能によりECカート側の在庫の状態をもとにeギフトボタンを表示することができ、売越のリスクをなくしてeギフトを販売することができます。

スクリーンショット 2025-12-09 10.27.48.png

仕組み

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のマーカータグに監視したいタグのクエリセレクタをご指定ください。

通常のAnyGiftのマーカータグ

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

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

idの場合には#id名

classの場合には.クラス名でクエリをご指定ください。

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