Итак. Рабочая "beta-версия" решения на jQuery для адаптивных шаблонов.(например protostar для Joomla 3.0)
Пример: будем менять количество товаров в строке в зависимости от разрешения и положения (портрет-ландшафт) экрана.
На не адаптивных шаблонах работать будет только при загрузке страницы, так как случае с не адаптивным шаблоном при повороте экрана браузер только масштабирует страницу.
1. 1. Выставляем в настройках JoomShopping количество товаров в строке равным количеству товаров на странице.
2. В файле list_products, своего шаблона, в строке 4 убираем класс width.
3. В этот же файл вставляем код:
<script type="text/javascript">
jQuery(document).ready(function() {
var $phone = 320; //портретное разрешение смартфона(пример)//
var $tablet = 768; //портретное разрешение планшета(пример)//
var $list = jQuery('html'); //что будем измерять//
var $block = jQuery('.block_product'); //что будем менять (к чему добавлять класс)//
var $width = $list.width();
if($width <= $phone) {
$block.addClass('width100');
}
else if($width <= $tablet) {
$block.addClass('width50');
}
else {
$block.addClass('width33');
}
var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
jQuery(window).resize(function() {
delay(function(){
var $width = $list.width();
if($width <= $phone) {
$block.removeClass('width50 width33').addClass('width100');
}
else if($width <= $tablet) {
$block.removeClass('width100 width33').addClass('width50');
}
else {
$block.removeClass('width100 width50').addClass('width33');
}
}, 150);
});
});
</script>
4. Устанавливаем
инструмент и тестируем.
Получаем: в портретном режиме на iphone, например, в строке будет один товар, в ландшафтном - 2 товара, на больших мониторах - 3.
Количество товаров зависит от класса width... добавляемом к div с классом block_product.
Порог смены разрешений можно менять, присваивая их переменным $phone и $tablet.
Вообще этим скриптом можно менять классы у чего угодно, измеряя что угодно при загрузке страницы и при повороте экрана.
В вашем случае я бы сделал так: вместо 320 - 1024, вместо 768 - 1280, вместо width100 - width33, вместо width50 - width25 и вместо width33 - width20.
А код со строки var = delay и до предпоследней (включая), отвечающий за смену при повороте, можно вообще удалить, он у вас работать не будет (шаблон не адаптивный).
Попробуйте может получиться.