メンバー | Squad voice

widgetマスター

モデレータ

2023年9月13日 16:23

ご要望に応じて、Squad beyondに新しいWidgetが登場しました！

【カテゴリー】

自動表示

【Widget名】

口コミリスト（ページング、絞り込み機能付き）※要javascript

【プレビュー】

https://sb-draft-preview.squadbeyond.com/articles/bXRczunlQNXtMEmKSA/draft?token=42ab117bfcebd173c158522ab0bfb47f

【備考】

ページング機能との兼ね合いで、どうしてもご希望にお答えできなかった部分が１点ございます。

作成したWidgetでは、プルダウンメニューで自動表示できる該当件数が、デフォルトのコメントの件数のみとなっています。

例：合計10件の口コミがあった場合でも、自動カウントされるのは初期表示の5件のみの該当件数のみ

こちらに関しては、お手数をおかけして申し訳ないのですが、以下のようにして手作業でカウントをお願いします。

1. JavaScript内デフォルト29行目の【page】部分をいったん「5」件から全コメント件数に変更する

   ],
                page: 5, ※コメント件数に合わせて変更する
                pagination: {
                    paginationClass: 'pagination',

2. 各プルダウンメニューで絞って目視で該当件数をカウントし、件数を修正する

プレビュー画面から目視でカウントいただき、HTMLにて件数を修正してください

参考：https://squadbeyond.gyazo.com/c118ec5f9124390fcc8d463048f73c69

3. 【page】部分を「5」件に戻す

widgetマスター

モデレータ

2023年9月13日 17:20

高さを表示コンテンツに合わせて自動調整するように、既存のWidgetを修正させていただきました！

【Widget名】

横スライド式アンケート ※要javascript

【カテゴリー】

アンケート

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/HwxxBYeEKGfOQSZelLow/draft?token=88967a14ccd31a1d5c4ba710d5c01b9b

現在作成されているWidgetにて修正する場合は下記の手順で修正をお願いいたします。

1. 既存修正後の横スライド式アンケートの Javascriptに入れ替える

詳細：https://knowledge.squadbeyond.com/edit-page/put-on-widget

2. 設問のHTML構成を下記に変更

■ 現在

<div class="scroll-question-item">
  <div class="scroll-question-title"> 
    ...設問のテキスト...
  </div>
  <div class="scroll-question-content">
    ...選択肢...
  </div>
</div>

■ 変更後

各 item の高さを取得するために、それぞれの質問ごとにscroll-question-inner を追加

<div class="scroll-question-item">
  <div class="scroll-question-inner">　※追加
    <div class="scroll-question-title"> 
      ...設問のテキスト...
    </div>
    <div class="scroll-question-content">
      ...選択肢...
    </div>
  </div>　※追加
</div>

widgetマスター

モデレータ

2023年9月14日 13:16

ご要望にお応えして、Squad beyondに新しいWidgetが登場しました！

【Widget名】

開閉する吹き出し※要javascript

【カテゴリー】

自動表示

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/KHPUXvNBqyZSxrvA/draft?token=f4f3f12eb390e51819ac9ba32d09ff74

widgetマスター

モデレータ

2023年9月14日 15:15

ページ内に画像が多数あることにより該当の画像がすぐ読み込めないことが原因として考えられます。

タグ設定にlazyloadをご設定くださいませ。

【タグ設定の設定箇所】

https://squadbeyond.gyazo.com/3b1dee79182f87e7d8419a5d76788fb8

【挿入するコード】

JavaScript Head

<script>
lazyImgLoaded = function (object, callback) {
    object = Array.from(object).filter((img) => {
      return img.matches('.lazyload:not([data-ll-status])');
    });
    if (typeof LazyLoad === 'undefined' || !(object.length)) {
        if (!callback) return;
        callback();
        return;
    }
    let preload = 'lazypreload-';
    let n = 0;
    while (document.querySelector('.' + preload + n)) n++;
    Array.from(object, el => {
        el.classList.add(preload + n);
        el.classList.remove('lazyload');
    });
    lazyLoadInstance.update();
    const lazyPreloadInstance = new LazyLoad({
        elements_selector: '.' + preload + n,
        callback_loaded: function (element) {
            element.classList.remove(preload + n);
        },
        callback_finish: function () {
            if (!callback) return;
            callback();
        }
    });
    lazyPreloadInstance.loadAll();
};
</script>

JavaScript Body

<script>
lazyImgLoaded(document.querySelectorAll(".txt-on span img"));
</script>

widgetマスター

モデレータ

2023年9月14日 17:59

▪️ lazyloadのコードをJavaScript Headに追記してください。

【参考】

「※要JavaScript」がついているWidgetの使い方

【追記するコード】

<script>
~
_.setEnquete = function(el) {
 ~
}
//以下追記 -----
 _.lazyImgLoaded = function (object, callback) {
        object = Array.from(object).filter((img) => {
            return img.matches('.lazyload:not([data-ll-status])');
        });
        if (typeof LazyLoad === 'undefined' || !(object.length)) {
            if (!callback) return;
            callback();
            return;
        }
        let preload = 'lazypreload-';
        let n = 0;
        while (document.querySelector('.' + preload + n)) n++;
        Array.from(object, el => {
            el.classList.add(preload + n);
            el.classList.remove('lazyload');
        });
        lazyLoadInstance.update();
        const lazyPreloadInstance = new LazyLoad({
            elements_selector: '.' + preload + n,
            callback_loaded: function (element) {
                element.classList.remove(preload + n);
            },
            callback_finish: function () {
                if (!callback) return;
                callback();
            }
        });
        lazyPreloadInstance.loadAll();
};
//ここまで追記 ------
//太字を追記（3,5行目）
_.init = function() {
    Array.from(document.querySelectorAll(classes.target), el => {
  　　　　　　_.lazyImgLoaded(el.querySelectorAll("img"), function () {　追記
                _.setEnquete(el);
            });追記
    });

▪️なお、上記修正にともない、ボタンの位置がずれてしまうため、以下のWidgetのCSSを調整くださいませ。

.txt-on span {
  width: 80%;
  top: 73%;　こちらを既存の80%から調整ください
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  animation: puruY 1s forwards infinite;
}

参考画像：https://squadbeyond.gyazo.com/2ead25b0c84ebe19c31d6b71919a8ae0

例えば73％に変更した場合、以下のように修正されます。

プレビュー：https://sb-draft-preview.squadbeyond.com/articles/cvRMpfI-jgHIplyfCnhDsw/draft?token=6c062550dbd0b189c242ca6c922d2a00

widgetマスター

モデレータ

2023年9月15日 11:09

既に指定部分に到達した瞬間に紙吹雪を展開する仕様になっております！

プレビュー：

https://sb-draft-preview.squadbeyond.com/articles/kLOtlRdZLUAZgkN_VxecQ/draft?token=45a995e9a08b1f04b41c6302ac669881

詳細設定に関してご不明点がありましたら、どうぞお気軽にご質問くださいませ。

widgetマスター

モデレータ

2023年9月15日 11:12

コメントいただきありがとうございます！Widgetを確認しましたところ、ページの到達割合を計算する箇所に不備がありましたので、既存WidgetのJavaScriptを修正いたしました。

新しいJavaScriptコードに差し替えくださいませ。

新しいJavaScriptコード

<script>
    var footerCountFunc = footerCountFunc || {};
    (function(_) {
        const target = '.js-footerItems';
        _.scroll = function(el) {
            let visibleRatio = 40;
            el.classList.add('is-hidden');
            window.addEventListener('scroll', throttle((event) => {
                let pageHeight = document.documentElement.offsetHeight - window.innerHeight;
                let visibleArea = pageHeight * (visibleRatio * 0.01);
                var scroll_y = window.scrollY;
                if (visibleArea < scroll_y) {
                    if (el.classList.contains('is-hidden')) {
                        el.classList.remove('is-hidden');
                    }
                    el.classList.add('is-visible');
                } else {
                    el.classList.add('is-hidden');
                }
            }, 30));
        }
        _.currentTime = function(el) {
            let current = new Date();
            let hour = current.getHours();
            let min = current.getMinutes();
            let currentTime = el.querySelector('.js-currentTime');
            currentTime.innerHTML = hour + '時' + min + '分';
        };
        _.viewerCount = function(el) {
            let viewer = el.querySelector('.js-count');
            let num = parseInt(viewer.innerHTML);
            let rundNum;
            let customerCount = parseInt(viewer.innerHTML);
            randNum = (Math.random() * 8) - 3;
            randNum = Math.floor(randNum);
            customerCount = customerCount + randNum;
            if (customerCount > 999) {
                customerCount = 999;
            }
            if (customerCount < 3) {
                customerCount = 3;
            }
            viewer.innerHTML = customerCount;
        }
        _.countdown = function(el) {
            let second = 0;
            second = _.getCookie();
            if (isNaN(second)) {
                second = 7200;
            };
            second--;
            let countBoxes = el.querySelectorAll('.js-countBox');
            let cookieBoxes = el.querySelectorAll('.js-cookieBox');
            let timer = el.querySelector('.js-timer');
            countBoxes.forEach(function(countBox) {
                let timer = countBox.querySelector('.js-timer');
                if (second > 0) {
                    timer.innerHTML = countdownTimer(second);
                } else {
                    countBox.style.display = 'none';
                }
            })
            cookieBoxes.forEach(function(cookieBox) {
                if (second > 0) {
                    cookieBox.style.display = 'none';
                }
            })
            document.cookie = "sec=" + second + " ;max-age=7200";
            function countdownTimer(t) {
                let hms = "";
                let h = t / 3600 | 0;
                let m = t % 3600 / 60 | 0;
                let s = t % 60;
                if (h != 0) {
                    hms = h + "時間" + padZero(m) + "分" + padZero(s) + "秒";
                } else if (m != 0) {
                    hms = m + "分" + padZero(s) + "秒";
                } else {
                    hms = s + "秒";
                }
                return hms;
                function padZero(v) {
                    if (v < 10) {
                        return "0" + v;
                    } else {
                        return v;
                    }
                }
            }
        }
        _.getCookie = function() {
            if (document.cookie != '') {
                var tmp = document.cookie.split('; ');
                for (var i = 0; i < tmp.length; i++) {
                    var data = tmp[i].split('=');
                    if (data[0] == 'sec') {
                        return Number(data[1]);
                    }
                }
            }
        }
        function throttle(fn, interval) {
            let lastTime = Date.now() - interval;
            return function() {
                if ((lastTime + interval) < Date.now()) {
                    lastTime = Date.now();
                    fn();
                }
            }
        }
        _.init = function() {
            Array.from(document.querySelectorAll(target), el => {
                _.currentTime(el);
                _.viewerCount(el);
                _.countdown(el);
                _.scroll(el);
                setInterval(() => {
                    _.currentTime(el);
                    _.countdown(el);
                }, 1000);
                setInterval(() => {
                    _.viewerCount(el);
                }, 5000);
            })
        };
    })(footerCountFunc);
</script><!-- JavaScript headここまで -->
<!-- タグ設定のJavaScript bodyに以下をカットして貼り付けてください。
  同一widgetを複数追加する場合、複数回貼付けは不要です。 -->
<script>
    document.addEventListener('DOMContentLoaded', footerCountFunc.init, false);
</script><!-- JavaScript bodyここまで -->

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分に設定しています

widgetマスター

モデレータ

2023年9月15日 15:46

ボタンの状態に応じてカラーを変更する方法の1例をご紹介させていただきます。

1. 選択肢のチェック状態によりボタンの状態が変化するように設定

JavaScript Head内のrevealBtnFncMulti の _.init = function() {…} 内に

選択肢のチェック状態のチェック状態によりボタンの状態を変化させる下記コードを追加します。

_.init = function() {
    var questionBox = Array.from(document.querySelectorAll('.js-questionRevealMulti'));
    var hiddenClass = 'hidden'; // 'is-hidden'から'hidden'に変更
    questionBox.forEach(function(qb) {
        var completeBtn = qb.querySelector('.js-send');
        var revealArea = qb.querySelector('.js-reveal');
        // ★ 追加ここから ↓↓
        const inputs = Array.from(qb.querySelectorAll('input'));
        qb.addEventListener('change', function() {
            const checkedInputs = inputs.filter(input => input.checked);
            if(qb.querySelector('button')) {
              if(checkedInputs.length > 0) {
                qb.querySelector('button').disabled = false;
              } else {
                qb.querySelector('button').disabled = true;
              }
            }
        });
        // ★ 追加ここまで ↑↑
        if(completeBtn) { // ← 現在のHTML構成によるエラー回避のためここに1行追加
          completeBtn.addEventListener('click', function() {
            revealArea.classList.toggle(hiddenClass);
            var targetOffsetTop = window.pageYOffset + revealArea.getBoundingClientRect().height;
            window.scrollTo({
                top: targetOffsetTop,
                behavior: 'smooth',
            });
          });
        } // ← 現在のHTML構成によるエラー回避のためここに1行追加
    });
};

2. ボタンの初期状態およびボタンクリック時に状態を変化させるコードを追加

JavaScript Head内btnVisibleFunc の _.btnAction = function(el) {…} 内に下記コードを追加します。

_.btnAction = function(el) {
    let btn = el.querySelector('.js-btn');
    let content = el.querySelector('.js-content');
    // ★ ボタン初期無効化 追加ここから ↓↓
    btn.disabled = true;
    // ★ ボタン初期無効化 追加ここまで ↑↑
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        // ★ クリックステータスを追加 ここから ↓↓
        btn.classList.add('is-clicked');
        // ★ クリックステータスを追加 ここまで ↑↑
        content.classList.add('is-active');
        content.style.height = content.scrollHeight + 'px';
        setTimeout(scroll, 300);
    }, {
        once: true
    });
    function scroll() {
        content.scrollIntoView({
            behavior: 'smooth'
        });
    }
};

3. ボタンの状態によりカラーを変化させるCSSを追加

WidgetのCSS内に以下のコードを追加します。

.btnVisible__area .btn:disabled {
  background: #e7e2d4; /* ボタン無効時のカラー */
}
.btnVisible__area .btn.is-clicked {
  background: #8c8c8c; /* ボタンクリック時のカラー */
  pointer-events: none; /* クリック後はボタンを無効化 */
}

widgetマスター

モデレータ

2023年9月20日 10:34

ご要望にお応えして、Squad beyondに新しいWidgetが登場しました！

【Widget名】

評価チェックリスト（Good / More）

【カテゴリー】

囲み枠

【設置例】

https://sb-draft-preview.squadbeyond.com/articles/xBEscwOwQxUoyQh_aw/draft?token=7d88f508862afb4bc9da8bbab6fcfaf5

widgetマスター

モデレータ

2023年9月20日 12:28

既存のCSSを編集された際に不具合が生じたようです。

以下のように、CSSのプロパティをもとに戻してくださいませ。

.txt-on {
  position: relative; /* absolute を relative にもどす */
}

widgetマスター

モデレータ

2023年9月20日 14:30

見出し列を追加するには、HTMLとCSSを以下のように修正してください。

修正後のイメージはこちらです

▼https://sb-draft-preview.squadbeyond.com/articles/KmOgQBbelwwwWSIQ/draft?token=9e57f99e6d620cabfd884670aa70d1a1

▪️HTML

基本的にtrタグ（not閉じtrタグ）の下にthタグを入れていただければ、見出しの1マスを作成できます。各行に同じマスがないと崩れることに注意してください。

【修正前】

    <table class="table">
        <thead>
            <tr><!-- テーブル内の列を増やす場合は、すべての行のth要素とtd要素を同じ数だけ増やしてください -->
                <th class="medal"><img src ~~~
<div class="tbl-3col__ranking">
〜〜
<tr>
<td>
<p class="c-review__ttl">見出し</p>
<p class="c-review__cont"><span class="c-cont__text">内容</span></p>
<p class="c-review__subtext">サブテキスト</p>
</td>
〜〜

【修正後】

① 最初の<tr> の後に、<th class=”none”></th> を追加します

② 以下7箇所の<tr> の後に、それぞれ<th>項目名</th> を追加します

<div class="tbl-3col__ranking">
    <table class="table">
        <thead>
            <tr><!-- テーブル内の列を増やす場合は、すべての行のth要素とtd要素を同じ数だけ増やしてください -->
<th class="none"></th> /*追加*/
                   <th class="medal"><img src ~~~
〜〜
<tr>
<th>項目名</th> /*追加　以下7箇所の<tr> の後に、それぞれ<th>項目名</th> を追加してください*/　
<td>
<p class="c-review__ttl">見出し</p>
<p class="c-review__cont"><span class="c-cont__text">内容</span></p>
<p class="c-review__subtext">サブテキスト</p>
</td>
〜〜

▪️ CSS

【修正前】

 .tbl-3col__ranking .table {
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid #ccc;　変更
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}
 .tbl-3col__ranking .table th,
 .tbl-3col__ranking .table td {
  width: 33.33%;
  min-width: 96px;
  text-align: center;
  border-left: 1px solid #d9d9d9;
  border-right: 1px solid #d9d9d9;　変更
  border-bottom: 1px solid #d9d9d9;　
  border-top: none;　一行消す
  padding: 12px;
  vertical-align: middle;
  box-sizing: border-box;
}

【修正後】

.tbl-3col__ranking .table {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #ccc; 変更
  border-right: 1px solid #d9d9d9;　一行追加
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  box-sizing: border-box;
}
 .tbl-3col__ranking .table th,
 .tbl-3col__ranking .table td {
  width: 33.33%;
  min-width: 96px;
  text-align: center;
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;　変更
  border-bottom: 1px solid #d9d9d9;
  padding: 12px;
  vertical-align: middle;
  box-sizing: border-box;
}
/*以下追加*/
.tbl-3col__ranking .table th.none {
  border-left: none;
  border-top: none;
}

widgetマスター

モデレータ

2023年9月15日 13:17

ご相談ありがとうございます！

紙吹雪自体が確認できないということでしょうか？

Widgetの長さは関係なさそうです！

該当のbeyondページのURLをご共有いただけますか？

また、どこの箇所で紙吹雪をさせたいのかも一緒にお願いします！

widgetマスター

モデレータ

2023年9月15日 15:30

URLを共有いただきありがとうございます！確認させていただきました！

紙吹雪の発生地点の指定としてjs-scroll-point というclassが必要になります。そのため、テキストを囲う<div> の<div class=”js-scroll-point”> への変更をお願いします。

    <!-- 以下がHTMLになります
      紙吹雪が現れる位置の要素に、クラスjs-scroll-pointをつけてください -->
    <div class="confetti_explosion">
        <div>
            <div style="text-align: center;">ここまで読んでくれた<strong style="color: rgb(255, 82, 82);">お礼</strong>に、</div>
            <div style="text-align: center;">
<strong>このページ限定</strong>の</div>
        </div>
    </div>

widgetマスター

モデレータ

2023年9月15日 17:21

よかったです！

またなにかありましたらご相談ください💫

widgetマスター

コミュニティのコメント