Четверг, 15 Июнь 2017 13:30

Opencart: Мобильная версия, правка шаблона «по умолчанию»

При всех ворчаниях, которые у меня происходят при работе с новыми CMS, кое, что меня всё же привлекло в Opencart, а именно то, что шаблоны (по умолчанию) уже настроены под мобильную версию (по крайней мере, версия Opencart 2.3 точно) сайта. Таким образом, небольшие правки цветовой гаммы и, по крайней мере, вопросом дизайна (а в особенности вёрстки) можно не задаваться.

Однако и в этом вопросе меня ждали сюрпризы и «подводные камни». Поскольку за время эксплуатации магазина стали появляться те или иные вопросы, так например «цена по акции», заказчику захотелось, чтобы «перечёркнутая» линия была красного цвета (а цвет текста при этом был чёрным). Таблица стилей CSS спасла меня в этой ситуации, следующим кодом:

text-decoration: line-through #f00;

Но ввиду того, что айфоны эту строку игнорируют, пришлось её немного дополнить:

text-decoration: line-through;
text-decoration: line-through #f00;

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

ROOT:\\catalog\view\javascript\bootstrap\css\bootstrap.min.css

Так, например, передо мной была поставлена задача «вернуть» кнопку «КУПИТЬ» (которая шаблоном скрывается в мобильной версии), когда я открыл файл таблицы стилей, был удивлён и совсем неприятно. Причина тому – всё записано в одну строку и это жутко неудобно, правда меня спас Adobe Dreamweaver.

Собственно надо было только вот эту строку:

@media (max-width:767px){.hidden-xs{display:none!important;}

Заменить на эту:

@media (max-width:767px){.hidden-xs{display:inline;}

Все остальные настройки касательно мобильной версии Opencart так же прописывал в этой строке.

© Студия творчества "Зелёная Ива" 2008-2017 | Пользовательское соглашение