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

Плагин "Адаптивная верстка для мобильных устройств" значительно улучшает внешний вид сайта интернет-магазина при просмотре на мобильных устройствах — смартфонах и планшетах. Витрина будет удобной для посетителей независимо от того, какое устройство (мобильное или нет) будет использовано для просмотра. Данный плагин обеспечивает мобильную верстку, полностью соответствующую стандартам Google.

Описание плагина

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

Если сайт не предназначен для просмотра на экранах мобильных устройств, то обладатели смартфонов и планшетов будут испытывать ряд проблем, например:

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

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

При использовании нашего плагина "Адаптивная верстка для мобильных устройств" проверка Google проходит на отлично (рис. 17.9.1)

Рис. 17.9.1. Наша мобильная верстка проходит проверку Google на отлично

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

Содержимое страниц вашего интернет-магазина будет автоматически адаптироваться для удобного просмотра на любых устройствах. Если это смартфон, то будет показана только самая необходимая информация. Для планшетов в зависимости от размера экрана также будет изменяться вид страниц, при необходимости второстепенная информация будет скрываться. И, наконец, владельцы обычных компьютеров и ноутбуков увидят вариант страниц, специально приспособленных для просмотра на таких устройствах (рис. 17.9.2).

Рис. 17.9.2. Адаптивный дизайн вашего интернет-магазина

Внешний вид витрины при просмотре на смартфоне показан на рис. 17.9.3. 

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

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

Рис. 17.9.3. Витрина магазина Shop2YOU на экране смартфона

Для пролистывания каталога, изображений галереи и товаров можно использовать движение "свайп" (swipe), т.е. проводить пальцем, не отрывая его от экрана мобильного устройства.

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

Рис. 17.9.4. Скриншот каталога товаров, фильтра для отбора товаров и корзины покупателя

Особенности установки и настройки плагина

Вам нужно настроить установленный плагин "Адаптивная верстка для мобильных устройств", указав номер телефона магазина для звонков с мобильных устройств. Для этого откройте раздел Плагины административного сайта и щелкните кнопку Настроить, расположенную справа от нужного плагина.

На экране появится окно настроек, показанное на рис. 17.9.5.

Рис. 17.9.5. Настройка плагина адаптивного дизайна

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

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

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