Quote:
|
How would I make Refine Filters load above the products for users of mobiles in portrait mode?
|
ok, here's a way to do it (tested) ...
1) In skin/reboot/customer/bar.tpl
Replace...
Code:
{if $active_modules.Refine_Filters}
{include file="modules/Refine_Filters/customer_filter.tpl"}
{/if}
With...
Code:
{if $active_modules.Refine_Filters}
<div id="rfx_sidebar"></div>
<div id="rfx">
{include file="modules/Refine_Filters/customer_filter.tpl"}
</div>
{/if}
2) In skin/reboot/custom/home_2_cols_left.tpl
(sidebar on left)
Replace...
Code:
<div class="col-md-9 col-md-push-3">
{include file="customer/content.tpl"}
</div>
With...
Code:
<div class="col-md-9 col-md-push-3" id="content_col">
<div id="rfx_content">
{include file="customer/content.tpl"}
</div>
</div>
OR, skin/reboot/custom/home_2_cols_right.tpl
(sidebar on right)
Replace...
Code:
<div class="col-md-9">
{include file="customer/content.tpl"}
</div>
With...
Code:
<div class="col-md-9" id="content_col">
<div id="rfx_content">
{include file="customer/content.tpl"}
</div>
</div>
3) In skin/reboot/js/reboot.js
At the end, insert...
Code:
function ChangeOrientation(width){
if (width <= 991) {
$("#rfx").after($("#rfx_content"));
}else{
$("#rfx").after($("#rfx_sidebar"));
$("#rfx_content").appendTo("#content_col");
}
}
$(function () {
var onLoadWidth = $(window).width();
ChangeOrientation(onLoadWidth);
$(window).resize(function () {
var resizeWidth = $(window).width();
ChangeOrientation(resizeWidth);
});
});