facetwp cars demo

djrmom

{{gist file=”cars.html” lang=”html”}}
<style>
.facetwp-facet.facetwp-facet-vehicle_type {
margin-bottom: 0;
}
.facetwp-facet-vehicle_type .facetwp-radio {
display: inline-block;
background: none;
line-height: 48px;
width: 120px;
margin: 0;
}
.facetwp-facet-vehicle_type .facetwp-radio.checked {
background: none;
}
.facetwp-facet-vehicle_type .facetwp-radio img {
opacity: 0.3;
vertical-align: top;
width: 48px;
}
.facetwp-facet-vehicle_type .facetwp-radio.checked img {
opacity: 1;
}
</style>

<script>
(function($) {
$(document).on(‘facetwp-loaded’, function() {
var $parent = $(‘.facetwp-facet-vehicle_type’);
$parent.find(‘.facetwp-radio’).each(function() {
var $this = $(this);
var type = $this.attr(‘data-value’);
var counter = $this.find(‘.facetwp-counter’).text().replace(‘(‘, ”).replace(‘)’, ”);
$this.html(‘<img src=”https://facetwp.com/wp-content/themes/fwp/img/icons/cars/’ + type + ‘.svg” alt=”‘ + type + ‘” /> ‘ + counter);
});
});
})(jQuery);
</script>
{{/gist}}