Opencart filters add onclick event to replace submit button

Question

I would like to add the onclick event to Opencart filters to replace the submit button that is hidden behind the page. I guess this should be done using javascript / jquery, but the implementation is a bit superior to me, can you help?

PHP:

<div class="box"> <div class="box-heading"><?php echo $heading_title; ?></div> <div class="box-content"> <ul class="box-filter"> <?php foreach ($filter_groups as $filter_group) { ?> <li><span id="filter-group<?php echo $filter_group['filter_group_id']; ?>"><?php echo $filter_group['name']; ?></span> <ul> <?php foreach ($filter_group['filter'] as $filter) { ?> <?php if (in_array($filter['filter_id'], $filter_category)) { ?> <li> <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" class="click_checkbox_manufacturers-filter" id="filter<?php echo $filter['filter_id']; ?>" checked="checked" /> <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label> </li> <?php } else { ?> <li> <input type="checkbox" value="<?php echo $filter['filter_id']; ?>" class="click_checkbox_manufacturers-filter" id="filter<?php echo $filter['filter_id']; ?>" /> <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label> </li> <?php } ?> <?php } ?> </ul> </li> <?php } ?> </ul> <a id="button-filter" class="button"><?php echo $button_filter; ?></a> </div> </div> 

HTML OUTPUT:

 <div class="box"> <div class="box-heading">Refine Search</div> <div class="box-content"> <ul class="box-filter"> <li><span id="filter-group2">Colour</span> <ul> <li> <input type="checkbox" value="33" class="click_checkbox_manufacturers-filter" id="filter33"> <label for="filter33">Black</label> </li> <li> <input type="checkbox" value="35" class="click_checkbox_manufacturers-filter" id="filter35"> <label for="filter35">Blue</label> </li> <li><span id="filter-group4">Scent Name</span> <ul> <li> <input type="checkbox" value="64" class="click_checkbox_manufacturers-filter" id="filter64"> <label for="filter64">Almond</label> </li> <li> <input type="checkbox" value="65" class="click_checkbox_manufacturers-filter" id="filter65"> <label for="filter65">Coconut</label> </li> </ul> </li> </ul> <a id="button-filter" class="button">Refine Search</a> </div> </div> 

Javascript

 <script type="text/javascript"> $('#button-filter').bind('click', function() { filter = []; $('.box-filter input[type=\'checkbox\']:checked').each(function(element) { filter.push(this.value); }); location = '<?php echo $action; ?>&filter=' + filter.join(','); }); //--></script> 

Answer 1

You can do something like this (instead of the current script):

 <script type="text/javascript"> $(document).ready(function() { // hide the "submit" button $('#button-filter').hide(); // bind onChange event to the checkboxes $('.click_checkbox_manufacturers-filter').live('change', function() { filter = []; $('.box-filter input[type=\'checkbox\']:checked').each(function(element) { filter.push(this.value); }); window.location = '<?php echo $action; ?>&filter=' + filter.join(','); }); }); //--></script> 

Here is a link to my JsFiddle of the same JS code that, surprisingly, works . The only problem might be redirection ... I edited the redirection code above to make it work too.

Answer 2

For version 2, change the JavaScript in the filter.tpl file (from the directory /view/theme/default/template/extension/module/filter.tpl - change the "default" to your theme name, if necessary) to this

 <script type="text/javascript"> $(document).ready(function() { $('#button-filter').hide(); $('input[name^=\'filter\']').on('change', function() { filter = []; $('input[name^=\'filter\']:checked').each(function(element) { filter.push(this.value); }); location = '<?php echo $action; ?>&filter=' + filter.join(','); }); }); </script> 

Tested in OC 2.3.0.2.