This is tutorial on how to make whole ad box clickable on ClassiBase. With growing trend to mobile devices usability of web sites become more important. As we all know it is good practice to have big clickable buttons and areas on web sites. Which will reduce misclicking links. For classifieds website you may want whole ad box to be clickable as displayed in following image.
On ad listing pages we generally have ad items with clickable title link and thumbnail image. Item's short description, price and other information is not clickable. To make whole ad box clickable use following javascript snippet in your footer.
<script>
$(function(){
$('.listing tr:not(a),.list_style_simple li:not(a)').click(function(event){
var $me = $(this);
var $a = $('h2 a:first',$me);
if($a.length)
{
// go to item page
top.location.href=$a.prop('href');
return false;
}
});
});
</script>
Javascript snippet binds action to click event for HTML table row and list elements. Searches for first clickable link inside clicked element and redirects web browser to ad item page.
To use this snipped go to Settings -> Header/footer page in "Admin panel" and paste custom javascript snippet to custom footer area. Then click Submit button to save settings. Then check your site to make sure it is installed correctly and works.
This snipped tested with Mukuzik Classibase theme and should work with other ready made ClassiBase themes. If you encounter any problems using this snippet let us know.
