kdcsライブラリー

お気に入りボタンで、お気に入りに追加した時に「お気に入りに追加」、お気に入りから外した時に「お気に入りを削除」といったメッセージを画面に出す方法。

メッセージはcssで画面下部に設定、初期値display:noneで非表示。javascriptのjQuery「.fadeIn()」でdisplay: blockになり表示する。（表示時間をセットして、しばらく表示したら消えるという動き）
html

<div id="favoriteList"><div class="favoriteBox"><span class="favoriteMessage"></span><p class="favoriteText"><a href="<?php echo home_url(); ?>/favorite">お気に入りリストを見る</a></p></div></div>

javascript

$(function () {
  var timer = false;

  // Favorites 更新後イベント
  $(document).on('favorites-updated-single', function(event, favorites, post_id, site_id, status, button){

    // status は 'active' or 'inactive'
    if (status === 'active') {
      $('.favoriteMessage').text('アイテムを追加しました');
    } else {
      $('.favoriteMessage').text('アイテムを削除しました');
    }

    // 表示処理
    $('#favoriteList').fadeIn();

    if (timer !== false) {
      clearTimeout(timer);
    }

    timer = setTimeout(function () {
      $('#favoriteList').fadeOut();
    }, 5000);
  });
});

css

#favoriteList {
    display: none;
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    padding: 14px 0;
    opacity: 0.9;
    z-index: 100;
}