Responsive template mods - this should put an expandable 'filter button' at the top of the product listing page on displays less than 767px width.
in includes/templates/YOUR_TEMPLATE/sideboxes/tpl_dynamic_filter.php
replace:
// draw filter form
$content = '';
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';
$content .= zen_draw_form('product_filter_form','', 'get');
with:
// draw filter form
$content = '';
$content .= '<div id="filterToggle"><a href="javascript:;" onclick="toggle_visibility(\'dynamicfilterContent\');">' . zen_image_button(BUTTON_IMAGE_TOGGLE_FILTER, BUTTON_TOGGLE_FILTER_ALT, 'class="listingBuyNowButton"') . '</a></div>';
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">';
$content .= zen_draw_form('product_filter_form','', 'get');
in your responsive.css or responsive_default.css file (depending on the template used) add under the @media (max-width:767px) section add:
#dynamicfilter { display: block;visibility: visible;}
#dynamicfilterContent{display:none;}
#filterToggle {display: block;margin: 18px 0 0;}
#dynamicfilterHeading {display: none;}
in stylesheet.css add:
#filterToggle {display:none;}
in includes/languages/english/YOUR_TEMPLATE/button_names.php add:
define('BUTTON_IMAGE_TOGGLE_FILTER', 'buttonimage.gif');
define('BUTTON_TOGGLE_FILTER_ALT', 'Filter results');
BUTTON_TOGGLE_FILTER_ALT as well as being the image alt tag is also used for the css button text.
BUTTON_IMAGE_TOGGLE_FILTER is an image file of the button if using images, if using css buttons this is not required but should be left blank like:
define('BUTTON_IMAGE_TOGGLE_FILTER', '');
in /includes/modules/pages/index add the attached jscript_toggle.js
Attachment #15441
and that's it.
simon1066:
... I have found that there might still be a bit of work to finalise it - mainly that the filter collapses once an attribute is selected and it needs to be opened again to select another, you'll see what I mean though.
Now I come to think about it might be acceptable or even desirable for the filter box to collapse on page refresh especially on small screens. It would be good to know what others think.
