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

[ocdev_pro]

Все мы знаем как популярны сейчас 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 не очень удобно, так как нужно перепиливать готовый дизайн под себя. И нет ничего хуже ковырять чужой код.

Змінено 30 березня 2015 користувачем Waha

[Tom]

Оставлю след,чтоб путь найти позже!

[AlexFisher]

Да, от меня тоже жЫЫЫрный плюс.

[rb2]

Редирект в корень мобильного сайта - очень плохая практика, мобильные пользователи её ненавидят.

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

Думаю, URN сохранить несложно, если структура сайта совпадает.

[ocdev_pro]

Редирект в корень мобильного сайта - очень плохая практика, мобильные пользователи её ненавидят.

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

Думаю, URN сохранить несложно, если структура сайта совпадает.

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

А вот с URN можно подробнее...я еще не сильно хороший кодер..

[ashap]

)))

URL наверно

[ashap]

URN есть такая тема) чесно говоря даж не думал

http://ru.wikipedia.org/wiki/URN

[rb2]

URI = URL + URN

http://www.bazar.com/mega/super/puper/product.html

URL = http://www.bazar.com

URN = /mega/super/puper/product.html

http://google.com/

URL = http://google.com

URN = /

[RGB]

Решение наверное хорошее, но:

 

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

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

[ocdev_pro]

Решение наверное хорошее, но:

 

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

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

А с мобильной версией как подмена шаблона до меня доперло лишь на 3е сутки с переадресацией на m.mystore.ru

 

Вообщем как сделал, что бы на моб версии контроллеры выполняли какие нить другие функции, я использовал if с isMobile и соответственно сделал условия на отдельные функции, если обычная, то выполняем это, если моб то только то что для моб версии.

Таким образом функциональная часть мобильной версии немного иная, скажем отсутствие фильтров, некоторых других модулей, отображение картинок в карточке товара как слайдшоу заточенного под тач девайсы и так далее. много всего. Кардинально отошли от того, что нарисовали изначально и сделали лучше )))

Конечно если бы надо было делать адаптивку, то там все ограничилось в js и css. Но тут правда и деньги другие чем за адаптивку, есть где разгуляться и немного по чудить.

 

Скажем так мой первый опыт разработки именно мобильной версии на opencart, принес немного неожиданные плоды! Поскольку работаю по NDA, то не могу показать что вышло.

[rb2]

Все сложно, сначала хотели отдельную мобильную версию, но вроде 2 шопа в разных папках на 1 хосте, но на разных доменах, не могут работать с картинками товаров только из одного шопа (то есть они у каждого свои должны быть)

Почему? Либо в конфигах пути к картинкам поменять, либо симлинк сделать. Какие проблемы?

[ocdev_pro]

Почему? Либо в конфигах пути к картинкам поменять, либо симлинк сделать. Какие проблемы?

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

[cmd]

if ($this->mylib->isMobile()) { // проверка куки в этом методе среди прочего
 $this->config->set('config_template', 'mobile_theme');
}

Если надо отдельный субдомен, то просто делается зеркало.

 

И вызывать надо не в header.php, а в index.php или системной библиотеке, если нужна реализация через vQmod.

[markimax]

Есть один ёмкий ответ:

Обратите внимание на принцип "моблизации" "apple"

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

[andrey24]

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

Это я как покупатель написал.

Автору большой плюс

[markimax]

-

http://tema.livejournal.com/1450758.html

[EVMedvedev]

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

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

 

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

 

 

В Мадженто так сделано, потому что так легче настраивать. Там есть возможность создать "сайт" со своим дизайном (в данном случае мобильным, тем более что в Мадженто в коробке специально в темы даются для Гугловых и яблочных устройств соответственно ), который привязан к определенному доменному имени. Паркуют домен на основной каталог, а на входе в index.php привязывают новое доменное имя к "сайту" в админке Мадженто. И все.

 

Вам тоже можно так сделать. Паркуете дополнительный домен на основной, а на входе определяете домен и правите на лету загружаемые в $config данные, чтобы переключать тему на нужную в зависимости от входящего устройства. А при входе с мобильника на основной домен клиента можно редиректить и в htaccess.

Змінено 3 липня 2014 користувачем EVMedvedev

[UDAW]

if ($this->mylib->isMobile()) { // проверка куки в этом методе среди прочего
 $this->config->set('config_template', 'mobile_theme');
}

Если надо отдельный субдомен, то просто делается зеркало.

 

И вызывать надо не в header.php, а в index.php или системной библиотеке, если нужна реализация через vQmod.

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

[ocdev_pro]

Есть один ёмкий ответ:

Обратите внимание на принцип "моблизации" "apple"

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

Вы хоть сами понимаете о чем речь идет. "Минус жирный" :ugeek:  - смешно.

А причем тут вид в браузерах, это к мобилизации не имеет никакого отношения - это кроссбраузерность, а не мобильность. А у нас тут речь именно о мобильности.

И об отображении сайта в мобильных браузерах речи вообще не было. 

Если руки не из *опы верстайте правильно и будет одинаково везде. Но здесь затронута тема именно мобильной версии сайта которая априори не может быть идентичной с полной версией.

Я предоставил идею и реализацию мобильной версии сайта, a также толчок для развития мобильности Opencart. Использовать эти бесплатные знания дело каждого и предел применения ограничивается только фантазией разработчика.

 

Так что свои тупые ответы наполнены смыслом "я один такой крутой, а автор темы толкает гавно" оставь при себе  8-). 

[ocdev_pro]

В Мадженто так сделано, потому что так легче настраивать. Там есть возможность создать "сайт" со своим дизайном (в данном случае мобильным, тем более что в Мадженто в коробке специально в темы даются для Гугловых и яблочных устройств соответственно ), который привязан к определенному доменному имени. Паркуют домен на основной каталог, а на входе в index.php привязывают новое доменное имя к "сайту" в админке Мадженто. И все.

 

Вам тоже можно так сделать. Паркуете дополнительный домен на основной, а на входе определяете домен и правите на лету загружаемые в $config данные, чтобы переключать тему на нужную в зависимости от входящего устройства. А при входе с мобильника на основной домен клиента можно редиректить и в htaccess.

Да это без проблем)) Кому как надо будет так и сделает, я всего лишь предоставил решение через которое можно очень много интересного сделать. В том числе аналогичную штуку как в Магенто, это тоже можно. 

 

[ocdev_pro]

-

http://tema.livejournal.com/1450758.html

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

 

Если у 6 млрд, человек будут устройства Apple тогда и тема будет актуальна. А сейчас тенденция такая, что мобильная или адаптивная версия сайта (которая в любом случае иная от полной версии) должна быть, как раз для повышения юзабилити ибо на экране 5" при FullHD разрешении них*я не видно!

 

Тема закрыта* 

[ocdev_pro]

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

[markimax]

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

 

Если у 6 млрд, человек будут устройства Apple тогда и тема будет актуальна. А сейчас тенденция такая, что мобильная или адаптивная версия сайта (которая в любом случае иная от полной версии) должна быть, как раз для повышения юзабилити ибо на экране 5" при FullHD разрешении них*я не видно!

 

Тема закрыта* 

Какой "школьник" о чем вы!?, это Артемий Лебедев написал, у которого самая большая web студия в РФ, а также в Украине, Америке

 

 

"Не видно" потому что юзабилити не правильное! А не "надо мобильная".

Есть свап увеличения, а вот во многих мобильных версиях как раз его сделать и нельзя. И вот тогда точно ничего не видно.

Так что не мелите бред. Работайте над юзабилити сайта.

Сайт apple одинаково показывается что на устройствах apple, что на android без мобильной версии. Я прекрасно на 5" Full HD  работаю с apple cайтами, хотя у меня как раз дальнозоркость (кто в курсе знает что это такое)

А вот как раз с "мобильной" версией форума - просто ужас, работать невозможно (свайп не работает - page does not support zooming).

 

Так что не суть дела в "мобильной" версии.

А суть как раз в юзабилити сайта и его оптимизации.

 

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

Вас никто не заставляет. C вами делятся опытом, а вы в "эмоции" впадаете

Или вы считаете что в компании apple сидят дураки дизайнеры интерфейсов или у них  ресурсов не хватает на "мобильную" версию?

 

У них есть принцип - сайт должен одинаково выглядеть на всех устройствах, чтобы не вводить пользователя в заблуждение

 

P.S. Специально открыл вначале "мобильную" версию форума на Full HD Deplhi browser и стандартным android браузером, потом "мобильную" яндекса - не фига не видно и свайп увеличения сделать невозможно, и "такое" у 90% сайтов с мобильными версиями, даже ebay.com только что открыл не видно ничего, прочесть название категории невозможно, товара тоже, , свайп опять же не работает (ну как можно работать?!), открываю apple - все прекрасно видно, свайп работает.

Главное юзабилити, а не "рющечки" hover эффектов.

Так что скорее вы своей темой вводите разработчиков в заблуждение

[ocdev_pro]

Какой "школьник" о чем вы!?, это Артемий Лебедев написал, у которого самая большая web студия в РФ, а также в Украине, Америке

 

 

"Не видно" потому что юзабилити не правильное! А не "надо мобильная".

Есть свап увеличения, а вот во многих мобильных версиях как раз его сделать и нельзя. И вот тогда точно ничего не видно.

Так что не мелите бред. Работайте над юзабилити сайта.

Сайт apple одинаково показывается что на устройствах apple, что на android без мобильной версии. Я прекрасно на 5" Full HD  работаю с apple cайтами, хотя у меня как раз дальнозоркость (кто в курсе знает что это такое)

А вот как раз с "мобильной" версией форума - просто ужас, работать невозможно (свайп не работает - page does not support zooming).

 

Так что не суть дела в "мобильной" версии.

А суть как раз в юзабилити сайта и его оптимизации.

 

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

Вас никто не заставляет. C вами делятся опытом, а вы в "эмоции" впадаете

Или вы считаете что в компании apple сидят дураки дизайнеры интерфейсов или у них  ресурсов не хватает на "мобильную" версию?

 

У них есть принцип - сайт должен одинаково выглядеть на всех устройствах, чтобы не вводить пользователя в заблуждение

 

P.S. Специально открыл вначале "мобильную" версию форума на Full HD Deplhi browser и стандартным android браузером, потом "мобильную" яндекса - не фига не видно и свайп увеличения сделать невозможно, и "такое" у 90% сайтов с мобильными версиями, даже ebay.com только что открыл не видно ничего, прочесть название категории невозможно, товара тоже, , свайп опять же не работает (ну как можно работать?!), открываю apple - все прекрасно видно, свайп работает.

Главное юзабилити, а не "рющечки" hover эффектов.

Так что скорее вы своей темой вводите разработчиков в заблуждение

Вы опять за свое юзабилити)) У нас тут тема о мобильной версии, которая многим нужна не потому, что так правильно или не привильно, а потому, что так хочет клиент и его не волнует мнение Apple.

ИМХО Apple не пуп земли...

Мне потребовалось решение я его сделал и поделился с другими. Вот и все.

Лично мое мнение - я за адаптивность сайтов, мне не удобно зумить пальцами сайт, что бы нажать на пункт меню, и сайт Apple как раз попадает в такой список, когда с устройтсва HTC One, тебе нужно увеличить менюшку потому что с первого раза пальцем ты не попадаешь туда куда надо.

Все просто. То что у Apple свой взгляд на эти вещи, так это их корпоративное дело.

 

Каждый плюет с своей колокольни.

 

Без обид. 

[cmd]

ИМХО и офтоп

Лебедев пиздабол фарисей и мудак мудак