Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


Рекомендованные сообщения

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

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

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

Ссылка на комментарий
Поделиться на других сайтах

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

Ссылка на комментарий
Поделиться на других сайтах

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

 

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

  • +1 2
Ссылка на комментарий
Поделиться на других сайтах

  • 1 месяц спустя...

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

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

Ссылка на комментарий
Поделиться на других сайтах


  • 1 год спустя...

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

вот это 

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

заменить на 

<meta name="viewport">

 

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

Ссылка на комментарий
Поделиться на других сайтах


  • 1 год спустя...

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.