1. stip
  2. General
  3. Thursday, June 08 2017, 11:48 AM
Hi guys,

I would like to make buttons from the checkboxes in the search in the frontend.
Like this site:
https://warmonderhof.nl/echt-warmonderhof/oud-studenten/warmonderhoffers-wereldwijd

Now the easy profile is a little bit different in code and a tiny customization would make it allot easyer.


<label>
<input type="checkbox">
Labelname
</label>


Easyer to style would be to span the Label.



<label>
<input type="checkbox">
<span>Labelname<span>
</label>


I than can use css like this:


label span {
color:#fff;
font-size:14px;
display:block;
border:1px solid #F26F37;
padding:5px;
cursor:pointer;
font-weight:normal;
background: #C6E0ED;
background-image: linear-gradient(to bottom, #FF0000 0px, #f94848 100%);
}

input[type="checkbox"]:checked + span {
background-color:#C6E0ED;
background-image: linear-gradient(to bottom, #C6E0ED 0px, #C6E0ED 100%);
}



Now i have no idea how to grab it and style this label, and change label if checked.
This would be a really easy update but a core change if i do it if i am not mistaken.

Is it something for an update or can you tell me what file i need to change?

Thank you so much!
admin Accepted Answer
Admin
Hi,
this is highly not recommended.

I think the best way is to manage this via a simple javascript like this:
jQuery(document).ready(function(){
var check_button_class = 'btn btn-default btn-xs'; // you can customize here
var check_button_class_active = 'btn-success'; // you can customize here
jQuery('label.checkbox').each(function(){
var self = jQuery(this);
var active = self.find('input').prop('checked');
self.hide();
if(active) self.after('<span class="'+check_button_class+' '+check_button_class_active+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>');
else self.after('<span class="'+check_button_class+'" data-checkbox="'+self.find('input').attr('id')+'">'+self.text()+'</span>');
});
jQuery('.btn[data-checkbox]').each(function(){
var self = jQuery(this);
self.click(function(){
self.toggleClass(check_button_class_active);
var checkbox = jQuery('#'+self.attr('data-checkbox'))
checkbox.attr("checked", !checkbox.attr("checked"));
checkbox.change();
});
});
});

something like this not require CSS style. In the above function we manage style of buttons with already existing Bootstrap classes, of course you can customize it.

NOTE: function like this will works for all checkboxes in your site, so we recommend you to add some other selector, for example if you need this only for search module then replace "'label.checkbox" with ".jsn_search_module label.checkbox"
  1. more than a month ago
  2. General
  3. # 1
stip Accepted Answer
Hi Guys,

It took a while but now i added this javascript.
Its awesome!

Thanks!
  1. more than a month ago
  2. General
  3. # 2
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.