Цель статьи - показать, как можно заменить стандартную сетку virtuemart для каталога товаров адаптивной сеткой bootstrap. Это поможет гибко управлять количеством товара в строке в зависимости от ширины экрана устройства.
Проблемы стандартной сетки virtuemart
В virtuemart 3, в отличие от второй версии, добавлена некоторая адаптивность для страницы каталога, но она еще далека от идеала.
Доступно 2 шаблона страницы категории: вывод товаров плиткой и списком. За внешний вид отвечают файлы /components/com_virtuemart/sublayouts/products.php и /components/com_virtuemart/sublayouts/products_horizon.php соответственно.
Выбрать шаблон можно в Virtuemart > Настройки > Шаблоны, опция Дополнительные макеты для товаров в категории. Там же можно настроить количество товаров в строке для вывода плиткой.
Если выбран стандартный шаблон, то товары выводятся плиткой.
При выборе шаблона product_horizon товары выводятся списком по одному в строке.
На первый взгляд все хорошо, но есть 2 проблемы, из-за которых стандартное решение лучше не использовать.
Однако, если товары на любых устройствах должны выводится в строку, то вполне можно использовать стандартный шаблон product_horizon, подкорректировав его под свой дизайн.
Главная проблема - при выводе товаров плиткой нарушается дизайн при изменении ширины экрана. Например, при просмотре сайта на планшете товары будут выводиться неравномерно.
Причина в том, что блоки с товарами выводятся не в одном родительском блоке, а дискретно в зависимости от настроек.
Например, в нашем примере верстка будет выглядеть так.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="row"> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3">...</div> </div> <div class="row"> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3">...</div> </div> |
Т.е. в каждом родительском блоке выводится по 3 блока с товаром. Из-за этого возникают проблемы, когда на некоторых устройствах нужно выводить не по 3 или 1 товару, а по 2 товара в строке. Эта проблема влечет за собой множество других, из-за которых проще и надежнее полностью переделать всю сетку вывода товаров, чем править сетку, которая идет по умолчанию.
Вторая важная проблема - смена шаблона вывода товаров. В большинстве хороших магазинов покупатель может выбрать, как выводить товар в категории: плиткой или списком. При использовании стандартных шаблонов добавить кнопки смены шаблона проблематично. Этот функционал можно реализовать гораздо проще. При этом смена раскладки товаров будет происходить моментально без перезагрузки страницы. Подробнее про реализацию данного функционала в следующей статье.
О сетке bootstrap
Прежде чем переходить к правкам, несколько слов про bootstrap и его адаптивную сетку.
Bootstrap - самый популярный фреймворк для web-разработки. Он уже включен по умолчанию в joomla 3 и используется в большом количество шаблонов от сторонних разработчиков.
Чтобы понять подключен ли он в вашем шаблоне, откройте исходный код сайта и найдите файлы bootstrap.css и bootstrap.js (либо сжатые версии тех же файлов bootstrap.min.css и bootstrap.min.js)
Путь к файлам может отличаться.
|
1 2 |
<link rel="stylesheet" href="/templates/t3_blank/css/bootstrap.css" type="text/css" /> <script src="/plugins/system/t3/base/bootstrap/js/bootstrap.js" type="text/javascript"></script> |
Подробно про подключение bootstrap к любому шаблону, а также про работу с самим фреймворком можно прочитать в этой статье.
Нас в первую очередь интересует сетка (подробная статья).
Логика очень простая - для каждого размера экрана используется свой класс, который регулирует ширину блока. Добавив нужные классы, мы сможем настроить количество товаров в строке в зависимости от размеров экрана.
Поскольку в bootstrap используется 12-ти колоночная сетка, ширину для блока с товаром нужно выбирать кратную 12 (12, 6, 4, 3, 2, 1). По 5 товаров в строке вывести не получится.
Подробнее про сетку на оф. сайте.
Интеграция сетки bootstrap в каталог virtuemart
Итак, задача состоит в том, чтобы привести разметку от такого вида
|
1 2 3 4 5 6 7 8 9 10 |
<div class="row"> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3">...</div> </div> <div class="row"> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3 vertical-separator">...</div> <div class="product vm-col vm-col-3">...</div> </div> |
К такому
|
1 2 3 4 5 6 |
<div class="row"> <div class="product col-md-3 col-sm-4 col-xs-12">...</div> <div class="product col-md-3 col-sm-4 col-xs-12">...</div> ... <div class="product col-md-3 col-sm-4 col-xs-12">...</div> </div> |
Т.е. все блоки с товарами должны выводиться в одном блоке с классом .row и им должны быть присвоены bootstrap классы, которые будут изменять их ширину в зависимости от ширины экрана устройства.
В приведенном примере код
|
1 |
<div class="product col-lg-3 col-md-3 col-sm-4 col-xs-12">...</div> |
означает, что на компьютерах(ширина >= 1200px и средних мониторах с шириной >=992px) будет выводиться по 4 товара в строке, на планшетах (ширина >=768px) по 3 товара, а на смартфонах (ширина <768px) по 1 товару в строке.
Кроме этого, необходимо сделать так, чтобы bootstap классы блоков менялись в зависимости от настроек количества товаров в строке в админ панели.
Все дальнейшие правки будут вноситься в файл /components/com_virtuemart/sublayouts/products.php, который отвечает за вид товаров в категории. Чтобы при обновлении все изменения сохранились, скопируйте данный файл в папку /templates/имя_шаблона/html/com_virtuemart/sublayouts/(если такой папки нет в вашем шаблоне, то создайте ее).
Для подстановки bootstrap классов замените
|
1 |
<div class="product vm-col<?php echo ' vm-col-' . $products_per_row . $show_vertical_separator ?>"> |
на
|
1 |
<div class="product <?php echo $cellwidth ?>"> |
Переменная $cellwidth будет содержать различные классы, в зависимости от настроек количества товаров в строке в админ панели.
Для присвоения классов замените
|
1 |
$cellwidth = ' width'.floor ( 100 / $products_per_row ); |
на
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
switch($products_per_row){ case 1: $cellwidth = 'col-lg-12 col-md-12 col-sm-12 col-xs-12'; break; case 2: $cellwidth = 'col-lg-6 col-md-6 col-sm-6 col-xs-12'; break; case 3: $cellwidth = 'col-lg-4 col-md-4 col-sm-6 col-xs-12'; break; case 4: $cellwidth = 'col-lg-3 col-md-3 col-sm-4 col-xs-12'; break; case 5: $cellwidth = 'col-lg-3 col-md-3 col-sm-4 col-xs-12'; break; default: $cellwidth = 'col-lg-2 col-md-3 col-sm-4 col-xs-12'; } |
Для вывода всех блоков с товарами в одном родительском блоке row замените
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
foreach ( $products as $product ) { // Show the horizontal seperator if ($col == 1 && $nb > $products_per_row) { ?> <div class="horizontal-separator"></div> <?php } // this is an indicator wether a row needs to be opened or not if ($col == 1) { ?> <div class="row"> <?php } // Show the vertical seperator if ($nb == $products_per_row or $nb % $products_per_row == 0) { $show_vertical_separator = ' '; } else { $show_vertical_separator = $verticalseparator; } // Show Products ?> <div class="product <?php echo $cellwidth ?>"> ... </div> <?php $nb ++; // Do we need to close the current row now? if ($col == $products_per_row || $nb>$BrowseTotalProducts) { ?> <div class="clear"></div> </div> <?php $col = 1; $row++; } else { $col ++; } } |
на
|
1 2 3 4 5 6 7 8 |
?><div class="row"><?php foreach ( $products as $product ) { // Show Products ?> <div class="product <?php echo $cellwidth ?>"> ... </div> <?php } ?> </div><?php |
Если у вас уже измененный шаблон, то велика вероятность, что код будет выглядеть по другому. В этом случае можно скачать готовый файл.
После всех внесенных правок каталог будет выглядеть так.
Чтобы добавить отступы между блоками с товаром, в css файл шаблона добавьте
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.view-category .browse-view .row{ display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .view-category .browse-view .row > .product{ border: 0; margin-bottom: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .view-category .browse-view .row .product > .spacer{ border: 1px solid #ddd; } |
В результате получим красивые блоки в товарами, ширина которых будет подстраиваться под размер экрана.
В следующей статье для данного шаблона добавим кнопки переключения вида каталога плитка/список.
P.S.
Если на сайте используется сторонний шаблон, то он может очень сильно отличаться от стандартного. В этом случае проще всего в готовый файл добавить код блока с классом spacer из старого шаблона.
Алексей
Спасибо большое!
admin
Рад, что статья оказалась полезной!
Ivan
После изменения шаблона как описано в статье, у меня стало стандартно 3 товара в строке не зависимо от того сколько задано товаров в админке, почему так получилось и как это исправить подскажите?
admin
Почему так получилось трудно сказать, нужно смотреть на код.
Самый простой способ исправить - вручную изменить классы bootstrap и коде.
Пришлите ссылку на сайт, без этого что-то конкретное трудно посоветовать.
IVAN
https://megakontent(точка)ru/category/apple-store ссылка на сайт,
Скачивал готовый шаблон вывода категорий со статьи
admin
Проверил еще раз готовый шаблон.
На vm3 последней версии все работает. Настройка Товаров в строке (блок Настройки внешнего вида в Virtuemart > Настройки > Шаблоны).
Какая версия vm у Вас?
Ivan
VirtueMart 3.0.12, изменяю поле "товаров в строке". Какая переменная получается отвечает за кол-во товаров в строке?
IVAN
Спасибо проблему решил, все оказалось банальней не куда. Было прописано кол-во товаров в категориях, что и перебивало основные настройки Virtuemart. Сейчас все работает. Я правильно понимаю что если я хочу чтобы к примеру выводилось 10 товаров в строке, то должен в коде создать дополнительно case?
admin
Да, можно создать дополнительное поле case, но нужно учитывать особенности сетки bootstrap. Она позволяет выводить только по 2, 3, 4, 6, 12 блоков в строке.
Максим
Если минимум 2 блока, то на телефоне эти блоки наезжают друг на друга. Как сделать один блок на экране телефона?
admin
Можно для блока использовать bootstrap класс hidden-xs
Юлия
Спасибо огромное, это как раз то, что я искала! Очень была удивлена, узнав что в Virtuemart допущена такая оплошность, теперь, благодаря вашей статье все красиво)
admin
Рад, что статья оказалась полезной.
Вячеслав
Спасибо за полезную статью.
От "висящих" товаров действительно помогло избавиться!
Но возникли другие проблемы:
1. Заголовок некоторых товаров длиннее других и блок товара растягивается вытесняя другие. Получается где-то 4 товара в строке, где-то 3, где-то 2, а местами и один.
Подскажите как это можно исправить? Мне приходит в голову только ограничить мах ширину блока товара, но как это сделать я не знаю - не силён в CSS.
2. Товары в строке выравниваются по левому краю, можно как-то их распределить равномерно или хотя бы выровнять по центру?
admin
Можно жестко задать высоту блока с названием товара, но лучше использовать для ряда с товарами css свойство flex.
pasha526
Добавил готовый файл себе
все работает, одно но, у меня пропали обводки каждого товара []
где и что проверить?
admin
Обводка, видимо, была привязана к какому-то классу из старой верстки. Добавьте ее заново в css. Если не получится, то пришлите ссылку на сайт.
pasha526
Добавил код
[php].category-view .row .category .spacer, .featured-view .spacer, .latest-view .spacer, .topten-view .spacer, .related-products-view .spacer, .browse-view .row .product .spacer {
border: 1px solid #EEEEEE;
border-radius: 5px 5px 5px 5px;
margin: 3px;
min-height: 200px;
padding-bottom: 10px;
background: #f3f3f3;
}
[php]
nikitinvi
Скажите нужно ли эти настройки делать в шаблоне LikeShop или в нем уже все настроено?
admin
В LikeShop все уже настроено.
Rt
в обычной версии товары в 3 ряда да
а в мобильной в один и почему?
как сделать в мобильной в два или три ряда
admin
Замените
для вывода в 2 ряда на
для вывода в 3 ряда на
Сергей
Благодарю Вас за статью , но есть вопросик. После внесения изменений товары отображаются по одному в строку, при этом в настройках вирта и категории стоит 3 ... Пробовал ваш файл- результат тот же. Может подскажете куда копать? VirtueMart 3.0.12 / Заранее благодарю.
admin
Пришлите ссылку на сайт с файлом из статьи.
Сергей
Вот здесь тестовая версия сайта - http://drp.pp.ua/
admin
Посмотрел сайт, у Вас нужно править файл в папке с шаблоном /templates/имя_шаблона/html/com_virtuemart/.
Также попробуйте в Virtuemart > Настройки > Шаблоны опцию Использовать VirtueMart CSS.
Сергей
Нашёл я решении данной проблемы. Возможно кто то столкнётся с похожим *косяком*. Всё дело было в самом Bootstrap подключённым к joomla. Не знаю причины, но многие специалисты утверждают, что он не работает адекватно. Подключение свежей версии спасло ситуации - всё отлично работает. Рецепт:
1. Скачиваем архив с Bootstrap Framework c официального сайта.
2. Копируем файл bootstrap.min.css из папки css архива в папку css используемого шаблона Joomla.
3. Копируем файл bootstrap.min.js из папки js архива в папку js используемого шаблона Joomla.
В файле index.php шаблона добавляем перед следующий код:
admin
Спасибо, что поделились.
Максим
В следующем посте не дописали код для добавления, а админ убрал возможность ответить на то сообщение... Какой код добавлять?
Сергей
к сожалению код обрезает.... думаю с подключением к шаблону проблем не возникнет.
Alex_boom
Здравствуйте. Благодарю Вас за решение по настройке сетки bootstrap на virtuemart, но столкнулся с такой же проблемой в стандартном модуле вывода товаров mod_virtuemart_product. Подскажите как в стандартном модуле решить эту проблему с bootstrap.
admin
Здравствуйте!
Попробуйте использовать эти шаблоны для стандартного модуля товаров.
Alex_boom
Спасибо!!!
Alex_boom
Здравствуйте. Установил шаблоны для модуля которые вы мне скинули. Все товары встали в одну вертикальную линию. Где я ошибку допустил?
admin
Пришлите ссылку на страницу с проблемой.
Alex_boom
https://flowmart.ru/
admin
У Вас не подключена bootstrap сетка в шаблоне.
Подключите стандартные файлы bootstrap 3-й версии.
Alex_boom
У меня шаблон T3 Blank в нём по моему bootstrap 2. Загружаю bootstrap 3 модули работают, но шаблон ломается. Можно ли как нибудь с bootstrap 2 настроить модуль. В категориях всё работает чётко, делал по вашей схеме.