Cars demo – vehicle type facet

mgibbs189

{{gist file=”index.php” lang=”php”}}
<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’);
if (! $parent.hasClass(‘modded’)) {
$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);
});
$parent.addClass(‘modded’);
}
});
})(jQuery);
</script>
{{/gist}}