I am trying to filter a view with the isotope JS plugin. There was some help in the forum but the last steps are failing.
I expected to see this hidden link
Instead, I got: hidden link
Thx a lot and all the best
And this is how i've done it:
HTML in Loop Editor:
[wpv-layout-start]
<div id="programmpunkte" class="button-group">
<button data-filter=".miniws">Mini-Workshops</button>
<button data-filter=".medientouren">Medientouren</button>
<button data-filter=".erzaehlcafes">Erzählcafés & Diskussionsrunden</button>
<button data-filter=".intensivws">Intensiv-Workshops</button>
<button data-filter=".podien">Podien</button>
<button data-filter=".program">Andere</button>
</div>
[wpv-items-found]
<!-- wpv-loop-start -->
<div id="programmpunkte" style="position:relative;top:100px;">
<wpv-loop wrap="4" pad="true">
<div class='xyz'>
[wpv-item index=1]
<div class="row ">
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Alle Programmpunkte"]</div>
[wpv-item index=2]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Alle Programmpunkte"]</div>
[wpv-item index=3]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Alle Programmpunkte"]</div>
[wpv-item index=4]
<div class="col-sm-3">[wpv-post-body view_template="Loop item in Alle Programmpunkte"]</div>
</div>
[wpv-item index=pad]
<div class="col-sm-3"></div>
[wpv-item index=pad-last]
<div class="col-sm-3"></div>
</div>
</wpv-loop>
<!--</div>-->
<!-- wpv-loop-end -->
[/wpv-items-found]
[wpv-no-items-found]
<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
[/wpv-no-items-found]
[wpv-layout-end]
<!--[wpv-post-taxonomy type="programmart" separator=" " format="slug" show="name" order="asc"]-->
CSS in Loop Editor:
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
JS in Loop Editor:
jQuery(document).ready(function($){
var $container = jQuery('#programmpunkte'); // Container for the all post items
// init
$container.isotope({
// options
itemSelector: '.col-sm-3', // Individual post item selector
});
// Enable filter buttons to behave as expected
jQuery('#filters').on( 'click', 'button', function() {
var filterValue = jQuery(this).attr('data-filter');
$container.isotope({ filter: filterValue });
});
});
HTML in View Template:
<a href=[wpv-post-url] style="text-decoration:none">
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'erzaehlcafe' )"]
<div class="erzaehlcafes">
<div class="text">
[wpv-post-title]
</div>
<div class="zeit">
[types field='startzeit'][/types] - [types field='enzeit'][/types]
</div>
<div class="schwierigkeitsgrad">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'diskussionsrunde' )"]
<div class="erzaehlcafes">
<div class="text">
[wpv-post-title]
</div>
<div class="zeit">
[types field='startzeit'][/types] - [types field='enzeit'][/types]
</div>
<div class="schwierigkeitsgrad">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="glyphicon glyphicon-user" aria-hidden="true"></span><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'mini_workshop' )"]
<div class="miniws">
<div class="text">
[wpv-post-title]
</div>
<div class="zeit">
[types field='startzeit'][/types] - [types field='enzeit'][/types]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'intensiv_workshop' )"]
<div class="intensivws">
<div class="text">
[wpv-post-title]
</div>
<div class="schwierigkeitsgrad">
<span class="glyphicon glyphicon-scale" aria-hidden="true"></span> [types field='schwierigkeitsgrad'][/types]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'medientour' )"]
<div class="medientouren">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'auftakt' )"]
<div class="podien">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'abschluss' )"]
<div class="podien">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'abschlussparty' )"]
<div class="program">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'ausklang' )"]
<div class="program">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'mediennacht' )"]
<div class="program">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
[wpv-conditional if="( '[wpv-post-taxonomy type='programmart' format='slug']' eq 'messe' )"]
<div class="program">
<div class="text">
[wpv-post-title]
</div>
</div>
[/wpv-conditional]
</a>
CSS in View Template:
.program {
position: relative;
background-color: #F194BD;
height: 165px;
width: 165px;
padding: 10px;
float: center;
margin-left: 20px;
margin-bottom: 20px;
color: #000;
}
.podien {
position: relative;
background-color: #B397C7;
height: 165px;
width: 165px;
padding: 10px;
float: center;
margin-left: 20px;
margin-bottom: 20px;
color: #000;
}
.erzaehlcafes {
position: relative;
background-color: #1F76BB;
height: 165px;
width: 165px;
padding: 10px;
float: center;
margin-left: 20px;
margin-bottom: 20px;
color: #fff;
}
.intensivws {
position: relative;
background-color: #D91E53;
height: 165px;
width: 165px;
padding: 10px;
float: center;
margin-left: 20px;
margin-bottom: 20px;
color: #fff;
}
.miniws {
position: relative;
background-color: #E72E7B;
height: 165px;
width: 165px;
padding: 10px;
float: center;
margin-left: 20px;
margin-bottom: 20px;
color: #fff;
}
.medientouren {
position: relative;
background-color: #65328A;
height: 165px;
width: 165px;
padding: 10px;
float: center;
margin-left: 20px;
margin-bottom: 20px;
color: #fff;
}
.text {
text-align: center;
font-size: 16px;
position: relative;
top: 50%;
transform: translate(0, -50%);
-ms-transform: translate(-50%, 0);
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.zeit {
text-align: left;
font-size: 12px;
position: absolute;
top: 87.5%;
}
.schwierigkeitsgrad {
width: 150px;
font-size: 12px;
position: absolute;
text-align: right;
top: 87.5%;
}
Minesh
Supporter
Languages:
English (English )
Timezone:
Asia/Kolkata (GMT+05:30)
Hello. Thank you for contacting the Toolset support.
Well - to integrate isotope third party JS needs custom programming and that is beyond the scope of our support policy BUT I can show you another work around that may help you to build such kind of solution.
You can refer to the following solution I shared with user:https://toolset.com/forums/topic/views-displaying-all-items-despite-filter-by-taxonomy/#post-510098
