Отключаем адаптивный дизайн в Opencart 2.0

[pashast]

Не всем нравится адаптивный дизайн в новом опенкарте. Уже было несколько просьб от клиентов его выпылить. Но сделать это не так просто, как кажется. Попытался сделать это, изменив исходники бутстрапа и вот что вышло.

PS. Кому лень читать дальше код, могут сразу скачать скомпилированый код в конце поста.

PPS Это мой первый опыт работы с LESS файлами, так что, если что не так, прошу понять и простить  :-D

 

Итак, берем исходники бутстрапа на http://getbootstrap.com/getting-started/#download, там же курим мануал, как поднять node.js, npm и grunt. Разворачиваем все это добро у себя.

 

В исходниках видим такие файлы

mixins
.csscomb.json
.csslintrc
alerts.less
badges.less
bootstrap.less
breadcrumbs.less
button-groups.less
buttons.less
carousel.less
close.less
code.less
component-animations.less
dropdowns.less
forms.less
glyphicons.less
grid.less
input-groups.less
jumbotron.less
labels.less
list-group.less
media.less
mixins.less
modals.less
navbar.less
navs.less
normalize.less
pager.less
pagination.less
panels.less
popovers.less
print.less
progress-bars.less
responsive-embed.less
responsive-utilities.less
scaffolding.less
tables.less
theme.less
thumbnails.less
tooltip.less
type.less
utilities.less
variables.less
wells.less

 

Сразу попытался выпилить все правила, которые генерят @media (max-width: xxx)  и @media (mix-width: xxx) во всех этих файлах. Понял что это будет долго и ошибки потом будет сложно найти. Поэтому сделал так:

 

Берем файл variables.less и меняем все значения разрешений экранов на нули, кроме самого большого (1200px)

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  480px;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  768px;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  992px;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm-min - 1);
@screen-sm-max:              (@screen-md-min - 1);
@screen-md-max:              (@screen-lg-min - 1);


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

на

// Extra small screen / phone
//** Deprecated `@screen-xs` as of v3.0.1
@screen-xs:                  0;
//** Deprecated `@screen-xs-min` as of v3.2.0
@screen-xs-min:              @screen-xs;
//** Deprecated `@screen-phone` as of v3.0.1
@screen-phone:               @screen-xs-min;

// Small screen / tablet
//** Deprecated `@screen-sm` as of v3.0.1
@screen-sm:                  0;
@screen-sm-min:              @screen-sm;
//** Deprecated `@screen-tablet` as of v3.0.1
@screen-tablet:              @screen-sm-min;

// Medium screen / desktop
//** Deprecated `@screen-md` as of v3.0.1
@screen-md:                  0;
@screen-md-min:              @screen-md;
//** Deprecated `@screen-desktop` as of v3.0.1
@screen-desktop:             @screen-md-min;

// Large screen / wide desktop
//** Deprecated `@screen-lg` as of v3.0.1
@screen-lg:                  1200px;
@screen-lg-min:              @screen-lg;
//** Deprecated `@screen-lg-desktop` as of v3.0.1
@screen-lg-desktop:          @screen-lg-min;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              0;
@screen-sm-max:              0;
@screen-md-max:              0;


//== Grid system
//
//## Define your custom responsive grid.

//** Number of columns in the grid.
@grid-columns:              12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:         30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     0;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: 0;

Дальее берем grid.less и пытаемся сделать так чтобы правила col-xs col-sm итд работали одинаково на любых разрешениях. Ниже всесь перписаный файл.

//
// Grid system
// --------------------------------------------------


// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

.container {
  .container-fixed();
    width: @container-lg;
}


// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but without any defined
// width for fluid, full width layouts.

.container-fluid {
  .container-fixed();
}


// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}


// Columns
//
// Common styles for small and large grid columns

.make-grid-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-grid(xs);
.make-grid(sm);
.make-grid(md);
.make-grid(lg);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

//@media (min-width: @screen-sm-min) {
//  .make-grid(sm);
//}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

//@media (min-width: @screen-md-min) {
//  .make-grid(md);
//}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

//@media (min-width: @screen-lg-min) {
//  .make-grid(lg);
//}

И закоментим ненужное в bootstrap.less.

/*!
 * Bootstrap v3.3.4 (http://getbootstrap.com)
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset and dependencies
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// Components w/ JavaScript
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
//@import "responsive-utilities.less";

Компилируем. Наш новый бутстрап появился в папке dist

Все готово, ну почти ))

 

Для дефолтного шаблона ок 2.0 нужно еще подправить стили в stylesheet.css. Теоретически, то же самое можно сделать для любых других шаблонов под бутстрап, если в них правила @media свалены все в один файл.

 

Уберем ширину в 100% и пропишем минимальную ширину для body

body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	color: #666;
	font-size: 12px;
	line-height: 20px;
	min-width: 1170px;
}

теперь берем все правила @media (max-width: xxx)  и @media (mix-width: xxx) и ставим там нули всесто значений, должно получится так @media (max-width: 0)  и @media (mix-width: 0)

 

Далее закоментим респонсив тег в header.tpl

  <?php /*
<meta name="viewport" content="width=device-width, initial-scale=1">
*/ ?>

Все, теперь все.

 

Глянуть можно здесь http://cart20.turbocart.pp.ua/

 

 

non-responsive bootstrap.zip

[sv2109]

Зачем? Сейчас наоборот все массово переходят на адаптивный дизайн, так как поисковики стали обращать особое внимание на его наличие, гугл едсенс тоже постоянно напоминает и требует сделать если его нету. 

+ сейчас огромное к-во пользователей с планшетами и мобильными, см. гугл аналитикс или я.метрику. 

Зачем? если какая-то мелочь не устраивает то ее просто нужно исправить, а не выпиливать всю адаптивность.. 

[Otvet]

Это те же люди что покупают ноуты по типу i7**QH/8G/1000+32/GT860/FHD/Win8 а потом сносят винду и костылями ставят XP? При этом без половины дров сидят

[pashast]

Желание клиента закон. :-D  Это еще не самое дурацкое требование, поверьте.

 

По поводу нужности, я с заказчиками обычно не спорю а просто делаю так: выпилить фичу -- $50. запилить ее через некоторее время обратно -- $100.

[RomanMuradov]

Первое знакомство с OpenCart начал с того, что попытался на 1.5 адаптивный дизайн повесить bootstrap-овский, три дня парился... Плюнул.

за тему отдельное спачибо, на работе есть определенный контенгент руководства котрый не понимает всех прелестей адаптивной верстки, пугается :) - oldskool. Пришлось порезать код на кррпаративном сайте

[dhose]

прошу прошения, а не легче ли просто в catalog/view/theme/default/template/common/header.tpl

вот это 

<meta name="viewport" content="width=device-width, initial-scale=1">

заменить на 

<meta name="viewport">

 

У меня пока не мере так сайт уже работает год.

[Wild]