• widgetマスター

    モデレータ
    2023年11月1日 10:28

    該当Widgetを下記のとおり変更することで「ボタンを押して絞り込み検索」の仕様に変更可能です!

    Widget名:絞り込み検索付き評価リンク※要javascript

    【javascript】

    javascriptHead用の記述を下記に差し替え

    <script>
    var sbRefineSearch02 = sbRefineSearch02 || {};
    (function(_) {
    const target = '.js-refine-search';
    _.setRefineSearch02 = function(el) {
    const countResults = el.querySelectorAll('.num-result .num');
    let resetBtn = el.querySelector('.js-reset');
    const results = [];
    Array.from(el.querySelectorAll('.refine-search-result'), result => {
    let addResult = {};
    addResult.el = result;
    addResult.filter = result.dataset.filter ? result.dataset.filter.split(',') : [];
    results.push(addResult);
    });
    const filterForm = el.querySelector('form[name="refine-search-filter"]');
    resetBtn.addEventListener('click', setResult);
    function setResult() {
    let filter = [];
    Array.from(filterForm.querySelectorAll('input[value]:checked'), input => filter.push(input.value));
    let count = 0;
    results.forEach((result) => {
    let isMatch = true;
    filter.some((value) => {
    if (!result.filter.includes(value)) {
    isMatch = false;
    return true;
    }
    });
    if (isMatch) {
    result.el.style.display = 'block';
    count++;
    } else {
    result.el.style.display = 'none';
    }
    if (filter.length === 0) {
    result.el.style.display = 'none';
    };
    });
    countResults.forEach((countResult) => countResult.textContent = count);
    }
    }
    _.init = function() {
    Array.from(document.querySelectorAll(target), el => {
    _.setRefineSearch02(el);
    });
    };
    })(sbRefineSearch02);
    </script>

    【HTML】

    ボタンを変更

    ・変更前

    <button class="resetBtn js-reset" disabled="">すべての選択を解除</button>

    ・変更後

    <button type="button" class="resetBtn js-reset">検索する</button>

    プレビュー:https://sb-draft-preview.squadbeyond.com/articles/gqdoNJqWlNpkyTKAWwg/draft?token=fe18648f69e380cea2f2ec5f439aa5b1