0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 3622 Просмотров
*

shketok

  • Осваиваюсь на форуме
  • 36
  • 0 / 0
Назрел такой вопрос, если возможность отображать товары по ширине страницы? Использую div шаблон.
В настройках выставлено 4 ряда для товаров, так при разрешении 1280х1024

а вот так при разрешении 1024х768


Происходит из за того что 4 товара в одном диве, пробовал поставить 20 рядов для того чтоб в одном диве было, не помогает, может кто подскажет решение? или все-таки придется в лезть шаблон магазина и серьезно его перерабатывать?
« Последнее редактирование: 27.03.2013, 10:11:40 от shketok »
*

nevigen

  • Moderator
  • 10431
  • 862 / 25
  • http://n*****n.com
адаптивность шаблона ?
если у вас 4 кратинки каждая по 200пх на общую ширину 850пх например.
как Вы впихнете 4х200=800 в 600 ?
надо переделывать принцип вывода... вообще..

ну на дивном еще можно поизвращаться.. и то...
а в дефолтном на таблицах.. сразу можно забыть/забить.
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

shketok

  • Осваиваюсь на форуме
  • 36
  • 0 / 0
Незнаю как в текстовом виде обьяснить. Попробую как смогу.
Это понятно что не впихнешь, но они автоматом по ширине страницы выстраиваються, вот как здесь к примеру newmans.ru , по принципу сколь влазиет по ширине, столько и помещается. Они заключены в один div, здесь идет так:
в настройках стоит 4 ряда, строение такое:
<div class="jshop list_product">
<div>
<div class="width25 block_product">
<div class="width25 block_product">
<div class="width25 block_product">
<div class="width25 block_product">
</div>
<div class="product_list_hr clear">
и далее вторая строка товаров
ставим в настройках к примеру 20 рядов, все <div class="width25 block_product"> заключены в один div без <div class="product_list_hr clear">, но почему-то все равно съезжают, причем 2 первых строки нормально, остальные как попало.

Может быть возможно поправление этого бага без сильного вмешательства, т.е. сделать так чтоб к примеру пользователь в настройках указывает большое кол-во рядов и всё, товары выводятся в зависимости от ширины div'а в котором выводятся.
Вот можете посмотреть hozarm.ru, в настройках стоит 20 рядов, первые две строки нормально, а снизу один div почему-то прилип к правому краю, а второй к левому.
*

nevigen

  • Moderator
  • 10431
  • 862 / 25
  • http://n*****n.com
спасибо за задачу.
мы ожидаем решение вообще-то.
если можете сделайте и поделитесь.
мы сделали что могли и поделились.
Профессиональные / Бесплатные решения для JoomShopping
Не лечи бесплатно, ибо тот, кто лечится бесплатно, рано или поздно перестает ценить свое здоровье,
а тот, кто лечит бесплатно, рано или поздно перестает ценить результаты своего труда/ (с) Гиппократ?
Не ищите ответов, ищите решение !
*

a_tsvetkov

  • Осваиваюсь на форуме
  • 44
  • 3 / 0
Тоже задался этим вопросом.
Вот что удалось сделать: вариант на jQuery.
1. Выставляем в настройках JoomShopping количество товаров в строке равным количеству товаров на странице.
2. В файле list_products, своего шаблона, в строке 4 убираем класс width.
3. в этот же файл вставляем код
Код
<script type="text/javascript">
jQuery(document).ready(function() {
var $list = jQuery('html');//пишем в переменную блок, который нужно измерить. В данном случае всю страницу.//
var $width = $list.width();//измеряем ширину страницы//
var $block = jQuery('.block_product')//пишем в переменную блок, количество которых будем менять//
if($width >= 480) {//проверяем условие ширины страницы//
$block.addClass('width50');//добавляем блоку класс//
}
else {
$block.addClass('width100');//или другой класс//
}


jQuery(window).resize(function(){
var $width = $list.width();
if($width >= 480) {
$block.toggleClass('width50','width100');
}
});


});
</script>
4. В итоге получаем: при ширине страницы менее 480px товары отобразяться в один столбик, больше 480px - в два.
Варианты классов width и условия могут быть любые.
Вторая часть кода предназначена для планшетов, смартфонов и т.п.
Задумка такая: при повороте экрана меняется класс, но функция resize измеряет ширину в процессе поворота, из-за чего класс переключается слишком часто и не всегда попадает в нужный.
Если кто нибудь знает как заставить ее измерять ширину после поворота, пожалуйста подскажите.

Есть вариант на CSS с применением @media запросов, но сам шаблон Joomla должен быть адаптивным. Решение на CSS выложу позже.

Критика решения приветствуется.
« Последнее редактирование: 28.03.2013, 15:20:33 от a_tsvetkov »
*

shketok

  • Осваиваюсь на форуме
  • 36
  • 0 / 0
 :o
Я такое пока не умею, получилось решить по другому:

Если задать высоту:
.jshop_list_product .image_block {
padding: 2px;
height: 120px; (к примеру)
тогда дивы перестают прилипать к правому углу, и находиться по одному на строчке, и ещё нужно указать ширину в
.jshop_list_product .block_product {
float: left;
width: 192px;
только width должен быть 192px, если к примеру ставишь 200px, то при разрешении 1280х1024 они так же съезжают, с шириной 190 при изменении окнав браузера нормально выстраиваются по ширине.
В настройках магазина указал отображение в 20 рядов, для того чтоб не появлялся <div class="product_list_hr clear">, даже не обязательно его из шаблона удалять. Вроде нормально, можете глянуть на hozarm.ru , по изменяйте размер окна браузера.
« Последнее редактирование: 29.03.2013, 10:20:36 от shketok »
*

a_tsvetkov

  • Осваиваюсь на форуме
  • 44
  • 3 / 0
Все равно на некоторых разрешениях верстка ломается (например 1024х768).
Попробуйте этот инструмент для проверки верстки на разных устройствах.
*

a_tsvetkov

  • Осваиваюсь на форуме
  • 44
  • 3 / 0
Итак. Рабочая "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 и до предпоследней (включая), отвечающий за смену при повороте, можно вообще удалить, он у вас работать не будет (шаблон не адаптивный).
Попробуйте может получиться.
« Последнее редактирование: 30.03.2013, 01:58:25 от a_tsvetkov »
*

Fedor Vlasenko

  • Живу я здесь
  • 3845
  • 733 / 7
  • https://fedor-vlasenko.web.app
переделайте макет вывода, уберите в макете проверку на количество рядов она не нужна в вашей задаче
Код: html4strict
.block_product {width:200px; height:200px; float:left;}
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Автоматическое снятие с продаж товара в JoomShoppin

Автор mavr

Ответов: 7
Просмотров: 1744
Последний ответ 03.05.2020, 23:10:37
от MDenis
Вывод информации о доставке во всплывающk

Автор evpadallas

Ответов: 37
Просмотров: 11465
Последний ответ 17.11.2018, 01:22:43
от Mushu-svbk
Связать магазин со сканером

Автор NitroProton

Ответов: 1
Просмотров: 905
Последний ответ 25.06.2017, 10:34:02
от dmitry_stas
Разделение прав между пользователями (реk

Автор ecolora

Ответов: 6
Просмотров: 1028
Последний ответ 16.03.2017, 11:14:19
от kit2m2
КОЛИЧЕСТВО ТОВАРА КНОПКАМИ - И + В JoomShopping - nevigen.com

Автор 3093839

Ответов: 4
Просмотров: 975
Последний ответ 20.12.2016, 16:57:15
от 3093839