Адаптация темы prestashop для мобильных устройств

Адаптивная верстка

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

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

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

Первая мысль — необходимо отключить мобильную версию сайта. Как обычно, иду в настройки темы, мобильная версия. Переключаю радиокнопкой в «I’d like to disable it.», сохраняю. Открываю на телефоне — ничего не поменялось.

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

Приходит гениальная мысль — снести совсем мобильную версию. Иду в папку, где она должна располагаться (mobile) и обнаруживаю, что то, что было в ней в версии 1.5 отсутствует напрочь — она совершенно пустая. Недолго раздумывая, прихожу к мнению, что в версии 1.6 разработчики совсем отказались от отдельной темы для мобильных девайсов.

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

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

Для этого нужно открыть панель разработчика (F12 на клавиатуре в винде). Перейти в консоль. Их там две. Одна в основном меню панели, вторая открывается внизу панели при нажатии кнопки ESC на клавиатуре. Нужна именно вторая консолька.

Уже в ней присутствует свое меню, состоящее из четырех вкладок. Нужно открыть вкладку Emulation. И вот тут, если выбрать из селекта какую-либо модельку мобильного девайса и обновив страницу, случается чудо 🙂 Запросы из браузера к сайту идут с требуемыми заголовками — начинается эмуляция браузера, работающего на мобильном девайсе.

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

После этого, воспользовавшись поиском по содержимому темы, нашел, что за изменение содержания метатега отвечает пара строчек js-кода в файле global.js

var viewport = document.querySelector('meta[name="viewport"]');
viewport.setAttribute('content', 'initial-scale=1.0,maximum-scale=1.0,user-scalable=0,width=device-width,height=device-height');

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

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

Здесь задачка решилась проще. Проанализировав код модуля слайдера, нашел, что при инсталяции, в самом конце процедуры, за это отвечающей, есть строчка кода

<?php
$this->disableDevice(Context::DEVICE_MOBILE);
?>

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

Поэтому пошел по другому пути. Нашел в какой таблице базы данных хранится информация об отображении/скрытии определенного модуля. Простым визуальным сканированием в phpMyAdmin, определил таблицу ps_module_shop. В ней, в колонке enable_device, как раз и находится параметр на каких девайсах отображать модуль, а на каких нет. Параметр «7» как раз и заставляет отображать модуль на всех девайсах.

Нашел в таблице ps_module нужный мне модуль «homeslider». Его id у меня 37. Вернувшись в таблицу «ps_module_shop» нашел по ID=37 нужную строчку. В поле «enable_device» стояло значение «4». Заменив его на «7» получил то, что хотел — слайдер стал так же отображаться и на смартфонах.

Остальная работа по адаптации верстки была рутинной и не представляла какого бы то ни было интереса.

P.S.: Теперь задачка обратного плана возникла — как в гуглехром отключить интерфейс эмуляции мобильных устройств 🙂 Немного напрягают меня дополнительные элементы интерфейса — линейки и панель настройки какое устройство необходимо эмулировать, хоть и отображаются только при включенном режиме разработчика. Не всегда нужно просматривать в режиме эмуляции.

Адаптация темы prestashop для мобильных устройств: 7 комментариев

  1. Алиса

    Убрала строчку так же вторую, ничего не изменилось!((
    По второму зашла в таблицу, вообще не поняла где что эти значения!
    » ps_module_shop. В ней, в колонке enable_device, как раз и находится параметр на каких девайсах отображать модуль, а на каких нет. Параметр «7» как раз и заставляет отображать модуль на всех девайсах.» Вот это нашла, а дальше у меня такого как «ps_module нужный мне модуль «homeslider».» НЕТ!!!

  2. admin Автор записи

    Добрый день!

    Можете уточнить на каком сайте это происходит? К сожалению, сайт dioles.com очень долго грузится и вешает у меня компьютер полностью при попытке просмотреть код его страницы (при нажатии F12). Никогда не сталкивался с таким поведением хрома. Но возможно из-за некорректно генерируемого html или какого-то используемого js-плагина.

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

    PS: Отправил сообщение на почту

  3. Алиса

    Странно, проверила на всех браузерах вроде быстро открывается..проверю в чем может быть причина конечно..
    Версия Prestashop 1.6.0.14
    Название текущего шаблона default-bootstrap
    Отправила ответ на почту))
    Может у вас есть статья о вертикальной менюшке на престу ?

  4. Алиса

    получилось.. Зашла в ps_module_shop нашла два значения, где enable_device не 7.. Это 13 и 37 строка. Как у вас 37-решила изменить сначала значение именно в этой строке. Все получилось!))) Только проблема есть -третий слайд отображается полностью (текст писан в фотошопе), а первых два слайда отображаются некорректно ( текст писан в отдельном поле к слайдеру). Итог-видно только начало текста((

    1. admin Автор записи

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

  5. Алексей

    Удалил строку в global.js
    Но изменений нету((
    Prestashop 1.6.1.4
    Шаблон Sagitta
    Сайт: http://eurocarpet.com.ua/ru/

    Подскажите, как решить?
    На мобильных очень не карсиво отображается

    1. admin Автор записи

      Сейчас посмотрел на сайт со своего телефона. На мой взгляд неплохо. Встречаются с гораздо худшим отображением. Но как говорится на вкус и цвет… В общем, если что-то хотите изменить, то просто фраза «не красиво отображается», ничего не говорит. В таких ситуациях надо хотя бы описать что не нравится и как должно быть по Вашим ощущениям.

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

Добавить комментарий

или войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *