Как настроить мобильную версию битрикс

Как настроить мобильную версию битрикс

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

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

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

Во вкладке «Мобильная версия» есть примеры таких параметров для настройки как:

• «Мобильная шапка» (1);
• «Тип мобильного меню» (2);
• «Способ отображения мобильного меню» (3).

В темах оформления предусмотрены белая и цветная мобильные шапки.

Типы мобильного меню предлагают 2 варианта: «Краткий» и «Подробный».

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

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

Во втором – подключаются дополнительные блоки: личный кабинет, корзина, адрес компании и способы связи.

Для Аспро: Digital – это личный кабинет, корзина, адрес компании и способы связи.

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

Мобильное меню может выдвигаться слева или выпадать сверху.

Для того, чтобы применить тот или иной вариант внешнего вида мобильной версии в Аспро: Next, установите требуемые настройки в виджете и нажмите кнопку в правом верхнем углу.

В Аспро: Digital применить настройки для мобильной версии можно только в админке: Рабочий стол → Аспро: Digital → Настройки.

В блоке «Мобильная версия» установите ту комбинацию настроек, которая вам нравится.

В пунктах меню «Мобильная шапка» и «Тип мобильного меню» присутствует вариант «Custom», которого нет в виджете настроек. Этот вариант предназначен для разработчиков.

Просмотр мобильной верстки с ПК

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

В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.

В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.

Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.

Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:

Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox:

Источник

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

нам понравился сервис http://moaction.mobi
6000 руб \год

в подписи наш моб -вариант

ps — если правильно понимаю — для вас можно подобрать вариант сайта с бронированием столиков для постоянных.

и еще в 1 квартале будет поддержка SSL — ну это ВАМ для SEO продвижения будет полезно.

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

Лия, спасибо! Посмотрим данный вариант тоже

Цитата
Алена написал: Сайт небольшой, но больно накручен всякими модулями и тп.

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

В рамках данной процедуры текущий внешний вид сайта под desktop-мониторами не изменяется.
Меняется лишь отображение сайта под мобильными телефонами и планшетами.
При этом сайт остается единым — в таком виде его гораздо проще и экономичнее поддерживать и развивать, чем отдельно 2 версии — мобильную и полную (десктопную).
И с SEO никаких проблем в этом случае нет

Мы специализируемся на адаптациях для сайтов на Битрикс.
Так что обращайтесь — проконсультируем, проанализируем ваш сайт и определим смету.

Более подробно о преимуществах адаптивного дизайна можно прочитать у нас на сайте.
Там же есть видео — рекомендую его посмотреть, чтобы быстро сформировать понимание.
https://atlant2010.ru/services/adaptivniy-dizayn-bitrix/

Там же есть наши контакты.
Консультация — абсолютно бесплатна.

Кстати, для новых клиентов у нас есть скидки. Для постоянных — тоже

Будем рады сотрудничеству!

Цитата
Алена написал: Алексей, спасибо за информацию. Вопрос же еще вот в чем: Google в скором времени собирается отдавать предпочтение мобильным версиям, а про десктоп со временем совсем забыть. Поэтому возможно адаптация будет Google рассматриваться как десктопная версия и в плане SEO тут можно очень много потерять и скатиться вниз. Поэтому пока думаем об мобильной версии.

Алена, наоборот — адаптация позитивно сказывается на SEO продвижение.

В первую очередь, наличие адаптивного дизайна сайта — один из факторов ранжирования.
Это официально признают как Яндекс, так и Google.
Google заявил об этом еще в 2015 году.
Яндекс выпустил новую формулу ранжирования “Владивосток” в начале 2016 года.
То есть если у вас будет адаптация под мобильные — вы будете выше конкурентов, у которых ее нет.

Но это не значит, что про десктопные версии поисковики забудут или тем более будут за них наказывать.
Просто наличие адаптации под мобильные — это неоспоримый плюс перед сайтами-конкурентами, у которых адаптации нет.
Это логично и закономерно, если рассматривать юзабилити и конверсию сайтов.

Кроме того, за счет адаптации под мобильные у вашего магазина:

• снизится показатель отказов,
• увеличится среднее время просмотра страниц,
• вырастет конверсия.

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

Лия Пхакадзе, Спасибо Вам за рекомендацию сервиса MoAction . Это действительно один из самых удобных инструментов для создания мобильной версии сайта: русский интерфейс, более 100 шаблонов мобильных сайтов для 25 отраслей бизнеса, аналитика и т.д.
MoAction постоянно и дополняет функционал, чтобы помочь бизнесу эффективно работать с мобильным трафиком и лучше его конвертировать в продажи.

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

Источник

Как сделать мобильную версию сайта на Битрикс?

Адаптивные шаблоны сегодня уже давно не редкость, и частенько можно наблюдать, когда один и тот же шаблон адаптируется под разные виды устройств. Это удобно в тех случаях, когда шаблон сайта не перегружен большим количеством элементов, и не создаёт больших проблем при адаптации под мобильные устройства. Бывают и другие случаи, когда для мобильной версии нет необходимости тянуть все данные используемые на полноэкранной версии сайта. Часто приходиться переключать различные компоненты сайта в зависимости от того, с какого устройства заходит пользователь, и делать посредством CSS это не всегда оправдано. По этой причине целесообразно было-бы проверять с какого устройства заходит пользователь, после чего отдавать ему нужные данные.

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

Проверяем тип браузера пользователя

Один из простых способов проверить тип браузера пользователя, воспользоваться данными заголовка $_SERVER[‘HTTP_USER_AGENT’]. Таким образом заходя на сайт, сервер может видеть браузер, с которого заходит пользователь. Всё что нам остаётся — определить к какому типу устройства относится браузер, далее отдать ему нужные данные.

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

В списке заданы практически все виды мобильных браузеров, таким образом если условие проверки срабатывает, то обозначаем в cookie мобильную версию браузера. После этого, перенаправляем на ту же страницу, но уже с параметром site-type=pda. При повторном заходе, если cookie уже заданы в браузере устройства, то редиректа происходить не будет.

Константа определяющая тип сайта

Далее будет удобно завести некую константу, которая будет содержать значение обозначающее тип сайта для браузера. Константу назовём по-простому — SITE_TYPE, принимать будет значение pda либо original (мобильная версия и полная соответственно).

В файле init.php нашего проекта пропишем следующий код:

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

Использование константы в компонентах

Компонент довольно простой, выводит слайдер в зависимости от типа браузера. Подробнее о реализации данного компонента можно почитать в посту «Создаём слайдер на Битрикс». В качестве параметра компоненту передаётся одно значение – TYPE_SID, которое обозначает тип слайдов, которые будут выбираться самим компонентом и выводиться в браузер.

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

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

Источник

Как настроить мобильную версию битрикс

Гибридные мобильные приложения имеют доступ к функциям смартфона:

• GPS;
• Информация об устройстве;
• Акселерометр;
• Файловая структура;
• Адресная книга.

BitrixMobile прибавляет к этим возможностям широкий набор нативных интерфейсов, чтобы приложение работало быстрее и выглядело привычнее для пользователя. Разработка ведется полностью на HTML5/Javascript/CSS. Взаимодействие с функциями телефона и нативным интерфейсом осуществляется через функции специальной JS-библиотеки — BXMobileApp.

В рамках данного курса будут подробно рассмотрены возможности библиотеки BXMobileApp, которая позволяет создавать сложные бизнес-приложения на BitrixMobile.

На каждой странице курса авторизованный на сайте посетитель может дать комментарий к содержимому страницы. Комментарий — не форум, там не ведётся обсуждений или разъяснений. Это инструмент для сообщений нам об ошибках, неточностях. Для отправки комментария воспользуйтесь расположенной в правом нижнем углу окна браузера кнопкой:

Баллы опыта

В конце каждого урока есть кнопка . При клике на неё в Вашу итоговую таблицу опыта добавляется то количество баллов, которое указано в прочитанном После нажатия кнопки Прочитано! появится
окно подтверждения:

уроке.

Периодически мы заново оцениваем сложность уроков, увеличивая/уменьшая число баллов, поэтому итоговое количество набранных Вами баллов может отличаться от максимально возможного. Не переживайте! Отличный результат — это если общее число набранных Вами баллов отличается от максимального на 1-2%.

Для изучения оффлайн

Скачать материалы курса в формате EPUB. Файлы формата EPUB Чем открыть файл на
Android:
EPUB Reader
CoolReader
FBReader
Moon+ Reader
eBoox

iPhone:
FBReader
CoolReader
iBook
Bookmate

Windows:
Calibre
FBReader
Icecream Ebook Reader
Плагины для браузеров:
EpuBReader – для Firefox
Readium – для Google Chrome

iOS
Marvin for iOS
ShortBook
обновляются периодически, поэтому возможно некоторое отставание их от онлайновой версии курса. Версия файла — от 15.12.2020.

Источник