Всем привет, многие просили меня написать статью об улучшении мобильной версии сайта (стандартный шаблон – default), раз просили – делаю.

Список задач на сегодня:

1. Правим модуль Рекомендуемые (так-же правятся все остальные модули – хиты продаж, последние и т.д.)

2. Правим подвал сайта (footer)

3. Правим страницу категорий, результатов поиска и т.д.

Приступим:

1. Откроем файл ../catalog/view/theme/default/template/extension/module/featured.tpl и вместо этой строки (4):

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">

вставляем эту:

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">

(P.S.эта правка выводит на экране телефона два товара в ряд, вместо одного)

Аналогично правим файлы bestseller.tpl, latest.tpl, special.tpl

2. Откроем файл ../catalog/view/theme/default/template/common/footer.tpl и вместо этих строк:

  • 5<div class="col-sm-3">
  • 14<div class="col-sm-3">
  • 22<div class="col-sm-3">
  • 31<div class="col-sm-3">

вставим эти:

  • 5<div class="col-sm-3 col-xs-6">
  • 14<div class="col-sm-3 col-xs-6">
  • 22<div class="col-sm-3 col-xs-6">
  • 31<div class="col-sm-3 col-xs-6">

2.1. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла вставим этот код:

@media (max-width: 768px) {
footer .col-xs-6 {
min-height: 140px;
}
}

(P.S.Если у колонок разная высота – разное количество ссылок и футер смещает колонки просто измените 140px на большее значение, пока не добьётесь приемлемого результата)

3. Откроем файл ../catalog/view/javascript/common.js и вместо этих строк:

  • 101$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-12');
  • 103$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12');
  • 105$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-12');

вставим эти:

  • 101$('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-12 col-xs-6');
  • 103$('#content .product-list').attr('class', 'product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-6');
  • 105$('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');

Чистим кеш системы, изображений, браузера и кеш ocmod (если конечно ocmod’ы установлены)

Результат:

Модули и категории:

Подвал:

На сегодня всё, следите за нашими новостями и до новых встреч.