Opencart 过滤器添加 onclick 事件来替换提交按钮答案

【问题标题】：Opencart Filters add onclick event to replace the submit buttonOpencart 过滤器添加 onclick 事件来替换提交按钮
【发布时间】：2013-11-06 09:23:04
【问题描述】：

我想在 Opencart 过滤器中添加一个 onclick 事件，以替换隐藏在页面外的提交按钮。我假设这应该使用 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>

【问题讨论】：

标签： javascript php jquery html opencart

【解决方案1】：

您可以这样做（而不是当前脚本）：

<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>

这里是相同的 JS 代码的link to my JsFiddle，令人惊讶的是，它工作。唯一的问题可能是重定向...我编辑了上面的重定向代码，所以它应该也可以工作。

【讨论】：

感谢您的帮助 Shadyx，但它不起作用.. 隐藏按钮！
@Stuart 我看不出它现在不应该工作的原因。您是否收到一些 JS 错误（例如在 Firebug 的控制台中）？尝试在脚本末尾的location 之前添加document....
@Stuart 没有说明为什么它不起作用或没有错误消息我无法帮助你......
原来它不喜欢输入框类中的连字符？已修复，工作正常，声音正常，非常感谢您.. x
@doug65536 虽然这是真的，但即使是最新的 OpenCart（迄今为止）1.5.6 也使用 jQuery 1.7.1 和 live() 之前只弃用了一个小版本（1.7.0）。所以这没什么大不了的，直到在 OpenCart 中使用 jQuery >1.9.0...

【解决方案2】：

对于版本 2，将 filter.tpl 文件中的 JavaScript（从 catalog/view/theme/default/template/extension/module/filter.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 中测试。

【讨论】：