OpenCart Community

OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/

Product filters as downdown instead of checkbox

https://forum.opencart.com/viewtopic.php?t=104646

Page 1 of 1

Product filters as downdown instead of checkbox

Posted: Mon Jun 24, 2013 10:19 pm
by ralphstirrat
Hi

Does anyone know how to make the product filters in 1.5.5.1 change to a dropdown instead of a checkbox option, I've got a lot of filters and this would a lot better looking.

Thanks

Re: Product filters as downdown instead of checkbox

Posted: Tue Jun 25, 2013 12:03 am
by pedro1993
Hi there,

Here is how to do it!

Step 1:
Open catalog/view/theme/your_template/template/module/filter.tpl

Step 2:
Replace this section of code:

Code: Select all

        <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']; ?>" 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']; ?>" id="filter<?php echo $filter['filter_id']; ?>" />
            <label for="filter<?php echo $filter['filter_id']; ?>"><?php echo $filter['name']; ?></label>
          </li>
          <?php } ?>
          <?php } ?>
        </ul>
with:

Code: Select all

        <select>
			<option></option>
          <?php foreach ($filter_group['filter'] as $filter) { ?>
          <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
          <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" selected>
			<?php echo $filter['name']; ?>
          </option>
          <?php } else { ?>
          <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>">
			<?php echo $filter['name']; ?>
          </option>
          <?php } ?>
          <?php } ?>
        </select>
Step 3:
Replace this code:

Code: Select all

$('.box-filter input[type=\'checkbox\']:checked').each(function(element) {
with:

Code: Select all

$('.box-filter select option:selected').each(function(element) {
Finally:
Add this code to your stylesheet:
.box-filter select {
width: 100%
[/CODE]

Let me know how you get on :)

Peter :)
ralphstirrat wrote:Hi

Does anyone know how to make the product filters in 1.5.5.1 change to a dropdown instead of a checkbox option, I've got a lot of filters and this would a lot better looking.

Thanks

Re: Product filters as downdown instead of checkbox

Posted: Wed Jun 26, 2013 9:43 pm
by ralphstirrat
Wow Peter!

That worked excellent !! Thank you very much :-)

Ralph

Re: Product filters as downdown instead of checkbox

Posted: Wed Jun 26, 2013 10:08 pm
by pedro1993
No problem,

I see your also in Scotland, I'm in Glasgow! If you ever need some assistance just let me know :)

Peter
ralphstirrat wrote:Wow Peter!

That worked excellent !! Thank you very much :-)

Ralph

Re: Product filters as downdown instead of checkbox

Posted: Sat Jun 29, 2013 5:49 am
by caesar07000
hello. it works well except this:
when an user does not select any filter and clicks on "Filter" button the site returns the following error:

Code: Select all

Notice: Error: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1
Error No: 1064
SELECT COUNT(DISTINCT p.product_id) AS total FROM oc_product_to_category p2c LEFT JOIN oc_product_filter pf ON (p2c.product_id = pf.product_id) LEFT JOIN oc_product p ON (pf.product_id = p.product_id) LEFT JOIN oc_product_description pd ON (p.product_id = pd.product_id) LEFT JOIN oc_product_to_store p2s ON (p.product_id = p2s.product_id) WHERE pd.language_id = '2' AND p.status = '1' AND p.date_available <= NOW() AND p2s.store_id = '0' AND p2c.category_id = '130' AND p.product_id IN (SELECT a.product_id FROM oc_product_filter a in /home/x18tinon/public_html/system/database/mysql.php on line 50
what could be wrong?

thank you

Re: Product filters as downdown instead of checkbox

Posted: Sat Jun 29, 2013 7:42 pm
by pedro1993
Does it work okay before making these changes?

Peter

Re: Product filters as downdown instead of checkbox

Posted: Sun Jun 30, 2013 1:15 am
by caesar07000
yes, with the checkboxes it works okay.

Re: Product filters as downdown instead of checkbox

Posted: Sun Sep 01, 2013 1:48 am
by manoetalk
Very good! But I want to see the link in the Filters drop-dow administrator create the filters more easily and quickly.
I do not know why this version 1.5.5.1 the "Filters" in the top menu does not appear, as in the previous. Something very simple and very easy. Different in this new version without recourse. even in the demo site opencar not have the menu filters, moreover, there is also a module. With filters positioned in the drop-down menu, it is much simpler and easier to work.

Re: Product filters as downdown instead of checkbox

Posted: Mon Sep 02, 2013 8:39 pm
by pedro1993
Filters are included in 1.5.5.1? The demo.opencart.com site is still using 1.5.4.1.

Peter
manoetalk wrote:Very good! But I want to see the link in the Filters drop-dow administrator create the filters more easily and quickly.
I do not know why this version 1.5.5.1 the "Filters" in the top menu does not appear, as in the previous. Something very simple and very easy. Different in this new version without recourse. even in the demo site opencar not have the menu filters, moreover, there is also a module. With filters positioned in the drop-down menu, it is much simpler and easier to work.

Re: Product filters as downdown instead of checkbox

Posted: Tue Nov 14, 2017 6:15 pm
by pramodchavan
Hiii pedro1993,
I had tried you code for Product Filters as Drop down, it's working good but when I tried to search selected item. It doesn't filter it. Can you help me out this? Version :2.3.0.2 VQMod

Here is my code :

Code: Select all


   <select style="width: 78%;height: 29px; margin-right: 0px; margin-left:-22px;">
			<option><?php echo $filter_group['name']; ?></option>
          <?php foreach ($filter_group['filter'] as $filter) { ?>
          <?php if (in_array($filter['filter_id'], $filter_category)) { ?>
          <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>" selected>
			<?php echo $filter['name']; ?>
          </option>
          <?php } else { ?>
          <option value="<?php echo $filter['filter_id']; ?>" id="filter<?php echo $filter['filter_id']; ?>">
			<?php echo $filter['name']; ?>
          </option>
          <?php } ?>
          <?php } ?>
        </select> 
      <button type="button" id="button-filter" class="btn btn-primary" style="margin-left: 0px;"><?php echo $button_filter; ?></button>
     $('.box-filter select option:selected').each(function(element) {

Re: Product filters as downdown instead of checkbox

Posted: Tue Feb 12, 2019 12:59 am
by pottsdesign
Has anyone had any success changing the product filters to a dropdown instead of checkbox for Opencart 3? The filter.twig code is different than the example above and the suggested code to replace doesn't seem to work. Thanks.

filter.twig code:

<div class="panel panel-default">
<div class="panel-heading">{{ heading_title }}</div>
<div class="list-group"> {% for filter_group in filter_groups %} <a class="list-group-item">{{ filter_group.name }}</a>
<div class="list-group-item">
<div id="filter-group{{ filter_group.filter_group_id }}">{% for filter in filter_group.filter %}
<div class="checkbox">
<label>{% if filter.filter_id in filter_category %}
<input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" checked="checked" />
{{ filter.name }}
{% else %}
<input type="checkbox" name="filter[]" value="{{ filter.filter_id }}" />
{{ filter.name }}
{% endif %}</label>
</div>
{% endfor %}</div>
</div>
{% endfor %}</div>
<div class="panel-footer text-right">
<button type="button" id="button-filter" class="btn btn-primary">{{ button_filter }}</button>
</div>
</div>
<script type="text/javascript"><!--
$('#button-filter').on('click', function() {
filter = [];

$('input[name^=\'filter\']:checked').each(function(element) {
filter.push(this.value);
});

location = '{{ action }}&filter=' + filter.join(',');
});
//--></script>

Re: Product filters as downdown instead of checkbox

Posted: Fri Mar 12, 2021 3:08 pm
by nobreak
Hi. I need to place default OC 1.5.6.4 filter on top of the page, and I need it to be horizontal. In modules I choose position "on top of the page", but it shows all filters vertically. Does anyone know what I need to modify?
Thank you!
All times are UTC+08:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/