WEB広告運用の困りごとが集まる場所 コミュニティ コミュニティ 項目選択したら該当のコンテンツ(下の表)が表示されるように変更したい。

タグ付き: 

  • 項目選択したら該当のコンテンツ(下の表)が表示されるように変更したい。

    トピックス by widget初心者 ユーザーランク 1792 pt  2023年12月18日 13:22 78 PV

    【相談内容】

    元々は選択内容によって下にコンテンツが出てくる仕様だったと思うのですが、私がいじったせいで常に下コンテンツが表示される状態になってしまいました。
    なので選択項目に応じてコンテンツが表示されるようにする方法をお教えいただきたいです。

    【Widget名】

    商品検索とソートテーブル(検索条件全て含む)※要javascript

    【相談ページ】

    https://sb-preview.squadbeyond.com/articles/G-apZAHdvOOCaoUA/preview

    widgetマスター   5 月, 1 週間前 2 人 · 1 コメント
  • 1 コメント
  • widgetマスター

    モデレータ
    2023年12月18日 13:24

    該当のWidgetを確認したところ、「初期は全表示で検索ボタンを押すと条件に合わせて表示を絞り込む」という仕様でしたのでWidget的にはこれが正しい動きです。

    そのうえで「初期は全非表示で検索ボタンを押すと条件に合致する項目だけ表示」という形に変更するのであれば下記の通り修正してみてください!!!

    1.オリジナルコードの35行目にある_.selectFunction(el, catArr); をコメントアウトする

    該当関数の抜粋:

    _.paramsSelect = function(el) {
    let url = new URL(window.location.href);
    let params = url.searchParams;
    if (params) {
    params.forEach(function(value, key) {
    if (value !== '0' && key !== 'step_uid') {
    catArr.push(value);
    if (el.querySelector('[name=' + key + ']'))
    el.querySelector('[name=' + key + ']').dataset.check = 'true';
    let selectedKeies = el.querySelectorAll('[name=' + key + '] ');
    selectedKeies.forEach(function(selectedKey) {
    if (selectedKey.querySelector('option')) {
    selectedKey.querySelector('[data-cat="' + value + '"]').selected = true;
    } else {
    selectedKey.checked = true;
    }
    });
    }
    });
    }
    //_.selectFunction(el, catArr); ←ここの行頭に「//」を入れてコメントアウト
    }

    2.HTMLの各項目<tr>のclassに is-hiddenを追加する

    参考例:

    <tr class="result__content js-resultContent is-hidden" data-result="p01-1, f01-2, g01-2, cat01, cat02, cat03">

    ※すべての項目に追加が必要です