• widgetマスター

    モデレータ
    2023年9月15日 13:40

    20分で押せなくなるボタンを実装する例をご紹介いたします。

    1. Widget 「サイトを開いたらカウントダウン開始※要javascript」を設置

    2. 上記設置した Widget のJavaScriptを編集

    下記 _.init = function() { … } 内に下記コードを追加してください。

    _.init = function() {
    _.timer = [];
    let endTime = [];
    let endMinutes = 1;
    let endComment = '終了しました'
    endTime[0] = new Date().setMinutes(new Date().getMinutes() + endMinutes);
    _.timer[0] = new _.CountdownTimer(document.querySelector('.js-countdown-class-00'), endTime[0], {
    callback: function() {
    document.querySelector('.js-countdown-class-00 .end-text').innerHTML = endComment;
    document.querySelector('.js-countdown-class-00').classList.add('is-end');
    // ★ 追加ここから ↓↓
    if (document.querySelector('.end-btn')) {
    document.querySelector('.end-btn').classList.add('is-disabled');
    }
    // ★ 追加ここまで ↑↑
    }
    });
    };

    3. 設置しているボタンに クラス名を追加

    時間制限をつけたいボタンにクラス名class=”end-btn”を追加します。

    詳細:https://squadbeyond.gyazo.com/b2a5d4e1c9cd2e418686c52f09e489d3

    <div class="button-box">

     <a href="ooooo" class="end=btn" draggable="false">

    <div class="button style button-color-green"><span class="copy">お得なキャンペーン</span><span class="title">公式ページを見てみる</span></div>

    </div>

    4. 追加したクラスに ボタンを無効にするためのCSSを適応

    詳細:https://squadbeyond.gyazo.com/2095f1a9a026ff4b2c3a2e8f03efe33c

    .button-box a.is-disabled {
    pointer-events: none; //マウスカーソルのイベント(aタグのリンク)を無効にする
    filter: grayscale(1); //ボタンにグレーのフィルターを適応 ※グレーにしたくない場合は削除して下さい
    }
    .button-box a.is-disabled .style::before {
    animation: unset; //動く矢印を止める ※動かしたままで良い場合は削除して下さい
    }

    下記設置例:

    https://sb-draft-preview.squadbeyond.com/articles/xknDzWLnFIQohjGfyqw/draft?token=b43b0c24031b36db9bba37c97fd999c8

    ※ 設置例はタイマーを 1分 に設定しています