Фильтры Opencart добавляют событие onclick для замены кнопки отправки
Я хотел бы добавить событие onclick в фильтры Opencart, чтобы заменить кнопку отправки, которая скрыта со страницы.. Я предполагаю, что это должно быть сделано с помощью JavaScript/jQuery, но реализация немного выше меня, можете ли вы помочь?
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:
<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>
2 ответов
вы можете сделать что-то подобное (вместо текущего скрипта):
<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>
здесь ссылка на мой JsFiddle того же самого кода JS, который, на удивление, является работающего. Единственная проблема может быть с редиректом... Я отредактировал код перенаправления выше, поэтому он также должен работать.
для версии 2 Измените JavaScript в фильтре.TPL файл (из каталога / вид / тема / по умолчанию / шаблон / расширение / модуль / фильтр.tpl-при необходимости измените "default" на свое имя темы) на это
<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>
протестировано в OC 2.3.0.2.