Menu

Адаптивный шаблон корзины VirtueMart для мобильных.

Подробности

Предлагаю решение адаптивного шаблона, для показа корзины VirtueMArt на мобильных устройствах.

В стандартном шаблоне VirtueMart выводится в таблице. Самое относительно нормальное отображение корзины до 756px.

Адаптивный шаблон корзины VirtueMart для мобильных

Что нужно сделать удобства просмотра корзины VirtueMart на мобильных устройствах. Сразу переопределить макет корзины, создав папку /templates/имя_шаблона/html/com_virtuemart/cart и положить файл default_pricelist.php, который копируем из views VirtueMart .

В файле default_pricelist.php оборачиваем таблицу в div

<fieldset class="vm-fieldset-pricelist">
<div class="obertka_table">
<table>Содержимое таблицы</table></div>

Потом прописать правила CSS в стилях шаблона. Правило для медиа запросов нужно прописывать всегда после основного правила.

@media (max-width: 756px) {.obertka_table {
.obertka_table {
  height: 0;
  overflow: scroll;
  padding-bottom: 75%;
  position: relative;
}
.obertka_table table  {
  left: 0;
  position: absolute;
  top: 0;
}
}

В итог получаем вертикальный и горизонтальны скролл .Адаптивный шаблон корзины VirtueMart для мобильных, вертикальный и горизонтальны скролл

Добавить комментарий