Hallo,
ich setze in einem Projekt als Filter Filterizr [https://github.com/giotiskl/filterizr] ein und nun würde ich einen "verschachtelten" Filter hierbei benötigen.
Liste-1 stellt den Filter für eine Liste-2 dar.
Liste-2 soll nun für eine weitere Liste-3 als Filter dienen.
Hat soetwas schon mal jemand umgesetzt und könnte mir hier unter die Arme greifen? Beispiel(e)?
Mein aktueller Aufbau will nicht funktioneren:
Die Liste-2 hat 'data-category' plus 'data-filter' bekommen, weil ich annehme, dass das klappt
PHP-Code:
<div class="filterizrWrapperStatus col-md-3 col-12">
<ul class="filterizrStatus">
<li data-filter="all">Alle</li>
<li data-filter="noex">NOex</li>
<li data-filter="viex">VIex</li>
<li data-filter="blgx">BLGx</li>
<li data-filter="ooxx">OOxx</li>
</ul>
</div>
<div class="filterizrWrapperDistrict col-md-9 col-12">
<ul class="filtr-distance">
<li class="filtr-item" data-category="noex" data-filter="amm">AM</li>
<li class="filtr-item" data-category="noex" data-filter="bnn">BN</li>
<li class="filtr-item" data-category="blgx" data-filter="bzz">BZ</li>
<li class="filtr-item" data-category="ooxx" data-filter="bzz">BR</li>
</ul>
</div>
<script src="files/theme/js/vanilla.filterizr.min.js"></script>
<script>
const filterizr = new Filterizr('.filtr-distance');
filterizr.setOptions({layout: 'vertical'});
</script>
<div class="col-12 filtr-plan">
<div class="ce_randomwrapper block">
<ul class="cols_4">
<li class="card random-item block filtr-item" data-category="amm" id="article-304">
<div class="ce_image block">
<figure class="image_container">
<a href="files/theme/img/nomore/herzstueck.jpg" data-lightbox="" class="cboxElement">
<img src="files/theme/img/nomore/herzstueck.jpg" alt="" itemprop="image" width="auto" height="auto">
</a>
</figure>
</div>
</li>
<li class="card random-item block filtr-item" data-category="amm" id="article-307">
<div class="ce_image block">
<figure class="image_container">
<a href="files/theme/img/nomore/plane.jpg" data-lightbox="" class="cboxElement">
<img src="files/theme/img/nomore/plane.jpg" alt="" itemprop="image" width="auto" height="auto">
</a>
</figure>
</div>
</li>
<li class="card random-item block filtr-item" data-category="noex" id="article-309">
<div class="ce_image block">
<figure class="image_container">
<a href="files/theme/img/nomore/wormy.jpg" data-lightbox="" class="cboxElement">
<img src="files/theme/img/nomore/wormy.jpg" alt="" itemprop="image" width="auto" height="auto">
</a>
</figure>
</div>
</li>
</ul>
</div>
</div>
<script>
const filterizr = new Filterizr('.filtr-plan');
</script>
Lesezeichen