You are here:  » Sidebar filter tick box list into scrollbar box


Sidebar filter tick box list into scrollbar box

Submitted by bat on Sat, 2011-12-17 01:21 in

Hi David
How would I go about showing the filter sidebar list sections in a scrollbar box?
At the moment, the list goes on forever in the sidebar as I have tons of brands but I'd like it to be within a box so if it goes over 8 lines (or 'filter options') it activates the overflow scrollbox.
So I'd have a scrollbox activation for the brand, category and merchant filters. I don't need it for the price filter obviously.

Something like this
{link saved}

Another question, is it possible to have instant results as soon as you tick the filter box options like the link above, instead of having to click submit?

Many thanks
Bat

Submitted by support on Sat, 2011-12-17 12:13

Hello Bat,

This should just be a case of displaying your checkbox list within a fixed height div with the style overflow:auto;.

In your html/searchresults.php (or whichever file your sidebar filters are contained in), locate the section that generates the list of options for each filter type, and in each case, try surrounding the code with the following:

Before:

  print "<div style='border: 1px solid #000;height:250px;overflow:auto;'>";

After:

  print "</div>";

Simply adjust height: as required for the best fit with your design. If you're not sure where to add the code; email me the file and I'll check it out..

Auto submit could be easily added via JavaScript with an onchange event against each select box. First you'll need an id for the refine search form, so locate where the opening form tag appears with

<form ...

...and insert an id tag e.g.

<form id='refine' ...

Next, locate the lines (they will be within foreach() loops) that generate each checkbox where you will find

<input type='checkbox' ...

...and insert the onchange event handler as follows:

<input onchange='JavaScript:document.getElementById(\"refine\").submit();' type='checkbox' ...

Cheers,
David.
--
PriceTapestry.com

Submitted by bat on Sat, 2011-12-17 19:53

Wow, fantastic. :) Thank you so much.
I knew how to implement scrollbar overflow in html but the php threw me as to where to put it, but thanks to your help I've done it, and that instant auto submit.

Just one more thing please if you'd be so kind, is there a piece of code to allow the visitor to 'reset' the filters but that will keep the search term in the box?

Thanks David, you're a star!

Submitted by support on Sun, 2011-12-18 10:43

Hi Bat,

Sure - a basic text link to search.php with q only will do the trick - at the position required in your code; have a go with:

  print "<a href='".$config_baseHREF."search.php?q=".urlencode($q)."'>Reset Filters</a>";

Cheers,
David.
--
PriceTapestry.com

Submitted by bat on Sun, 2011-12-18 21:21

Brill, thanks David

Submitted by bat on Sat, 2012-11-17 11:52

Hi David
You know the auto-submit code you supplied earlier? What would I do if they were dropdown boxes?

Submitted by support on Sun, 2012-11-18 10:24

Hi bat,

It's exactly the same onchange='...' attribute, within the opening <select tag of the drop-down (assuming id of the form is the same, otherwise simply change as required...)

<select ...

...and insert the onchange event handler as follows:

<select onchange='JavaScript:document.getElementById(\"refine\").submit();' ...

Cheers,
David.
--
PriceTapestry.com

Submitted by bat on Sun, 2012-11-18 15:27

Champion. Works a treat. Thanks David!

Submitted by Goodconcepts on Mon, 2020-09-28 13:04

Hey David,

I tried the auto-submit after each input field is selected

onchange='JavaScript:document.getElementById(\"refine\").submit();'

but it doesn't seem to do anything for the foundation template in combination with the new searchfilters_sidebar.php

Any suggestions on how to make this work with the sidebar in Foundation template as well?

Regards,

Denis

Submitted by support on Mon, 2020-09-28 13:13

Hi Denis,

Have a go with:

onchange='JavaScript:this.form.submit();'

Cheers,
David.
--
PriceTapestry.com