Мобильная версия сайта Opencart

[ocdev_pro]

Вы просто явно не понимаете как даже в вашем примере работает алгоритм, о чем можно с Вами дискусировать если у Вас банально нет понимания элементарных вещей.
Что в случае с мобильной версией bootstrap вообще не при чем не в моем варианте, не в том что вы привели. Алгоритм смены версии страницы в обеих случаях по своему смыслу одинаковый.
А то как вы настроите свой bootstrap.css и какие классы назначите в верстке никакого отношения к алгоритму смены версии страницы вообще не имеет. 

В вашем примере в полной версии есть bootstrap, а в мобильной его вообще нету. Там все свое написано. Отсюда следует, что для каждой версии css разный. 
А если Вам надо свой bootstrap шаблон сделать не адаптивным, то его приедться переделовать согласно рекомендациям http://getbootstrap.com/getting-started/#disable-responsive

[Denys]

Все я прекрасно понимаю, вы уже даже благодаря мне начали двигаться в правильном направлении. Суть мною предложенного метода как раз таки и заключалась в принудительном переключении виевпорта и перестаньте нести бред про разные цсс, отображение программируется класами, а файлов цсс может быть как тысяча так и один зависит от того откуда руки растут.

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

Пока могу только похвастаться программированием сетки бутстрап пример шаба монеймейкер http://ovol.com.ua/ с четкой шапкой (добавлено юзабилити при отображении на мобильных устройствах).

[Seofisher]

Не сталкивались ли вы с тем что "Mobile_Detect" определяет смарт HTC One M8 как PC? И соответсвенно выдает шаблон предназначен для компютеров

Змінено 24 лютого 2016 користувачем Seofisher

[ocdev_pro]

Mobile_Detect обновляется. Попробуйте залить последнюю версию
Но почитайте доки, там есть возможность дополнительно ввести условие для isHTC() или isAndroid()...

mobiledetect.net

Змінено 24 лютого 2016 користувачем Waha

[Seofisher]

Mobile_Detect обновляется. Попробуйте залить последнюю версию

Но почитайте доки, там есть возможность дополнительно ввести условие для isHTC() или isAndroid()...

mobiledetect.net

 

Заливал новую версию!

Смартфон проверил на тесте demo.mobiledetect.net он также не определяется что он HTC  :mellow:

[Seofisher]

Оказалось что такая проблема с родным браузером, а вот в хроме определяет как и положено

[HaIIpuKoJIe]

Какой шаблон лучше всего использовать для мобильной версии?

[Seofisher]

самому сделать))

[Hugo]

Вопрос Марку.

У Apple появилась мобильная версия сайта.

Что скажете по этому поводу?

[ocdev_pro]

Хватит флудить! Хотите задать вопрос человеку, пишите ЛС.

[Sudba]

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

Но у меня возникла необходимость реализовать именно мобильную версию сайта с переходом на поддомен m.domain.com, как это сделано на lamoda.ru (m.lamoda.ru работает только с моб. девайсов).

 

Нужно было сделать, моб.версию магазина с одинаковой базой товаров и категорий, но естественно с другим отображением и с возможностью перейти на полную версию магазина с мобильного устройства и обратно.

 

Что было сделано:

Определение с какого устройства зашел пользователь - был использован php class Mobile_Detect.php (https://github.com/serbanghita/Mobile-Detect)

 

1. Добавление библиотеки

• файл mobile_detect.php залить в папку system/library
• в файле system/startup.php после строки library/config.php подключаем mobile_detect.php 

  require_once(DIR_SYSTEM . 'library/Mobile_Detect.php');
  	$detect = new Mobile_Detect(); 
  	define('isMobile', $detect->isMobile(), false);//Это используем
  	define('isTablet', $detect->isTablet(), false); //Это используем
  //Остальные в принципе не нужны
  	define('isiOS', $detect->isiOS(), false);
  	define('isAndroidOS', $detect->isAndroidOS(), false);
  

  isMobile, isTablet - определяет тип устройства - телефон или планшет

  isiOS, isAndroindOS, isBlackBerryOS, isSymbainOS, isWindowsPhoneOS и так далее - определяет ОС посетителя (если не собератетесь делать моб.версию под отдельную ОС, можете не использовать вообще =) )

2. Определение устройства посетителя и редирект на поддомен (лично я не использую этот способ)

• Далее будем использовать эти константы (isMobile...)для действий переадресации на моб. версию

• теперь в контроллере header.php  после protected function index() { пишем следующее

   

  		$detect = new Mobile_Detect();
  		
  		if ($detect->isMobile()){
  			if (isset($this->request->server['HTTPS'])) {
  				$mobile_redirect = 'https://m.mystore.com';
  			} else {
  				$mobile_redirect = 'http://m.mystore.com';
  			}
  			if ($_SERVER['REQUEST_URI']) $mobile_redirect .= html_entity_decode($_SERVER['REQUEST_URI']);
  			header('Location: '.$mobile_redirect);
  		}
  

  Это собственно и заставит перенаправить пользователя на мобильную версию (или другой URL), если он зашел с мобильного. С условиями можете сами крутить

• detect->isMobile() - только для мобильных
• $detect->isTablet() - только для планшетов
• $detect->isMobile() || $detect->isTablet() - для обоих и так далее

Это первый вариант (не очень удачный), когда пользователь попадает на мобильную версию, то обратно на полную не зайдет.

 

Решение для перехода обратно, путем записи параметра в COOKIE.

 

Вместо кода предложенного выше в контроллере header.php  после protected function index() { пишем 

		$detect = new Mobile_Detect();
			if($detect->isMobile()) {
				if (isset($this->request->server['HTTPS'])) {
					$mobile_redirect = 'https://m.mystore.com';
				} else {
					$mobile_redirect = 'http://m.mystore.com';
				}
			if(isset($_REQUEST['ver']) and $_REQUEST['ver'] === 'full') {
				if(empty($_COOKIE['ver']))
					setcookie('ver', 'full', time() + 86400, '/', '.mystore.com'); //будет работать для всех поддоменов, подробнее читайте на php.su setcookie()
			} else {
				header('Location: '.$mobile_redirect);
			}
		} 

В этом случае _mobile (префикс шаблона который стоит по умолчанию), то есть если папка с шаблоном по-умолчанию (для полной версии) 'default', а для мобильной соответственно 'default_mobile'

 

На мобильной версии можете разместить ссылку на полную страницу по типу 

<a href="http://mystore.com/?ver=full">Полная версия</a>

где ?ver=full - параметр что мы записали в куки.

 

Вроде все.

P.S Есть еще вариант сделать это через .htaccess - работает безотказно, но придется перечислить весь список мобильных девайсов ну и в полную версию вернуться нельзя.

 

Решение для тех кому просто нужна смена шаблона в зависимости от устройства без поддомена (Работает на живом сайте paffos ru)

 

1. Добавляем библиотеку MobileDetect как это было описано выше в п.1

2. Затем в корне сайта в файле index.php перед

 

// Currency
$registry->set('currency', new Currency($registry));

добавляем

//Mobile
        if(isMobile && !isTablet && $_COOKIE['ver'] !== 'full'){
             $config->set('config_template', 'default_mobile');
        }elseif(isMobile && !isTablet && $_COOKIE['ver'] == 'full'){
             $config->set('config_template', 'default');
        } 

Так мы определим устройство того кто зашел и в случае если он зашел с телефона (не с планшета) мы проверяем наличие куки ver и ее значение, если значение не Full, то  грузим шаблон default_mobile, в противном случае грузим шаблон default

 

3. При заходе на шаблон нам нужно записать куки, что бы пользователя не кидало на неверный сразу же и при последующих заходах (если не чистили куки в браузере)

В файле header.tpl каждого шаблона перед

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default_mobile/stylesheet/stylesheet.css" /> 

- добавляем запись куки mobile в мобильном шаблоне

 

<?php setcookie('ver', 'mobile', time() + 60 * 60 * 24 * 30, '/'); ?>

- добавляем запись куки full в обычном шаблоне

 

<?php setcookie('ver', 'full', time() + 60 * 60 * 24 * 30, '/'); ?>

4. Если же пользователю надо дать возможность переходить с мобильной версии на полную и наоборот.

В контроллере footer.php добавляем запись для проверки отображать нам кнопку переход в полную версию или нет (В примере условие только для мобильных)

if(isMobile && !isTablet){
    $this->data['gofull'] = true;
}else{
    $this->data['gofull'] = false;
} 

В файле footer.tpl каждого шаблона где вам удобно:

 

- добавляем кнопки перехода в полную версию для mobile шаблона

<div class="ver">Перейти на: <span id="gofull">Полный сайт</span></div>

- добавляем кнопки перехода в мобильную версию для default шаблона

<?php if($gofull){ ?>
Перейти на: <span id="gofull">Мобильную версию</span>
<?php } ?>

- в файле common.js после

$(document).ready(function() {

добавляем

    $('#gofull').on('tap click touchstart', function(){
        $.cookie('ver', 'mobile', { expires: 1, path: '/' });
        location.reload();
    });

При клике на элемент с id="gofull" будет срабатывать на всех устройствах переход либо в полную версию либо обратно.

 

Возможно местами это костыли, зато работает и проверено на живом магазине с большой посещалкой в сезон.

 

 

Всем спасибо. Благодарности принимаю в денежном эквиваленте 2 чашек кофе 8-) ))

 

Если тема актуальна буду рад дальнейшему развитию и усовершенствованию решения, потому-что прибегать к использованию коммерческих буржуйских решений Opencart Mobile Framework или Omtex Mobile Template не очень удобно, так как нужно перепиливать готовый дизайн под себя. И нет ничего хуже ковырять чужой код.

спасибо конечно за вариант с мобильной версией, но Google и Яндекс не показываю что есть мобильная версия при проверки через их сервисы. А значит не будет метки при поисковой выдачи

[ocdev_pro]

спасибо конечно за вариант с мобильной версией, но Google и Яндекс не показываю что есть мобильная версия при проверки через их сервисы. А значит не будет метки при поисковой выдачи

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

Метки в поисковой выдаче тоже присутствуют и в гугле и в яндексе, отображаются если поисковой запрос был сделан с мобильного устройства.

И на будущее свои предположения и опасения проверяйте прежде чем писать. Сбиваете людей с толку непроверенной информацией.

Змінено 7 квітня 2016 користувачем Waha

[1nSane]

А можно для чайников, чем этот метод лучше/хуже чем просто адаптивный шаблон? (магазин на 2.1.0.2.1)

[ocdev_pro]

А можно для чайников, чем этот метод лучше/хуже чем просто адаптивный шаблон? (магазин на 2.1.0.2.1)

Специально для чайноков)

1. Данный метод включает адаптивный шаблон, только для мобильных устройств и/или планшетов если пользователь действительно зашел с него. (Определение физического устройства, а не размера экрана)

- В отличии от просто адаптивного шаблона при изменении размера экрана браузера на ПК не включается адаптивная версия.

2. Есть возможность удобно расположить элементы именно на мобильной версии шаблона, вывести модули которые нужны только на мобильной итд.

3. Если пользователю по каким-то причинам неудобно пользоваться мобильной версией сайта, он может нажать на кнопку "Полная версия" и перейти в полную, и аналогично вернуться на мобильную (Но работает только для указанных устройств isMobile, isTablet итд) .

 

Данный мануал не полный и не описывает всех возможностей.

На некоторых ресурсах я делал, разные "схемы" для разных шаблонов (стандартный шаблон и мобильный), таким образом можно было разместить нужные модули только на мобильной версии (они могли кардинально отличаться от тех что есть в полной). Что само собой снижало количество контента скрытого под display: none (как это делается в адаптивке в OC 2.x), уменьшалось количество подключаемых скриптов и css от модулей и само собой снижает вес страницы, что для мобильных очень актуально. 

Итого например:

Главная на полной версии весит ~3мб

Главная на мобильной 1мб

Объяснять дальше думаю не надо.

 

[Guchiboy]

Мужики) Вот я воткнул оссторе 2.1 . Где копать чтоб сделать кнопку "полная версия", когда я нахожусь в мобильной? Саму кнопку с переадресацией я допустим запили. Но как сделать чтобы при определении мобильного устройства человек попадал на m.сайт.ru, а при нажатии на полную версию попадал на сайт.ru

[ocdev_pro]

Мужики) Вот я воткнул оссторе 2.1 . Где копать чтоб сделать кнопку "полная версия", когда я нахожусь в мобильной? Саму кнопку с переадресацией я допустим запили. Но как сделать чтобы при определении мобильного устройства человек попадал на m.сайт.ru, а при нажатии на полную версию попадал на сайт.ru

Гипотетически надо что бы поддомен смотрел в туже папку что и основной сайт, и сделать проверку в шаблоне по типу "Если Мобилка"+"Значение Куки версии"+"Кука шаблона" отдать нужный шаблон. Но на практике у меня получилась циклическая переадрессация и я потом забил... Ну похоже надо заново.

Вторая идея это мультишоп:

1. domain.com

2. m.domain.com

 

Отмечать все сущности ...категории, товары, статьи итд для 2х магазинов

 

Переход делать с помощью модуль stores + проверка куки версии

[Gp0m]

Спасибо за темку, но так как я криворукий и в добавок туповат, не могу настроить "Оформление заказа" ибо выдает неведомую ошибку... На обычной версии сайта все работает стабильно.

[MegaPro]

Кто-то пробовал этот вариант http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5125&path=1&filter_search=OpenCart%20Mobile%20Framework ?

Я так понимаю с его помощью можно на поддомене + мультимагазин сделать мобильную версию?

[Garik72]

Кто-то пробовал этот вариант http://www.opencart.com/index.php?route=extension/extension/info&extension_id=5125&path=1&filter_search=OpenCart%20Mobile%20Framework ?

Я так понимаю с его помощью можно на поддомене + мультимагазин сделать мобильную версию?

Вау, на демке выглядит интересно и переключатель есть на полную версию. Тоже интересует вопрос, может кто пробовал.

[ocdev_pro]

OMF это не более чем модуль для управления чем-то похожим на мое решение. Но никаких поддоменов он не делает типа m.site.com
Они наоборот пишут :

No need for you to set up an “m.” subdomain or upload a special sitemap.

-- Вам не нужно добавлять поддомен типа m.site.com или грузить специальную карту сайта. 
Согласно требованиям Гугл если сайт не Mobile-Friendly, то он ищет мобильный поддомен, но поскольку с данным решением гугл воспринимает сайт отлично, то вам и поддомен не нужен.
 

OMF решение для тех кто не хочет или не может самостоятельно внедрить мобильную версию на свой сайт по готовой инструкции. Ну 80$ Решат только вопрос функциональности, шаблон все равно придется переверстать под мобилки.

Только поэтому всем желающим я делаю внедрение мобильной версии на сайт от 150$ с переделкой шаблона. 
Если дизайн мобильной версии сайта отрисован в PSD, то цена договорная и зависит от требований заказчика

Змінено 24 серпня 2016 користувачем Waha

[HyperLabTeam]

Вау, на демке выглядит интересно и переключатель есть на полную версию. Тоже интересует вопрос, может кто пробовал.

))

аж за браузер вылезает))

[Sonic1977]

Доброго времени суток!

Может кто подскажет как для мобильной версии вывести каталог сеткой, но чтобы распологалось 2 товара в строке?

[ocdev_pro]

Доброго времени суток!

Может кто подскажет как для мобильной версии вывести каталог сеткой, но чтобы распологалось 2 товара в строке?

Это вопрос не по теме мобильной версии а по теме верстки.

Ну а если такая пьянка то примерно вот так

 

@media all and (max-width: 480px){ /*для экранов до 480px*/
 .product_layout{
    margin: 0 1%;
    width: 48%;
    float: left;
}
}

Змінено 29 серпня 2016 користувачем Waha

[serzh2100]

Всем добрый вечер. Начал на опенкарте делать редирект на другой поддомен для мобильников. Добрался до строчки ТС

2. Определение устройства посетителя и редирект на поддомен (лично я не использую этот способ)

• 
  Далее будем использовать эти константы (isMobile...)для действий переадресации на моб. версию
• 
  теперь в контроллере header.php  после protected function index() { пишем следующее

Объясните сопляку, где искать хедер? Что за путь? Контроллер это папка такая? Я их там несколько видел. Пропишите пожалуйста путь. Заранее спасибо

[serzh2100]

Аууу, неужели никто не может помочь?